Bootstrap--下拉菜单.dropdown

下拉菜单.dropdown

.dropdown <下拉菜单触发器button+下拉菜单ul>

.dropdown　　　　包裹层

.dropdown-toggle 　　下拉菜单触发器

　　　　data-toggle="dropdown  自定义属性 可以与js关联起来

.dropdown-menu 　　下拉菜单

 

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

 如果你想让菜单默认是打开状态，需要添加一个.open的类

<div class="dropdown  open">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

 

 .dropup   向上弹出菜单

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

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

 

 

　　　　1、对齐方式：默认左对齐

　　　　　右对齐：给.dropdown-menu添加.dropdown-menu-right类就可以 

　　　　　　　　注意：它是以父级的位置来对齐的

　　　　　　　　怎么样让下拉菜单以下拉菜单触发器的右端对齐呢？那就需要给下拉菜单触发器button添加一个.btn block的类

 

<div class="dropup">
  <button class="btn btn-default dropdown-toggle btn-block" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right " aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

 

　　　　2、下拉菜单的标题     dropdown-header

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

　　　　　　如果想让下拉菜单的标题居中，就需要添加一个.text-center的类

 

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header text-center">Dropdown header</li>
  ...
</ul>

 

 

 

　　　　3、分割线：     .divider　

　　　　　　为下拉菜单添加一条分割线，用于将多个链接分组。

 

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

 

 　　　　4、禁用菜单：disabled

　　　　　　为下拉菜单中的 <li> 元素添加 .disabled 类，从而禁用相应的菜单项。

 

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

 

 

 

注意：

　　aria-haspopup="true" 　　 aria-expanded="true"  为需要借助屏幕阅读器的特殊人群设置的

　　id="dropdownMenu1"　　　　aria-labelledby="dropdownMenu1"   通过id将触发器和下拉菜单关联起来

 

　　

 

posted @ 2017-10-26 09:10  shengnan_2017  阅读(4285)  评论(2)  编辑  收藏  举报