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將觸發器和下拉菜單關聯起來