Bootstrap排版的示例分析-創(chuàng)新互聯(lián)

小編給大家分享一下Bootstrap排版的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)建站主要從事成都網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)興城,10余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):13518219792

GitHub上這樣介紹 bootstrap：

• 簡(jiǎn)單靈活可用于架構(gòu)流行的用戶界面和交互接口的html、css、javascript工具集。

• 基于html5、css3的bootstrap，具有大量的誘人特性：友好的學(xué)習(xí)曲線，卓越的兼容性，響應(yīng)式設(shè)計(jì)，12列格網(wǎng)，樣式向?qū)臋n。

• 自定義JQuery插件，完整的類庫(kù)，基于Less等。

標(biāo)題

主標(biāo)題

Bootstrap和普通的HTML頁(yè)面一樣，定義標(biāo)題都是使用標(biāo)簽<h2>到<h7>,只不過(guò)Bootstrap覆蓋了其默認(rèn)的樣式，使用其在所有瀏覽器下顯示的效果一樣，具體定義的規(guī)則可以如下表所示：

通過(guò)比較可以發(fā)現(xiàn)，Bootstrap標(biāo)題樣式進(jìn)行了以下顯著的優(yōu)化重置：

1、重新設(shè)置了margin-top和margin-bottom的值， h2~h4重置后的值都是20px；h5~h7重置后的值都是10px。
2、所有標(biāo)題的行高都是1.1（也就是font-size的1.1倍）,而且文本顏色和字體都繼承父元素的顏色和字體。
3、固定不同級(jí)別標(biāo)題字體大小，h2=36px，h3=30px，h4=24px，h5=18px，h6=14px和h7=12px。

標(biāo)題的具體運(yùn)用非常簡(jiǎn)單，和我們平時(shí)運(yùn)用是一樣的，使用 <h2> ~ <h7> 標(biāo)簽，分別表示標(biāo)題一至標(biāo)題六，h 后面的數(shù)字越大，表示級(jí)別越小，文本也越小。來(lái)看一個(gè)簡(jiǎn)單的效果：右側(cè)代碼編輯器中的10-16行的代碼。

在Bootstrap中為了讓非標(biāo)題元素和標(biāo)題使用相同的樣式，還特意定義了.h2~.h7六個(gè)類名。

副標(biāo)題

除此之外，我們?cè)赪eb的制作中，常常會(huì)碰到在一個(gè)標(biāo)題后面緊跟著一行小的副標(biāo)題。在Bootstrap中他也考慮了這種排版效果，使用了標(biāo)簽來(lái)制作副標(biāo)題。這個(gè)副標(biāo)題具有其自己的一些獨(dú)特樣式：

1、行高都是1，而且font-weight設(shè)置了normal變成了常規(guī)效果（不加粗），同時(shí)顏色被設(shè)置為灰色（#999）。
2、由于內(nèi)的文本字體在h2~h4內(nèi)，其大小都設(shè)置為當(dāng)前字號(hào)的65%；而在h5~h7內(nèi)的字號(hào)都設(shè)置為當(dāng)前字號(hào)的75%；
詳細(xì)代碼請(qǐng)參閱bootstrap.css文件中第407行~第443行。

段落

段落是排版中另一個(gè)重要元素之一。在Bootstrap中為文本設(shè)置了一個(gè)全局的文本樣式（這里所說(shuō)的文本是指正文文本）：

1、全局文本字號(hào)為14px(font-size)。

2、行高為1.42857143（line-height），大約是20px(大家看到一串的小數(shù)或許會(huì)有疑惑，其實(shí)他是通過(guò)LESS編譯器計(jì)算出來(lái)的，當(dāng)然Sass也有這樣的功能)。

3、顏色為深灰色（#333）；

4、字體為”Helvetica Neue”, Helvetica, Arial, sans-serif;（font-family），或許這樣的字體對(duì)我們中文并不太合適，但在實(shí)際項(xiàng)目中，大家可以根據(jù)自己的需求進(jìn)行重置，在此我們不做過(guò)多闡述，我們回到這里。該設(shè)置都定義在元素上，由于這幾個(gè)屬性都是繼承屬性，所以Web頁(yè)面中文本（包括段落p元素）如無(wú)重置都會(huì)具有這些樣式效果。

/源碼請(qǐng)查看bootstrap.css文件中第274行~280行/

body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}

強(qiáng)調(diào)內(nèi)容

在實(shí)際項(xiàng)目中，對(duì)于一些重要的文本，希望突出強(qiáng)調(diào)的部分都會(huì)做另外的樣式處理。Bootstrap同樣對(duì)這部分做了一些輕量級(jí)的處理。

如果想讓一個(gè)段落p突出顯示，可以通過(guò)添加類名“.lead”實(shí)現(xiàn)，其作用就是增大文本字號(hào)，加粗文本，而且對(duì)行高和margin也做相應(yīng)的處理。用法如下：

<p>我是普通文本，我的樣子長(zhǎng)成這樣我是普通文本，我的樣子長(zhǎng)成這樣我是普通文本，</p>
<p class="lead">我是特意要突出的文本，我的樣子成這樣。我是特意要突出的文本，我的樣子長(zhǎng)成這樣。</p>

除此之外，Bootstrap還通過(guò)元素標(biāo)簽:<small>、<strong>、<em>和<cite>給文本做突出樣式處理。

粗體

粗體就是給文本加粗，在普通的元素中我們一般通過(guò)font-weight設(shè)置為bold關(guān)鍵詞給文本加粗。在Bootstrap中，可以使用和標(biāo)簽讓文本直接加粗。

斜體

在排版中，除了用加粗來(lái)強(qiáng)調(diào)突出的文本之外，還可以使用斜體。斜體類似于加粗一樣，除了可以給元素設(shè)置樣式font-style值為italic實(shí)現(xiàn)之外，在Bootstrap中還可以通過(guò)使用標(biāo)簽<em>或<i>來(lái)實(shí)現(xiàn)。
例如，下面的代碼使用了<em>和<i>標(biāo)簽定義了強(qiáng)調(diào)文本：

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

在Bootstrap中除了使用標(biāo)簽、等說(shuō)明正文某些字詞、句子的重要性，Bootstrap還定義了一套類名，這里稱其為強(qiáng)調(diào)類名（類似前面說(shuō)的“.lead”）,這些強(qiáng)調(diào)類都是通過(guò)顏色來(lái)表示強(qiáng)調(diào)，具本說(shuō)明如下：

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

文本對(duì)齊風(fēng)格

在排版中離不開(kāi)文本的對(duì)齊方式。在CSS中常常使用text-align來(lái)實(shí)現(xiàn)文本的對(duì)齊風(fēng)格的設(shè)置。其中主要有四種風(fēng)格：

? 左對(duì)齊，取值left

? 居中對(duì)齊，取值center

? 右對(duì)齊，取值right

? 兩端對(duì)齊，取值justify

為了簡(jiǎn)化操作，方便使用，Bootstrap通過(guò)定義四個(gè)類名來(lái)控制文本的對(duì)齊風(fēng)格：

.text-left：左對(duì)齊

.text-center：居中對(duì)齊

.text-right：右對(duì)齊

.text-justify：兩端對(duì)齊

特別聲明：目前兩端對(duì)齊在各瀏覽器下解析各有不同，特別是應(yīng)用于中文文本的時(shí)候。所以項(xiàng)目中慎用。

列表

在HTML文檔中，列表結(jié)構(gòu)主要有三種：有序列表、無(wú)序列表和定義列表。具體使用的標(biāo)簽說(shuō)明如下：

無(wú)序列表

Bootstrap對(duì)于列表，只是在margin上做了一些調(diào)整。

<ul>
 <li>…</li>
</ul>

有序列表

<ol>
 <li>…</li>
</ol>

定義列表

對(duì)于定義列表而言，Bootstrap并沒(méi)有做太多的調(diào)整，只是調(diào)整了行間距，外邊距和字體加粗效果。

<dl>
 <dt>…</dt>
 <dd>…</dd>
</dl>

<dl>
 <dt>北京</dt>
 <dd>北京是中國(guó)的首都,是政治文化集中地</dd>
 <dt>上海</dt>
 <dd>經(jīng)濟(jì)中心</dd>
</dl>

水平定義列表

水平定義列表就像內(nèi)聯(lián)列表一樣，Bootstrap可以給

添加類名“.dl-horizontal”給定義列表實(shí)現(xiàn)水平顯示效果。
/源碼請(qǐng)查看bootstrap.css文件第608行~第621行/

@media (min-width: 768px) {
.dl-horizontal dt {
float: left;
width: 160px;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
 }
.dl-horizontal dd {
margin-left: 180px;
 }
}

此處添加了一個(gè)媒體查詢。也就是說(shuō)，只有屏幕大于768px的時(shí)候，添加類名“.dl-horizontal”才具有水平定義列表效果。其實(shí)現(xiàn)主要方式：
1、將dt設(shè)置了一個(gè)左浮動(dòng)，并且設(shè)置了一個(gè)寬度為160px
2、將dd設(shè)置一個(gè)margin-left的值為180px，達(dá)到水平的效果
3、當(dāng)標(biāo)題寬度超過(guò)160px時(shí)，將會(huì)顯示三個(gè)省略號(hào)

寬屏下的效果（屏幕大于768px）：

當(dāng)你縮小你的瀏覽器屏幕時(shí)，水平定義列表將回復(fù)到原始的狀態(tài)。

## 去點(diǎn)列表在Bootstrap中默認(rèn)情況下無(wú)序列表和有序列表是帶有項(xiàng)目符號(hào)的，但在實(shí)際工作中很多時(shí)候，我們的列表是不需要這個(gè)編號(hào)的，比如說(shuō)用無(wú)序列表做導(dǎo)航的時(shí)候。Bootstrap為眾多開(kāi)發(fā)者考慮的非常周道，通過(guò)給無(wú)序列表添加一個(gè)類名“.list-unstyled”,這樣就可以去除默認(rèn)的列表樣式的風(fēng)格。除了項(xiàng)目編號(hào)之外，還將列表默認(rèn)的左邊內(nèi)距也清０了。

## 內(nèi)聯(lián)列表Bootstrap像去點(diǎn)列表一樣，通過(guò)添加類名“.list-inline”來(lái)實(shí)現(xiàn)內(nèi)聯(lián)列表，簡(jiǎn)單點(diǎn)說(shuō)就是把垂直列表?yè)Q成水平列表，而且去掉項(xiàng)目符號(hào)（編號(hào)），保持水平顯示。也可以說(shuō)內(nèi)聯(lián)列表就是為制作水平導(dǎo)航而生。

## 描述列表

水平描述列表

代碼

本節(jié)內(nèi)容相對(duì)來(lái)說(shuō)比較簡(jiǎn)單，一般在個(gè)人博客上使用的較為頻繁，用于顯示代碼的風(fēng)格。在Bootstrap主要提供了三種代碼風(fēng)格：
1、使用<code></code>來(lái)顯示單行內(nèi)聯(lián)代碼
2、使用<pre></pre>來(lái)顯示多行塊代碼: <pre>元素一般用于顯示大塊的代碼，并保證原有格式不變。但有時(shí)候代碼太多，而且不想讓其占有太大的頁(yè)面篇幅，就想控制代碼塊的大小。Bootstrap也考慮到這一點(diǎn)，你只需要在pre標(biāo)簽上添加類名“.pre-scrollable”，就可以控制代碼塊區(qū)域大高度為340px，一旦超出這個(gè)高度，就會(huì)在Y軸出現(xiàn)滾動(dòng)條。
3、使用<kbd></kbd>來(lái)顯示用戶輸入代碼

注意:不管使用哪種代碼風(fēng)格，在代碼中碰到小于號(hào)<要使用硬編碼&lt;來(lái)替代，大于號(hào)>使用&gt;來(lái)替代。而且對(duì)于<pre>代碼塊風(fēng)格，標(biāo)簽前面留多少個(gè)空格，在顯示效果中就會(huì)留多少個(gè)空格。建議在編寫(xiě)HTML標(biāo)簽時(shí)，就控制好。

表格

表格是Bootstrap的一個(gè)基礎(chǔ)組件之一，Bootstrap為表格提供了1種基礎(chǔ)樣式和4種附加樣式以及1個(gè)支持響應(yīng)式的表格。
* .table：基礎(chǔ)表格
* .table-striped：斑馬線表格
* .table-bordered：帶邊框的表格
* .table-hover：鼠標(biāo)懸停高亮的表格
* .table-condensed：緊湊型表格
* .table-responsive：響應(yīng)式表格

表格行的類

Bootstrap還為表格的行元素提供了五種不同的類名，每種類名控制了行的不同背景顏色，具體說(shuō)明如下表所示：

其使用非常的簡(jiǎn)單，只需要在元素中添加上表對(duì)應(yīng)的類名，就能達(dá)到你自己需要的效果
特別提示：除了”.active”之外，其他四個(gè)類名和”.table-hover”配合使用時(shí)，Bootstrap針對(duì)這幾種樣式也做了相應(yīng)的懸浮狀態(tài)的樣式設(shè)置，所以如果需要給tr元素添加其他顏色樣式時(shí)，在”.table-hover”表格中也要做相應(yīng)的調(diào)整。
注意要實(shí)現(xiàn)懸浮狀態(tài)，需要在

標(biāo)簽上加入table-hover類

基礎(chǔ)表格

對(duì)表格的結(jié)構(gòu)，跟我們平時(shí)使用表格是一樣的：

<table>
<thead>
<tr>
<th>表格標(biāo)題</th>
…
</tr>
</thead>
<tbody>
<tr>
<td>表格單元格</td>
…
</tr>
  …
</tbody>
</table>

在Bootstrap中，對(duì)于基礎(chǔ)表格是通過(guò)類名“.table”來(lái)控制。如果在

元素中不添加任何類名，表格是無(wú)任何樣式效果的。想得到基礎(chǔ)表格，我們只需要在
元素上添加“.table”類名，就可以得到Bootstrap的基礎(chǔ)表格
“.table”主要有三個(gè)作用：
1. 給表格設(shè)置了margin-bottom:20px以及設(shè)置單元內(nèi)距
2. 在thead底部設(shè)置了一個(gè)2px的淺灰實(shí)線
3. 每個(gè)單元格頂部設(shè)置了一個(gè)1px的淺灰實(shí)線

斑馬線表格

有時(shí)候?yàn)榱俗尡砀窀唛喿x性，需要將表格制作成類似于斑馬線的效果。簡(jiǎn)單點(diǎn)說(shuō)就是讓表格帶有背景條紋效果。在Bootstrap中實(shí)現(xiàn)這種表格效果并不困難，只需要在

的基礎(chǔ)上增加類名“.table-striped”即可。其效果與基礎(chǔ)表格相比，僅是在tbody隔行有一個(gè)淺灰色的背景色。其實(shí)現(xiàn)原理也非常的簡(jiǎn)單，利用CSS3的結(jié)構(gòu)性選擇器“:nth-child”來(lái)實(shí)現(xiàn)，所以對(duì)于IE8以及其以下瀏覽器，沒(méi)有背景條紋效果。

<table class="table table-striped"> 
</table>

帶邊框的表格

基礎(chǔ)表格僅讓表格部分地方有邊框，但有時(shí)候需要整個(gè)表格具有邊框效果。Bootstrap出于實(shí)際運(yùn)用，也考慮這種表格效果，即所有單元格具有一條1px的邊框。
Bootstrap中帶邊框的表格使用方法和斑馬線表格的使用方法類似，只需要在基礎(chǔ)表格

基礎(chǔ)上添加一個(gè)“.table-bordered”類名即可：

<table class="table table-bordered">
 …
</table>

鼠標(biāo)懸浮高亮的表格

當(dāng)鼠標(biāo)懸停在表格的行上面有一個(gè)高亮的背景色，這樣的表格讓人看起來(lái)就是舒服，時(shí)刻告訴用戶正在閱讀表格哪一行的數(shù)據(jù)。Bootstrap的確沒(méi)有讓你失望，他也考慮到這種效果，其提供了一個(gè)“.table-hover”類名來(lái)實(shí)現(xiàn)這種表格效果。
鼠標(biāo)懸停高亮的表格使用也簡(jiǎn)單，僅需要

元素上添加類名“table-hover”即可：

<table class="table table-hover">
…
</table>

注：其實(shí)，鼠標(biāo)懸浮高亮表格，可以和Bootstrap其他表格混合使用。簡(jiǎn)單點(diǎn)說(shuō)，只要你想讓你的表格具備懸浮高亮效果，你只要給這個(gè)表格添加“table-hover”類名就好了。例如，將前面介紹的幾種表格結(jié)合使用：

<table class="table table-striped table-bordered table-hover">
…
</table>

緊湊型表格

何謂緊湊型表格，簡(jiǎn)單理解，就是單元格沒(méi)內(nèi)距或者內(nèi)距較其他表格的內(nèi)距更小。換句話說(shuō)，要實(shí)現(xiàn)緊湊型表格只需要重置表格單元格的內(nèi)距padding的值。那么在Bootstrap中，通過(guò)類名“table-condensed”重置了單元格內(nèi)距值。
緊湊型表格的運(yùn)用，也只是需要在

基礎(chǔ)上添加類名“table-condensed”：

<table class="table table-condensed">
…
</table>

從上面效果圖可以看出，Bootstrap中緊湊型的表格與基礎(chǔ)表格差別不大，因?yàn)橹皇菍卧竦膬?nèi)距由8px調(diào)至5px。

另外從上面的示例中大家可能也發(fā)現(xiàn)了，不管制作哪種表格都離不開(kāi)類名“table”。所以大家在使用Bootstrap表格時(shí)，千萬(wàn)注意，你的

元素中一定不能缺少類名“table”。

響應(yīng)式表格

隨著各種手持設(shè)備的出現(xiàn)，要想讓你的Web頁(yè)面適合千羅萬(wàn)像的設(shè)備瀏覽，響應(yīng)式設(shè)計(jì)的呼聲越來(lái)越高。在Bootstrap中也為表格提供了響應(yīng)式的效果，將其稱為響應(yīng)式表格。

Bootstrap提供了一個(gè)容器，并且此容器設(shè)置類名“.table-responsive”,此容器就具有響應(yīng)式效果，然后將

置于這個(gè)容器當(dāng)中，這樣表格也就具有響應(yīng)式效果。

Bootstrap中響應(yīng)式表格效果表現(xiàn)為：當(dāng)你的瀏覽器可視區(qū)域小于768px時(shí)，表格底部會(huì)出現(xiàn)水平滾動(dòng)條。當(dāng)你的瀏覽器可視區(qū)域大于768px時(shí)，表格底部水平滾動(dòng)條就會(huì)消失。示例如下：

<div class="table-responsive">
<table class="table table-bordered">
  …
</table>
</div>

以上是“Bootstrap排版的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站muchs.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站名稱：Bootstrap排版的示例分析-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)網(wǎng)址：http://muchs.cn/article48/pdsep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開(kāi)發(fā)、網(wǎng)站導(dǎo)航、域名注冊(cè)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站制作、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)