mit tip erro context ups highlight tac esc boot

一 bootstrap的介紹

　Bootstrap是將html，css和js的代碼打包好了，只管我們拿來調用。是基於jquery開發的。

　使用BootCDN提供的免費CDN加速服務，同時支持http和https協議。CDN是一種前端的優化方式。

　jquery的代碼放在body標簽裏面的最下面。

二 全局css樣式

　 全局css樣式是為了確保分辨率的樣式，需要在head標簽中加上viewport元數據標簽

<meta name="viewport" content="width=device-width, initial-scale=1">

　在移動設備的瀏覽器上面，為了通過視口設置meta標簽的屬性為user-sccalable=no可以進制縮放的功能，只需要用戶滾動屏幕就可以就可以查看原生網頁的內容。註意，這個方式並不推薦所有網站使用，根據自己需求而定。

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

　柵格系統：將一個網頁頁面分為行（row）和列（column）；寫的內容應該放在列裏面，並且只有列能作為行的直接元素。

　列的格式：div.col-xx-數字。

　　xx代表的時屏幕的大小：

　　　lg：大屏幕，大桌面屏幕顯示的大小

　　　md：中屏幕，桌面屏幕顯示的大小

　　　xs：小屏幕，也就是手機屏幕的大小

　　　sm：小屏幕，也就是平板屏幕的大小

　　數字只有1-12，指定列，也就是說在一行中最多只有12列。

　柵格的參數：

	超小屏幕 手機 (<768px)	小屏幕 平板 (≥768px)	中等屏幕 桌面顯示器 (≥992px)	大屏幕 大桌面顯示器 (≥1200px)
柵格系統行為	總是水平排列	開始是堆疊在一起的，當大於這些閾值時將變為水平排列C
.container 最大寬度	None （自動）	750px	970px	1170px
類前綴	.col-xs-	.col-sm-	.col-md-	.col-lg-
列（column）數	12
最大列（column）寬	自動	~62px	~81px	~97px
槽（gutter）寬	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

　我們偶爾會在媒體查詢代碼中包含max-width從而將css的影響限制更小範圍屏幕大小內　　

　　@media ：媒體；screen：顯示器；max-width：最大寬度。

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

列是支持嵌套的。

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

　流式布局容器：將最外面的布局元素.container修改為.container-fluid，就可以將固定格局寬度改為 100%的寬度。

<div class="container-fluid">
  <div class="row">
    ...
  </div>

　clearfix：清除開始的樣式，另起一行。

<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn‘t match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

　聯合使用過.clearfix和響應式工具類

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

　列排序：push：推；pull：拉

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

　.col-xx-offset-數字：列偏移。

<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>

三 排版

　標題：在html中hn系列的標簽均可使用在標題中。另外還提供了hn系列的類。為了是給內聯標簽（inline）屬性文本給予標題的樣式

//hn標簽
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>


//hn類
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

　lead屬性值：字體變大變粗，可以讓段落突出顯示。

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

　mark標簽：高亮顯示

<mark>highlight</mark>

　del標簽：刪除標簽和s標簽：無用標簽

//del標簽
<del>This line of text is meant to be treated as deleted text.</del>


//s標簽
<s>This line of text is meant to be treated as no longer accurate.</s>

　ins標簽：插入標簽，表示的吧一種狀態

<ins>This line of text is meant to be treated as an addition to the document.</ins>

　u標簽：帶下劃線的標簽

<u>This line of text will render as underlined</u>

　small標簽：變灰變大

<small>This line of text is meant to be treated as fine print.</small>

　strong標簽：變量加粗

<strong>rendered as bold text</strong>

　em標簽：斜體

<em>rendered as italicized text</em>

　文本的一些屬性值的方法 ：

　　文本對齊：text前綴

　　　　-left：左對齊

　　　　-center：中對齊

　　　　-right：右對齊

　　　　還有-justify和-nowrapt

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

　　文本大小寫：text前綴

　　　　-lowercased：文本變小寫

　　　　-uppercased：文本變大寫

　　　　-capitalize：首字母大寫

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

　addr下的title：顯示縮略語

<abbr title="attribute">attr</abbr>

　首字母縮略語：為縮略語加上.initialism類，可以然讓字體變得稍微小些

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

　address：地址鏈接標簽

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

　blockquote：引用；footer標簽：標明引用的來源；blockquote-reverse屬性值：右邊加上一個橫線

<blockquote class="blockquote-reverse">
  <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>

　列表標簽：ul；ol

　　內聯列表：通過設置display：inline-block；將所有元素放在一行。

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

　kbd標簽：鍵盤輸入

<kbd>cd</kbd> followed by the name of the directory.<br>

　pre標簽：代碼塊

<pre><p>Sample text here...</p></pre>

　var標簽：變量

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

　samp標簽：輸出

<samp>This text is meant to be treated as sample output from a computer program.</samp>

四 表格標簽

　table標簽：表格標簽

　　table類可以為其於基本的樣式，少量的內補padding和水平方向的分割線。

<table class="table">
  ...
</table>

　條紋狀表格：通過table-striped類可以給tbody標簽之內每一行標簽增加班馬條紋樣式

<table class="table table-striped">
  ...
</table>

　　條紋狀表格是依賴於：nth-child css選擇器實現的。而這一功能不被Lnternet Explorer 8 支持。

　帶邊框的表格：添加table-bordered類為其表格和其中的單元格增加邊框

<table class="table table-bordered">
  ...
</table>

　鼠標懸停 ：添加table-hover類剋以讓鼠標懸停的那一欄做出響應是的狀態。

<table class="table table-hover">
  ...
</table>

　緊縮表格：添加table-condensed類可以讓表格更加的緊湊。單元格的內補padding均會減半。

<table class="table table-condensed">
  ...
</table>

　狀態類：通過如下的狀態類可以為行或者單元格設置顏色。

Class	描述
.active	鼠標懸停在行或單元格上時所設置的顏色
.success	標識成功或積極的動作
.info	標識普通的提示信息或動作
.warning	標識警告或需要用戶註意
.danger	標識危險或潛在的帶來負面影響的動作

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

　響應式表格：將任何table元素包含在table-responsive元素內，即可創建響應式表格。在小屏幕上顯示水平滾動條，在大屏幕上就會消失水平滾動條。

　　垂直方向的內截斷：使用了overeflow-y：hidden屬性，就可以將超出表格頂部和底部的內容截斷。特別是可以截斷下拉菜單呵呵第三方組件。

　　Firefox和fieldset元素：Firefox瀏覽器時對fieldset元素設置了一些影響width屬性的樣式，導致響應式表格出現了問題。可以使用以下方法針對Firefor的hack代碼解決，但是以下代碼並沒有集成在Bootstrap中：

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

　更多信息參考：this Stack Overflow answer.

實例：

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

五 表單

　　單獨的表單會賦予一些全局格式。所有設置了form-control類的元素寬度默認為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級別的控件。

　　width：auto：設置寬度，內容的寬度。

　　label標簽：

　　　sr-only：隱藏；aria-label，aria-labelledby和title屬性：輔助技術為label提供的替代方案，如果這些屬性不存在，屏幕閱讀器會使用placeholder屬性。如果存在，就會使用占位符代替其他的標記。

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

　水平排列的表單：通過表單添加form-horizontal類，並且聯合使用Bootstrap預置的柵格類，可以將label標簽和控件水平布局。這樣會改變form-group的行為。就無法添加row類了。

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

　輸入框：包含大部分的表單控件，文本輸入域控件，還支持所有HTML類型的輸入控件：text，password，datetime，datetime-local,date，month，time，week，number，email，url，search，tel和color。

　文本域：支持多行文本域，可根據需要改變rows屬性 。

<textarea class="form-control" rows="3"></textarea>

　多選和單選框：多選框：checkbox，同時可以選取一個或多個；單選框：radio，同時只能選取一個。

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that—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—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類可以將多選框和單選框放在一行顯示。

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

　不帶文本的多選框和單選框：目前只適用於非內聯的單選和多選框。使用輔助技術提供的aria-label屬性

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

　下拉列表：select標簽

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

　多顯示下拉列表：在select表情類加上multiple屬性

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

　靜態控件：將需要的表單中的純文本和label元素放在同一行，只需要為p標簽元素加上form-control-static類即可。

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

　焦點狀態：將某些表單控件默認的outline樣式移除，然後對：focus狀態賦予box-shadow屬性。

　禁用狀態：為輸入框設置disabled熟悉就可以禁用了。

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

　如果為fieldset標簽設置disabled屬性，就會將其下面的元素全部禁用狀態。

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can‘t check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

　只讀狀態：如果為輸入框設置readonly就會使用戶只能讀取文本，本能修改或寫入。

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

　校驗狀態：使用時添加has-warking，has-error或has-success類到這些控件的父元素即可。任何包含此元素的control-label，form-control或help-block元素都會有這些狀態樣式。

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

　添加額外的圖標：為相應的元素加上has-feedback類即可。

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

　可選圖標與設置sr-only類的label元素：可以使用sr-only類來隱藏表單控件label，一旦被添加，Bootstrap會自動調整圖標的位置。

<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

　控制尺寸：通過input-lg類似的類來為控件設置高度，通過col-lg-*類似的類來設置寬度。

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

　水平排列的表單組的尺寸：通過添加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>

　調整列的尺寸：使用柵格系統中的列為其設置寬度

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

六 按鈕

　則作為按鈕的元素和標簽：a，button，input添加按鈕類（button class）既可使用Bootstrap提供的樣式。

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

　預訂樣式：前綴btn

　　Default：默認樣式；Primary：藍色；Success：綠色；info：淺藍色；Warning：橙色；Danger：紅色；Link：白色

<!-- Standard button -->
<button type="button" class="btn btn-default">（默認樣式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首選項）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危險）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（鏈接）Link</button>

　設置尺寸：前綴btn

　　lg：大按鈕；sm：小按鈕；xs：超小按鈕

<p>
  <button type="button" class="btn btn-primary btn-lg">（大按鈕）Large button</button>
  <button type="button" class="btn btn-default btn-lg">（大按鈕）Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">（默認尺寸）Default button</button>
  <button type="button" class="btn btn-default">（默認尺寸）Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">（小按鈕）Small button</button>
  <button type="button" class="btn btn-default btn-sm">（小按鈕）Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>

　塊級按鈕：btn-block類可以將按鈕拉伸與100%。

<button type="button" class="btn btn-primary btn-lg btn-block">（塊級元素）Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">（塊級元素）Block level button</button>

　激活狀態：將按鈕點擊時，顏色會有一些變化。button標簽和a標簽是通過：active實現的。還可以將active應用到button上（包含aria-pressed="true"屬性）。並使用編程方式使其處於記過狀態。

　　button元素：由於：active是偽狀態，因此無需額外添加，為了讓其顯示同樣外觀時就可以添加active類。

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

　　連接a標簽元素：可以基於啊、標簽創建的按鈕添加active類。

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

　禁用狀態：可以使用opacity屬性就可以實現無法點擊。

//button標簽
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>


//a標簽
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

　七 圖片

　響應式圖片：為圖片添加img-responsive類就可以支持響應式布局。

　　要讓圖片居中，使用center-block類即可。

<img src="..." class="img-responsive" alt="Responsive image">

　圖片形狀：

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

八 輔助類

　情境文本顏色：

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

　背景顏色：

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

九 其他操作

　關閉按鈕：

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

　三角符號：

<span class="caret"></span>

　快速浮動：

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

　內容居中：

<div class="center-block">...</div>

　清除浮動：通過父類添加clearfix類就會很容易的清除浮動了。

<div class="clearfix">...</div>

　顯示和隱藏內容：show和hidden類就可以強制內容顯示和隱藏

<div class="show">...</div>
<div class="hidden">...</div>

　屏幕閱讀器和鍵盤導航：sr-only類可以對屏幕閱讀器以外的內容隱藏。sr-only和sr-only-focusable聯合使用就可以在元素有焦點時顯示出來。

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

　圖片替換：text-hide類可以將對應的文本內容替換成一張背景圖片

<h1 class="text-hide">Custom heading</h1>

十 響應式工具

　可用的類：

	超小屏幕 手機 (<768px)	小屏幕 平板 (≥768px)	中等屏幕 桌面 (≥992px)	大屏幕 桌面 (≥1200px)
.visible-xs-*	可見	隱藏	隱藏	隱藏
.visible-sm-*	隱藏	可見	隱藏	隱藏
.visible-md-*	隱藏	隱藏	可見	隱藏
.visible-lg-*	隱藏	隱藏	隱藏	可見
.hidden-xs	隱藏	可見	可見	可見
.hidden-sm	可見	隱藏	可見	可見
.hidden-md	可見	可見	隱藏	可見
.hidden-lg	可見	可見	可見	隱藏

　打印類：

class	瀏覽器	打印機
.visible-print-block .visible-print-inline .visible-print-inline-block	隱藏	可見
.hidden-print	可見	隱藏

	超小屏幕 手機 (<768px)	小屏幕 平板 (≥768px)	中等屏幕 桌面顯示器 (≥992px)	大屏幕 大桌面顯示器 (≥1200px)
柵格系統行為	總是水平排列	開始是堆疊在一起的，當大於這些閾值時將變為水平排列C
.container 最大寬度	None （自動）	750px	970px	1170px
類前綴	.col-xs-	.col-sm-	.col-md-	.col-lg-
列（column）數	12
最大列（column）寬	自動	~62px	~81px	~97px
槽（gutter）寬	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

本片博客詳情：http://v3.bootcss.com/getting-started/

　　　　　　　http://v3.bootcss.com/css/

重修課程day54（bootstrap之css樣式）