Bootstrap實作下拉選單效果_javascript技巧
- WBOY原創
- 2016-05-16 15:02:511917瀏覽
下拉式選單用於顯示連結清單的可切換、有上下文的選單。
1、案例
將下拉式選單觸發器和下拉式選單都包裹在.dropdown裡，然後加入組成選單的HTML程式碼。
<div class="dropdown"> <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul> </div>
可以透過上面的程式碼發現，裡面可能有很多陌生的樣式類別或屬性。
一個Dropdown按鈕和右邊有個小圖示caret，當然這個小圖示和按鈕的文字是平級的。
首先看button按鈕中有個dropdown-toggle，還有一個data-toggle屬性，根據這個屬性來彈出列表。
緊接著ul標籤的dropdown-menu應該是和上面button按鈕的樣式類dropdown-toggle聯合使用，在透過aria-labelledby綁定上面的button按鈕。
下來第四個li標籤中有個divider其實是一個分割線的樣式類別。
大概我理解的就這個樣子，理解的肯定不到位。
2、對齊選項
給下拉式選單.dropdown-menu加上.text-right 讓文字右對齊。
<div class="dropdown"> <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul> </div>
只是在上面的程式碼中的ul標籤上新增了一個text-right的樣式類別。
3、標題
在任何下拉式選單中均可透過新增標題來標明一組動作。
<h1>下拉菜单</h1> <div class="dropdown"> <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="dropdown-header">Dropdown header</li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation" class="divider"></li> <li role="presentation" class="dropdown-header">Dropdown header</li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul> </div>
主要是增加了
4、停用的選單項目
給下拉式選單中的
繼續修改上面的程式碼將Something else here行的程式碼進行替換
複製程式碼 程式碼如下:
主要是在li標籤中加入.disabled的樣式類別。
你運行之後可以查看效果，其實效果和上面的標題樣式差不多，當你點擊的時候會有一個禁用的圖標顯示。
5、基本案例
1）、按鈕式下拉式選單
把任何按鈕放入.btn-group然後加入正確的選單標記，就可以做成下拉式選單觸發器。
單按鈕下拉式選單
只要改變一些基本的標記，就能把按鈕變成下拉式選單開關。
<div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Action <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div>
分裂式按鈕下拉式選單
相似地，分裂式按鈕下拉式選單也需要同樣的改變標記，但只要多一個分開的按鈕。
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<div class="dropdown">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div
只能點選小圖示才能出現下來選單額。
2）、尺寸
下拉式選單按鈕適用所有尺寸的按鈕。
<div class="btn-group"> <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown"> Large button <span class="caret"></span> </button> <ul class="dropdown-menu"> ... </ul> </div> <!-- Small button group --> <div class="btn-group"> <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown"> Small button <span class="caret"></span> </button> <ul class="dropdown-menu"> ... </ul> </div> <!-- Extra small button group --> <div class="btn-group"> <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown"> Extra small button <span class="caret"></span> </button> <ul class="dropdown-menu"> ... </ul> </div>
透過樣式類別.btn-lg、 .btn-sm、.btn-xs來控制按鈕的大小。
3）、向上彈出式選單
為父元素添加.dropup就能使觸發的下拉式選單在元素上方。
<div class="btn-group dropup"> <button type="button" class="btn btn-default">Dropup</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> <!-- Dropdown menu links --> </ul> </div>
更多內容請參考：Bootstrap學習教學
總結：
本文主要介紹了下拉式選單的相關內容，然後介紹了按鈕和下拉式選單的組合，變化還是蠻多的，樣式也不錯，希望大家喜歡。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn