1.1 標(biāo)題
<!--Bootstrap中的標(biāo)題-->
<h1>Bootstrap標(biāo)題一</h1>
<h2>Bootstrap標(biāo)題二</h2>
<h3>Bootstrap標(biāo)題三</h3>
<h4>Bootstrap標(biāo)題四</h4>
<h5>Bootstrap標(biāo)題五</h5>
<h6>Bootstrap標(biāo)題六</h6>
<!--Bootstrap中讓非標(biāo)題元素和標(biāo)題使用相同的樣式-->
<div class="h1">Bootstrap標(biāo)題一</div>
<div class="h2">Bootstrap標(biāo)題二</div>
<div class="h3">Bootstrap標(biāo)題三</div>
<div class="h4">Bootstrap標(biāo)題四</div>
<div class="h5">Bootstrap標(biāo)題五</div>
<div class="h6">Bootstrap標(biāo)題六</div>
1.2 文本格式
字體風(fēng)格
<p class="lead">lead</p><!-- 字體變大，行高變大磨确，下外邊距變大 -->
<i>i</i><!--無特殊意義沽甥， 斜體 -->
<small>small</small><!-- 小號字體-->
<strong>strong</strong><!-- 語氣強(qiáng)烈的強(qiáng)調(diào)，粗體 -->
<em>em</em><!-- 強(qiáng)調(diào)乏奥，斜體 -->
<mark>mark</mark>
<del>del</del>
<s>s</s>
<ins>ins</ins>
<u>u</u>
強(qiáng)調(diào)相關(guān)的類
<p class="text-muted">提示摆舟，使用淺灰色（#999）</p>
<p class="text-primary">主要，使用藍(lán)色（#428bca）</p>
<p class="text-success">成功，使用淺綠色(#3c763d)</p>
<p class="text-info">通知信息恨诱，使用淺藍(lán)色（#31708f）</p>
<p class="text-warning">警告媳瞪，使用黃色（#8a6d3b）</p>
<p class="text-danger">危險(xiǎn)，使用褐色（#a94442）</p>
文本對齊
<p class="text-left"> 居左 </p>
<p class="text-center"> 居中 </p>
<p class="text-right"> 居右 </p>
<p class="text-justify"> 兩端對齊 </p>
1.3 列表
在Bootstrap中對于列表的設(shè)置與原生的html基本一致照宝，需要注意的有：
- 在列表之間有10px的下外邊距
- 在嵌套列表中蛇受，不含有下邊距
去點(diǎn)列表 .list-unstyled
.list-unstyled {
padding-left: 0;
list-style: none;
}
eg:
<ol>
<li class="list-unstyled">
項(xiàng)目列表
<ul class="list-unstyled">
<li>帶有項(xiàng)目編號</li>
<li>帶有項(xiàng)目編號</li>
</ul>
</li>
</ol>
內(nèi)聯(lián)列表 .list-inline
把垂直列表換成水平列表，而且去掉項(xiàng)目符號（編號）厕鹃，保持水平顯示龙巨。內(nèi)聯(lián)列表就是為制作 水平導(dǎo)航 而生。
<ul class="list-inline">
<li>tile1</li>
<li>tile2</li>
<li>tile3</li>
<li>tile4</li>
<li>tile5</li>
</ul>
1.4 代碼
在Bootstrap主要提供了三種代碼風(fēng)格：
- 使用
<code></code>來顯示單行內(nèi)聯(lián)代碼——針對于單個(gè)單詞或單個(gè)句子的代碼 - 使用
<pre></pre>來顯示多行塊代碼——針對于多行代碼（也就是成塊的代碼） - 使用
<kbd></kbd>來顯示用戶輸入代碼——表示用戶要通過鍵盤輸入的內(nèi)容
注： 不管使用哪種代碼風(fēng)格熊响，在代碼中碰到小于號（<）和大于號（>）都需要使用轉(zhuǎn)義字符來替代
1.5 表格
| 類名 | 表格樣式 |
|---|---|
| .table-striped | 斑馬線表格 |
| .table-bordered | 帶邊框的表格 |
| .table-hover | 鼠標(biāo)懸停高亮的表格 |
| .table-condensed | 緊湊型表格 |
| .table-responsive | 響應(yīng)式表格 |
注意事項(xiàng)：
- 后幾種表格附加樣式旨别，必須在基礎(chǔ)樣式
.table之后 - 響應(yīng)式表格：其原理是在表格外部添加容器把普通表格包裹起來，下面進(jìn)行詳細(xì)說明：
<div class="table-responsive"><!-- 關(guān)鍵汗茄！容器包裹后實(shí)現(xiàn)響應(yīng)式 -->
<table class="table table-bordered"><!-- 設(shè)置表格樣式秸弛，帶邊框的表格 -->
<thead><!-- 一個(gè)表格應(yīng)該有表頭，若直接寫tr>td這樣的結(jié)構(gòu)洪碳，瀏覽器會自動創(chuàng)建一個(gè)tbody包裹 -->
</thead>
<tbody><!--與上同理递览，即使你不創(chuàng)建，瀏覽器也會自動添加tbody包裹你的代碼 -->
</tbody>
</table>
</div>
