Bootstrap(6)圖示菜單按鈕元件

一．小圖示元件

Bootstrap 提供了免費的 263 個小圖示（數了兩次），具體可以參考中文官網的元件連結：http://v3.bootcss.com/components/#glyphicons。部分圖示如下：

可以使用<i>或<span>标簽來配合使用，具體如下：

使用小圖示

<i class="glyphicon glyphicon-star"></i>
    <span class="glyphicon glyphicon-star"></span>      

也可以結合按鈕

<!-- 也可以結合按鈕 -->
    <button class="btn btn-default btn-lg">
        <span class="glyphicon glyphicon-star"></span>
    </button>
    <button class="btn btn-default btn">
        <span class="glyphicon glyphicon-star"></span>
    </button>
    <button class="btn btn-default btn-sm">
        <span class="glyphicon glyphicon-star"></span>
    </button>
    <button class="btn btn-default btn-xs">
        <span class="glyphicon glyphicon-star"></span>
    </button>      

二．下拉菜單元件

下拉菜單，就是點選一個元素或按鈕，觸發隐藏的清單顯示出來。

基本格式

<div class="dropdown">
        <button class="btn btn-default" data-toggle="dropdown">
            下拉菜單 <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">首頁</a></li>
            <li><a href="#">資訊</a></li>
            <li><a href="#">産品</a></li>
            <li><a href="#">關于</a></li>
        </ul>
    </div>      

按鈕和菜單需要包裹在.dropdown 的容器裡，而作為被點選的元素按鈕需要設定data-toggle="dropdown"才能有效。對于菜單部分，設定 class="dropdown-menu"才能自動隐藏并添加強定樣式。設定 class="caret"表示箭頭，可上可下。

//設定向上觸發

<div class="dropup">

//菜單項居右對齊，預設值是 dropdown-menu-left

<ul class="dropdown-menu dropdown-menu-right">

//設定菜單的标題，不要加超連結

<li class="dropdown-header">網站導航</li>

//設定菜單的分割線

<li class="divider"></li>

//設定菜單的禁用項

<li class="disabled"><a href="#">産品</a></li>

//讓菜單預設顯示

<div class="dropdown open">

三．按鈕組元件

按鈕組就是多個按鈕內建在一個容器裡形成獨有的效果。

//基本格式

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

将多個按鈕組整合起來便于管理

<div class="btn-toolbar">
        <div class="btn-group">
            <button type="button" class="btn btn-default">左</button>
            <button type="button" class="btn btn-default">中</button>
            <button type="button" class="btn btn-default">右</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-default">1</button>
            <button type="button" class="btn btn-default">2</button>
            <button type="button" class="btn btn-default">3</button>
        </div>
    </div>      

嵌套一個分組，比如下拉菜單

<!-- 嵌套一個分組，比如下拉菜單 -->
    <div class="btn-group">
        <button type="button" class="btn btn-default">左</button>
        <button type="button" class="btn btn-default">中</button>
        <button type="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">
                <li><a href="#">首頁</a></li>
                <li><a href="#">資訊</a></li>
                <li><a href="#">産品</a></li>
                <li><a href="#">關于</a></li>
            </ul>
        </div>
    </div>      

注意：這裡<div>中并沒有實作 class="dropdown"，通過源碼分析知道嵌套本身已經有定位就不需要再設定。而右邊的圓角隻要多加一個 class="dropdown-toggle"即可。

//設定按鈕組垂直排列

<!-- //設定按鈕組垂直排列 -->

<div class="btn-group-vertical">

設定兩端對齊按鈕組，使用<a>标簽

<div class="btn-group-justified">
        <a type="button" class="btn btn-default">左</a>
        <a type="button" class="btn btn-default">中</a> 
        <a type="button" class="btn btn-default">右</a>
    </div>      

如果需要使用<button>标簽，則需要對每個按鈕進行群組

<div class="btn-group-justified">
        <div class="btn-group">
            <button type="button" class="btn btn-default">左</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-default">中</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-default">右</button>
        </div>
    </div>      

四．按鈕式下拉菜單

這個下拉菜單其實和第二個知識點一樣，隻不過，這個是在群組裡，不需要<div>聲明class="dropdown"。

//群組按鈕下拉菜單

<div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            下拉菜單 <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">首頁</a></li>
            <li><a href="#">資訊</a></li>
            <li><a href="#">産品</a></li>
            <li><a href="#">關于</a></li>
        </ul>
    </div>      

//向上彈出式

<div class="btn-group dropup">