Bootstrap系列 -- 28. 下拉菜单状态

简介:   下拉菜单项的默认的状态(不用设置)有悬浮状态(:hover)和焦点状态(:focus)。   下拉菜单项除了上面两种状态,还有当前状态(.active)和禁用状态(.disabled)。这两种状态使用方法只需要在对应的菜单项上添加对应的类名 下拉菜单 ...

 

  下拉菜单项的默认的状态(不用设置)有悬浮状态(:hover)和焦点状态(:focus)。

  下拉菜单项除了上面两种状态,还有当前状态(.active)和禁用状态(.disabled)。这两种状态使用方法只需要在对应的菜单项上添加对应的类名

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    下拉菜单
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  </ul>
</div> 

 

相关文章
N..
|
开发框架 前端开发 UED
Bootstrap下拉菜单与选项卡
Bootstrap下拉菜单与选项卡
N..
122 1
|
前端开发 JavaScript
|
前端开发 JavaScript 容器
Bootstrap 下拉菜单
Bootstrap 下拉菜单
96 0
|
索引 容器
Bootstrap4----网络系统、图像形状、轮播、滚动监听、多媒体对象、下拉菜单导航及按钮
Bootstrap4----网络系统、图像形状、轮播、滚动监听、多媒体对象、下拉菜单导航及按钮
|
前端开发
Bootstrap 5 保姆级教程(八):卡片 & 下拉菜单
Bootstrap 5 保姆级教程(八):卡片 & 下拉菜单
|
11月前
|
前端开发
Bootstrap5 下拉菜单5
此示例展示了如何使用 Bootstrap 的 `dropstart` 类创建一个向左弹出的下拉菜单。通过在 `div` 元素上添加 `dropstart` 类,可以实现下拉菜单从按钮左侧弹出的效果。菜单包含三个链接项。
|
11月前
Bootstrap5 下拉菜单7
按钮组中可以嵌入下拉菜单,实现更多功能选项。示例展示了水平和垂直按钮组中添加下拉菜单的方法,通过 `dropdown-toggle` 类和 `data-bs-toggle=&quot;dropdown&quot;` 属性实现下拉效果。
|
11月前
Bootstrap5 下拉菜单6
使用 `.dropdown-item-text` 类可以在下拉菜单中添加纯文本项,
|
11月前
Bootstrap5 下拉菜单4
要使上拉菜单向上弹出,可在 div 元素中添加 &quot;dropup&quot; 类。示例代码包括一个按钮和一个包含三个链接的下拉菜单列表。当点击按钮时,菜单将向上弹出。
|
11月前
Bootstrap5 下拉菜单3
下拉菜单默认向下弹出,但可以通过添加类 `.dropdown-menu-end` 实现向右下方弹出。示例代码展示了如何创建一个向右下方弹出的下拉菜单按钮,包含三个链接项。