Bootstrap中包含了豐富的Web組件吨瞎，根據(jù)這些組件，可以快速的搭建一個漂亮穆咐、功能完備的網(wǎng)站颤诀。
以下是bootstrap--排版樣式的知識字旭，希望對你們有所幫助：
1.Bootstrap將全局foot-size設置為14px，line-height行高設置為1.428（即20px）;段落元素被設置等于1/2行高（即10px）崖叫；顏色被設置為#333遗淳；
2.從Firebug查看元素了解到，Bootstrap分別對h1h6進行了css樣式的重構心傀，并且還支持普通內(nèi)聯(lián)定義class=(h1h6)來實現(xiàn)相同的功能
例子：
（1）
引入bootstrap樣式前
引入bootstrap樣式后
（2）
引入bootstrap樣式前
引入bootstrap樣式后
3.內(nèi)聯(lián)文本元素
//添加標記屈暗，<mark>元素或.mark類
<p>Bootstrap<mark>框架</mark></p>
//各種加線條的文本
<del>Bootstrap框架</del> //刪除的文本
<s>Bootstrap框架</s> //無用的文本
<ins>Bootstrap框架</ins> //插入的文本，即下劃線文本
<u>Bootstrap框架</u> //效果同上脂男，下劃線文本
//各種強調(diào)的文本
<small>Bootstrap框架</small> //標準字號的85%
<strong>Bootstrap框架</strong> //加粗了700
<em>Bootstrap框架</em> //傾斜
例子
引入bootstrap樣式前
引入bootstrap樣式后
4.對齊
//設置文本對齊
<p class="text-left">Bootstrap框架</p> //居左
<p class="text-center">Bootstrap框架</p> //居中
<p class="text-right">Bootstrap框架</p> //居右
<p class="text-justify">Bootstrap框架</p> //兩端對齊
<p class="text-nowrap">Bootstrap框架</p> //不換行
例子
引入bootstrap樣式前
引入bootstrap樣式后
5.大小寫
//設置英文文本大小寫
<p class="text-lowercase">Bootstrap框架</p> //小寫
<p class="text-uppercase">Bootstrap框架</p> //大寫
<p class="text-capitalize">Bootstrap框架</p> //首字母大寫
例子
引入bootstrap樣式前
引入bootstrap樣式后
6.縮略語
Bootstrap<abbr class="initialism">框架</abbr>
例子
引入bootstrap樣式前
引入bootstrap樣式后
7.地址文本
//設置地址养叛，去掉了傾斜，設置了行高宰翅，底部20px
<address>
<strong>Twitter,Inc</strong>
Twitter,Inc
<abbr title="phone">p:</abbr>(123) 456-7890
</address>
例子
引入bootstrap樣式前
引入bootstrap樣式后
8.引入文本
//默認樣式引用弃甥，增加了做邊線，設定了字體大小和內(nèi)外邊距
<blockquote class="blockquote-reverse">Bootstrap框架</blockquote>
//反向
<blockquote class="blockquote-reverse">Bootstrap框架</blockquote>
例子
引入bootstrap樣式前
引入bootstrap樣式后
9.列表排版
//移出默認樣式
<ul class="list-unstyle">
<li>框架</li>
<li>框架</li>
<li>框架</li>
</ul>
例子
引入bootstrap樣式前
引入bootstrap樣式后
設置成內(nèi)聯(lián)
<pre>
<ul class="list-inline">
<li>框架</li>
<li>框架</li>
<li>框架</li>
</ul>
</pre>
例子
引入bootstrap樣式前
<p>引入bootstrap樣式后</p>
水平排列描述列表
<dl class="dl-horizontal">
<dt>框架</dt>
<dd>框架</dd>
</dl>
例子
引入bootstrap樣式前
引入bootstrap樣式后
10.代碼
//內(nèi)聯(lián)代碼
<code>< ;section> ;</code>
例子
引入bootstrap樣式前
引入bootstrap樣式后
<p><h5>用戶輸入</h5></p>
<pre>
press<kbd>ctrl+汁讼，</kbd>
</pre>
<h5>例子</h5>
引入bootstrap樣式前
引入bootstrap樣式后
代碼塊
<p>Please input...</p>
例子
引入bootstrap樣式前
引入bootstrap樣式后
Bootstrap還列舉了<var>表示標記變量淆攻，<samp>表示程序輸出，只不過沒有重新復寫Css
本文作者lilyping
越努力嘿架，越幸運
原文鏈接：http://www.reibang.com/u/3908e601f4ec
微信公眾號：BestLilyPing
github:https://github.com/lilyping
Demos源碼地址：https://github.com/lilyping
