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将触发器和下拉菜单关联起来

  

上一篇:Android界面刷新之invalidate与postInvalidate的区别


下一篇:Linux配置nodejs