如何在侧边栏中用引导符来样式Wordpress小部件？

Question

我正在使用引导创建一个Wordpress网站。我已经注册了侧栏，并将插件(小部件)添加到侧栏中。我不知道怎么把它们设计好。

这就是我所拥有的:我不能发布图片，因为我没有10个代表点。截图是列表，就像它现在显示的那样:一个带有标准布局的项目点列表。

这是HTML：

<aside id="recent_faqtax-2" class="widget recent-faqtax-widget"><h3 class="widget-title">FAQ</h3><ul>   <li class="cat-item cat-item-10"><a href="http://www.mysite/topics/packing/" title="View all posts filed under Packing">Packing</a>
</li>
    <li class="cat-item cat-item-8"><a href="http://www.mysite/topics/pricing/" title="View all posts filed under Pricing">Pricing</a>
</li>
    <li class="cat-item cat-item-11"><a href="http://www.mysite/topics/volume-2/" title="View all posts filed under Volume">Volume</a>
</li>
</ul></aside>

但是，使用Bootstrap，我想创建以下内容：

<div class="list-group">
  <a href="#" class="list-group-item active">
    Packing
  </a>
  <a href="#" class="list-group-item">Pricing</a>
  <a href="#" class="list-group-item">Volume</a>
</div>

所以看起来像这样(在Chrome开发工具中)

同样，没有图像，但是它是引导中的标准活动列表组。

我该怎么做？我需要在小部件类中添加jQuery中的类吗？我可以用自定义CSS来做吗？

Answer 1

您可以手动修改生成插件的代码。但是，最简单的方法是在侧边栏中添加一个文本框，并在其中手动编写代码。所以你会有这样的东西：

 <div class="list-group">
     <a href="#" class="list-group-item active">
    Packing
     </a>
     <a href="#" class="list-group-item">Pricing</a>
     <a href="#" class="list-group-item">Volume</a>
    </div>

在小部件框中并作为输出：

<aside id="recent_faqtax-2" class="widget recent-faqtax-widget">
<div class="list-group">
     <a href="#" class="list-group-item active">
    Packing
     </a>
     <a href="#" class="list-group-item">Pricing</a>
     <a href="#" class="list-group-item">Volume</a>
    </div>
</aside>