bootstrap

一、網格結構：

柵格系統中的列是經過指定1到12的值來表示其跨越的範圍 因此不會有col-**-15 最大也就是12

<div class="container"> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row">...</div> </div> <div class="container">....

<div class="col-sm-10 col-md-8"> 
這個應該是說：
屏幕大於(≥992px) ，使用col-md-* 而不是col-sm-*
若是屏幕大於(≥768px)，小於<=992px，使用col-sm-* 而不是col-md-*

對不一樣的屏幕大小實現了本身的佈局。這樣的改進才真正實現了響應式佈局。

好比下面的代碼

div class="row"

  div class="col-xs-12 col-sm-6 col-md-8" 手機小屏幕佔據所有欄柵，ipad中屏幕佔據6個欄柵，電腦桌面佔8個欄柵/div

  div class="col-sm-6 col-md-4"手機小屏幕換行顯示，ipad中屏幕佔據6個欄柵，電腦桌面佔4個欄柵/div

 

偏移列：在 .col-xs=* 類不支持偏移，可是它們能夠簡單地經過使用一個空的單元格來實現該效果。

　　　　　　爲了在大屏幕顯示器上使用偏移，請使用 .col-md-offset-* 類。這些類會把一個列的左外邊距（margin）增長 * 列，其中 * 範圍是從 1到 11。

<div class="col-xs-6 col-md-offset-3">  </div> 

二、排版：

內聯子標題：<h1>我是標題1 h1. <small>我是副標題1 <small>h1</samll></small></h1> 

縮寫：<abbr title="World Wide Web">WWW</abbr>

列表：有序列表、無序列表、定義列表

• 有序列表：有序列表是指以數字或其餘有序字符開頭的列表。
• 無序列表：無序列表是指沒有特定順序的列表，是以傳統風格的着重號開頭的列表。若是您不想顯示這些着重號，您可使用 class.list-unstyled 來移除樣式。您也能夠經過使用 class .list-inline 把全部的列表項放在同一行中。
• 定義列表：在這種類型的列表中，每一個列表項能夠包含 <dt> 和 <dd> 元素。<dt> 表明 定義術語，就像字典，這是被定義的屬於（或短語）。接着，<dd> 是 <dt> 的描述。您可使用 class dl-horizontal 把 <dl> 行中的屬於與描述並排顯示。

響應式表格：

<div class="table-responsive">
<table class="table">
<caption>響應式表格佈局</caption>
<thead>
<tr>
<th>產品</th>
<th>付款日期</th>
</tr>
</thead>
<tbody>
<tr>
<td>產品1</td>
<td>23/11/2013</td>
</tr>
</tbody>
</table>
</div>

表單：垂直表單（默認）、內聯表單、水平表單