源碼解讀Bootstrap排版

粗體

可以使用<b>和<strong>標(biāo)簽讓文本直接加粗。
例如：

<p>我在學(xué)習(xí)<strong>Bootstrap</strong></p>

源碼

b,
strong {
 font-weight: bold;
}

斜體

使用標(biāo)簽<em>或<i>來實(shí)現(xiàn)。
例如：

<p>我在學(xué)<i>Bootstrap</i>。</p>

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

強(qiáng)調(diào)類都是通過顏色來表示強(qiáng)調(diào)
.text-muted：提示，使用淺灰色（#777）
.text-primary：主要，使用藍(lán)色（#428bca）
.text-success：成功，使用淺綠色(#3c763d)
.text-info：通知信息，使用淺藍(lán)色（#31708f）
.text-warning：警告，使用黃色（#8a6d3b）
.text-danger：危險(xiǎn)，使用褐色（#a94442）
例如：

<div class="text-primary">.text-primary效果</div>

源碼

.text-muted {
 color: #777;
}
.text-primary {
 color: #428bca;
}
a.text-primary:hover {
 color: #3071a9;
}
.text-success {
 color: #3c763d;
}
a.text-success:hover {
 color: #2b542c;
}
.text-info {
 color: #31708f;
}
a.text-info:hover {
 color: #245269;
}
.text-warning {
 color: #8a6d3b;
}
a.text-warning:hover {
 color: #66512c;
}
.text-danger {
 color: #a94442;
}
a.text-danger:hover {
 color: #843534;
}

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

.text-left：左對(duì)齊
.text-center：居中對(duì)齊
.text-right：右對(duì)齊
.text-justify：兩端對(duì)齊
例如：

<p class="text-left">我居左</p>

源碼：

.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}

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

列表

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

ul,
ol {
 margin-top: 0;
 margin-bottom: 10px;
}
ul ul,
ol ul,
ul ol,
ol ol {
 margin-bottom: 0;
}

去點(diǎn)列表

給無序列表添加一個(gè)類名“.list-unstyled”,這樣就可以去除默認(rèn)的列表樣式的風(fēng)格。
例如：

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

源碼：

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

內(nèi)聯(lián)列表

通過添加類名“.list-inline”來實(shí)現(xiàn)內(nèi)聯(lián)列表，其實(shí)就是把垂直列表換成水平列表，而且去掉項(xiàng)目符號(hào)，保持水平顯示?？梢杂脕碜鏊綄?dǎo)航。
源碼：

.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}

定義列表

Bootstrap只是調(diào)整了行間距，外邊距和字體加粗效果
源碼：

dl {
margin-top: 0;
margin-bottom: 20px;
}
dt,
dd {
line-height: 1.42857143;
}
dt {
font-weight: bold;
}
dd {
margin-left: 0;
}

水平定義列表

水平定義列表就像內(nèi)聯(lián)列表一樣，添加類名“.dl-horizontal”給定義列表實(shí)現(xiàn)水平顯示效果。
源碼：

@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è)媒體查詢。也就是說，只有屏幕大于768px的時(shí)候，添加類名“.dl-horizontal”才具有水平定義列表效果。當(dāng)縮小瀏覽器屏幕時(shí)，水平定義列表將回復(fù)到原始的狀態(tài)。

代碼

主要提供了三種代碼風(fēng)格：
<code></code>顯示單行內(nèi)聯(lián)代碼，一般是針對(duì)于單個(gè)單詞或單個(gè)句子的代碼
<pre></pre>來顯示多行塊代碼，一般是針對(duì)于多行代碼（也就是成塊的代碼）
<kbd></kbd>來顯示用戶輸入代碼，一般是表示用戶要通過鍵盤輸入的內(nèi)容
在pre標(biāo)簽上添加類名“.pre-scrollable”，就可以控制代碼塊區(qū)域最大高度為340px，一旦超出這個(gè)高度，就會(huì)在Y軸出現(xiàn)滾動(dòng)條。
源碼：

.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}

表格

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

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

響應(yīng)式表格的用法和其他幾個(gè)不同。
Bootstrap提供了一個(gè)容器，并且此容器設(shè)置類名“.table-responsive”,此容器就具有響應(yīng)式效果，然后將<table class="table">置于這個(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>

表格行的類

tr有五種不同的類名，可以顯示行的不同的顏色
.active 表示當(dāng)前活動(dòng)的信息
.success 表示成功或者正確的行為
.info 表示中立的信息或行為
.warning 表示警告，需要特別注意
.danger 表示危險(xiǎn)或者可能是錯(cuò)誤的行為
例如：

<tr class="active">

本文系列教程整理到：Bootstrap基礎(chǔ)教程 專題中，歡迎點(diǎn)擊學(xué)習(xí)。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論