Bootstrap 圖標菜單和按鈕組件（五）

一、小圖標組件

      具體圖標樣式class名稱參考官網。

     可配合 <span> 或 <i> 使用 ，也可配合 <button> 使用     

<button class="btn btn-primary btn-lg">
   <span class="glyphicon glyphicon-bell"></span>
</button>

 

二、下拉菜單組件    

<div class="dropdown">
      <button class="btn btn-default" data-toggle="dropdown">
        下拉菜單
        <span class="caret"></span>
      </button>
      
      <ul class="dropdown-menu dropdown-menu-right">
        <li class="dropdown-header">網站導航</li>
        <li class="divider"></li>
        <li><a href="#">首頁</a></li> 
        <li><a href="#">資訊</a></li> 
        <li><a href="#">產品</a></li> 
        <li class="disabled"><a href="#">關於</a></li> 
      </ul>
</div>

    1、下拉菜單必須有一個被點擊的元素，可以是超鏈接，可以是圖片或者button 按鈕（多），按鈕需要設置 data-toggle ="dropdown" 才能有效(相當於在 dropdown 處切換 class="open" )。

    2、外邊要有一個容器 .dropdown 包含被點擊的元素和被觸發的列表項（即菜單） 

    3、菜單部分，設置 class="dropdown-menu" 才能自動隱藏並添加固定樣式

    4、設置 class="caret" 表示箭頭，可上可下。

    

.dropdown  //  下拉菜單

.dropdown.open   //  菜單列表項默認顯示

.dropup      //   上拉菜單

.dropdown-menu  //  菜單列表項

.dropdown-menu-left  //  菜單項目左對齊，默認為左

.dropdown-menu-right  //  菜單項目右對齊

.dropdown-header  //  網站導航，設置菜單標題，不要加超鏈接

.divider  //  菜單分割線

.disabled  //  菜單禁用項  

 

三、按鈕組組件

<div class="btn-toolbar">
      <div class="btn-group btn-group-lg">
        <button class="btn btn-default">左</button>
        <button class="btn btn-default">中</button>
        <button class="btn btn-default">右</button>
      </div>
      <div class="btn-group">
        <button class="btn btn-default">左</button>
        <button class="btn btn-default">中</button>
        <button class="btn btn-default">右</button>         
      </div>
</div>

 .btn-group    //  多個按鈕 集成在該容器里

 .btn-toolbar    //  多個按鈕組 整合在該容器里，便於管理。

 

//  設置按鈕組大小（從大到小）

 .btn-group-lg   

 不設置

 .btn-group-sm    

 .btn-group-xs    

 

四、按鈕式下拉菜單（嵌套一個分組）

<div class="btn-toolbar">
      <div class="btn-group">
        <button class="btn btn-default">左</button>
        <button class="btn btn-default">中</button>
        <button class="btn btn-default">右</button>
         <div class="btn-group">
            <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
              下拉菜單
              <span class="caret"></span>
            </button>
            
            <ul class="dropdown-menu dropdown-menu-right">
              <li class="dropdown-header">網站導航</li>
              <li class="divider"></li>
              <li><a href="#">首頁</a></li> 
              <li><a href="#">資訊</a></li> 
              <li><a href="#">產品</a></li> 
              <li class="disabled"><a href="#">關於</a></li> 
            </ul>
        </div>
      </div>
</div>

 .btn-group    //  嵌套一個分組，還用 .btn-group，而不是一個下拉菜單

 .dropdown-toggle    //   在 <button> 中添加類 dropdown-toggle , 增加了下拉菜單圓角樣式

 

 在 .btn-group 處替換類名，顯示不同的效果

 .btn-group-vertical    //  設置按鈕組垂直排列（豎着排）

 .btn-group-justified    //  設置兩端對齊按鈕組，使用的是 <a> 標簽 ，如果需要使用 <button> 需要在標簽外設置 div.btn-group

 .btn-group.dropup     //   向上彈出式  

 

五、分裂式按鈕下拉菜單

 可以加 兩個 <button> 使得按鈕下拉菜單兩個 button 分體式（中間有豎線隔開）顯示。