Bootstrap--全局CSS樣式之排版


Bootstrap的排版樣式大致和html基本元素一樣,沒什么大的區別,就是對元素加了樣式。

(1)標題

HTML 中的所有標題標簽,<h1><h6> 均可使用。另外,還提供了 .h1.h6 類,為的是給內聯(inline)屬性的文本賦予標題的樣式。

代碼如下:

Code

結果如下:

 

1

其實就是html元素標簽的h1-h6.不過,在標題內還可以包含 <small> 標簽或賦予 .small 類的元素,可以用來標記副標題。

Code

 

 

2

 

(2)頁面主體

Bootstrap 將全局 font-size 設置為 14pxline-height 設置為 1.428。這些屬性直接賦予 <body> 元素和所有段落元素。另外,<p> (段落)元素還被設置了等於 1/2 行高(即 10px)的底部外邊距(margin)。

 

實例

Code

 

 

3

 

(3)中心內容

通過添加 .lead 類可以讓段落突出顯示。

Code

 

 

4

(4 )內聯文本元素

通過添加 <mark>標簽可以為元素添加背景顏色並高亮文本。

實例:

Code

 

 

5

在上面的結果中,world背景顏色變成了#fcf8e3,圖片上看不清,大家可以在自己的瀏覽器中查看下,而且world也被高亮了。

(5)被刪除的文本

我們要顯示某些被刪除的文本,可以使用<del>標簽。

實例:

Code


6

 

 

 

(6)無用文本

對於沒有用的文本我們可以使用<s>標簽。

實例:

Code

 

 

7

對於這個<s>標簽的結果我沒有看出來和上面那個<del>標簽的結果有什么不同,也許只是表達方式不同吧,有知道有什么不同的大神,請告知。下面的插入文本和帶下划線的文本也是。

(7)插入文本

額外插入的文本使用 <ins> 標簽。

實例:

Code

 

 

8

 

(8)帶下划線的文本

為文本添加下划線,使用 <u> 標簽。

Code

 

 

9

(9)對齊

通過文本對齊類text-*,可以簡單方便的將文字重新對齊。

實例:

Code


10

 

 

(10)改變大小寫

通過下面幾個類改變文本的大小寫。

Code

 

 

(11)地址

讓聯系信息以最接近日常使用的格式呈現。在每行結尾添加 <br> 可以保留需要的樣式。

Code

 

 

對於其他的排版內容,大家可以查看官方文檔。謝謝


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM