1、bootstrap 排版

全局樣式style.css：

1、移除body的margin聲明

2、設置body的背景色為白色

3、為排版設置了基本的字體、字型大小和行高

4、設置全局鏈接顏色，且當鏈接處於懸浮“:hover”狀態時才會顯示下劃線樣式

標題 h1-h6

HTML 中的所有標題標簽，

到

均可使用。另外，還提供了 .h1 到 .h6 類選擇器，為的是給內聯（inline）屬性的文本賦予標題的樣式。

1、重新設置了margin-top和margin-bottom的值

2、h1~h3重置後的值都是20px；h4~h6重置後的值都是10px

3、所有標題的行高都是1.1（也就是font-size的1.1倍）,而且文本顏色和字體都繼承父元素的顏色和字體

4、固定不同級別標題字體大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px

在標題內還可以包含 標簽或賦予 .small 類的元素，可以用來標記副標題。

<h2>Bootstrap heading <small>Secondary Text</small></h2>

Bootstrap heading <small style="color:gray;"> Secondary text</small>

p 標簽

(段落)元素還被設置底部外邊距（margin）10px。

    Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

通過添加 .lead 類可以讓段落突出顯示。
<pre style="font-size:21px;font-family:宋體">
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
</pre>

強調內容的標簽

<lead>一般配合段落標簽使用

強調相關的類

text-muted：  提示，使用淺灰色（#999）
text-primary：主要，使用藍色（#428bca）
text-success：成功，使用淺綠色(#3c763d)
text-info：   通知信息，使用淺藍色（#31708f）
text-warning：警告，使用黃色（#8a6d3b）
text-danger： 危險，使用褐色（#a94442）

文本對齊風格

text-left：   左對齊
text-center： 居中對齊
text-right：  右對齊
text-justify：兩端對齊

列表

1、ul 、 ol <span style="color:red;">去序列</span>：

class=“list-unstyled“

2、ul 、 ol <span style="color:red;">水平排列</span>（把垂直列表換成水平列表，而且去掉項目符號（編號），保持水平顯示）

class=“list-inline”

3、dl水平列表（屏幕大於768px的時候，添加類名“.dl-horizontal”才具有水平定義列表效果）

class=“dl-horizontal”

圖片

使用方法非常簡單，只需要在

標簽上添加對應的類名
img-responsive：響應式圖片，主要針對於響應式設計

img-rounded：   圓角圖片
img-circle：    圓形圖片
img-thumbnail： 縮略圖片

自己動手添加並查看相應的效果吧~ ~ ~

bootstrap圖標

Bootstrap框架中也為大家提供了近200個不同的icon圖片，而這些圖標都是使用CSS3的@font-face屬性配合字體來實現的icon效果。

任何行級元素都可以，通常使用span標簽做圖標容器

<span style="color:blue;">可登陸bootstrap網站查看http://v3.bootcss.com/components/#thumbnails<span>

用法很簡單，只需將圖標下的英文複製粘貼到class里即可：

<span class="glyphicon glyphicon-ok"></span>

2、bootstrap-表格

基礎實例

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

條紋狀表格

通過 .table-striped 類可以給 <tbody> 之內的每一行增加斑馬條紋樣式。

條紋狀表格是依賴 :nth-child CSS 選擇器實現的，而這一功能不被 Internet Explorer 8 支持。

帶邊框的表格

添加 .table-bordered 類為表格和其中的每個單元格增加邊框。

滑鼠懸停

通過添加 .table-hover 類可以讓 <tbody> 中的每一行對滑鼠懸停狀態作出響應。

緊縮表格

通過添加 .table-condensed 類可以讓表格更加緊湊，單元格中的內補（padding）均會減半。

狀態類

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

Class 描述

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

響應式表格

將任何 .table 元素包裹在 .table-responsive 元素內，即可創建響應式表格，其會在小屏幕設備上（小於768px）水平滾動。當屏幕大於 768px 寬度時，水平滾動條消失。

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

3、bootstrap表單

基本實例

單獨的表單控制項會被自動賦予一些全局樣式。所有設置了 .form-control類的 <input>、<textarea> 和 <select> 元素都將被預設設置寬度屬性為 width: 100%;。 將 label 元素和前面提到的控制項包裹在 .form-group中可以獲得最好的排列。

<form role="form">告訴輔助設備（如屏幕閱讀器）這個元素所扮演的角色是個表單</form>

<form role="button">告訴設備，這是個按鈕，可以點擊。本質上是增強語義性，增強組件的可訪問性、可用性</form>

不要將表單組合輸入框組混合使用，建議將輸入框組嵌套到表單組中使用。

<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 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），因此就無需再額外添加 .row 了。

單選和多選框

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

設置了disabled屬性的單選或多選框都能被賦予合適的樣式。對於和多選或單選框聯合使用的 <label> 標簽，如果也希望將懸停於上方的滑鼠設置為“禁止點擊”的樣式，請將 .disabled 類賦予 .radio、.radio-inline、.checkbox、.checkbox-inline 或 <fieldset>。

多選框：

<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="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）控制項上，可以使這些控制項排列在一行。

參考博文：bootstrap框架怎麼用?