在實際項目中,對于一些重要的文本,希望突出強調的部分都會做另外的樣式處理。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 可將課程添加到書簽
舉報