一. bootstrap標題
在bootstrap中使用標題和html本身沒有太大的區別使用h1-h6, 而bootstrap只是預設修改了h1-h6的樣式,網上找到如下資料參考
二. bootstrap 標題的修改
1. 重新設定了margin-top和margin-bottom的值, h1~h3重置後的值都是20px;h4~h6重置後的值都是10px
2. 所有標題的行高都是1.1(也就是font-size的1.1倍),而且文字顏色和字型都繼承父元素的顏色和字型。
3. 固定不同級別標題字型大小,h1=36px,h2=30px,h3=24px,h4=18px,h5=14px和h6=12px.
h1>bootstrap標題一
h1>
<
h2>bootstrap標題二
h2>
<
h3>bootstrap標題三
h3>
<
h4>bootstrap標題四
h4>
<
h5>bootstrap標題五
h5>
<
h6>bootstrap標題六
h6>
body
>
html
>
預覽效果圖如下
三. 小標題
bootstrap使用小標題標籤, 如果大字型大小為h1-h3,小標題顯示當前字型大小65%,如果大字型大小為h4-h6,小標題箱單當前字型大小的75%
<body
>
<
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
>小標題
四. 標題另類寫法
我們也可以使用div來代替h1-h6標籤,而是class樣式,具體**如下
<可以達到上圖一樣的效果div
class
="h1"
>bootstrap標題一<
small
>小標題
small
>
div>
<
div
class
="h2"
>bootstrap標題一<
small
>小標題
small
>
div>
<
div
class
="h3"
>bootstrap標題一<
small
>小標題
small
>
div>
<
div
class
="h4"
>bootstrap標題一<
small
>小標題
small
>
div>
<
div
class
="h5"
>bootstrap標題一<
small
>小標題
small
>
div>
<
div
class
="h6"
>bootstrap標題一<
small
>小標題
small
>
div>
響應式前端框架Bootstrap系列(2)網格系統
網格系統,也叫柵格系統,是bs中最常用也是最核心的布局方式。大家知道,乙個前端介面是由多個塊級元素組建而成,而我們常用到的塊級元素就是div,網格系統就是將乙個div劃為等分12列。為了使網格系統能支援不同的解析度,網格的列定義也分為了4種型別,分別是.col xs col sm col md co...
Bootstrap系列 29 按鈕組
單個按鈕在web頁面中的運用有時候並不能滿足我們的業務需求,常常會看到將多個按鈕組合在一起使用,比如富文字編輯器裡的一組小圖示按鈕等 按鈕組和下拉列表元件一樣,需要依賴於button.js外掛程式才能正常執行。不過我們同樣可以直接只呼叫bootstrap.js檔案。因為這個檔案已整合了button....
bootstrap學習筆記2
bootstrap提供了許多的樣式類,裡面的樣式包括排版 表單等等。bootstrap內建了一套響應式 移動裝置優先的流式柵格系統,系統自動最多分為12列。柵格系統的工作原理 1.行 row 必須包含在.container中,以便為其賦予合適的排列 alignment 和內補 padding 2.使...