Bootstrap-標題

一、bootstrap和html的寫法一樣,定義標題都是通過標籤的方式,但是bootstrap對樣式進行了重置,並且添加了.h1~.h6的類名讓不是標題的元素也能應用其樣式;

      具體規則如下:

   可得:1、h1~h3的margin-top和margin-bottom分別爲20px和10px;

              2、所有標題的行高爲1.1,文本的顏色和字體都繼承父元素;

   用法示例:

<!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中的標題-->
<h1>我的第一個bootstrap標題</h1>
<!--Bootstrap中讓非標題元素和標題使用相同的樣式-->
<div class="h1">傳說中的類名</div> 
    
</body>
</html>

二、bootstrap用<small>標籤製作副標題
   副標題的獨特樣式:1、行高爲1,font-weight設置爲normal,字體顏色灰色(#999);
                                     2、在h1~h3內的small,大小設置爲當前字號的65%;在h4~h6內的small,大小設置爲當前字號的75%
  用法示例:
<h1>孤兒院無私奉獻30年<small>一曲人性的讚歌</small></h1>
<div class="h1">孤兒院無私奉獻30年  <small>一曲人性的讚歌</small></div>


發佈了30 篇原創文章 · 獲贊 22 · 訪問量 6萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章