1. 程式人生 > >Bootstrap 排版 總結

Bootstrap 排版 總結

100%全屏佈局方法

<div class="container-fiuled">
....
</div>

 

特殊標籤

<h2>我是標題1 h1. <small>我是副標題1 h1</small></h2>

<strong>(設定文字為更粗的文字)

<em>(設定文字為斜體)

 

強調

<p class="text-left">向左對齊文字</p>
<p class="text-center">居中對齊文字</p>
<p class="text-right">向右對齊文字</p>
<p class="text-muted">本行內容是減弱的</p>
<p class="text-primary">本行內容帶有一個 primary class</p>
<p class="text-success">本行內容帶有一個 success class</p>
<p class="text-info">本行內容帶有一個 info class</p>
<p class="text-warning">本行內容帶有一個 warning class</p>
<p class="text-danger">本行內容帶有一個 danger class</p>

新增 class="lead",加粗文字和加大行高

 <h2>共享單車</h2>    

<p class="lead">

1月10日,鳳凰自行車起訴ofo拖欠貨款有了新進展,即法院依法扣除ofo運營主體東峽大通2806萬元存款。另一邊,至今仍有1000萬人等待退押金。當線上退押遲遲未果,數千名使用者於12月17日集結在ofo總部--中關村網際網路金融中心,用實際行動催還押金後,如何平復這股不滿與焦慮的退押金大潮,成為ofo的當務之急。 

</p>

 

縮寫

HTML 元素提供了用於縮寫的標記,比如 WWW 或 HTTP。

Bootstrap 定義 <abbr> 元素的樣式為顯示在文字底部的一條虛線邊框,當滑鼠懸停在上面時會顯示完整的文字(只要您為 <abbr> title 屬性添加了文字)。

為了得到一個更小字型的文字,請新增 .initialism 到 <abbr>。

<abbr title="西遊記是四大名著之一">西遊記</abbr><br>
<abbr title="孫悟空神通廣大" class="initialism">孫悟空</abbr>