Bootstrap中CSS的使用方法

更新時(shí)間：2016年02月17日 09:25:29 作者：Troy123

這篇文章主要為大家詳細(xì)介紹了Bootstrap中CSS的使用方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

Bootstrap 使用了一些 HTML5 元素和 CSS 屬性，所以需要使用 HTML5 文檔類型。

<!DOCTYPE html>
<html lang="zh-CN">
 ...
</html>

為了讓 Bootstrap 開(kāi)發(fā)的網(wǎng)站對(duì)移動(dòng)設(shè)備友好，確保適當(dāng)?shù)睦L制和觸屏縮放，需要在網(wǎng)頁(yè)的 head 之中添加 viewport meta 標(biāo)簽，如下所示：

<meta name="viewport" content="width=device-width, //視口寬度為設(shè)備寬度
   initial-scale=1.0, //縮放程度
   maximum-scale=1.0, //最大縮放級(jí)別（可選）
   user-scalable=no">//禁止頁(yè)面縮放（可選）

Bootstrap 使用 Normalize 來(lái)建立跨瀏覽器的一致性。Normalize.css 是一個(gè)很小的 CSS 文件，在 HTML 元素的默認(rèn)樣式中提供了更好的跨瀏覽器一致性。

關(guān)于布局

Bootstrap 提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式網(wǎng)格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列。

img-responsive 用于img元素

container 用于包裹頁(yè)面上的內(nèi)容的元素

行需要放在container，并用來(lái)創(chuàng)建列的水平組。
預(yù)定義的網(wǎng)格類，比如 .row 和 .col-xs-4，可用于快速創(chuàng)建網(wǎng)格布局。

行列可相互嵌套，嵌套后的自適應(yīng)以父級(jí)元素為準(zhǔn)，而不是設(shè)備寬度
要?jiǎng)?chuàng)建三個(gè)相等的列，則使用三個(gè) col-xs-4，要是12個(gè)列就12個(gè)col-xs-1。

<div class="container">
 <div class="row">
 <div class="col-xs-6 col-md-2 col-md-offset-1"></div>
 <div class="col-xs-6 col-md-3"></div>
 <div class="col-xs-6 col-md-3"></div>
 <div class="col-xs-6 col-md-3"></div>
 </div>
 <div class="row">...</div>
</div>
<div class="container">.... 
<!--以上代碼在手機(jī)上就是兩行兩列，在電腦上是一行四列，其中第一列前面有空白，比其它列寬度小三分之一-->
//可使用.col-md-push-* 和 .col-md-pull-* 這種類設(shè)定顯示，col-md-push-6按照我個(gè)人的理解，是在左面浮動(dòng)了6列，然后再插入元素，col-md-pull-3則是在右邊浮動(dòng)了3列，然后從右往左插入元素

媒體查詢是非常別致的"有條件的 CSS 規(guī)則"。它只適用于一些基于某些規(guī)定條件的 CSS。如果滿足那些條件，則應(yīng)用相應(yīng)的樣式。

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
//對(duì)于所有帶有 min-width: @screen-sm-min 的設(shè)備，如果屏幕的寬度小于 @screen-sm-max，則會(huì)進(jìn)行一些處理。

關(guān)于排版

關(guān)于文本

<small>本行內(nèi)容是在標(biāo)簽內(nèi)</small><br>
<strong>本行內(nèi)容是在標(biāo)簽內(nèi)</strong><br>
<em>本行內(nèi)容是在標(biāo)簽內(nèi)，并呈現(xiàn)為斜體</em><br>
<p class="text-left">向左對(duì)齊文本</p>
<p class="text-center">居中對(duì)齊文本</p>
<p class="text-right">向右對(duì)齊文本</p>
<p class="text-muted">本行內(nèi)容是減弱的</p>灰
<p class="text-primary">本行內(nèi)容帶有一個(gè) primary class</p>藍(lán)
<p class="text-success">本行內(nèi)容帶有一個(gè) success class</p>綠
<p class="text-info">本行內(nèi)容帶有一個(gè) info class</p>深藍(lán)
<p class="text-warning">本行內(nèi)容帶有一個(gè) warning class</p>黃
<p class="text-danger">本行內(nèi)容帶有一個(gè) danger class</p>紅

Bootstrap 定義 <abbr> 元素的樣式為顯示在文本底部的一條虛線邊框，當(dāng)鼠標(biāo)懸停在上面時(shí)會(huì)顯示完整的文本（只要您為 <abbr> title 屬性添加了文本）。為了得到一個(gè)更小字體的文本，請(qǐng)?zhí)砑?.initialism 到 <abbr>。

<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>

使用 <address> 標(biāo)簽，您可以在網(wǎng)頁(yè)上顯示聯(lián)系信息。
使用<Blockqoute>標(biāo)簽作為引用

<blockquote>這是一個(gè)帶有源標(biāo)題的引用。<small>Someone famous in Source Title</small></blockquote>

list-unstyled用于未定義樣式列表ul，list-inline用于水平列表ul
pre-scrollable使pre可滾動(dòng)
<code>內(nèi)聯(lián)顯示代碼，<pre>顯示多行代碼

關(guān)于表格

通過(guò)把任意的 .table 包在 .table-responsive class 內(nèi)，您可以讓表格水平滾動(dòng)以適應(yīng)小型設(shè)備（小于 768px）。當(dāng)在大于 768px 寬的大型設(shè)備上查看時(shí)，您將看不到任何的差別。

<div class="table-responsive">
 <table class="table">
 <caption>響應(yīng)式表格布局</caption>
 <thead>
 <tr>
 <th>產(chǎn)品</th>
 <th>付款日期</th>
 <th>狀態(tài)</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>產(chǎn)品1</td>
 <td>23/11/2013</td>
 <td>待發(fā)貨</td>
 </tr>
 </tbody>
 </table>
</div>

關(guān)于表單

在form上加上屬性role="form"就會(huì)應(yīng)用Bootstrap基本的表單結(jié)構(gòu)，此時(shí)默認(rèn)為垂直表單
把標(biāo)簽和控件放在一個(gè)帶有 class .form-group 的 <div> 中。這是獲取最佳間距所必需的。
向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。

<input type="text" class="form-control" placeholder="文本輸入"/>
<textarea class="form-control" rows="3"></textarea>
<label for="name">可多選的選擇列表</label>
 <select multiple class="form-control">
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
 </select>

在form加上類calss=form-inline，那么表單元素就會(huì)變成內(nèi)聯(lián)的
在form加上類class=form-horizontal，那么表單元素就會(huì)變成水平的

1）設(shè)置表單控件padding和margin值
2）改變“form-group”的表現(xiàn)形式，類似于網(wǎng)格系統(tǒng)的“row”。
3）向標(biāo)簽添加 class .control-label。

復(fù)選框和單選框

1）對(duì)一系列復(fù)選框和單選框使用 .checkbox-inline 或 .radio-inline class，控制它們顯示在同一行上。

當(dāng)您需要在一個(gè)水平表單內(nèi)的表單標(biāo)簽后放置純文本時(shí)，請(qǐng)?jiān)?<p> 上使用 class .form-control-static。
禁用的輸入框 input，如果您想要禁用一個(gè)輸入框 input，只需要簡(jiǎn)單地添加 disabled 屬性
對(duì) <fieldset> 添加 disabled 屬性來(lái)禁用 <fieldset> 內(nèi)的所有控件。
Bootstrap 包含了錯(cuò)誤、警告和成功消息的驗(yàn)證樣式。只需要對(duì)父元素簡(jiǎn)單地添加適當(dāng)?shù)?class（.has-warning、 .has-error 或 .has-success）即可使用驗(yàn)證狀態(tài)。
.input-lg 和.input-sm可以改變輸入框的高度樣式
help-block Bootstrap 表單控件可以在輸入框 input 上有一個(gè)塊級(jí)幫助文本。為了添加一個(gè)占用整個(gè)寬度的內(nèi)容塊，請(qǐng)?jiān)?<input> 后使用 .help-block。

<input class="form-control" type="text" placeholder="">
 <span class="help-block">一個(gè)較長(zhǎng)的幫助文本塊，超過(guò)一行，
 需要擴(kuò)展到下一行。本實(shí)例中的幫助文本總共有兩行。</span>

關(guān)于按鈕

 <button type="button" class="btn btn-default">默認(rèn)按鈕</button>

<!-- 提供額外的視覺(jué)效果，標(biāo)識(shí)一組按鈕中的原始動(dòng)作 -->
<button type="button" class="btn btn-primary">原始按鈕</button>

<!-- 表示一個(gè)成功的或積極的動(dòng)作 -->
<button type="button" class="btn btn-success">成功按鈕</button>

<!-- 信息警告消息的上下文按鈕 -->
<button type="button" class="btn btn-info">信息按鈕</button>

<!-- 表示應(yīng)謹(jǐn)慎采取的動(dòng)作 -->
<button type="button" class="btn btn-warning">警告按鈕</button>

<!-- 表示一個(gè)危險(xiǎn)的或潛在的負(fù)面動(dòng)作 -->
<button type="button" class="btn btn-danger">危險(xiǎn)按鈕</button>

<!-- 并不強(qiáng)調(diào)是一個(gè)按鈕，看起來(lái)像一個(gè)鏈接，但同時(shí)保持按鈕的行為 -->
<button type="button" class="btn btn-link">鏈接按鈕</button>

按鈕的大小

<p>
 <button type="button" class="btn btn-primary btn-lg">
 大的原始按鈕
 </button>
</p>
<p>
 <button type="button" class="btn btn-primary">
 默認(rèn)大小的原始按鈕
 </button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-sm">
 小的原始按鈕
 </button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-xs">
 特別小的原始按鈕
 </button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-lg btn-block">
 塊級(jí)的原始按鈕
 </button>
</p>