基于Bootstrap查找資料及總結的內容-有解無憂

Bootstrap

什么是Bootstrap

Bootstrap是一個用于快速開發web應用程式和網站的前端框架，是基于HTML、CSS、JavaScript的，
是由Twitter的 Mark Otto 和 Jacob Thornton 開發的，于2011年發布，

為什么要學習使用Bootstrap??

移動設備優先；
瀏覽器支持(所有主流瀏覽器)；
容易上手；
回應式設計；

下載使用Bootstrap

下載地址： http://getbootstrap.com/
使用方式：把包檔案的特定位置鏈入HTML代碼頭就行了
其他一些效果插件于百度搜索或者官網下載，然后鏈入HTML代碼頭即可；

頭部設定

為了確保適當的繪制和觸屏縮放，需要在 <head> 之中添加 viewport 元資料標簽，

user-scalable=no 可以禁用其縮放（zooming）功能，

<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1,user-scalable=no">

布局容器

.container類用于固定寬度并支持回應式布局的容器

.container-fluid類用于100%寬度，占據全部視口(viewport)的容器

<div class="container">
    <div class="container-fluid">

    </div>
</div>

柵格系統

Bootstrap提供了一套回應式、移動設備優先的流式柵格系統，隨著螢屏視口尺寸的增加，系統會自動分為最多12列，
柵格系統用于通過一系列的行(row)和列(column)的組合來創建頁面布局，只需把內容放置盒子中即可，

柵格引數(多種設備上的資料)

	超小螢屏（手機)	小螢屏(平板)	中等螢屏(桌面顯示幕)	超大螢屏(大桌面顯示幕)
柵格系統行為	總是水平排列
類前綴	.col-xs-	.col-sm-	.col-md-	.col-lg-
可偏移	是	是	是	是

在某些閾值時，某些列可能會出現比別的列高的情況時，使用**.clearfix**和回應式工具，
```
<div class="clearfix visible-xs-block">
    
</div>
```

列偏移

使用**.col-xs-offset-***類可以將列向右側偏移，

嵌套列

為了使用內置的柵格系統將內容再次嵌套，可以通過添加一個新的**.row** 和一系列**.col-xs-***放進已經保存的.col-sm-*元素內，

列排序

通過使用**.col-md-push-*** 和 .col-md-pull-* 類就可以很容易的改變列（column）的順序，

媒體查詢

在柵格系統中，我們在less檔案中使用一下媒體查詢(media query）來創建關鍵的分界點閾值，
我們偶爾也會在媒體查詢代碼中包含 max-width 從而將 CSS 的影響限制在更小范圍的螢屏大小之內，

@media (max-width:@screen-xs-max){}
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

排版格式

標題

HTML 中的所有標題標簽，<h1> 到 <h6> 均可使用，另外，還提供了 .h1 到 .h6 類，為的是給行內（inline）屬性的文本賦予標題的樣式，
在標題內還可以包含 <small> 標簽或賦予 .small 類的元素，可以用來標記副標題，
```
<h4>
    你好，Bootstrap<small>我是機器人</small>
</h4>
```

中心內容

添加 .lead 類可以讓段落突出顯示，

<p class="lead">
   
</p>

行內文本元素

設定<mark>標簽可以使物件有背景顏色突出，
```
你好，我叫<mark>Bootstrap</mark>
```

被洗掉的文本

對于想洗掉的文本使用<del>標簽，

<del>這段話需要進行洗掉操作，</del>

無用文本

對于無用的文本使用<s>標簽，

<s>這段文字無用，劃掉就行，</s>

插入文本

額外插入的文本使用<ins>標簽，

<ins>這是一段插入文本內容，</ins>

帶下劃線的文本

為文本添加下劃線，使用<u>標簽，

<u>這是一段帶下劃線的文字，</u>

小號文本

使用<small>標簽設定文本，

著重

使用<strong>標簽加重文本樣式，

斜體

使用em標簽設定斜體，

對齊

使用對齊類，可以使文字重新對齊，
text-left類、text-right類、text-center類、text-justify類、text-nowrap類(左、右、居中、左、左)

改變大小寫

通過這幾個類改變文本的大小寫，
text-lowercase類、text-uppercase類、text-capitalize類(小寫、大寫、第一個字母大寫)

縮略語

基本縮略語
使用<abbr>元素，
```
<abbr title="attribute">attr</abbr>
```

首字母縮略語

為縮略語添加 .initialism 類，可以讓 font-size 變得稍微小些，
```
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
```

地址

使用<address>標簽，

<address>
  <strong>Wj.</strong><br>
  1355 Market Street, Suite 900
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

默認樣式的參考

blockquote標簽，

<blockquote>
  <p>Life is love.</p>
</blockquote>

多種參考樣式

添加 <footer> 用于標明參考來源，來源的名稱可以包裹進 <cite>標簽中，

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

通過賦予 .blockquote-reverse 類可以讓參考呈現內容右對齊的效果，

無序串列

<ul>
    <li></li>
</ul>

有序串列

<ol>
    <li></li>
</ol>

行內串列

通過設定 display: inline-block; 并添加少量的內補（padding），將所有元素放置于同一行，

<ul class="list-inline">
  <li></li>
</ul>

水平串列的描述

.dl-horizontal 可以讓 <dl> 內的短語及其描述排在一行，開始是像 <dl> 的默認樣式堆疊在一起，隨著導航條逐漸展開而排列在一行，
```
<dl class="dl-horizontal">
  <dt></dt>
  <dd></dd>
</dl>
```

表格

原始表格類

為任意 <table> 標簽添加 .table 類可以為其賦予基本的樣式 — 少量的內補（padding）和水平方向的分隔線，
```
<table class="table">
    
</div>
```

條紋狀表格

通過 .table-striped 類可以給 <tbody> 之內的每一行增加斑馬條紋樣式，
```
<table class="table table-striped">
    
</div>
```

帶邊框的表格

添加 .table-bordered 類為表格和其中的每個單元格增加邊框，
```
<table class="table table-bordered">
    
</div>
```

滑鼠懸停

通過添加 .table-hover 類可以讓 <tbody> 中的每一行對滑鼠懸停狀態作出回應，
```
<table class="table table-hover">
    
</div>
```

緊縮表格

通過添加 .table-condensed 類可以讓表格更加緊湊，單元格中的內補（padding）均會減半，
```
<table class="table table-condensed">
    
</div>
```

狀態類

通過這些狀態類可以為行或單元格設定顏色，

Class	描述
.active	滑鼠懸停在行或單元格上時所設定的顏色
.success	標識成功或積極的動作
.info	標識普通的提示資訊或動作
.warning	標識警告或需要用戶注意
.danger	標識危隙訓潛在大帶來負面影響的動作

回應式表格

將任何 .table 元素包裹在 .table-responsive 元素內，即可創建回應式表格，其會在小螢屏設備上（小于768px）水平滾動，當螢屏大于 768px 寬度時，水平滾動條消失，
```
<div class="table-responsvie">
    <table class="table">
        
    </table>
</div>
```

表單

基本實體

所有設定了.form-control類的input、textarea、select元素都將默認設定寬度為100%，將label元素和前面的元素放在form-group中可以獲得最好的排列，

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

行內表單

為form添加.form-inline類可以使其內容左對齊并且表現為inline-block級別的組件，只適用于視窗在768px寬度時(太小會被折疊)，
一定要添加label標簽，

使用 class .sr-only，可以隱藏行內表單的標簽，

//此頁面顯示效果為全部表單在同一行然后居左，
<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

水平排列的表單

為form添加.form-horizontal類，

<form class="form-horizontal">
    
</form>

被支持的控制元件

與html5差不多，基本都能實作效果，

文本域

支持多行文本的表單控制元件，可根據需要改變rows屬性，
```
<textarea class="form-control" rows="3"></textarea>
```

多選和單選框

多選框（checkbox）用于選擇串列中的一個或多個選項，而單選框（radio）用于從多個選項中只選擇一個，

//正方形選擇樣式
<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

//圓形選擇樣式
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

行內單選和多選框

通過將 .checkbox-inline 或 .radio-inline 類應用到一系列的多選框（checkbox）或單選框（radio）控制元件上，可以使這些控制元件排列在一行，

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

下拉選單

select

注意，很多原生選擇選單 - 即在 Safari 和 Chrome 中 - 的圓角是無法通過修改 border-radius 屬性來改變的，

<select class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>

//標記multiple屬性的select控制元件來說，默認顯示多選項
<select multiple class="form-control">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>

靜態控制元件

如果需要在表單中將一行純文本和label元素放置于同一行，為
元素添加.form-control-static類即可，

水平排列的表單組的尺寸

通過添加.form-group-lg 或 .form-group-sm類，為 .form-horizontal 包裹的 label 元素和表單控制元件快速設定尺寸，

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

調整列(column)尺寸

用柵格系統中的列(column)包裹輸入框或其任何父元素，都可以很容易設定其寬度，

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

按鈕

預定義樣式

使用下面的類可以快速創建一個帶有預定義樣式的按鈕，
默認樣式： btn-default 首選項：btn-primary 成功：btn-success 一般資訊：btn-info 警告： btn-warning 危險：btn-danger 鏈接：btn-link

尺寸

使用 .btn-lg、.btn-sm 或 .btn-xs 就可以獲得不同尺寸的按鈕，

<p>
    <button type="button" class="btn btn-dafault btn-lg">1</button>
    <button type="button" class="btn btn-primary btn-sm">2</button>
</p>

通過給按鈕添加.btn-block類可以將其拉伸至父元素100%的寬度，而且按鈕也變成了塊級(block)元素，
為 <button> 元素添加 disabled 屬性，使其表現出禁用狀態，

輔助類

關閉按鈕

通過使用一個象征關閉的圖示，可以讓模態框和警告框消失，

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

三角符號

通過使用三角符號可以指示某個元素具有下拉選單的功能，
注意，向上彈出式選單中的三角符號是反方向的，
```
<span class="caret"></span>
```

快速浮動

通過添加一個類，可以將任意元素向左或向右浮動，!important 被用來明確 CSS 樣式的優先級，

導航條中，使用.navbar-left 或 .navbar-right ，

<div class="pull-left">...</div>
<div class="pull-right">...</div>

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

內容居中

為任意元素設定 display: block 屬性并通過 margin 屬性讓其中的內容居中，
```
<div class="center-block">
    
</div>
```

清除浮動

通過為父元素添加 .clearfix 類可以很容易地清除浮動（float），
```
<div class="clearfix">...</div>
```

下拉選單

用于顯示鏈接串列的可切換、有背景關系的選單，

實體

將下拉選單觸發器和下拉選單都包裹在 .dropdown 里，

.dropdown-menu類設定下拉選單串列，

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

通過為下拉選單的父元素設定 .dropup 類，可以讓選單向上彈出（默認是向下彈出的），

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

對齊方式

默認情況下，下拉選單會自動沿著父元素的上沿和左側被定位為100%寬度；
為.dropdown-menu 添加 .dropdown-menu-right/.dropdown-menu-left 類可以讓其下拉選單右對齊或左對齊；
```
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>
```

標題

在任何下拉選單中均可通過添加標題來標明一組動作，

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

分割線

為下拉選單添加一條分割線，用于將多個鏈接分組，

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

禁用的選單項

為下拉選單中的 <li> 元素添加 .disabled 類，從而禁用相應的選單項，

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

按鈕組

通過按鈕組容器把一組按鈕放在同一行里，
為了向使用輔助技術的用戶傳達正確的按鈕分組，需要提供一個合適的role屬性，
對于按鈕組合，應該是role="group";
對于toolbar(工具列)，應該是role="toolbar";
按鈕組和工具列應給定一個明確的label標簽，盡管設定了正確的 role 屬性，但是大多數輔助技術將不會正確的識讀他們，在這里提供的實體中，我們使用 aria-label，但是， aria-labelledby 也可以使用；
例如：aria-label=“用戶名”

基本實體

按鈕組合用.btn-group類設定；

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

按鈕工具列

把一組 <div class="btn-group"> 組合進一個 <div class="btn-toolbar"> 中就可以做成更復雜的組件，

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

尺寸

只要給 .btn-group 加上 .btn-group-* 類，就省去為按鈕組中的每個按鈕都賦予尺寸類了，如果包含了多個按鈕組時也適用，

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

嵌套

想要把下拉選單混合到一系列按鈕中，只須把 .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-vertical類

<div class="btn-group-vertical" role="group" aria-label="...">

</div>

兩端對齊排列的按鈕組

讓一組按鈕拉長為相同的尺寸，填滿父元素的寬度；
Internet Explorer 8 不支持在兩端對齊的按鈕組中繪制邊框，無論是 <a> 或 <button> 元素，為了照顧 IE8，把每個按鈕放入另一個 .btn-group 中即可，
**關于元素，**只須將一系列 .btn 元素包裹到 .btn-group .btn-group-justified 中即可，
```
<div class="btn-group btn-group-justified" role="group" aria-label="">

</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-group中，然后加入適當的選單標簽，就可以讓按鈕作為選單的觸發器了

單按鈕下拉選單

點擊一個按鈕出現下拉選單內容

<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" role="menu">
		<li><a href="#">功能</a></li>
		<li><a href="#">另一個功能</a></li>
		<li><a href="#">其他</a></li>
		<li class="divider"></li>
		<li><a href="#">分離的鏈接</a></li>
	</ul>
</div>

分割式按鈕下拉選單

中間設定分割線

分割按鈕的左邊是原始的功能，右邊是顯示下拉選單的切換，

<div class="btn-group">
	<button type="button" class="btn btn-default">默認</button>
	<button type="button" class="btn btn-default dropdown-toggle" 
			data-toggle="dropdown">
		<span class="caret"></span>
		<span class="sr-only">切換下拉選單</span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li><a href="#">功能</a></li>
		<li><a href="#">另一個功能</a></li>
		<li><a href="#">其他</a></li>
		<li class="divider"></li>
		<li><a href="#">分離的鏈接</a></li>
	</ul>
</div>

按鈕式下拉選單的尺寸

使用帶有各種大小按鈕的下拉選單：.btn-lg、.btn-sm 或 .btn-xs，

向上彈出式選單

給父元素添加.dropup 類即可

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

輸入框組

通過在文本輸入框 <input> 前面、后面或是兩邊加上文字或按鈕，可以實作對表單控制元件的擴展；
為 .input-group 賦予 .input-group-addon 或 .input-group-btn 類，可以給 .form-control 的前面或后面添加額外的元素；
不支持

和元素；
我們不支持在輸入框的單獨一側添加多個額外元素（.input-group-addon 或 .input-group-btn）；

我們不支持在單個輸入框組中添加多個表單控制元件，

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

輸入框組的大小設定

通過向 .input-group 添加相對表單大小的 class（比如 .input-group-lg、input-group-sm）來改變輸入框組的大小，輸入框中的內容會自動調整大小，

多選框和單選框

可以將多選框或單選框作為額外元素添加到輸入框組中，

<div class="row">
	<div class="col-lg-6">
	<div class="input-group">
		<span class="input-group-addon">
			<input type="checkbox">
		</span>
		<input type="text" class="form-control">
	</div><!-- /input-group -->
    </div><!-- /.col-lg-6 -->
</div>

額外元素的按鈕插件

當需要在輸入框添加一層嵌套時，用 .input-group-btn 類來包裹按鈕元素；

<div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->

額外元素按鈕式下拉選單

在輸入框組中添加帶有下拉選單的按鈕，只需要簡單地在一個 .input-group-btn class 中包裹按鈕和下拉選單即可

額外元素分裂式按鈕下拉選單

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

添加各類樣式內容按鈕

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

bt中的導航組件都依賴同一個類 .nav ,狀態類也是共用的；
標簽頁上使用導航需要依賴javascript標簽頁插件，另外還需添加role和ARIA屬性；
如果你在使用導航組件實作導航條功能，務必在 <ul> 的最外側的邏輯父元素上添加 role="navigation" 屬性，或者用一個 <nav> 元素包裹整個導航組件；
不要將 role 屬性添加到 <ul> 上，因為這樣可以被輔助設備（殘疾人用的）上被識別為一個真正的串列，

標簽頁

在class中添加.nav-tabs類；

<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-pills類即可；

<ul class="nav nav-pills">
  <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-stacked類即可；

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

兩端對齊的標簽頁

在大于 768px 的螢屏上，通過 .nav-justified 類可以很容易的讓標簽頁或膠囊式標簽呈現出同等寬度；

在小螢屏上，導航鏈接呈現堆疊樣式，

<ul class="nav nav-tabs nav-justified">

</ul>
<ul class="nav nav-pills nav-justified">

</ul>

禁用的鏈接

對任何導航組件（標簽頁、膠囊式標簽頁），都可以添加 .disabled 類，從而實作鏈接為灰色且沒有滑鼠懸停效果，
```
<ul class="nav nav-pills">

  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>

</ul>
```

帶下拉選單的標簽頁

以一個帶有 class .nav 的無序串列開始；
添加 class .nav-tabs；

添加帶有 .dropdown-menu class 的無序串列，

<p>帶有下拉選單的標簽</p>
<ul class="nav nav-tabs">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">Windows</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">Google</a></li>
	<li class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown" href="#">
			Java <span class="caret"></span>
		</a>
		<ul class="dropdown-menu">
			<li><a href="#">Swing</a></li>
			<li><a href="#">jMeter</a></li>
			<li><a href="#">EJB</a></li>
			<li class="divider"></li>
			<li><a href="#">分離的鏈接</a></li>
		</ul>
	</li>
	<li><a href="#">PHP</a></li>
</ul>

帶膠囊式下拉選單標簽頁

步驟與創建帶有下拉選單的標簽相同，只是需要把 .nav-tabs class 改為 .nav-pills

<p>帶有下拉選單的膠囊</p>
<ul class="nav nav-pills">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">Windows</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">Google</a></li>
	<li class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown" href="#">
			Java <span class="caret"></span>
		</a>
		<ul class="dropdown-menu">
			<li><a href="#">Swing</a></li>
			<li><a href="#">jMeter</a></li>
			<li><a href="#">EJB</a></li>
			<li class="divider"></li>
			<li><a href="#">分離的鏈接</a></li>
		</ul>
	</li>
	<li><a href="#">PHP</a></li>
</ul>

導航欄

導航欄在您的應用或網站中作為導航頁頭的回應式基礎組件；
導航欄在移動設備的視圖中是折疊的，隨著可用視口寬度的增加，導航欄也會水平展開；

默認的導航欄

向
標簽添加 class .navbar、.navbar-default；
向上面的元素添加 role=“navigation”，有助于增加可訪問性；
向
元素添加一個標題 class .navbar-header，內部包含了帶有 class navbar-brand 的元素，這會讓文本看起來更大一號；
為了向導航欄添加鏈接，只需要簡單地添加帶有 class .nav、.navbar-nav 的無序串列即可，

回應式導航欄

為了給導航欄添加回應式特性，您要折疊的內容必須包裹在帶有 class .collapse、.navbar-collapse 的

中；
折疊起來的導航欄實際上是一個帶有 class .navbar-toggle 及兩個 data- 元素的按鈕；
第一個是 data-toggle，用于告訴 JavaScript 需要對按鈕做什么；
第二個是 data-target，指示要切換到哪一個元素；

三個帶有 class .icon-bar 的創建所謂的漢堡按鈕，

<nav class="navbar navbar-default" role="navigation">
	<div class="container-fluid"> 
	<div class="navbar-header">
		<button type="button" class="navbar-toggle" data-toggle="collapse"
				data-target="#example-navbar-collapse">
			<span class="sr-only">切換導航</span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		</button>
		<a class="navbar-brand" href="#">我的網址</a>
	</div>
	<div class="collapse navbar-collapse" id="example-navbar-collapse">
		<ul class="nav navbar-nav">
			<li class="active"><a href="#">iOS</a></li>
			<li><a href="#">Windows</a></li>
			<li class="dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">
					Java <b class="caret"></b>
				</a>
				<ul class="dropdown-menu">
					<li><a href="#">jmeter</a></li>
					<li><a href="#">EJB</a></li>
					<li><a href="#">Jasper Report</a></li>
					<li class="divider"></li>
					<li><a href="#">分離的鏈接</a></li>
					<li class="divider"></li>
					<li><a href="#">另一個分離的鏈接</a></li>
				</ul>
			</li>
		</ul>
	</div>
	</div>
</nav>

品牌圖示

將導航條內放置品牌標志的地方替換為 <img> 元素即可展示自己的品牌圖示，

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

導航欄中的表單

<nav class="navbar navbar-default" role="navigation">
	<div class="container-fluid"> 
	<div class="navbar-header">
		<a class="navbar-brand" href="#">我的網址</a>
	</div>
	<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">提交</button>
	</form>
	</div>
</nav>

導航欄中的按鈕

可以使用 class .navbar-btn 向不在中的元素添加按鈕，按鈕在導航欄上垂直居中，
.navbar-btn 可被使用在和元素上；
不要在 .navbar-nav 內的元素上使用 .navbar-btn，因為它不是標準的button class.

導航欄的文本

如果需要在導航中包含文本字串，請使用 class .navbar-text，這通常與
標簽一起使用，確保適當的前導和顏色，

組件對齊方式

可以使用實用工具 class .navbar-left 或 .navbar-right 向左或向右對齊導航欄中的 導航鏈接、表單、按鈕或文本 這些組件，

<nav class="navbar navbar-default" role="navigation">
	<div class="container-fluid"> 
    <div class="navbar-header">
        <a class="navbar-brand" href="#">我的網址</a>
    </div>
    <div>
        <!--向左對齊-->
        <ul class="nav navbar-nav navbar-left">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分離的鏈接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一個分離的鏈接</a></li>
                </ul>
            </li>
        </ul>
        <form class="navbar-form navbar-left" role="search">
            <button type="submit" class="btn btn-default">
                向左對齊-提交按鈕
            </button>
        </form>
        <p class="navbar-text navbar-left">向左對齊-文本</p>
        <!--向右對齊-->
        <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分離的鏈接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一個分離的鏈接</a></li>
                </ul>
            </li>
        </ul>
        <form class="navbar-form navbar-right" role="search">
            <button type="submit" class="btn btn-default">
                向右對齊-提交按鈕
            </button>
        </form>
        <p class="navbar-text navbar-right">向右對齊-文本</p>
    </div>
	</div>
</nav>

導航欄位置固定

固定在頂部：添加 .navbar-fixed-top 類可以讓導航條固定在頂部，還可包含一個 .container 或 .container-fluid 容器，從而讓導航條居中，并在兩側添加內補（padding）；
固定在底部：添加 .navbar-fixed-bottom 類可以讓導航條固定在底部，并且還可以包含一個 .container 或 .container-fluid 容器，從而讓導航條居中，并在兩側添加內補（padding）；
靜止在頂部：通過添加 .navbar-static-top 類即可創建一個與頁面等寬度的導航條，它會隨著頁面向下滾動而消失，還可以包含一個 .container 或 .container-fluid 容器，用于將導航條居中對齊并在兩側添加內補（padding）；不用給 body 添加任何內補（padding），

反色導航欄

添加 .navbar-inverse 類可以改變導航條的外觀，添加 .navbar-inverse 類可以改變導航條的外觀，

路徑導航(面包屑導航（Breadcrumbs）)

面包屑導航（Breadcrumbs）是一種基于網站層次資訊的顯示方式；
Bootstrap 中的面包屑導航（Breadcrumbs）是一個簡單的帶有 .breadcrumb class 的無序串列；

分隔符會通過 CSS（bootstrap.min.css）中的 class 自動被添加；

<ul class="breadcrumb">
	<li><a href="#">Home</a></li>
	<li><a href="#">2013</a></li>
	<li class="active">十一月</li>
</ul>

分頁

默認分頁

添加 .pagination類；

<nav aria-label="Page navigation">
  <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>

禁用和激活狀態

使用 .disabled 來定義不可點擊的鏈接；

使用 .active 來指示當前的頁面，

<ul class="pagination">
	<li><a href="#">&laquo;</a></li>
	<li class="active"><a href="#">1</a></li>
	<li class="disabled"><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="#">&raquo;</a></li>
</ul>

尺寸

.pagination-lg 或 .pagination-sm 類提供了額外可供選擇的尺寸；

翻頁

默認翻頁

添加.pager類即可；

<ul class="pager">
	<li><a href="#">Previous</a></li>
	<li><a href="#">Next</a></li>
</ul>

對齊的鏈接

使用 class .previous 把鏈接向左對齊；

使用 .next 把鏈接向右對齊，

<ul class="pager">
	<li class="previous"><a href="#">&larr; Older</a></li>
	<li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

翻頁狀態

禁用狀態： .disabled 類；

標簽

標簽可用于計數、提示或頁面上其他的標記顯示；
使用 class .label 來顯示標簽，

如果標簽數量過多，解決的辦法是為每個標簽都設定為 display: inline-block; 屬性，

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

徽章

主要用于突出顯示新的或未讀的項；
如需使用徽章，只需把<span class="badge"></span>添加到指定位置即可，

超大螢屏

顧名思義該組件可以增加標題的大小，并為登陸頁面內容添加更多的外邊距（margin）；
創建一個.jumbotron類；

為了獲得占用全部寬度且不帶圓角的超大螢屏，請在所有的 .container class 外使用 .jumbotron class；

<div class="jumbotron">
	<div class="container">
		<h1>歡迎！</h1>
		<p>這是一個超大螢屏的實體，</p>
		<p><a class="btn btn-primary btn-lg" role="button">
			哈哈</a>
		</p>
	</div>
</div>

頁面標題

當一個網頁中有多個標題且每個標題之間需要添加一定的間距時，頁面標題這個功能就顯得特別有用；

在div中添加.page-header即可；

<div class="page-header">
    <h1>頁面標題實體
        <small>子標題</small>
    </h1>
</div>
<p>這是一個示例文本，這是一個示例文本，這是一個示例文本，這是一個示例文本，這是一個示例文本，</p>

縮略圖

在影像周圍添加帶有 class .thumbnail 的標簽；
這會添加四個像素的內邊距（padding）和一個灰色的邊框；
當滑鼠懸停在影像上時，會影片顯示出影像的輪廓，

添加自定義內容

把帶有 class .thumbnail 的標簽改為容器div；
在該容器div內，您可以添加任何您想要添加的東西，由于這是一個
，我們可以使用默認的基于 span 的命名規則來調整大小；
如果您想要給多個影像進行分組，請把它們放置在一個無序串列中，且每個串列項向左浮動，

警告框

警告框組件通過提供一些靈活的預定義訊息，為常見的用戶動作提供反饋訊息；

添加 .alert類，是必須要設定的；

<div class="alert alert-success">成功！很好地完成了提交，</div>
<div class="alert alert-info">資訊！請注意這個資訊，</div>
<div class="alert alert-warning">警告！請不要提交，</div>
<div class="alert alert-danger">錯誤！請進行一些更改，</div>

可關閉的警告框

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

<div class="alert alert-success alert-dismissable">
	<button type="button" class="close" data-dismiss="alert"
			aria-hidden="true">
		&times;
	</button>
	成功！很好地完成了提交，
</div>

警告框中的鏈接

用 .alert-link 工具類，可以為鏈接設定與當前警告框相符的顏色，

<div class="alert alert-success">
    <a href="#" class="alert-link">成功！很好地完成了提交，</a>
</div>

進度條

添加一個帶有 class .progress 的容器div；
接著，在上面的容器div內，添加一個帶有 class .progress-bar 的空的容器div；

添加一個帶有百分比表示的寬度的 style 屬性，例如 style=“width: 60%”; 表示進度條在 60% 的位置，

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

帶提示的進度條

將設定了 .sr-only 類的 <span> 標簽從進度條組件中移除類，從而讓當前進度顯示出來，

交替進度條

添加一個帶有 class .progress 的容器div；
接著，在上面的
內，添加一個帶有 class .progress-bar 和 class progress-bar-* 的空的
，其中，* 可以是 success、info、warning、danger；
添加一個帶有百分比表示的寬度的 style 屬性，例如 style=“60%”; 表示進度條在 60% 的位置，

條紋進度條

添加一個帶有 class .progress 和 .progress-striped 的容器div；
接著，在上面的容器div內，添加一個帶有 class .progress-bar 和 class progress-bar-* 的空的容器div，其中，* 可以是 success、info、warning、danger；
添加一個帶有百分比表示的寬度的 style 屬性，例如 style=“60%”; 表示進度條在 60% 的位置，

影片效果

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

堆疊效果

把多個進度條放在相同的 .progress 中即可實作堆疊，

多媒體物件

在容器div元素上添加 .media 類來創建一個多媒體物件；
使用 .media-left 類讓多媒體物件(圖片)來實作左對齊，同樣 .media-right 類實作了右對齊；
文本內容放在 class="media-body" 的 div 中，圖片左對齊則放在 class="media-body" 之前，圖片右對齊則放在 class="media-body" 之后；
此外，你還可以使用 .media-heading 類來設定標題；

一個多媒體物件內還可以包含多個多媒體物件，

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="" alt="">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>

  </div>
</div>

串列組

串列組件用于以串列形式呈現復雜的和自定義的內容；
向元素 ul 添加 class .list-group；
向 li 添加 class .list-group-item，

面板（panels）

創建一個基本的面板，只需要向
元素添加 class .panel 和 class .panel-default 即可;

面板標題

使用 .panel-heading class 可以很簡單地向面板添加標題容器；
使用帶有 .panel-title class 的 h1-h6 來添加預定義樣式的標題，

面板腳注

在面板中添加腳注，只需要把按鈕或者副文本放在帶有 class .panel-footer 的容器div中即可；

帶色彩語境的面板

使用語境狀態類 panel-primary、panel-success、panel-info、panel-warning、panel-danger，設定帶語境色彩的面板；

帶表格的面板

為了在面板中創建一個無邊框的表格，我們可以在面板中使用 class .table，
假設有個容器div包含 .panel-body，我們可以向表格的頂部添加額外的邊框用來分隔，如果沒有包含 .panel-body 的
，則組件會無中斷地從面板頭部移動到表格，

帶串列組的面板

在面板盒子中添加 ul 帶有list-group和 li 帶有 list-group-item 即可；

<div class="panel panel-default">
	<div class="panel-heading">面板標題</div>
	<div class="panel-body">
		<p>這是一個基本的面板內容，這是一個基本的面板內容，
			這是一個基本的面板內容，這是一個基本的面板內容，
			這是一個基本的面板內容，這是一個基本的面板內容，
			這是一個基本的面板內容，這是一個基本的面板內容，
		</p>
	</div>
	<ul class="list-group">
		<li class="list-group-item">1</li>
		<li class="list-group-item">2</li>
		<li class="list-group-item">3</li>
		<li class="list-group-item">4</li>
		<li class="list-group-item">5</li>
	</ul>
</div>

Well

Well 是一種會引起內容凹陷顯示或插圖效果的容器 div;
為了創建 Well，只需要簡單地把內容放在帶有 class .well 的容器div 中即可;

尺寸大小

您可以使用可選類 well-lg 或 well-sm 來改變 Well 的尺寸大小；
這兩個類是與 .well 類結合使用的，這兩個類會影響內邊距（padding），根據使用的類，Well 會顯示得更大或者更小，
```
<div class="well well-lg">您好，我在大的 Well 中！</div>
<div class="well well-sm">您好，我在小的 Well 中！</div>
```

模態框（modal.js）

以彈出對話框的形式出現，具有最小和最實用的功能集；
千萬不要在一個模態框上重疊另一個模態框，要想同時支持多個模態框，需要自己寫額外的代碼來實作；

靜態實體

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

動態實體

使用模態視窗，您需要有某種觸發器，您可以使用按鈕或鏈接，這里我們使用的是按鈕；
如果您仔細查看上面的代碼，您會發現在標簽中，data-target="#myModal" 是您想要在頁面上加載的模態框的目標，您可以在頁面上創建多個模態框，然后為每個模態框創建不同的觸發器，現在，很明顯，您不能在同一時間加載多個模塊，但您可以在頁面上創建多個在不同時間進行加載；
.modal，用來把

的內容識別為模態框；
.fade class，當模態框被切換時，它會引起內容淡入淡出；
aria-labelledby=“myModalLabel”，該屬性參考模態框的標題；
屬性 aria-hidden=“true” 用于保持模態視窗不可見，直到觸發器被觸發為止（比如點擊在相關的按鈕上）；
class=“modal-header”，modal-header 是為模態視窗的頭部定義樣式的類；
class=“close”，close 是一個 CSS class，用于為模態視窗的關閉按鈕設定樣式；
data-dismiss=“modal”，是一個自定義的 HTML5 data 屬性，在這里它被用于關閉模態視窗；
class=“modal-body”，是 Bootstrap CSS 的一個 CSS class，用于為模態視窗的主體設定樣式；
class=“modal-footer”，是 Bootstrap CSS 的一個 CSS class，用于為模態視窗的底部設定樣式；
data-toggle=“modal”，HTML5 自定義的 data 屬性 data-toggle 用于打開模態視窗；
模態框提供了可選尺寸，通過為 .modal-dialog 增加一個樣式調整類實作；

如果你不需要模態框彈出時的影片效果（淡入淡出效果），刪掉 .fade 類即可，

<h2>創建模態框（Modal）</h2>
<!-- 按鈕觸發模態框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	開始演示模態框
</button>
<!-- 模態框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					模態框（Modal）標題
				</h4>
			</div>
			<div class="modal-body">
				在這里添加一些文本
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">關閉
				</button>
				<button type="button" class="btn btn-primary">
					提交更改
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>

下拉選單（dropdown.js）

向鏈接或按鈕添加 data-toggle=“dropdown” 來切換下拉選單；
可在標簽頁內也可以在標簽頁外，

<nav class="navbar navbar-default" role="navigation">
	<div class="container-fluid"> 
	<div class="navbar-header">
		<a class="navbar-brand" href="#">我的網址</a>
	</div>
	<div>
		<ul class="nav navbar-nav">
			<li class="active"><a href="#">iOS</a></li>
			<li><a href="#">Windows</a></li>
			<li class="dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">
					Java 
					<b class="caret"></b>
				</a>
				<ul class="dropdown-menu">
					<li><a href="#">jmeter</a></li>
					<li><a href="#">EJB</a></li>
					<li><a href="#">Jasper Report</a></li>
					<li class="divider"></li>
					<li><a href="#">分離的鏈接</a></li>
					<li class="divider"></li>
					<li><a href="#">另一個分離的鏈接</a></li>
				</ul>
			</li>
		</ul>
	</div>
	</div>
</nav>

滾動監聽（Scrollspy.js）

自動更新導航插件，會根據滾動條的位置自動更新對應的導航目標；
隨著您的滾動，基于滾動條的位置向導航欄添加 .active class；

添加監聽元素，data-spy=“scroll”；

<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
	<div class="container-fluid"> 
		<div class="navbar-header">
			<button class="navbar-toggle" type="button" data-toggle="collapse" 
					data-target=".bs-js-navbar-scrollspy">
				<span class="sr-only">切換導航</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">框架介紹</a>
		</div>
		<div class="collapse navbar-collapse bs-js-navbar-scrollspy">
			<ul class="nav navbar-nav">
				<li><a href="#ios">iOS</a></li>
				<li><a href="#svn">Windows</a></li>
				<li class="dropdown">
					<a href="#" id="navbarDrop1" class="dropdown-toggle" 
					   data-toggle="dropdown">Java
						<b class="caret"></b>
					</a>
					<ul class="dropdown-menu" role="menu" 
						aria-labelledby="navbarDrop1">
						<li><a href="#jmeter" tabindex="-1">jmeter</a></li>
						<li><a href="#ejb" tabindex="-1">ejb</a></li>
						<li class="divider"></li>
						<li><a href="#spring" tabindex="-1">spring</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div> 
</nav>
<div data-spy="scroll" data-target="#navbar-example" data-offset="0" 
	 style="height:200px;overflow:auto; position: relative;">
	<h4 id="ios">iOS</h4>
	<p>iOS 是一個由蘋果公司開發和發布的手機作業系統，最初是于 2007 年首次發布 iPhone、iPod Touch 和 Apple 
		TV，
	</p>
	<h4 id="svn">SVN</h4>
	<p>Windows公司是......
	</p>
	<h4 id="jmeter">jMeter</h4>
	<p>jMeter 是一款開源的測驗軟體，它是 100% 純 Java 應用程式，用于負載和性能測驗，
	</p>
	<h4 id="ejb">EJB</h4>
	<p>Enterprise Java Beans（EJB）是一個創建高度可擴展性和強大企業級應用程式的開發架構，部署在兼容應用程式服務器（比如 JBOSS、Web Logic 等）的 J2EE 上，
	</p>
	<h4 id="spring">Spring</h4>
	<p>Spring 框架是一個開源的 Java 平臺，為快速開發功能強大的 Java 應用程式提供了完備的基礎設施支持，
	</p>
	<p>Spring 框架最初是由 Rod Johnson 撰寫的，在 2003 年 6 月首次發布于 Apache 2.0 許可證下，
	</p>
</div>

標簽頁（tab.js）

添加 data-toggle=“tab” 或 data-toggle=“pill” 到錨文本鏈接中；

與前面的 “導航” 相似，

<ul id="myTab" class="nav nav-tabs">
	<li class="active">
		<a href="#home" data-toggle="tab">
			 我的網址
		</a>
	</li>
	<li><a href="#ios" data-toggle="tab">iOS</a></li>
	<li class="dropdown">
		<a href="#" id="myTabDrop1" class="dropdown-toggle" 
		   data-toggle="dropdown">Java 
			<b class="caret"></b>
		</a>
		<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
			<li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
			<li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
		</ul>
	</li>
</ul>
<div id="myTabContent" class="tab-content">
	<div class="tab-pane fade in active" id="home">
		<p>哈哈哈</p>
	</div>
	<div class="tab-pane fade" id="ios">
		<p>iOS 是一個由蘋果公司開發和發布的手機作業系統，最初是于 2007 年首次發布 iPhone、iPod Touch 和 Apple 
			TV，</p>
	</div>
	<div class="tab-pane fade" id="jmeter">
		<p>jMeter 是一款開源的測驗軟體，它是 100% 純 Java 應用程式，用于負載和性能測驗，</p>
	</div>
	<div class="tab-pane fade" id="ejb">
		<p>Enterprise Java Beans（EJB）是一個創建高度可擴展性和強大企業級應用程式的開發架構，部署在兼容應用程式服務器（比如 JBOSS、Web Logic 等）的 J2EE 上，
		</p>
	</div>
</div>

提示工具（Tooltip.js）

提示工具（Tooltip）插件根據需求生成內容和標記，默認情況下是把提示工具（tooltip）放在它們的觸發元素后面；
如需添加一個提示工具（tooltip），只需向一個錨標簽添加 data-toggle=“tooltip” 即可;
提示工具（Tooltip）插件不像之前所討論的下拉選單及其他插件那樣，它不是純 CSS 插件，如需使用該插件，您必須使用 jquery 激活它（讀取 javascript），使用下面的腳本來啟用頁面中的所有的提示工具（tooltip）;
```
<a href="#" data-toggle="tooltip" title="Example tooltip">請懸停在我的上面</a>

<script>
$(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>
```

彈出框（popover.js）

彈出框（Popover）與工具提示（Tooltip）類似，提供了一個擴展的視圖;
如需添加一個彈出框（popover），只需向一個錨/按鈕標簽添加 data-toggle=“popover” 即可;
錨的 title 即為彈出框（popover）的文本，默認情況下，插件把彈出框（popover）設定在頂部;
彈出框（Popover）插件不像之前所討論的下拉選單及其他插件那樣，它不是純 CSS 插件，如需使用該插件，您必須使用 jquery 激活它（讀取 javascript），使用下面的腳本來啟用頁面中的所有的彈出框（popover）;
```
<script>
$(function(){ $("[data-toggle='tooltip']").popover();});
</script>
```

警告框（alert.js）

通過此插件可以為警告資訊添加點擊并消失的功能；
通過資料 API（Data API）添加可取消功能，只需要向關閉按鈕添加 data-dismiss=“alert”，就會自動為警告框添加關閉功能；
```
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>
```

按鈕（button.js）

通過添加 data-loading-text="Loading..." 可以為按鈕設定正在加載的狀態;
如需激活單個按鈕的切換（即改變按鈕的正常狀態為按壓狀態，反之亦然），只需向 button 元素添加 data-toggle=“button” 作為其屬性即可;
創建復選框組，并通過向 btn-group 添加 data 屬性 data-toggle=“buttons” 來添加復選框組的切換;
創建單選按鈕組，并通過向 btn-group 添加 data 屬性 data-toggle=“buttons” 來添加單選按鈕組的切換;

折疊（Collapse.js）

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

向元素添加 data-toggle=“collapse” 和 data-target，自動分配可折疊元素的控制，data-target 屬性接受一個 CSS 選擇器，并會對其應用折疊效果，請確保向可折疊元素添加 class .collapse，如果您希望它默認情況下是打開的，請添加額外的 class .in，

為了向可折疊控制元件添加類似折疊面板的分組管理，請添加 data 屬性 data-parent="#selector"，

<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">
				Hello World！
			</div>
		</div>
	</div>
</div>

輪播（carousel.js）

<div id="myCarousel" class="carousel slide">
	<!-- 輪播（Carousel）指標 -->
	<ol class="carousel-indicators">
		<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
		<li data-target="#myCarousel" data-slide-to="1"></li>
		<li data-target="#myCarousel" data-slide-to="2"></li>
	</ol>   
	<!-- 輪播（Carousel）專案 -->
	<div class="carousel-inner">
		<div class="item active">
			<img src="" alt="First slide">
		</div>
		<div class="item">
			<img src="" alt="Second slide">
		</div>
		<div class="item">
			<img src="" alt="Third slide">
		</div>
	</div>
	<!-- 輪播（Carousel）導航 -->
	<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
		<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
		<span class="sr-only">Previous</span>
	</a>
	<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
		<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
		<span class="sr-only">Next</span>
	</a>
</div>

通過 data 屬性：使用 data 屬性可以很容易控制輪播（Carousel）的位置，

屬性 data-slide 接受關鍵字 prev 或 next，用來改變幻燈片相對于當前位置的位置；
使用 data-slide-to 來向輪播傳遞一個原始滑動索引，data-slide-to=“2” 將把滑塊移動到一個特定的索引，索引從 0 開始計數；
data-ride=“carousel” 屬性用于標記輪播在頁面加載時就開始影片播放；
通過 .item 內的 .carousel-caption 元素向幻燈片添加標題，只需要在該處放置任何可選的 HTML 即可，它會自動對齊并格式化，

附加導航（affix.js）

附加導航（Affix）插件允許指定 div 固定在頁面的某個位置;
一個常見的例子是社交圖示，它們將在某個位置開始，但當頁面點擊某個標記，該 div 會鎖定在某個位置，不會隨著頁面其他部分一起滾動，
通過 data 屬性：如需向元素添加附加導航（Affix）行為，只需要向需要監聽的元素添加 data-spy=“affix” 即可，請使用偏移來定義何時切換元素的鎖定和移動，

表單驗證（BootstrapValidator）

引入插件檔案

<link rel="stylesheet" type="text/css" href=".lib/css/bootstrapValidator.min.css">
<script type="text/javascript" src=".lib/js/bootstrapValidator.min.js"></script>

代碼內容(案例)

<div class="login">
				<form id="form" action="" >
					<h3>Login in</h3>
					<div class="form-group">
						<span class="input-group-addon">
							<span class="glyphicon glyphicon-user"></span>
						</span>
						<input type="text" class="form-control" placeholder="請輸入賬號" name="username">
					</div>
					<div class="form-group">
						<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
						<input type="password" class="form-control" placeholder="請輸入密碼" name="password">
					</div>
					<div class="form-group">
						<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
						<input type="text" id="checkCodeYZM" name="checkCodeYZM" placeholder="驗證碼" class="form-control">
						<div class="code" class="form-control">
							<canvas id="canvas" width="100" height="36"></canvas>
						</div>
					</div>
					<p class="radios">
						<input type="radio" name="power" value="3">輔導員
						<input type="radio" name="power" value="2">教師
						<input type="radio" name="power" value="1">學生
					</p>
					<button type="submit" class="btn btn-info btn-block">登錄</button>
				 
					<p class="lang">
					   <span class="lang-i"><a href="pass.html">注冊新帳號</a></span>
					   <span class="lang-m"><a href="">忘記密碼</a></span>       
					</p>
				</form>
</div>

$(document).ready(function () {
		 
			$('#form').bootstrapValidator({
				message: 'This value is not valid',
					feedbackIcons: {
						valid: 'glyphicon glyphicon-ok',
						invalid: 'glyphicon glyphicon-remove',
						validating: 'glyphicon glyphicon-refresh'
					},
				fields: {
						username: {
							type:'POST',
							url:'',
							message: '用戶名驗證失敗',
							validators: {
								notEmpty: {
									message: '用戶名不能為空'
								},
								stringLength: {
									min: 2,
									max: 10,
									message: '用戶名必須大于2位且不得超過10位字符'
							    },	
						    }
					    },
					password: {
						message: '密碼驗證失敗',
						validators: {
							notEmpty: {
							message: '密碼不能為空'
							},
							stringLength: {
								min: 8,
								max: 20,
								message: '密碼必須大于8位且不得超過20位字符'
							},
							regexp:{
								regexp:/^[a-zA-Z]{1}([a-zA-Z0-9]|[_]){5,19}$/,
								message:'密碼必須以字母開頭'
							}
						}
					},
					checkCodeYZM: {
						message: '驗證碼驗證失敗',
						validators: {
							notEmpty: {
							message: '驗證碼不能為空'
							}
						}
					}
			    }
});

圖示庫(font-awesome)

一套絕佳的圖示字體庫和css框架；

包含了各式各樣的圖示，只需引入即可使用；

<link rel="stylesheet" type="text/css" href=".lib/css/font-awesome.min.css">

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/316654.html

標籤：其他

上一篇：獲取raiseKeyError(key)fromerrKeyError:'fbs'indifferentdataset

下一篇：快速入門JavaScript 第三天