3、強調、粗體、斜體

一、強調--class="lead"

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

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

例如:

!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>強調內容</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
</head>

<body>

<p>我是普通文本,我的樣子長成這樣我是普通文本,我的樣子長成這樣我是普通文本,</p>
<p class="lead">我是特意要突出的文本,我的樣子成這樣。我是特意要突出的文本,我的樣子長成這樣。</p>

</body>
</html>

二、粗體--<p><strong></strong></p>

粗體就是給文本加粗,在普通的元素中我們一般通過font-weight設置爲bold關鍵詞給文本加粗。在Bootstrap中,可以使用<b><strong>標籤讓文本直接加粗。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>粗體</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
</head>

<body>
<p>我在學習<strong>Bootstrap</strong>,我要掌握<strong>Bootstrap</strong>的所有知識。</p>

</body>
</html>

三、斜體--<em>或<i>

在排版中,除了用加粗來強調突出的文本之外,還可以使用斜體。斜體類似於加粗一樣,除了可以給元素設置樣式font-style值爲italic實現之外,在Bootstrap中還可以通過使用標籤<em><i>來實現。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>斜體</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
</head>

<body>
<p>我在慕課網上跟<em>大漠</em>一起學習<i>Bootstrap</i>的使用。我一定要學會<i>Bootstrap</i>。</p>
</body>
</html>

四、強調類

Bootstrap還定義了一套類名,這裏稱其爲強調類名(類似前面說的“.lead”),這些強調類都是通過顏色來表示強調,具本說明如下:

  • .text-muted:提示,使用淺灰色(#999)
  • .text-primary:主要,使用藍色(#428bca)
  • .text-success:成功,使用淺綠色(#3c763d)
  • .text-info:通知信息,使用淺藍色(#31708f)
  • .text-warning:警告,使用黃色(#8a6d3b)
  • .text-danger:危險,使用褐色(#a94442)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>強調相關的類</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/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>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章