推薦閱讀：Bootstrap入門書籍之（零）Bootstrap簡介

Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作為其默認(rèn)的字體棧。

使用 Bootstrap 的排版特性，您可以創(chuàng)建標(biāo)題、段落、列表及其他內(nèi)聯(lián)元素。

1. 標(biāo)題

在Bootstrap中使用標(biāo)題的方式和常規(guī)html一樣：從 <h1> 到 <h6> 分別從大到小安排標(biāo)題元素，只不過在Bootstrap中重新設(shè)置了其默認(rèn)樣式，從源碼中可以看到有如下共性：

字體顏色與字體樣式繼承自父元素，字體粗細(xì)為500，且行高全部設(shè)為1.1（也就是font-size的1.1倍）

{ font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
}

在不同大小的標(biāo)題中有著如下區(qū)別：

在Bootstrap中對于不同級別標(biāo)題字體大小設(shè)置為： h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。

重新設(shè)置了 margin-top 和 margin-bottom 的值， h1~h3 重置后的值都是 20px ； h4~h6 重置后的值都是 10px 。

除此之外在Bootstrap中為了 讓非標(biāo)題元素和標(biāo)題使用相同的樣式 ，還特意定義了 .h1~.h6 六個(gè)類名。如下所示：

在Bootstrap中，下面的代碼，顯示效果相同。

<!--Bootstrap中的標(biāo)題-->
<h1>Bootstrap標(biāo)題一</h1>
<h2>Bootstrap標(biāo)題二</h2>
<h3>Bootstrap標(biāo)題三</h3>
<h4>Bootstrap標(biāo)題四</h4>
<h5>Bootstrap標(biāo)題五</h5>
<h6>Bootstrap標(biāo)題六</h6>
<!--Bootstrap中讓非標(biāo)題元素和標(biāo)題使用相同的樣式-->
<div class="h1">Bootstrap標(biāo)題一</div>
<div class="h2">Bootstrap標(biāo)題二</div>
<div class="h3">Bootstrap標(biāo)題三</div>
<div class="h4">Bootstrap標(biāo)題四</div>
<div class="h5">Bootstrap標(biāo)題五</div>
<div class="h6">Bootstrap標(biāo)題六</div>

因?yàn)樵趯?shí)際應(yīng)用中，我們可能經(jīng)常會(huì)遇到除了主標(biāo)題外，之后緊跟著一個(gè)副標(biāo)題的情況。Bootstrap人性化的為我們設(shè)置了這樣一個(gè)效果。使用方式也特別簡單，如下：

<h1>Bootstrap標(biāo)題一<small>我是副標(biāo)題</small></h1>

當(dāng)然毋庸置疑的是，從 <h1> 到 <h6> 都可以使用該設(shè)置。副標(biāo)題 <small> 有著自己一些獨(dú)特的樣式：

行高全部都設(shè)置為了1，而且字體粗細(xì)變成了常規(guī)效果（不加粗），同時(shí)顏色被設(shè)置為灰色（ #999 ）。
在h1~h3內(nèi)的 <small> 標(biāo)簽文本，其大小都設(shè)置為當(dāng)前字號(hào)的65%；而在h4~h6內(nèi)的字號(hào)都設(shè)置為當(dāng)前字號(hào)的75%；

2. 正文文本

Bootstrap中的文本全局樣式如下：

字體大小為14px
行高為1.42867143（約等于20px）
字體顏色為 #333
p標(biāo)簽外部有著10個(gè)像素的下外邊距 margin-bottom:10px;
當(dāng)然，你是可以自行設(shè)置重置樣式的。^_^

3. 強(qiáng)調(diào)

字體風(fēng)格相關(guān)

<p class="lead">lead</p><!-- 字體變大，行高變大，下外邊距變大 -->
<i>i</i><!--無特殊意義， 斜體 -->
<small>small</small><!-- 小號(hào)字體-->
<strong>strong</strong><!-- 語氣強(qiáng)烈的強(qiáng)調(diào)，粗體 -->
<em>em</em><!-- 強(qiáng)調(diào)，斜體 -->

強(qiáng)調(diào)相關(guān)的類

在Bootstrap中定義了一系列的這樣的類，用于不同的情景，出去text外，還有bg（背景顏色）等等。使用方法類似，只是前面的文本進(jìn)行了一些改變！所以。 記住這6個(gè)單詞吧

<p class="text-muted">提示，使用淺灰色（#999）</p>
<p class="text-primary">主要，使用藍(lán)色（#428bca）</p>
<p class="text-success">成功，使用淺綠色(#3c763d)</p>
<p class="text-info">通知信息，使用淺藍(lán)色（#31708f）</p>
<p class="text-warning">警告，使用黃色（#8a6d3b）</p>
<p class="text-danger">危險(xiǎn)，使用褐色（#a94442）</p>

4. 文本對齊風(fēng)格

<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p class="text-justify">我兩端對齊</p>

在Bootstrap中，為了簡化操作，方便使用，使用了上面這四個(gè)類分別對應(yīng)我們在CSS中常常使用 text-align 來實(shí)現(xiàn)文本的對齊風(fēng)格的設(shè)置。

5. 列表

在Bootstrap中對于列表的設(shè)置與原生的html基本一致，需要注意的有：

在列表之間有10px的下外邊距

在嵌套列表中，不含有下邊距

Bootstrap當(dāng)然不會(huì)就這么簡單做一點(diǎn)點(diǎn)修改，它定義了一些關(guān)于列表的類給我們使用。

去點(diǎn)列表 .list-unstyled

.list-unstyled {
padding-left: 0;
list-style: none;
}

從源碼中，我們可以看到這樣的信息，它除了將項(xiàng)目編號(hào)去除之外，還將默認(rèn)的左邊距也清除掉了。

<ol>
<li class="list-unstyled">
項(xiàng)目列表
<ul class="list-unstyled">
<li>帶有項(xiàng)目編號(hào)</li>
<li>帶有項(xiàng)目編號(hào)</li>
</ul>
</li>
</ol>

在這樣一段代碼中，三個(gè)列表項(xiàng)會(huì)整齊的 排列在一起 ，且都沒有 項(xiàng)目符號(hào)

內(nèi)聯(lián)列表 .list-inline

除了去點(diǎn)列表之外，Bootstrap還可以通過添加類名“.list-inline”來實(shí)現(xiàn)內(nèi)聯(lián)列表，簡單點(diǎn)說就是 把垂直列表換成水平列表，而且去掉項(xiàng)目符號(hào)（編號(hào)），保持水平顯示。 也可以說內(nèi)聯(lián)列表就是為制作水平導(dǎo)航而生。

水平定義列表 .dl-horizontal

現(xiàn)有代碼如下：

<dl class="dl-horizontal">
<dt>標(biāo)題一：</dt>
<dd>描述內(nèi)容，我很喜歡前端，也很喜歡響應(yīng)式布局，它能在個(gè)不同大小的屏幕下提供很好的體驗(yàn)，我現(xiàn)在是初學(xué)者，但是我會(huì)越來強(qiáng)的</dd>
<dt>標(biāo)題二：標(biāo)題二：標(biāo)題二：標(biāo)題二：</dt>
<dd>描述內(nèi)容</dd>
</dl>

在瀏覽器全屏顯示中可以看到效果如下：

我們來把屏幕大小進(jìn)行改變，在遇到一個(gè)臨界值時(shí)（小屏），水平定義列表將回復(fù)到原始的狀態(tài)，如下改變：

這是為什么呢？我們?nèi)タ纯丛创a吧！

原來在這里添加了一個(gè)媒體查詢，只有 屏幕大于768px 的時(shí)候，添加類名 .dl-horizontal 才具有水平定義列表效果。其實(shí)現(xiàn)主要方式：

將dt設(shè)置了一個(gè)左浮動(dòng)，并且設(shè)置了一個(gè)寬度為160px
將dd設(shè)置一個(gè)margin-left的值為180px，達(dá)到水平的效果
當(dāng)標(biāo)題寬度超過160px時(shí)，將會(huì)顯示三個(gè)省略號(hào)
現(xiàn)在再看看上面的效果是不是和這里的描述都是一樣的呢？答案當(dāng)然是肯定的 ^ ^

6. 代碼

在Bootstrap主要提供了三種代碼風(fēng)格：

使用 <code></code> 來顯示單行內(nèi)聯(lián)代碼——針對于 單個(gè)單詞或單個(gè)句子 的代碼
使用 <pre></pre> 來顯示多行塊代碼——針對于 多行代碼 （也就是成塊的代碼）
使用 <kbd></kbd> 來顯示用戶輸入代碼——表示 用戶要通過鍵盤輸入的內(nèi)容

直接來看效果吧!

代碼如下：（需要注意的是，**不管使用哪種代碼風(fēng)格，在代碼中碰到小于號(hào)（ < ）和大于號(hào)（ > ）都需要使用轉(zhuǎn)義字符來替代）

code風(fēng)格：

<div>Bootstrap的代碼風(fēng)格有三種：<code><code></code>、<code><pre></code>和<code><kbd></code></div>

pre風(fēng)格：

<div>
<pre>
<ul>
<li>...</li>
</ul>
</pre>
</div>

kbd風(fēng)格：

<div>請輸入<kbd>ctrl+c</kbd>來復(fù)制代碼，然后使用<kbd>ctrl+v</kbd>來粘貼代碼</div>

<pre> 元素一般用于顯示大塊的代碼，并保證原有格式不變。但有時(shí)候代碼太多，而且不想讓其占有太大的頁面篇幅，就想控制代碼塊的大小。Bootstrap也考慮到這一點(diǎn)，你只需要在 pre標(biāo)簽 上添加類名 .pre-scrollable ，就可以控制代碼塊區(qū)域 最大高度為340px ，一旦超出這個(gè)高度，就會(huì)在 Y軸（縱向）出現(xiàn)滾動(dòng)條。

當(dāng)然，你也可以進(jìn)行自定義配置，例如：只需要在自定義的css中，對于該類添加一個(gè) word-wrap: normal; ，這樣的話，在代碼塊邊框橫向?qū)挾刃∮趦?nèi)部代碼橫向長度時(shí)，就會(huì)出現(xiàn)橫向滾動(dòng)條。

7. 表格

表格是Bootstrap的一個(gè)基礎(chǔ)組件之一，Bootstrap為表格提供了 1種基礎(chǔ)樣式 和 4種附加樣式 以及 1個(gè)支持響應(yīng)式的表格 。

對應(yīng)上面所說的，Bootstrap為表格不同的樣式風(fēng)格提供了不同的類名，主要包括：

.table 基礎(chǔ)表格
.table-striped 斑馬線表格
.table-bordered 帶邊框的表格
.table-hover 鼠標(biāo)懸停高亮的表格
.table-condensed 緊湊型表格
.table-responsive 響應(yīng)式表格

.table 主要有三個(gè)作用：

給表格設(shè)置了margin-bottom:20px以及設(shè)置單元內(nèi)距
在thead底部設(shè)置了一個(gè)2px的淺灰實(shí)線
每個(gè)單元格頂部設(shè)置了一個(gè)1px的淺灰實(shí)線
具體大家可以在源碼中查看，后幾種附加的樣式在這里也不多說，但是下面說一些 注意事項(xiàng)：

后幾種表格附加樣式，必須在基礎(chǔ)樣式 .table 之后，例如 <table class="table table-bordered table-hover">
響應(yīng)式表格：其原理是在表格 外部添加容器 把普通表格 包裹 起來，下面進(jìn)行詳細(xì)說明：

<div class="table-responsive"><!-- 關(guān)鍵！容器包裹后實(shí)現(xiàn)響應(yīng)式 -->
<table class="table table-bordered"><!-- 設(shè)置表格樣式，帶邊框的表格 -->
<thead><!-- 一個(gè)表格應(yīng)該有表頭，若直接寫tr>td這樣的結(jié)構(gòu)，瀏覽器會(huì)自動(dòng)創(chuàng)建一個(gè)tbody包裹 -->
</thead>
<tbody><!--與上同理，即使你不創(chuàng)建，瀏覽器也會(huì)自動(dòng)添加tbody包裹你的代碼 -->
</tbody>
</table>
</div>

下面是寬屏的效果（和普通的表格無區(qū)別）：

此處是窄屏的效果（可以看到滾動(dòng)條的出現(xiàn)）：

表格行的類，表格情景

在上面已經(jīng)說到了在Bootstrap中，為不同的情景做了不一樣的顏色，用于不同的信息展示。只是在類名上做了一些小小的改變。下面就可以看到：

只需要在 <tr> 標(biāo)簽添加上這些類就可以使用了。

除此之外，通過源碼可以看到，在這些顏色設(shè)置之外，Bootstrap還單獨(dú)設(shè)置了 hover效果（懸浮狀態(tài)） 的 顏色加深 效果（它對于不同的情況單獨(dú)進(jìn)行了顏色設(shè)置）。

實(shí)現(xiàn)也特別簡單，只需要像 <table class="table-hover"> 這樣，在 <table> 標(biāo)簽加上一個(gè) table-hover 的類。（在未對 <tr> 進(jìn)行情景顏色設(shè)置時(shí)，該類依然有效果，只是效果不一樣，上面已經(jīng)說到了，因?yàn)樗膯为?dú)設(shè)置，具體請到源碼中查看）

也正因?yàn)檫@樣，如果你想自定義顏色的話， 除了修改 tr 元素的顏色樣式外，在 .table-hover 表格中也要做相應(yīng)的調(diào)整!

排版的內(nèi)容到這里就結(jié)束了，希望對大家學(xué)習(xí)Bootstrap排版相關(guān)知識(shí)有所幫助！

最新評論