源碼解讀Bootstrap排版

粗體

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

<p>我在學習<strong>Bootstrap</strong></p>

源碼

b,strong { font-weight: bold;}

斜體

使用標簽<em>或<i>來實現。
例如：

<p>我在學<i>Bootstrap</i>。</p>

強調相關的類

強調類都是通過顏色來表示強調
.text-muted：提示，使用淺灰色（#777）
.text-primary：主要，使用藍色（#428bca）
.text-success：成功，使用淺綠色(#3c763d)
.text-info：通知信息，使用淺藍色（#31708f）
.text-warning：警告，使用黃色（#8a6d3b）
.text-danger：危險，使用褐色（#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;}

文本對齊風格

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

<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;}

目前兩端對齊在各瀏覽器下解析各有不同，特別是應用于中文文本的時候。所以項目中慎用。

列表

Bootstrap對于列表，只是在margin上做了一些調整
源碼：

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

去點列表

給無序列表添加一個類名“.list-unstyled”,這樣就可以去除默認的列表樣式的風格。
例如：

<ol class="list-unstyled"> <li>不帶項目編號</li> <li>不帶項目編號</li></ol>

源碼：

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

內聯列表

通過添加類名“.list-inline”來實現內聯列表，其實就是把垂直列表換成水平列表，而且去掉項目符號，保持水平顯示。可以用來做水平導航。
源碼：

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

定義列表

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

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

水平定義列表

水平定義列表就像內聯列表一樣，添加類名“.dl-horizontal”給定義列表實現水平顯示效果。
源碼：

@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; }}

此處添加了一個媒體查詢。也就是說，只有屏幕大于768px的時候，添加類名“.dl-horizontal”才具有水平定義列表效果。當縮小瀏覽器屏幕時，水平定義列表將回復到原始的狀態。

代碼

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

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

表格

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

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

響應式表格的用法和其他幾個不同。
Bootstrap提供了一個容器，并且此容器設置類名“.table-responsive”,此容器就具有響應式效果，然后將<table class="table">置于這個容器當中，這樣表格也就具有響應式效果。
Bootstrap中響應式表格效果表現為：當你的瀏覽器可視區域小于768px時，表格底部會出現水平滾動條。當你的瀏覽器可視區域大于768px時，表格底部水平滾動條就會消失。示例如下：

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

表格行的類

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

<tr class="active">

本文系列教程整理到：Bootstrap基礎教程 專題中，歡迎點擊學習。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。