一、段落

　　段落是排版中另一個(gè)重要元素之一。在Bootstrap中為文本設(shè)置了一個(gè)全局的文本樣式（這里所說的文本是指正文文本）：

1、全局文本字號為14px(font-size)。

2、行高為1.42857143（line-height），大約是20px(大家看到一串的小數(shù)或許會(huì)有疑惑，其實(shí)他是通過LESS編譯器計(jì)算出來的，當(dāng)然Sass也有這樣的功能)。

3、顏色為深灰色（#333）；

二、文字樣式

　　在實(shí)際項(xiàng)目中，對于一些重要的文本，希望突出強(qiáng)調(diào)的部分都會(huì)做另外的樣式處理。Bootstrap同樣對這部分做了一些輕量級的處理。

如果想讓一個(gè)段落p突出顯示，可以通過添加類名“.lead”實(shí)現(xiàn)，其作用就是增大文本字號，加粗文本，而且對行高和margin也做相應(yīng)的處理。 

1.粗體：在Bootstrap中，可以使用<b>和<strong>標(biāo)簽讓文本直接加粗。

2.斜體：在Bootstrap中，可以使用<em>或<i>來實(shí)現(xiàn)文本斜體。

三、強(qiáng)調(diào)類

.text-muted：提示，使用淺灰色（#999）
.text-primary：主要，使用藍(lán)色（#428bca）
.text-success：成功，使用淺綠色(#3c763d)
.text-info：通知信息，使用淺藍(lán)色（#31708f）
.text-warning：警告，使用黃色（#8a6d3b）
.text-danger：危險(xiǎn)，使用褐色（#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來實(shí)現(xiàn)文本的對齊風(fēng)格的設(shè)置。其中主要有四種風(fēng)格：

  ☑  左對齊，取值left

  ☑  居中對齊，取值center

  ☑  右對齊，取值right

  ☑  兩端對齊，取值justify

為了簡化操作，方便使用，Bootstrap通過定義四個(gè)類名來控制文本的對齊風(fēng)格：

  ☑   .text-left：左對齊

  ☑   .text-center：居中對齊

  ☑   .text-right：右對齊

  ☑   .text-justify：兩端對齊

有了文字樣式，使得排版效果更清晰簡潔，希望大家在自己的作品中多使用一些簡單大方的文字樣式，使作品脫穎而出，更加具有吸引力。

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附兩個(gè)精彩的專題：Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程

本文系列教程整理到：Bootstrap基礎(chǔ)教程 專題中，歡迎點(diǎn)擊學(xué)習(xí)。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論