標籤：
段落是排版中另一個重要元素之一。在Bootstrap中為文本設定了一個全域的文本樣式（這裡所說的文本是指本文）：
1、全域文本字型大小為14px(font-size)。
2、行高為1.42857143（line-height），大約是20px(大家看到一串的小數或許會有疑惑，其實他是通過LESS編譯器計算出來的，當然Sass也有這樣的功能)。
3、顏色為深灰色（#333）；
4、字型為"Helvetica Neue", Helvetica, Arial, sans-serif;（font-family），或許這樣的字型對我們中文並不太合適，但在實際項目中，大家可以根據自己的需求進行重設，在此我們不做過多闡述，我們回到這裡。該設定都定義在<body>元素上，由於這幾個屬性都是繼承屬性，所以Web頁面中文本（包括段落p元素）如無重設都會具有這些樣式效果。
/*源碼請查看bootstrap.css檔案中第274行~280行*/
body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 14px;line-height: 1.42857143;color: #333;background-color: #fff;}
另外在Bootstrap中，為了讓段落p元素之間具有一定的間距，便於使用者閱讀文本，特意設定了p元素的margin值（預設情況之下，p元素具有一個上下外邊距，並且保持一個行高的高度）： /*源碼請查看bootstrap.css檔案中第467行~469行*/
p { margin: 0 0 10px;}
如果你對CSS前置處理器有所瞭解，那麼你完全可以根據Bootstrap提供的先行編譯版本LESS(或者Sass)進行自訂排版設定。在Bootstrap中，排版設定的預設值都存在variables.less檔案中(Sass版本存在_variables.scss中)的兩個變數：
LESS版本：
@font-size-base: 14px; @line-height-base: 1.428571429; // 20/14
Sass版本：
$font-size-base: 14px !default; $line-height-base: 1.428571429 !default; // 20/14
第一條語句用於設定字型大小，第二條語句用於設定行高。系統預設使用這兩個值產生整個頁面相應的margin、padding和line-height的值。換句話說，你只需要修改這兩個變數的值，然後重新編譯，就可以自訂自己的Bootstrap排版樣式。（有興趣的同學可以嘗試一下，此處對於LESS或Sass版本運用不做過多闡述）。
<!DOCTYPE HTML> < html> < head> < meta charset="utf-8"> < title>段落（本文）</title> < link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> < /head>
<body> < p>Bootstrap是Twitter推出的一個用於前端開發的開源工具包。它由Twitter的設計師Mark Otto和Jacob Thornton合作開發,是一個CSS/HTML架構。</p> < p>Seashen.cn是國內領先的HTML5學習社區！</p></body>
</html>
強調內容在實際項目中，對於一些重要的文本，希望突出強調的部分都會做另外的樣式處理。Bootstrap同樣對這部分做了一些輕量級的處理。
如果想讓一個段落p反白，可以通過添加類名“.lead”實現，其作用就是增大文本字型大小，加粗文本，而且對行高和margin也做相應的處理。用法如下：
<p>我是普通文本，我的樣子長成這樣我是普通文本，我的樣子長成這樣我是普通文本，</p><p class="lead">我是特意要突出的文本，我的樣子成這樣。我是特意要突出的文本，我的樣子長成這樣。</p>
效果查看最右側結果視窗。
“.lead”對應的樣式如下： /*源碼查看bootstrap.css檔案第470行~480行*/
.lead {margin-bottom: 20px;font-size: 16px;font-weight: 200;line-height: 1.4;}@media (min-width: 768px) {/*大中型瀏覽器字型稍大*/.lead {font-size: 21px; }}
除此之外，Bootstrap還通過元素標籤:<small>、<strong>、<em>和<cite>給文本做突出樣式處理。 /*源碼查看bootstrap.css檔案第55行~第58行*/
b,strong { font-weight: bold; /*文本加粗*/}
/*源碼查看bootstrap.css檔案第481行~第484行*/
small,.small { font-size: 85%; /*標準字型的85%,也就是14px * 0.85px，差不多12px*/}
/*源碼查看bootstrap.css第485行~第487行*/
cite {font-style: normal;}粗體
粗體就是給文本加粗，在普通的元素中我們一般通過font-weight設定為bold關鍵詞給文本加粗。在Bootstrap中，可以使用<b>和<strong>標籤讓文本直接加粗。 /*源碼查看bootstrap.css檔案第55行~第58行*/
b,strong { font-weight: bold; /*文本加粗*/}
例如，下面的代碼使用<strong>標籤定義了強調文本：
<p>我在學習<strong>Bootstrap</strong>，我要掌握<strong>Bootstrap</strong>的所有知識。</p>斜體
在排版中，除了用加粗來強調突出的文本之外，還可以使用斜體。斜體類似於加粗一樣，除了可以給元素設定樣式font-style值為italic實現之外，在Bootstrap中還可以通過使用標籤<em>或<i>來實現。 例如，下面的代碼使用了<em>和<i>標籤定義了強調文本：
<p>我在seashen.cn網上跟<em>大海</em>一起學習<i>Bootstrap</i>的使用。我一定要學會<i>Bootstrap</i>。</p>強調相關的類
在Bootstrap中除了使用標籤<strong>、<em>等說明本文某些字詞、句子的重要性，Bootstrap還定義了一套類名，這裡稱其為強調類名（類似前面說的“.lead”）,這些強調類都是通過顏色來表示強調，具本說明如下：
具本源碼查看bootstrap.css檔案第500行~第532行：
.text-muted {color: #999;}.text-primary {color: #428bca;}a.text-primary:hover {color: #3071a9;}.text-success {color: #3c763d;}a.text-success:hover {color: #2b542c;}.text-info {color: #31708f;}a.text-info:hover {color: #245269;}.text-warning {color: #8a6d3b;}a.text-warning:hover {color: #66512c;}.text-danger {color: #a94442;}a.text-danger:hover {color: #843534;}<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>強調相關的類</title><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></head><body><div class="text-muted">.text-muted 效果</div><div class="text-primary">.text-primary效果</div><div class="text-success">.text-success效果</div><div class="text-info">.text-info效果</div><div class="text-warning">.text-warning效果</div><div class="text-danger">.text-danger效果</div></body></html>
在排版中離不開文本的對齊。在CSS中常常使用text-align來實現文本的對齊風格的設定。其中主要有四種風格：
? 靠左對齊，取值left
? 置中對齊，取值center
? 靠右對齊，取值right
? 左右對齊，取值justify
為了簡化操作，方便使用，Bootstrap通過定義四個類名來控制文本的對齊風格：
? .text-left：靠左對齊
? .text-center：置中對齊
? .text-right：靠右對齊
? .text-justify：左右對齊
具體源碼查看bootstrap.css檔案第488行~第499行：
.text-left {text-align: left;}.text-right {text-align: right;}.text-center {text-align: center;}.text-justify {text-align: justify;}
例如下面的四行代碼，分別定義文本的四種不同的對齊風格：
<p class="text-left">我居左</p><p class="text-center">我置中</p><p class="text-right">我居右</p><p class="text-justify">我左右對齊</p>
Bootstrap中的段落和強調內容
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
