溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

bootstrap不同級別標(biāo)題

發(fā)布時間：2020-08-10 15:29:37 來源：網(wǎng)絡(luò) 閱讀：364 作者：9秒學(xué)院 欄目：開發(fā)技術(shù)

bootstrap不同級別標(biāo)題

Bootstrap和普通的HTML頁面一樣，定義標(biāo)題都是使用標(biāo)簽<h2>到<h7>,只不過Bootstrap覆蓋了其默認(rèn)的樣式，使用其在所有瀏覽器下顯示的效果一樣，具體定義的規(guī)則可以如下表所示：

bootstrap不同級別標(biāo)題

通過比較可以發(fā)現(xiàn)，Bootstrap標(biāo)題樣式進(jìn)行了以下顯著的優(yōu)化重置：

1、重新設(shè)置了margin-top和margin-bottom的值，  h2~h4重置后的值都是20px；h5~h7重置后的值都是10px。
2、所有標(biāo)題的行高都是1.1（也就是font-size的1.1倍）,而且文本顏色和字體都繼承父元素的顏色和字體。
3、固定不同級別標(biāo)題字體大小，h2=36px，h3=30px，h4=24px，h5=18px，h6=14px和h7=12px。

標(biāo)題的具體運(yùn)用非常簡單，和我們平時運(yùn)用是一樣的，使用<h2>~<h7>標(biāo)簽，分別表示標(biāo)題一至標(biāo)題六，h 后面的數(shù)字越大，表示級別越小，文本也越小。來看一個簡單的效果：右側(cè)代碼編輯器中的10-16行的代碼。

在Bootstrap中為了讓非標(biāo)題元素和標(biāo)題使用相同的樣式，還特意定義了.h2~.h7六個類名。

對比兩個示例的效果圖，可以說他們的效果是一模一樣的。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>標(biāo)題（一）</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>

<body>
<!--Bootstrap中的標(biāo)題-->
<h2>Bootstrap標(biāo)題一</h2>
<h3>Bootstrap標(biāo)題二</h3>
<h4>Bootstrap標(biāo)題三</h4>
<h5>Bootstrap標(biāo)題四</h5>
<h6>Bootstrap標(biāo)題五</h6>
<h7>Bootstrap標(biāo)題六</h7>

<!--Bootstrap中讓非標(biāo)題元素和標(biāo)題使用相同的樣式-->
<div class="h2">Bootstrap標(biāo)題一</div>
<div class="h3">Bootstrap標(biāo)題二</div>
<div class="h4">Bootstrap標(biāo)題三</div>
<div class="h5">Bootstrap標(biāo)題四</div>
<div class="h6">Bootstrap標(biāo)題五</div>
<div class="h7">Bootstrap標(biāo)題六</div>

</body>
</html>

Bootstrap標(biāo)題一

Bootstrap標(biāo)題二

Bootstrap標(biāo)題三

Bootstrap標(biāo)題四
Bootstrap標(biāo)題五
Bootstrap標(biāo)題六

除此之外，我們在Web的制作中，常常會碰到在一個標(biāo)題后面緊跟著一行小的副標(biāo)題。在Bootstrap中他也考慮了這種排版效果，使用了<small>標(biāo)簽來制作副標(biāo)題。這個副標(biāo)題具有其自己的一些獨(dú)特樣式：

<!--Bootstrap中使用了<small>標(biāo)簽來制作副標(biāo)題-->
<h2>Bootstrap標(biāo)題一<small>我是副標(biāo)題</small></h2>
<h3>Bootstrap標(biāo)題二<small>我是副標(biāo)題</small></h3>
<h4>Bootstrap標(biāo)題三<small>我是副標(biāo)題</small></h4>
<h5>Bootstrap標(biāo)題四<small>我是副標(biāo)題</small></h5>
<h6>Bootstrap標(biāo)題五<small>我是副標(biāo)題</small></h6>
<h7>Bootstrap標(biāo)題六<small>我是副標(biāo)題</small></h7>

1、行高都是1，而且font-weight設(shè)置了normal變成了常規(guī)效果（不加粗），同時顏色被設(shè)置為灰色（#999）。
2、由于<small>內(nèi)的文本字體在h2~h4內(nèi)，其大小都設(shè)置為當(dāng)前字號的65%；而在h5~h7內(nèi)的字號都設(shè)置為當(dāng)前字號的75%；
詳細(xì)代碼請參閱bootstrap.css文件中第407行~第443行。

h2 small,
.h2 small,
h3 small,
.h3 small,
h4 small,
.h4 small,
h2 .small,
.h2 .small,
h3 .small,
.h3 .small,
h4 .small,
.h4 .small {
  font-size: 65%;
}
h5,
.h5,
h6,
.h6,
h7,
.h7 {
  margin-top: 10px;
  margin-bottom: 10px;
}
h5 small,
.h5 small,
h6 small,
.h6 small,
h7 small,
.h7 small,
h5 .small,
.h5 .small,
h6 .small,
.h6 .small,
h7 .small,
.h7 .small {
  font-size: 75%;
}


向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手