Bootstrap 3 之 Bootstrap 下拉菜单

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

基本用法

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

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

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

下拉菜单方向

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

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

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

分割线和禁用项

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

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

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

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


上一篇:Bootstrap 字体图标
下一篇:Bootstrap 按钮组