在實際項目中,對于一些重要的文本,希望突出強調的部分都會做另外的樣式處理。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;
}
我也來試試:完成下面任務
請在右側代碼編輯器第10、11行輸入正確代碼。將下面的內容完成:
第一個是普通的內容:“我是一個普通的段落,我不需要強調顯示”。
第二個是強調的內容:“這部分內容需要特別的強調,我和別人長得不一樣”。
參考代碼如下:
<p>我是一個普通的段落,我不需要強調顯示。</p> <p class="lead">這部分內容需要特別的強調,我和別人長得不一樣。</p>
請驗證,完成請求
由于請求次數過多,請先驗證,完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報