Bootstrap下拉菜单的实例教程

本章将讲解如何使用 Bootstrap class 向按钮添加下拉菜单。如需向按钮添加下拉菜单，只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可。您也可以使用 ee28a0e52535a3a70eaf689447408dc654bdf357c58b8a65c66d7c19c8e4d114 来指示按钮作为下拉菜单。

下面的实例演示了一个基本的简单的按钮下拉菜单：

实例

<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">默认        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li>
            <a href="#">功能</a>
        </li>
        <li>
            <a href="#">另一个功能</a>
        </li>
        <li>
            <a href="#">其他</a>
        </li>
        <li class="divider"></li>
        <li>
            <a href="#">分离的链接</a>
        </li>
    </ul></div><div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">原始        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li>
            <a href="#">功能</a>
        </li>
        <li>
            <a href="#">另一个功能</a>
        </li>
        <li>
            <a href="#">其他</a>
        </li>
        <li class="divider"></li>
        <li>
            <a href="#">分离的链接</a>
        </li>
    </ul></div>

基本用法

　　在使用Bootstrap框架中的下拉菜单组件时，其结构运用的正确与否非常的重要，如果结构和类名未使用正确，直接影响组件是否能正常运用

　　1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素

c0a838506a57d6efb82c3faebdcfa64e16b28748ea4df4d9c2150843fecfba68

　　2、使用了一个bb9345e55eb71822850ff156dfde57c8按钮做为父菜单，并且定义类名“dropdown-toggle”和自定义“data-toggle”属性，且值必须和最外容器类名一致

8af15fa9ce0b1cee92d5ee57b078822f

　　3、下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu”

ae363fd8bc2e4ee3b3446338ba23f464

  
  
  ActionAnother actionSomething else here

　　4、通过为下拉菜单的父元素设置 .dropup 类，可以让菜单向上弹出（默认是向下弹出的）

14481b0d0ba7c394e2501a352872843d
  1172180f0ea09fa48126f1bf9c16d1a6Dropupa11c08f61adc2d33c8f8db60e406954354bdf357c58b8a65c66d7c19c8e4d114
  65281c5ac262bf6d81768915a4a77ac0
  c5f7c33631c7deafd5f3bd6bcd1eea2f25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Action5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Another action5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Something else here5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
  929d1f5ca49e04fdcb27f9465b94468916b28748ea4df4d9c2150843fecfba68

 

原理分析

　　Bootstrap框架中的下拉菜单组件，其下拉菜单项默认是隐藏的，因为“dropdown-menu”默认样式设置了“display:none”；当用户点击父菜单项时，下拉菜单将会被显示出来；当用户再次点击时，下拉菜单将继续隐藏

.dropdown-menu {
  position: absolute;/*设置绝对定位，相对于父元素div.dropdown*/
  top: 100%;/*让下拉菜单项在父菜单项底部，如果父元素不设置相对定位，该元素相对于body元素*/
  left: 0;
  z-index: 1000;/*让下拉菜单项不被其他元素遮盖住*/
  display: none;/*默认隐藏下拉菜单项*/
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

　　现在我们来分析一下实现原理，非常简单，通过js技术手段，给父容器“div.dropdown”添加或移除类名“open”来控制下拉菜单显示或隐藏。也就是说，默认情况，“div.dropdown”没有类名“open”，当用户第一次点击时，“div.dropdown”会添加类名“open”；当用户再次点击时，“div.dropdown”容器中的类名“open”又会被移除

.open > .dropdown-menu {
  display: block;
}

 

扩展用法

【分隔线】

　　在Bootstrap框架中的下拉菜单提供了下拉分隔线，假设下拉菜单有两个组，那么组与组之间可以通过添加一个空的25edfb22a4f469ecb59f1190150159c6，并且给这个25edfb22a4f469ecb59f1190150159c6添加类名“divider”来实现添加下拉分隔线的功能

.dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}

9aa02a4f45fec1ec76777df05ea7dcabbed06894275b65c1ab86501b08a632eb

c0a838506a57d6efb82c3faebdcfa64e
  1172180f0ea09fa48126f1bf9c16d1a6Dropdowna11c08f61adc2d33c8f8db60e406954354bdf357c58b8a65c66d7c19c8e4d114
  65281c5ac262bf6d81768915a4a77ac0
  c5f7c33631c7deafd5f3bd6bcd1eea2f25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Action5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Another action5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Something else here5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb9aa02a4f45fec1ec76777df05ea7dcabbed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812Separated link5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
  929d1f5ca49e04fdcb27f9465b94468916b28748ea4df4d9c2150843fecfba68

【菜单标题】

　　在任何下拉菜单中均可通过添加标题来标明一组动作 

c220632b5e888796ad159d12fa43bfcbDropdown headerbed06894275b65c1ab86501b08a632eb

.dropdown-header {
  display: block;
  padding: 3px 20px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #999;
}

c0a838506a57d6efb82c3faebdcfa64e
  1172180f0ea09fa48126f1bf9c16d1a6Dropdowna11c08f61adc2d33c8f8db60e406954354bdf357c58b8a65c66d7c19c8e4d114
  65281c5ac262bf6d81768915a4a77ac0
  f2d98710ffe286210bb25d6dcee36a5c53aee3cf423ceaf51d11d60f48002773第一部分菜单头部bed06894275b65c1ab86501b08a632eb17107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb17107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb34180452588631f7294f6e20e4d7d79ebed06894275b65c1ab86501b08a632eb53aee3cf423ceaf51d11d60f48002773第二部分菜单头部bed06894275b65c1ab86501b08a632eb17107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
  929d1f5ca49e04fdcb27f9465b94468916b28748ea4df4d9c2150843fecfba68

【对齐方式】

　　Bootstrap框架中下拉菜单默认是左对齐，如果想让下拉菜单相对于父容器右对齐时，可以在“dropdown-menu”上添加一个“dropdown-menu-right”类名 

.dropdown-menu-right {
  right: 0;
  left: auto;
}

　　由于b05e51e1f0e3a705cc222fb9de3565dd默认是块级元素，撑满父级宽度。这里，需要为该元素设置inline-block和margin-left，使其内容撑开宽度，且距离左侧有一定距离

    display: inline-block;
    margin-left: 60px;

bc237f0a329903d1c97cfadcb81fa83a
  1172180f0ea09fa48126f1bf9c16d1a6Dropdowna11c08f61adc2d33c8f8db60e406954354bdf357c58b8a65c66d7c19c8e4d114
  65281c5ac262bf6d81768915a4a77ac0
  0e067206866e68769a13ad0253578a2717107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb17107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb17107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb34180452588631f7294f6e20e4d7d79ebed06894275b65c1ab86501b08a632eb17107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
  929d1f5ca49e04fdcb27f9465b94468916b28748ea4df4d9c2150843fecfba68

【菜单项状态】

　　下拉菜单项的默认的状态有悬浮状态（:hover）和焦点状态（:focus）

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
}

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

c0a838506a57d6efb82c3faebdcfa64e
  1172180f0ea09fa48126f1bf9c16d1a6Dropdowna11c08f61adc2d33c8f8db60e406954354bdf357c58b8a65c66d7c19c8e4d114
  65281c5ac262bf6d81768915a4a77ac0
  f2d98710ffe286210bb25d6dcee36a5c556e13e9c9f7f01f9fb88f9dc143761412127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb17107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb17107faed89a3c9827b91a8116cd378012127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb34180452588631f7294f6e20e4d7d79ebed06894275b65c1ab86501b08a632eb9e19533ed9cabe256346eae338ee3b4412127e75e1ed440cc428464f13332ecd下拉菜单项5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
  929d1f5ca49e04fdcb27f9465b94468916b28748ea4df4d9c2150843fecfba68

以上是Bootstrap下拉菜单的实例教程的详细内容。更多信息请关注PHP中文网其他相关文章！