溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
Bootstrap和普通的HTML頁面一樣，定義標題都是使用標簽<h2>到<h7>,只不過Bootstrap覆蓋了其默認的樣式，使用其在所有瀏覽器下顯示的效果一樣，具體定義的規則可以如下表所示：
通過比較可以發現，Bootstrap標題樣式進行了以下顯著的優化重置：
1、重新設置了margin-top和margin-bottom的值， h2~h4重置后的值都是20px；h5~h7重置后的值都是10px。
2、所有標題的行高都是1.1（也就是font-size的1.1倍）,而且文本顏色和字體都繼承父元素的顏色和字體。
3、固定不同級別標題字體大小，h2=36px，h3=30px，h4=24px，h5=18px，h6=14px和h7=12px。
標題的具體運用非常簡單，和我們平時運用是一樣的，使用<h2>~<h7>標簽，分別表示標題一至標題六，h 后面的數字越大，表示級別越小，文本也越小。來看一個簡單的效果：右側代碼編輯器中的10-16行的代碼。
在Bootstrap中為了讓非標題元素和標題使用相同的樣式，還特意定義了.h2~.h7六個類名。
對比兩個示例的效果圖，可以說他們的效果是一模一樣的。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>標題（一）</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<!--Bootstrap中的標題-->
<h2>Bootstrap標題一</h2>
<h3>Bootstrap標題二</h3>
<h4>Bootstrap標題三</h4>
<h5>Bootstrap標題四</h5>
<h6>Bootstrap標題五</h6>
<h7>Bootstrap標題六</h7>
<!--Bootstrap中讓非標題元素和標題使用相同的樣式-->
<div class="h2">Bootstrap標題一</div>
<div class="h3">Bootstrap標題二</div>
<div class="h4">Bootstrap標題三</div>
<div class="h5">Bootstrap標題四</div>
<div class="h6">Bootstrap標題五</div>
<div class="h7">Bootstrap標題六</div>
</body>
</html>
除此之外，我們在Web的制作中，常常會碰到在一個標題后面緊跟著一行小的副標題。在Bootstrap中他也考慮了這種排版效果，使用了<small>標簽來制作副標題。這個副標題具有其自己的一些獨特樣式：
<!--Bootstrap中使用了<small>標簽來制作副標題-->
<h2>Bootstrap標題一<small>我是副標題</small></h2>
<h3>Bootstrap標題二<small>我是副標題</small></h3>
<h4>Bootstrap標題三<small>我是副標題</small></h4>
<h5>Bootstrap標題四<small>我是副標題</small></h5>
<h6>Bootstrap標題五<small>我是副標題</small></h6>
<h7>Bootstrap標題六<small>我是副標題</small></h7>
1、行高都是1，而且font-weight設置了normal變成了常規效果（不加粗），同時顏色被設置為灰色（#999）。
2、由于<small>內的文本字體在h2~h4內，其大小都設置為當前字號的65%；而在h5~h7內的字號都設置為當前字號的75%；
詳細代碼請參閱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%;
}免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
