Bootstrap不一樣級別標題

時間 2019-11-10

原文原文鏈接

Bootstrap和普通的HTML頁面同樣，定義標題都是使用標籤<h1>到<h6>,只不過Bootstrap覆蓋了其默認的樣式，使用其在全部瀏覽器下顯示的效果同樣，具體定義的規則能夠以下表所示：css

經過比較能夠發現，Bootstrap標題樣式進行了如下顯著的優化重置：html

一、從新設置了margin-top和margin-bottom的值， h1~h3重置後的值都是20px；h4~h6重置後的值都是10px。
二、全部標題的行高都是1.1（也就是font-size的1.1倍）,並且文本顏色和字體都繼承父元素的顏色和字體。
三、固定不一樣級別標題字體大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。bootstrap

標題的具體運用很是簡單，和咱們平時運用是同樣的，使用<h1>~<h6>標籤，分別表示標題一至標題六，h 後面的數字越大，表示級別越小，文本也越小。來看一個簡單的效果：右側代碼編輯器中的10-16行的代碼。瀏覽器

在Bootstrap中爲了讓非標題元素和標題使用相同的樣式，還特地定義了.h1~.h6六個類名。編輯器

對比兩個示例的效果圖，能夠說他們的效果是如出一轍的。字體

<!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>

<h1>Bootstrap標題一</h1>
<h2>Bootstrap標題二</h2>
<h3>Bootstrap標題三</h3>
<h4>Bootstrap標題四</h4>
<h5>Bootstrap標題五</h5>
<h6>Bootstrap標題六</h6>spa

<div class="h1">Bootstrap標題一</div>
<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>code

</body>
</html>orm

Bootstrap標題一

Bootstrap標題二

Bootstrap標題三

Bootstrap標題四

Bootstrap標題五

Bootstrap標題六

除此以外，咱們在Web的製做中，經常會碰到在一個標題後面緊跟着一行小的副標題。在Bootstrap中他也考慮了這種排版效果，使用了<small>標籤來製做副標題。這個副標題具備其本身的一些獨特樣式：

<h1>Bootstrap標題一<small>我是副標題</small></h1>
<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>

一、行高都是1，並且font-weight設置了normal變成了常規效果（不加粗），同時顏色被設置爲灰色（#999）。
二、因爲<small>內的文本字體在h1~h3內，其大小都設置爲當前字號的65%；而在h4~h6內的字號都設置爲當前字號的75%；
詳細代碼請參閱bootstrap.css文件中第407行~第443行。

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。