Twitter Bootstrap - 自定义下拉菜单的最佳方式

【问题标题】：Twitter Bootstrap - The best way to customize dropdownsTwitter Bootstrap - 自定义下拉菜单的最佳方式
【发布时间】：2013-06-09 01:58:39
【问题描述】：

我是引导程序的新手，我有疑问。我想在同一页面中创建两个不同的下拉菜单，但设计不同（任何人都喜欢默认引导程序）。这样做最优雅的方式是什么？感谢您的帮助。

【问题讨论】：

只给它们不同的类，并相应地覆盖基本样式
或者定义你的类以便它们是可混合的<div class="dropdown red-bg small-menu" /><div class="dropdown blue-bg big-menu" />

标签： javascript css twitter-bootstrap drop-down-menu

【解决方案1】：

我只会添加一个具有自己样式的不同类...然后将它们直接添加到各自divs上的类中。

DEMO

CSS

/* please don't name your classes like this */

.left-dd {
    background-color: blue;
    font-size: 2em;
    font-weight: bold;
    line-height: 2em;
    color: white;
}

.right-dd {
    background-color: red;
    font-family: comic-sans;
    font-size: 0.5em;

}

HTML

<ul class="dropdown-menu right-dd" role="menu" aria-labelledby="dLabel">
      <li>Some dropdown content</li>
      <li>Some dropdown content</li>
      <li>Some dropdown content</li>
      <li>Some dropdown content</li>
      <li>Some dropdown content</li>
  </ul>

【讨论】：