Bootstrap CSS3基礎排版

1.基礎排版


Bootstrap爲傳統的標題元素h1~h6重新定義了標準的樣式,使得在所有的


瀏覽器下顯示的效果都一樣。標題元素的用法與平時的用法一致


Bootstrap還同步定義了6個class樣式(h1~h6),以便在非標題元素下使用相


同的樣式,唯一不同的是class沒有定義margin-top和margin-bottom。


Bootstrap爲全局設置的 font-size=14px,line-height=20px。


(1)文本強調元素是:small,strong,em,cite;


文本對齊方式:text-left,text-right,text-center,text-justify分別表示文本靠左、靠右、居中

和自適應對齊。例如:<p class="text-right">text-right:文本靠右對齊</p>


(2)縮略語


Bootstrap在abbr元素上實現了縮略詞功能,即鼠標移動到縮略詞上時,就顯示聲名在title中的屬

性值。例如:<abbr title="1234">1</abbr>  縮略詞下有虛線,鼠標移動到縮略詞上時有手型圖標。


(3)地址元素


地址元素address,主要設置行間距和底部的margin。用法舉例:<address> <p>text</p></address>。


(4)引用


在<blockquote>元素裏進行引用,可以引用任意HTML內容。

用法舉例爲:

代碼1:

<blockquote>
<p>人生若只如初見</p>
<small>摘自:<cite title="Tom">Tom</cite></small>
</blockquote> 


則會實現如下圖的效果圖1


圖1


Bootstrap還提供了一個pull-right的樣式用於右對齊。如代碼2所示:

代碼2:

<blockquote class="pull-right">
<p>人生若只如初見</p>
<small>摘自:<cite title="Tom">Tom</cite></small>
</blockquote> 


其效果爲圖2:


圖2






發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章