一、段落
段落是排版中另一個重要元素之一。在Bootstrap中為文本設置了一個全局的文本樣式(這里所說的文本是指正文文本):
1、全局文本字號為14px(font-size)。
2、行高為1.42857143(line-height),大約是20px(大家看到一串的小數或許會有疑惑,其實他是通過LESS編譯器計算出來的,當然Sass也有這樣的功能)。
3、顏色為深灰色(#333);
二、文字樣式
在實際項目中,對於一些重要的文本,希望突出強調的部分都會做另外的樣式處理。Bootstrap同樣對這部分做了一些輕量級的處理。
如果想讓一個段落p突出顯示,可以通過添加類名“.lead”實現,其作用就是增大文本字號,加粗文本,而且對行高和margin也做相應的處理。
1.粗體
在Bootstrap中,可以使用<b>和<strong>標簽讓文本直接加粗。
2.斜體
在Bootstrap中,可以使用<em>或<i>來實現文本斜體。
三、強調類
- .text-muted:提示,使用淺灰色(#999)
- .text-primary:主要,使用藍色(#428bca)
- .text-success:成功,使用淺綠色(#3c763d)
- .text-info:通知信息,使用淺藍色(#31708f)
- .text-warning:警告,使用黃色(#8a6d3b)
- .text-danger:危險,使用褐色(#a94442)
<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>
效果如下:
四、文本對齊
在排版中離不開文本的對齊方式。在CSS中常常使用text-align來實現文本的對齊風格的設置。其中主要有四種風格:
☑ 左對齊,取值left
☑ 居中對齊,取值center
☑ 右對齊,取值right
☑ 兩端對齊,取值justify
為了簡化操作,方便使用,Bootstrap通過定義四個類名來控制文本的對齊風格:
☑ .text-left:左對齊
☑ .text-center:居中對齊
☑ .text-right:右對齊
☑ .text-justify:兩端對齊