Bootstrap的CSS樣式全面使用介紹
Bootstrap 自帶以下特性：全局的 CSS設(shè)置、定義基本的 HTML 元素樣式、可擴(kuò)展的 class，以及一個(gè)先進(jìn)的網(wǎng)格系統(tǒng)。HTML的基本元素均可以通過(guò)class設(shè)置樣式并得到增強(qiáng)效果。
1、基本設(shè)置
（1）使用 HTML5 文檔類型。
Bootstrap使用了 HTML5 元素和 Css屬性，故需要使用 HTML5。
（2）響應(yīng)移動(dòng)設(shè)備。
移動(dòng)設(shè)備與桌面設(shè)備的差別 在于 屏幕的大小，Bootstrap 使用 viewport 來(lái)控制屏幕的縮放。
指的是讓viewport的寬度等于物理設(shè)備上的真實(shí)分辨率，且不允許用戶縮放。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
【屬性】
width：控制 viewport 的大小，可以指定的一個(gè)值，如 600，或者特殊的值，如 device-width 為設(shè)備的寬度（單位為縮放為 100% 時(shí)的 CSS 的像素）。
height：和 width 相對(duì)應(yīng)，指定高度。
initial-scale：初始縮放比例，也即是當(dāng)頁(yè)面第一次 load 的時(shí)候縮放比例。
maximum-scale：允許用戶縮放到的最大比例。
minimum-scale：允許用戶縮放到的最小比例。
user-scalable：用戶是否可以手動(dòng)縮放，可以傳"yes"或"no"。(大多數(shù)情況下有用，可以自己寫js去實(shí)現(xiàn))
shrink-to-fit：自適應(yīng)手機(jī)屏幕寬度，shrink-to-fit=no屬性是蘋果專屬的，在Safari IOS9開(kāi)始引入，安，卓以及其他系統(tǒng)沒(méi)有。
2、網(wǎng)格（Grid）
（1）Bootstrap 網(wǎng)格系統(tǒng)（Grid System）
Bootstrap 包含了一個(gè)響應(yīng)式的、移動(dòng)設(shè)備優(yōu)先的、不固定的網(wǎng)格系統(tǒng)，可以隨著設(shè)備或視口大小的增加而適當(dāng)?shù)財(cái)U(kuò)展到 12 列。
（2）container
container 用于包裹頁(yè)面上的內(nèi)容，其左右外邊距由瀏覽器決定。
（3）使用 Grid
Step1：使用 container 包裹頁(yè)面。
Step2：使用 col-xs- 、col-sm- 、col-md- 、col-lg- 來(lái)劃分網(wǎng)格。
step3：使用 @media 來(lái)監(jiān)控 屏幕大小的變化。
/* 超小設(shè)備（手機(jī)，小于 768px） */
@media (max-width: @screen-xs-max) { ... }
/* 小型設(shè)備（平板電腦，768px 起） */
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
/* 中型設(shè)備（臺(tái)式電腦，992px 起） */
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
/* 大型設(shè)備（大臺(tái)式電腦，1200px 起） */
@media (min-width: @screen-lg-min) { ... }（4）舉例：
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<p>排序前</p>
<div class="col-md-4" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
我在左邊
</div>
<div class="col-md-8" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
我在右邊
</div>
</div>
<div class="row">
<p>排序后</p>
<div class="col-md-4 col-md-push-8" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444,inset -1px 1px 1px #444;">
我在左邊
</div>
<div class="col-md-8 col-md-pull-4" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444,inset -1px 1px 1px #444;">
我在右邊
</div>
</div>
</div>3、文本處理
（1）small 屬性 、<small> 標(biāo)簽
寫在父標(biāo)簽中，可以得到一個(gè)字體顏色淺、字體更小的文本。
（2）常用文本屬性
class="lead" 得到字體稍大、行高稍高的文本
class="text-left" 向左對(duì)齊文本
class="text-center" 居中對(duì)齊文本
class="text-right" 向右對(duì)齊文本
（3）補(bǔ)充文本屬性
【以下幾個(gè)屬性大致相同，字體顏色不同】
class="text-muted"
class="text-primary"
class="text-success"
class="text-info"
class="text-warning"
class="text-danger"
（4）<abbr> 標(biāo)簽
<abbr> 元素的樣式為顯示在文本底部的一條虛線邊框，當(dāng)鼠標(biāo)懸停在上面時(shí)會(huì)顯示title屬性中的信息。
（5）列表
class="list-unstyled" 用于去除列表的樣式
class="list-inline" 用于將列表水平顯示
dl、dt、dd 用于自定義列表
class="dl-horizontal" 用于將自定義列表水平顯示
4、表格
（1）常用表格標(biāo)簽
<table> 定義表格 <thead> 定義表格標(biāo)題行 <tbody> 定義表格主體 <tr> 定義表格行 <td> 定義表格列 <th> 定義表格列（用于<thead>中） <caption> 定義表格描述信息
（2）<table>常用屬性
class="table" 基本表格樣式，只有橫向的分割線 class="table-striped" 給 tbody 添加條紋（表格間有色差）。 class="table-bordered" 給所有的單元格添加邊框 class="table-hover" 給 tbody 添加懸停樣式（加個(gè)背景色） class="table-condensed" 使表格樣式更緊湊
（3）<tr>, <th> 和 <td>常用屬性
幾個(gè)屬性會(huì)選中某行、某列數(shù)據(jù)，根據(jù)不同的屬性，顯示不同的顏色。
class="active" 表示選中某條數(shù)據(jù)（有個(gè)陰影） class="success" 表示成功 class="info" 表示信息變化 class="warning" 表示警告 class="danger" 表示危險(xiǎn)
5、表單
（1）基本使用
使用 role="form" 聲明 form。
使用 class="form-inline" 將 form 改為一行顯示（內(nèi)聯(lián)表單）。
使用 class="form-group" 使表單控件間可以獲取合適的間距。
使用 class="form-control" 為文本 加個(gè)文本框。
使用 class="checkbox" 為復(fù)選框添加樣式。
【舉例：】
<form class="form-inline" role="form">
<div class="form-group">
<label for="name">名稱</label>
<input type="text" class="form-control" id="name" placeholder="請(qǐng)輸入名稱">
</div>
<div class="form-group">
<label for="inputfile">文件輸入</label>
<input type="file" id="inputfile">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 請(qǐng)打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
<br />
<br />
<!-- 使用 sr-only 可以隱藏表單控件-->
<form class="form-inline sr-only" role="form">
<div class="form-group">
<label for="name">名稱</label>
<input type="text" class="form-control" id="name" placeholder="請(qǐng)輸入名稱">
</div>
<div class="form-group">
<label for="inputfile">文件輸入</label>
<input type="file" id="inputfile">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 請(qǐng)打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
<br />
<br />
<form role="form">
<div class="form-group">
<label for="name">名稱</label>
<input type="text" class="form-control" id="name" placeholder="請(qǐng)輸入名稱">
</div>
<div class="form-group">
<label for="inputfile">文件輸入</label>
<input type="file" id="inputfile">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 請(qǐng)打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>（2）按鈕、下拉框
class="checkbox" 用于給復(fù)選框加樣式，此時(shí)可以不用寫 class="form-group"
class="radio" 用于給單選框加樣式
class="checkbox-inline" 將復(fù)選框顯示在同一行
class="radio-inline" 將單選框顯示在同一行
class="form-control" 可以修改select樣式
【舉例：】
<!-- 內(nèi)聯(lián)單選框、復(fù)選框樣式 -->
<label for="name">內(nèi)聯(lián)的復(fù)選框和單選按鈕的實(shí)例</label>
<div>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 選項(xiàng) 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 選項(xiàng) 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 選項(xiàng) 3
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 選項(xiàng) 1
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosinline" id="optionsRadios4" value="option2"> 選項(xiàng) 2
</label>
</div>
<!-- slect樣式 -->
<div class="form-group">
<label for="name">可多選的選擇列表</label>
<!-- multiple 表示可多選 -->
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>6、按鈕
（1）基本屬性
class="btn" 基本按鈕樣式 class="btn btn-default" 默認(rèn)按鈕樣式 class="btn btn-primary" 原始按鈕樣式 class="btn btn-success" 成功按鈕樣式 class="btn btn-info" 信息按鈕樣式 class="btn btn-warning" 警告按鈕樣式 class="btn btn-danger" 危險(xiǎn)按鈕樣式 class="btn btn-link" 鏈接按鈕樣式 class="btn btn-lg" 大的基本按鈕樣式 class="btn btn-sm" 小的基本按鈕樣式 class="btn btn-xs" 特別小的基本按鈕樣式 class="btn btn-block" 塊級(jí)的基本按鈕樣式，默認(rèn)會(huì)填充滿父標(biāo)簽的寬度
（2）按鈕激活、禁用
class="btn active" 定義激活按鈕樣式，背景色會(huì)改變（有色差） class="btn disabled" 定義禁止按鈕樣式，背景色會(huì)變（可能有些效果不能完全禁用）。
（3）按鈕組
class="btn-group" 創(chuàng)建一個(gè)按鈕組 class="btn-group-lg" 創(chuàng)建一個(gè)大按鈕組 class="btn-group-sm" 創(chuàng)建一個(gè)小按鈕組 class="btn-group-xs" 創(chuàng)建一個(gè)特別小按鈕組 class="btn-group-vertical" 創(chuàng)建一個(gè)垂直的按鈕組 class="btn-group-justified" 創(chuàng)建一個(gè)自適應(yīng)大小的按鈕組（若內(nèi)部是<button>標(biāo)簽，需給其加一個(gè)class="btn-group"） class="dropdown-menu" + class="caret" 可以創(chuàng)建一個(gè)有下拉框的按鈕
7、輔助樣式
（1）背景樣式
class="bg-primary" class="bg-success" class="bg-info" class="bg-warning" class="bg-danger"
（2）浮動(dòng)與隱藏
class="pull-left" 元素浮動(dòng)在左側(cè) class="pull-right" 元素浮動(dòng)在右側(cè) class="text-center" 元素居中 class="show" 元素顯示 class="hidden" 元素隱藏 class="sr-only" 元素隱藏 class="text-hide" 元素隱藏
到此這篇關(guān)于Bootstrap的CSS樣式全面使用介紹的文章就介紹到這了,更多相關(guān)Bootstrap全局 CSS 樣式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
CSS優(yōu)化2-(常用CSS縮寫語(yǔ)法總結(jié))
CSS優(yōu)化2-(常用CSS縮寫語(yǔ)法總結(jié))...2007-05-05
網(wǎng)頁(yè)制作中十個(gè)最好的CSS hacks
轉(zhuǎn)自國(guó)外網(wǎng)站，本想翻譯成中文，但是細(xì)看文章實(shí)在是簡(jiǎn)單，如果看不懂這個(gè)，我想也就沒(méi)必要繼續(xù)做前端了。2008-02-02
解決IE7以下版本不支持無(wú)A狀態(tài)偽類的幾種方法
解決IE7以下版本不支持無(wú)A狀態(tài)偽類的幾種方法...2007-01-01
網(wǎng)頁(yè)綠色系配色應(yīng)用實(shí)例圖文
綠色在黃色和藍(lán)色（冷暖）之間，屬于較中庸的顏色，這樣使得綠色的性格最為平和、安穩(wěn)、大度、寬容。是一種柔順、恬靜、滿足、優(yōu)美、受歡迎之色。也是網(wǎng)頁(yè)中使用最為廣泛的顏色之一。2008-08-08
讓超出DIV寬度范圍的文字自動(dòng)顯示省略號(hào)...
關(guān)鍵是:text-overflow: ellipsis;2008-10-10
DIV+CSS經(jīng)常用到的屬性、參數(shù)及說(shuō)明
用過(guò)DIV+CSS seo教程布局網(wǎng)站的人都會(huì)喜歡上這種方式，雖然開(kāi)始沒(méi)有用傳統(tǒng)的table直觀，但用習(xí)慣了就會(huì)感覺(jué)出DIV+CSS的優(yōu)越。實(shí)際應(yīng)用中我搜索了DIV+CSS的常用定義項(xiàng)，并對(duì)其參數(shù)作了歸納和說(shuō)明，與喜歡DIV+CSS的朋友共享。2008-09-09
用CSS打造 抽屜菜單...2006-12-12
跨瀏覽器的實(shí)踐:position:fixed 層的固定定位
一般要固定某個(gè)div,我們都會(huì)讓該div{position:fixed},它的下一個(gè)div{position:absolute}看了幾個(gè)國(guó)外的關(guān)于CSS的固定定位跨瀏覽解決方案.他們卻反其道而為之2008-11-11
2008-01-01
CSS規(guī)則層疊的應(yīng)用 css必須要注意的幾點(diǎn)
前幾天，我解釋了 CSS規(guī)則層疊時(shí)的算法 雖然看起來(lái)復(fù)雜，但是在實(shí)際應(yīng)用過(guò)程中，還不算太復(fù)雜，因?yàn)橹T如user style和inline style之類的東西我們很少考慮。2008-04-04