bootstrap學習筆記之三（組件的使用）

bootstrap組件需要引入bootstrap.js才行，當然要引入bootstrap.js首先得引入JQuery。

一、下拉菜單

　　將下拉菜單觸發器和下拉菜單都包裹在 .dropdown 里，或者另一個聲明了position：relative 的元素。原因是dropdown-menu元素設定了position:absolute，且top：100%； left: 0；所以需要包裹在設定了position：relative的元素內。

.dropup,
.dropdown {
  position: relative;
}

1 .dropdown-menu {
2  position: absolute; 3  top: 100%; 4  left: 0; 5 }

<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><a href="#">Separated link</a></li>
  </ul>
</div>

　　查看代碼我們可以看到，下拉菜單包括一個下拉開關按鈕，需要添加類名dropdown-toggle，同時還得添加一個屬性data-toggle="dropdown"，然后還包括一個ul下拉選項，需要添加類名dropdown-menu。

　　如需添加下拉菜單的標題，則只需要在li中添加一個類名dropdown-header即可。不過此時li中的內容不應被a標簽包裹了，而是直接寫在li標簽內。

　　如需在下拉菜單中添加分割線，只需要在空的li中添加類名divider即可。

　　下拉菜單還是很簡單的。

2、繼續學習按鈕組

　　暫時感覺單純的按鈕組沒有多大用！

　　為了向使用輔助技術 - 如屏幕閱讀器 - 的用戶正確傳達一正確的按鈕分組，需要提供一個合適的 role 屬性。對於按鈕組合，應該是 role="group"，對於toolbar（工具欄）應該是 role="toolbar"。

　　此外，按鈕組和工具欄應給定一個明確的label標簽，盡管設置了正確的 role 屬性，但是大多數輔助技術將不會正確的識讀他們。在這里提供的實例中，我們使用 aria-label，但是， aria-labelledby 也可以使用。

　　只需要把幾個button標簽放進一個btn-group的div類中既可以形成一個按鈕組。而把幾個按鈕組btn-group放進一個btn-toolbar的標簽中既可以形成一個工具欄。不過注意此時的btn-group和btn-toolbar要分別添加role="group"和role="toolbar"。

　　按鈕組的尺寸：

　　只需要給btn-group類添加類名btn-group-lg，btn-group-md，btn-group-sm，btn-group-xs既可以改變按鈕組的大小。在第二節，學習按鈕時改變按鈕的大小時是通過給btn添加類名btn-lg，btn-md,btn-sm,btn-xs完成時，此時只是在父集btn-group一塊操作罷了。

　　按鈕組嵌套下拉菜單，只需要只須把 .btn-group 放入另一個 .btn-group 中。

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

　　　　

　　　　之前說過下拉菜單組只要放在一個有相對定位的父集中即可，把它放在btn-group中當然可以，而把btn-group放入btn-group中當然也可以，因為btn-group的寬度並沒有占全屏的。

　　　　給btn-group添加btn-group-vertical即可以使按鈕組垂直排列。

　　　　下面是一個非常實用的按鈕組，兩端對齊排列的按鈕組，如果按鈕是a標簽的話，直接在btn-group中添加btn-group-justified類既可以實現按鈕組的寬度自動充滿父集的寬度，當然也可以自動充滿container的寬度，按鈕組的寬度平均分配給里邊的button元素。

 

　　　　　　　　　<div class="btn-group btn-group-justified" role="group" aria-label="...">
                  <a type="button" class="btn btn-default">1</a>
                  <a type="button" class="btn btn-default">2</a>                
                  <a type="button" class="btn btn-default">3</a>                
                  <div class="btn-group" role="group">
                    <a type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Dropdown
                      <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                      <li><a href="#">Dropdown link</a></li>
                      <li><a href="#">Dropdown link</a></li>
                    </ul>
                  </div>
                </div>

　　而button元素則需要內嵌在類名為btn-group的div元素中，如下：

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

　　按鈕式下拉菜單也非常簡單，只需要把幾個內嵌有下拉菜單的幾個下拉菜單放一塊就是一個按鈕式下拉菜單

　　分列式下拉菜單也只是下拉菜單觸發器那里的三角符號稍微有些改變，其它的都沒有變化。

　　尺寸也只是在btn按鈕中添加了btn-lg，btn-sm，btn-xs。

3、現在進行輸入框組

　　輸入框組只是把之前在form表單中學過的form元素里邊的 .input-group 類賦予.input-group-addon 類，可以給 .form-control 的前面或后面添加額外的元素。個人覺得沒什么好說的，很簡單，而且實用性也不太強。

 

4、導航

　　Bootstrap 中的導航組件都依賴同一個 .nav 類，狀態類也是共用的。

　　如果你在使用導航組件實現導航條功能，務必在 <ul> 的最外側的邏輯父元素上添加 role="navigation" 屬性，或者用一個 <nav> 元素包裹整個導航組件。不要將 role 屬性添加到 <ul> 上，因為這樣可以被輔助設備（殘疾人用的）上被識別為一個真正的列表。

　　標簽頁：注意 .nav-tabs 類依賴 .nav 基類。如果沒有.nav標簽則不行。

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

 

 　　膠囊式標簽頁：把nav-table類改為nav-pills類即可。

　　　　膠囊是標簽頁也是可以垂直方向堆疊排列的。只需添加 .nav-stacked 類。兩端對齊的標簽頁：和兩端對齊的按鈕組一樣，按鈕組是在btn-group中添加btn-justified，而導航標簽頁是在nav標簽中添加nav-justified類。

　　　　添加下拉菜單的標簽頁也是很簡單的，只需要把下拉菜單代碼放入li標簽中即可。

5、導航條

　　導航條是在您的應用或網站中作為導航頁頭的響應式基礎組件。它們在移動設備上可以折疊（並且可開可關），且在視口（viewport）寬度增加時逐漸變為水平展開模式。　

　  導航條的可訪問性：

　　務必使用 <nav> 元素，或者，如果使用的是通用的 <div> 元素的話，務必為導航條設置 role="navigation" 屬性，這樣能夠讓使用輔助設備的用戶明確知道這是一個導航區域。

　　導航欄中的默認樣式還是可以的，比較新穎，考慮到的導航欄的長度問題，如果導航欄元素太多，會導致在小尺寸的屏幕上放不下，所以設計了這個效果，挺好！

  　導航欄中的表單，將表單form-group類放置於 .navbar-form 之內可以呈現很好的垂直對齊，並在較窄的視口（viewport）中呈現折疊狀態。個人覺得此時的折疊效果就沒那么必要了。如下。

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

 

　　導航欄中的按鈕，對於不包含在 <form> 中的 <button> 元素，加上 .navbar-btn 后，可以讓它在導航條里垂直居中。

　　導航欄中的文本，把文本包裹在 .navbar-text中時，為了有正確的行距和顏色，通常使用 <p> 標簽；

　　導航欄中的組件排列，通過添加 .navbar-left 和 .navbar-right 工具類讓導航鏈接、表單、按鈕或文本對齊。兩個類都會通過 CSS 設置特定方向的浮動樣式。

　　把導航欄固定在頂部，添加 .navbar-fixed-top 類可以讓導航條固定在頂部，還可包含一個 .container 或 .container-fluid 容器，從而讓導航條居中，並在兩側添加內補（padding）。不過此時必須為body元素設定padding-top，一般為50px。

　　把導航欄靜止在頂部，添加.navbar-static-top 類即可創建一個與頁面等寬度的導航條，它會隨着頁面向下滾動而消失。還可以包含一個.container 或 .container-fluid 容器，用於將導航條居中對齊並在兩側添加內補（padding）。這和不設有什么區別呢？似乎也沒什么區別。

　　反色的導航條：通過添加 .navbar-inverse 類可以改變導航條的外觀顏色。

 

6、路徑導航

　　在一個帶有層次的導航結構中標明當前頁面的位置。在ul或者ol中添加類名breadcrumb即可。各路徑間的分隔符已經自動通過 CSS 的 :before 和 content 屬性添加了。

 

7、分頁

　　默認分類：只需在父集標簽上加上pagination類即可。大小可由pagination，pagination-sm，pagination-lg控制。

 

 

<nav>
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

 

　　默認翻頁，默認居中，形狀為橢圓形。只需在ul上加上page類即可。

　　

8、警告框

　　警告框沒有默認類，只有基類和修飾類。默認的灰色警告框並沒有多少意義。所以您要使用一種有意義的警告類。目前提供了成功、消息、警告或危險。

 

　　可關閉的警告框，需要給警告框添加一個可選的 .alert-dismissible 類和一個關閉按鈕。並在給 <button> 元素添加 data-dismiss="alert" 屬性。

　　

9、進度條

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

　　分三類：

　　1、默認效果； 2、條紋效果，只需在progress-bar類中添加progress-bar-striped類即可。IE9 及更低版本的瀏覽器不支持。 3、動畫效果，在需在為.progress-bar-striped 添加 .active 類，使其呈現出由右向左運動的動畫效果。IE9 及更低版本的瀏覽器不支持。

 

10、列表組

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

11、面板

　　默認的 .panel 組件所做的只是設置基本的邊框（border）和內補（padding）來包含內容。

　　帶標題的面板

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

　　帶表格的面板

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

　　帶列組表的面板　

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

12、具有響應式的嵌入內容

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>