Bootstrap 3 之 Bootstrap 下拉菜单

Bootstrap 提供了一个非常简单易用的下拉菜单组件，可以帮助我们轻松实现页面中的下拉菜单功能。在 Bootstrap 中，下拉菜单通常用于导航栏中的菜单项，但也可以在其他地方使用。

基本用法

要创建一个下拉菜单，我们需要使用 Bootstrap 提供的 .dropdown 类和 .dropdown-menu 类。下面是一个基本的下拉菜单示例：

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown</button>
  <ul class="dropdown-menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>

在上面的示例中，我们通过在按钮上添加 .dropdown-toggle 类和设置 data-toggle="dropdown" 属性来触发下拉菜单的显示。下拉菜单的内容则使用 .dropdown-menu 类包裹在一个 ul 元素中。

下拉菜单方向

Bootstrap 还提供了下拉菜单的方向控制类，可以让我们控制下拉菜单是向上还是向下展开。下面是一个向上展开的下拉菜单示例：

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown</button>
  <ul class="dropdown-menu dropdown-menu-up">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>

在上面的示例中，我们在 .dropdown-menu 中添加了 .dropdown-menu-up 类来让下拉菜单向上展开。

分割线和禁用项

Bootstrap 还支持在下拉菜单中添加分割线和禁用项。下面是一个包含分割线和禁用项的下拉菜单示例：

-- -------------------- ---- -------
---- -----------------
  ------- ---------- ----------- ---------------- ------------- ----------------------------------------
  --- ----------------------
    ------ ------------- ----------
    ------ ------------- ----------
    --- ---------------------
    --- ------------------- ----------------- -------------
  -----
------

在上面的示例中，我们通过在 li 元素上添加 .divider 类来创建分割线，通过在 li 元素上添加 .disabled 类来创建禁用项。

以上就是关于 Bootstrap 下拉菜单的基本用法和一些常用功能的介绍。希望能帮助你更好地使用 Bootstrap 来实现页面中的下拉菜单功能。