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

  下拉菜单项的默认的状态(不用设置)有悬浮状态(: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> 
时间: 2024-12-21 23:46:32

Bootstrap系列 -- 28. 下拉菜单状态的相关文章

Bootstrap系列 -- 26. 下拉菜单标题

Bootstrap下拉菜单中使用 dropdown-header 来显示菜单标题,和上一篇说道的分割线一样 <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜单 <sp

Bootstrap系列 -- 25. 下拉菜单分割线

在Bootstrap框架中的下拉菜单还提供了下拉分隔线,假设下拉菜单有两个组,那么组与组之间可以通过添加一个空的<li>,并且给这个<li>添加类名“divider”来实现添加下拉分隔线的功能. <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu

Bootstrap系列 -- 27. 下拉菜单对齐方式

Bootstrap框架中下拉菜单默认是左对齐,如果你想让下拉菜单相对于父容器右对齐时,可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名. <h4>使用pull-right类使下拉菜单与父容器右边对齐</h4> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" ty

Bootstrap中的下拉菜单

下拉菜单(基本用法) 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,它对应的文件: ?  LESS版本:对应的源码文件为 dropdowns.less ?  Sass版本:对应的源码文件为 _dropdowns.scss ?  编译后的Bootstrap版本:查看bootstrap.css文件第3004行-第3130行 在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版

bootstrap里的下拉菜单

bootstrap里的下拉菜单用于显示链接列表的可切换.有上下文的菜单.下拉菜单的 JavaScript 插件让它具有了交互性.将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 position: relative; 的元素.然后加入组成菜单的 HTML 代码.以下代码就是生成一个简单的下拉菜单 <div class="dropdown">  <button class="btn btn-default dropdown-togg

bootstrap怎么设置下拉菜单不点击,改成鼠标悬停直接显示下拉菜单

方法一: 实际上比较简单,只需要加一个css设置下hover的状态,把下拉菜单设置成block,具体css:.nav > li:hover .dropdown-menu {display: block;} 但是主导航失去链接的效果! 方法二: 不仅可以解决Bootstrap鼠标悬停的问题,还可以让一个菜单恢复链接实现点击下拉菜单效果是JS实现的,分析bootstrap.js文件发现,Bootstrap把下拉菜单写成了一个JQuery插件,在dropdown代码段中找到了关键的几句:$(docum

Bootstrap3系列:下拉菜单

1.引用Bootstrap 示例引用的Bootstrap版本:v3.3.7 <script src="~/Scripts/jquery-2.2.4.min.js"></script> <script src="~/Scripts/bootstrap.min.js"></script> <link href="~/Content/bootstrap.min.css" rel="styl

bootstrap(4)关于下拉菜单的功能

一:下拉菜单: 下拉菜单的代码实现: <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="

Bootstrap系列 -- 15. 下拉选择框select

Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性的值为multiple.Bootstrap框架会为这些元素提供统一的样式风格 <form role="form"> <div class="form-group"> <select class="form-control"> <option>1</option> <option>2</