bootstrap基本整理3

目錄

• bootstrap基本整理<3>
  • bootstrap字體圖標
  • bootstrap下拉菜單
  • bootstrap按鈕組
    • 加載狀態
    • 單個切換
    • 複選框
    • 單選按鈕
  • 按鈕組下拉菜單
  • 輸入框組
  • 導航欄
    • 表格導航欄
    • 膠囊式的導航菜單
    • 默認導航欄

bootstrap基本整理<3>

@[基本實例|基於bootstrap框架]

---

bootstrap字體圖標

用法：<span class="glyphicon glyphicon-search"></span>

更多字體圖標

bootstrap下拉菜單

1.經過 data 屬性：向連接或按鈕添加 data-toggle="dropdown" 來切換下拉菜單

• role是爲了適應老版本的瀏覽器設定的
• aria-labelledby與id對應起來，表示這些東西在對應的id中展示

<div class="dropdown">
  <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    下拉菜單（Dropdown） <span class="caret"></span>
  </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

2.經過 JavaScript：經過 JavaScript 調用下拉菜單切換

$('.dropdown-toggle').dropdown();

bootstrap按鈕組

加載狀態

如需向按鈕添加加載狀態，只須要簡單地向 button 元素添加 data-loading-text="Loading..." 做爲其屬性便可

<button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..." 
    type="button"> 加載狀態
</button>
<script>
    $(function() {
        $(".btn").click(function(){
 $(this).button('loading').delay(1000).queue(function() {
            });
        });
    });  
</script>

單個切換

如需激活單個按鈕的切換（即改變按鈕的正常狀態爲按壓狀態，反之亦然），只需向 button 元素添加 data-toggle="button" 做爲其屬性便可

<button type="button" class="btn btn-primary" 
    data-toggle="button"> 單個切換
</button>

複選框

能夠建立複選框組，並經過向 btn-group 添加 data 屬性 data-toggle="buttons" 來添加複選框組的切換

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="checkbox"> 選項 1
    </label>
    <label class="btn btn-primary">
        <input type="checkbox"> 選項 2
    </label>
    <label class="btn btn-primary">
        <input type="checkbox"> 選項 3
    </label>
</div>

單選按鈕

能夠建立單選按鈕組，並經過向 btn-group 添加 data 屬性 data-toggle="buttons" 來添加單選按鈕組的切換

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option1"> 選項 1
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option2"> 選項 2
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option3"> 選項 3
    </label>
</div>

更多按鈕組實例

按鈕組下拉菜單

更多按鈕下拉菜單實例

輸入框組

輸入框組實例

導航欄

表格導航欄

建立一個標籤式的導航菜單：

• 以一個帶有 class .nav 的無序列表開始。
• 添加 class .nav-tabs

<p>標籤式的導航菜單</p>
<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>

膠囊式的導航菜單

若是須要把標籤改爲膠囊的樣式，只須要使用 class .nav-pills 代替 .nav-tabs 便可

<p>基本的膠囊式導航菜單</p>
<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>

更多導航欄元素

默認導航欄

建立一個默認的導航欄的步驟以下：

• 向 <nav> 標籤添加 class .navbar、.navbar-default。
• 向上面的元素添加 role="navigation"，有助於增長可訪問性。
• 向 <div> 元素添加一個標題 class .navbar-header，內部包含了帶有 class navbar-brand 的 <a>
• 元素。這會讓文本看起來更大一號。

• 爲了嚮導航欄添加連接，只須要簡單地添加帶有 class .nav、.navbar-nav 的無序列表便可

  響應式導航欄

  Collapse插件

• data-toggle="collapse" 添加到您想要展開或摺疊的組件的連接上。
• href 或 data-target 屬性添加到父組件，它的值是子組件的 id。
• data-parent 屬性把摺疊面板（accordion）的 id 添加到要展開或摺疊的組件的連接上。

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" 
                href="#collapseOne">
                點擊我進行展開，再次點擊我進行摺疊。第 1 部分
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
                cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
                vice lomo.
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" 
                href="#collapseTwo">
                點擊我進行展開，再次點擊我進行摺疊。第 2 部分
            </a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
            cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
            vice lomo.
        </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" 
                href="#collapseThree">
                點擊我進行展開，再次點擊我進行摺疊。第 3 部分
                </a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">
                Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
                cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
                vice lomo.
            </div>
        </div>
    </div>
</div>

更多關於插件