CSS Twitter Bootstrap 下拉菜单

在本文中，我们将介绍如何使用 CSS Twitter Bootstrap 构建一个强大的下拉菜单。

阅读更多：CSS 教程

什么是 CSS Twitter Bootstrap？

CSS Twitter Bootstrap 是一套用于构建现代 Web 应用程序的开源工具包。它提供了丰富的 CSS 和 JavaScript 组件，可以帮助我们快速构建漂亮且响应式的用户界面。

下拉菜单的基本使用

CSS Twitter Bootstrap 提供了一个简单而强大的下拉菜单组件。要使用下拉菜单，首先需要引入 bootstrap.css 文件。

以下是一个基本的下拉菜单示例：

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">菜单<span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a></li>
    <li><a href="#">菜单项3</a></li>
  </ul>
</div>

上述代码首先创建了一个 div 元素，并添加了 dropdown 类。然后在其中创建了一个 button 元素，并添加了 btn 和 btn-primary 类。btn 类用于添加按钮样式，btn-primary 类用于指定按钮的主要颜色。

button 元素中使用了 data-toggle="dropdown" 属性，这是用于触发下拉菜单的属性。当点击该按钮时，下拉菜单会展开或收起。

下拉菜单的选项使用 ul 和 li 元素创建。每个菜单选项都是一个 li 元素，其中包含一个 a 元素作为链接。

最后，在下拉菜单按钮中添加了一个 span 元素，并使用 caret 类添加了一个小箭头图标，用于指示此按钮是一个下拉菜单。

通过以上代码，我们就创建了一个基本的下拉菜单。

下拉菜单的高级用法

除了基本的下拉菜单，CSS Twitter Bootstrap 还提供了一些高级用法，可以定制下拉菜单的样式和功能。

下拉菜单方向

通过添加不同的类名，我们可以更改下拉菜单展开的方向。以下是下拉菜单方向的类名：

.dropdown-menu-right：下拉菜单向右展开。
.dropdown-menu-left：下拉菜单向左展开。

例如，要创建一个向右展开的下拉菜单，可以使用以下代码：

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">菜单<span class="caret"></span></button>
  <ul class="dropdown-menu dropdown-menu-right">
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a></li>
    <li><a href="#">菜单项3</a></li>
  </ul>
</div>

下拉菜单的分割线

如果需要在下拉菜单中添加分割线，可以使用 .divider 类。

例如，以下代码在菜单项 1 和菜单项 2 之间添加了一个分割线：

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">菜单<span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">菜单项1</a></li>
    <li class="divider"></li>
    <li><a href="#">菜单项2</a></li>
    <li><a href="#">菜单项3</a></li>
  </ul>
</div>

下拉菜单的嵌套

CSS Twitter Bootstrap 还支持在下拉菜单中嵌套更多的下拉菜单。只需在 ul 元素中添加 dropdown-menu 类即可。

以下是一个嵌套的下拉菜单示例：

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">菜单<span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a></li>
    <li class="dropdown-submenu">
      <a tabindex="-1" href="#">菜单项3</a>
      <ul class="dropdown-menu">
        <li><a href="#">子菜单项1</a></li>
        <li><a href="#">子菜单项2</a></li>
      </ul>
    </li>
  </ul>
</div>

在以上示例中，菜单项 3 中包含了一个嵌套的下拉菜单。我们创建了一个 dropdown-submenu 类来指示这是一个嵌套的菜单项。