Bootstrap系列 2 標題

2021-09-06 23:54:24 字數 3420 閱讀 2417

一. 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.使...