bootstrap 組件

  bootstrap  組件

1下拉菜單（dropdown）

 下拉菜單切換（dropdown-toggle）

 下拉菜單對齊（dropdown-menu-right-右對齊）

下拉菜單分割線（divider）

禁用菜單（disabled）

 

2按鈕組（btn-group）

 按鈕組尺寸（btn-group-lg，btn-group-sm，btn-group-xs）

 嵌套：只須把 .btn-group 放入另外一個 .btn-group 中

 eg:<div class="btn-group">

        <div class="btn-group">

        </div>

     </div>

 垂直排列（btn-group-vertical）

3按鈕式下拉菜單：把任意一個按鈕放入 .btn-group 中，而後加入適當的菜單標籤，就可讓按鈕做爲菜單的觸發器了。

 單按鈕下拉菜單

 

 eg;<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>

 

 分列式按鈕下拉菜單

 eg:<div class="btn-group">

        <button type="button" class="btn btn-danger">Action</button>

      <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>

 按鈕尺寸

（btn-group-lg，btn-group-sm，btn-group-xs）

4 向上彈出式菜單（dropup）

5 輸入框組(input-group):經過在文本輸入框 <input> 前面、後面或是兩邊加上文字或按鈕，能夠實現對錶單控件的擴展

 eg:<div class="input-group">

      <span class="input-group-addon">@</span>

      <input type="text" class="form-control" placeholder="Username">

    </div>

  也可在span的類里加字體圖標

6導航（nav）

 標籤頁：注意 .nav-tabs 類賴.nav 基類

 eg:

     <ul class="nav nav-tabs" role="tablist">

        <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>

 膠囊式標籤頁

  HTML 標記相同，但使用 .nav-pills 類：

  膠囊是標籤頁也是能夠垂直方向堆疊排列的。只需添加 .nav-stacked 類。

7 導航條

  爲了加強可訪問性，務必給每一個導航條加上 role="navigation" 屬性。

  eg:

      <nav class="navbar navbar-default" role="navigation">

        <div class="container-fluid">

          <div class="navbar-header">

            <a class="navbar-brand" href="#">

                <img alt="Brand" src="...">能夠放圖片 標籤

            </a>

        </div>

      </div>

    </nav>

  表單

  將表單放置於 .navbar-form 以內能夠呈現很好的垂直對齊，並  在較窄的視口（viewport）中呈現摺疊狀態。 使用對齊選項能夠  規定其在導航條上出現的位置。

  按鈕

  對於不包含在 <form> 中的 <button> 元素，加上 .navbar-btn   後，可讓它在導航條裏垂直居中。

  文本

  把文本包裹在 .navbar-text中時，爲了有正確的行距和顏色，通   常使用 <p> 標籤。

  固定在頂部

  添加 （.navbar-fixed-top） 類可讓導航條固定在頂部，還可包含  一個 .container 或 .container-fluid 容器，從而讓導航條居 中，並在兩側添加內部（padding）。

 

   固定在底部

   添加 .navbar-fixed-bottom

   靜止在頂部

   經過添加 .navbar-static-top 類便可建立一個與頁面等寬度的    導航條，它會隨着頁面向下滾動而消失

8分頁（pagination）

  翻頁（pager）連接居中對齊   

 兩端對齊(class="previous",class="next"）

  eg;

    <ul class="pager">

        <li class="previous"><a href="#">&larr; Older</a></li>

        <li class="next"><a href="#">Newer &rarr;</a></li>

    </ul>

 9徽章

 

  給連接、導航等元素嵌套 <span class="badge"> 元素，能夠很  醒目的展現新的或未讀的信息條目。

10關閉的警告框

  爲警告框添加一個可選的 .alert-dismissible 類和一個關閉按  鈕。

11 進度條（progress）

   動畫效果

   爲 .progress-bar-striped 添加 .active 類，使其呈現出由右   向左運動的動畫效果。

12 媒體對象(media)

 

這是一個抽象的樣式，用以構建不一樣類型的組件，這些組件都具備在文本內容的左或右側對齊的圖片

13列表組（list-group）給列表組加入徽章組件，它會自動被放在右邊。

  eg:<ul class="list-group">

 

      <li class="list-group-item">Vestibulum at eros</li>

       .

       .

       .

     </ul>

14面板（panel）

  標題的面版(.panel-heading)

  帶腳註的面版

   把按鈕或次要的文本放入 .panel-footer 容器內。注意面版的   腳註不會從情境效果中繼承顏色，由於他們並非主要內容。

  帶表格的面版

  爲面板中不須要邊框的表格添加 .table 類，是整個面板看上去更   像是一個總體設計。若是是帶有 .panel-body 的面板，咱們爲表   格的上方添加一個邊框，看上去有分隔效果。