1 回答

TA貢獻(xiàn)1817條經(jīng)驗(yàn) 獲得超6個(gè)贊
一、段落
段落是排版中另一個(gè)重要元素之一。在Bootstrap中為文本設(shè)置了一個(gè)全局的文本樣式(這里所說(shuō)的文本是指正文文本):
1、全局文本字號(hào)為14px(font-size)。
2、行高為1.42857143(line-height),大約是20px(大家看到一串的小數(shù)或許會(huì)有疑惑,其實(shí)他是通過(guò)LESS編譯器計(jì)算出來(lái)的,當(dāng)然Sass也有這樣的功能)。
3、顏色為深灰色(#333);
二、文字樣式
在實(shí)際項(xiàng)目中,對(duì)于一些重要的文本,希望突出強(qiáng)調(diào)的部分都會(huì)做另外的樣式處理。Bootstrap同樣對(duì)這部分做了一些輕量級(jí)的處理。
如果想讓一個(gè)段落p突出顯示,可以通過(guò)添加類(lèi)名“.lead”實(shí)現(xiàn),其作用就是增大文本字號(hào),加粗文本,而且對(duì)行高和margin也做相應(yīng)的處理。
1.粗體:在Bootstrap中,可以使用<b>和<strong>標(biāo)簽讓文本直接加粗。
2.斜體:在Bootstrap中,可以使用<em>或<i>來(lái)實(shí)現(xiàn)文本斜體。
三、強(qiáng)調(diào)類(lèi)
.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>
四、文本對(duì)齊
在排版中離不開(kāi)文本的對(duì)齊方式。在CSS中常常使用text-align來(lái)實(shí)現(xiàn)文本的對(duì)齊風(fēng)格的設(shè)置。其中主要有四種風(fēng)格:
? 左對(duì)齊,取值left
? 居中對(duì)齊,取值center
? 右對(duì)齊,取值right
? 兩端對(duì)齊,取值justify
為了簡(jiǎn)化操作,方便使用,Bootstrap通過(guò)定義四個(gè)類(lèi)名來(lái)控制文本的對(duì)齊風(fēng)格:
? .text-left:左對(duì)齊
? .text-center:居中對(duì)齊
? .text-right:右對(duì)齊
? .text-justify:兩端對(duì)齊
有了文字樣式,使得排版效果更清晰簡(jiǎn)潔,希望大家在自己的作品中多使用一些簡(jiǎn)單大方的文字樣式,使作品脫穎而出,更加具有吸引力。
- 1 回答
- 0 關(guān)注
- 687 瀏覽
添加回答
舉報(bào)