首頁 > web前端 > js教程 > 主體

全面解析Bootstrap排版使用方法(文字樣式)_javascript技巧

WBOY
發布: 2016-05-16 15:28:46
原創
1267 人瀏覽過

一、段落

  段落是排版中另一個重要元素之一。在Bootstrap中為文字設定了一個全域的文字樣式(這裡所說的文字是指正文文字):

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

2、行高為1.42857143(line-height),大約是20px(大家看到一串的小數或許會有疑惑,其實他是透過LESS編譯器計算出來的,當然Sass也有這樣的功能)。

3、顏色為深灰色(#333);

二、文字樣式

  在實際專案中,對於一些重要的文本,希望突出強調的部分都會做另外的樣式處理。 Bootstrap也對這部分做了一些輕量級的處理。

如果想讓一個段落p突出顯示,可以透過添加類別名稱「.lead」來實現,其作用就是增大文本字號,加粗文本,而且對行高和margin也做相應的處理。 

1.粗體:在Bootstrap中,可以使用標籤讓文字直接加粗。

2.斜體:在Bootstrap中,可以使用來實現文字斜體。

三、強調類

.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:兩端對齊

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!