標籤:
段落是排版中另一個重要元素之一。在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”),這些強調類都是通過顏色來表示強調,具本說明如下:
- .text-muted:提示,使用淺灰色(#999)
- .text-primary:主要,使用藍色(#428bca)
- .text-success:成功,使用淺綠色(#3c763d)
- .text-info:通知資訊,使用淺藍色(#31708f)
- .text-warning:警告,使用黃色(#8a6d3b)
- .text-danger:危險,使用褐色(#a94442)
具本源碼查看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中的段落和強調內容