如何更改Bootstrap下拉列表的形式？

Question

我正在使用Twitter Bootstrap，我想让下拉列表看起来像这样：

现在是默认情况下，如下所示：

http://i.imgur.com/0zmyZ.png

这是html代码：

     <li class="dropdown">
          <a href="#" class="dropdown-togle" data-toggle="dropdown">
          <b>Download</b>
          <b class="caret"></b></a>
          <ul class="dropdown-menu">
          <li><a href="#">Link</a></li>
            <li><a href="#">Link2</a></li>
            </ul>
            </li>

已编辑 - 例如： http://jsfiddle.net/gnEAe/2/

我想，我应该在dropdown.js中覆盖somehing或者什么？

Answer 1

好的，我已经编辑了jsfiddle ...

首先添加课程测试

<div class="navbar test">

你也需要像这样添加css ....

.test .dropdown-menu:after, .test .dropdown-menu:before {
    border:0 !important;
}

.test .dropdown-menu {
    left:-13px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-top:none !important;
}

这会让你基本了解我在说什么...... http://jsfiddle.net/gnEAe/3/

Answer 2

事实上，您不需要在javascript中覆盖某些内容。但你应该写一些css来设计你的列表。

这是样式列表的教程：

http://css.maxdesign.com.au/listutorial/