Bootstrap的CSS樣式全面使用介紹
Bootstrap 自帶以下特性：全局的 CSS設置、定義基本的 HTML 元素樣式、可擴展的 class，以及一個先進的網(wǎng)格系統(tǒng)。HTML的基本元素均可以通過class設置樣式并得到增強效果。
1、基本設置
（1）使用 HTML5 文檔類型。
Bootstrap使用了 HTML5 元素和 Css屬性，故需要使用 HTML5。
（2）響應移動設備。
移動設備與桌面設備的差別 在于 屏幕的大小，Bootstrap 使用 viewport 來控制屏幕的縮放。
指的是讓viewport的寬度等于物理設備上的真實分辨率，且不允許用戶縮放。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
【屬性】
width：控制 viewport 的大小，可以指定的一個值，如 600，或者特殊的值，如 device-width 為設備的寬度（單位為縮放為 100% 時的 CSS 的像素）。
height：和 width 相對應，指定高度。
initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例。
maximum-scale：允許用戶縮放到的最大比例。
minimum-scale：允許用戶縮放到的最小比例。
user-scalable：用戶是否可以手動縮放，可以傳"yes"或"no"。(大多數(shù)情況下有用，可以自己寫js去實現(xiàn))
shrink-to-fit：自適應手機屏幕寬度，shrink-to-fit=no屬性是蘋果專屬的，在Safari IOS9開始引入，安，卓以及其他系統(tǒng)沒有。
2、網(wǎng)格（Grid）
（1）Bootstrap 網(wǎng)格系統(tǒng)（Grid System）
Bootstrap 包含了一個響應式的、移動設備優(yōu)先的、不固定的網(wǎng)格系統(tǒng)，可以隨著設備或視口大小的增加而適當?shù)財U展到 12 列。
（2）container
container 用于包裹頁面上的內(nèi)容，其左右外邊距由瀏覽器決定。
（3）使用 Grid
Step1：使用 container 包裹頁面。
Step2：使用 col-xs- 、col-sm- 、col-md- 、col-lg- 來劃分網(wǎng)格。
step3：使用 @media 來監(jiān)控 屏幕大小的變化。
/* 超小設備（手機，小于 768px） */
@media (max-width: @screen-xs-max) { ... }
/* 小型設備（平板電腦，768px 起） */
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
/* 中型設備（臺式電腦，992px 起） */
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
/* 大型設備（大臺式電腦，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> 標簽
寫在父標簽中，可以得到一個字體顏色淺、字體更小的文本。
（2）常用文本屬性
class="lead" 得到字體稍大、行高稍高的文本
class="text-left" 向左對齊文本
class="text-center" 居中對齊文本
class="text-right" 向右對齊文本
（3）補充文本屬性
【以下幾個屬性大致相同，字體顏色不同】
class="text-muted"
class="text-primary"
class="text-success"
class="text-info"
class="text-warning"
class="text-danger"
（4）<abbr> 標簽
<abbr> 元素的樣式為顯示在文本底部的一條虛線邊框，當鼠標懸停在上面時會顯示title屬性中的信息。
（5）列表
class="list-unstyled" 用于去除列表的樣式
class="list-inline" 用于將列表水平顯示
dl、dt、dd 用于自定義列表
class="dl-horizontal" 用于將自定義列表水平顯示
4、表格
（1）常用表格標簽
<table> 定義表格 <thead> 定義表格標題行 <tbody> 定義表格主體 <tr> 定義表格行 <td> 定義表格列 <th> 定義表格列（用于<thead>中） <caption> 定義表格描述信息
（2）<table>常用屬性
class="table" 基本表格樣式，只有橫向的分割線 class="table-striped" 給 tbody 添加條紋（表格間有色差）。 class="table-bordered" 給所有的單元格添加邊框 class="table-hover" 給 tbody 添加懸停樣式（加個背景色） class="table-condensed" 使表格樣式更緊湊
（3）<tr>, <th> 和 <td>常用屬性
幾個屬性會選中某行、某列數(shù)據(jù)，根據(jù)不同的屬性，顯示不同的顏色。
class="active" 表示選中某條數(shù)據(jù)（有個陰影） class="success" 表示成功 class="info" 表示信息變化 class="warning" 表示警告 class="danger" 表示危險
5、表單
（1）基本使用
使用 role="form" 聲明 form。
使用 class="form-inline" 將 form 改為一行顯示（內(nèi)聯(lián)表單）。
使用 class="form-group" 使表單控件間可以獲取合適的間距。
使用 class="form-control" 為文本 加個文本框。
使用 class="checkbox" 為復選框添加樣式。
【舉例：】
<form class="form-inline" role="form">
<div class="form-group">
<label for="name">名稱</label>
<input type="text" class="form-control" id="name" placeholder="請輸入名稱">
</div>
<div class="form-group">
<label for="inputfile">文件輸入</label>
<input type="file" id="inputfile">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 請打勾
</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="請輸入名稱">
</div>
<div class="form-group">
<label for="inputfile">文件輸入</label>
<input type="file" id="inputfile">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 請打勾
</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="請輸入名稱">
</div>
<div class="form-group">
<label for="inputfile">文件輸入</label>
<input type="file" id="inputfile">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 請打勾
</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>（2）按鈕、下拉框
class="checkbox" 用于給復選框加樣式，此時可以不用寫 class="form-group"
class="radio" 用于給單選框加樣式
class="checkbox-inline" 將復選框顯示在同一行
class="radio-inline" 將單選框顯示在同一行
class="form-control" 可以修改select樣式
【舉例：】
<!-- 內(nèi)聯(lián)單選框、復選框樣式 -->
<label for="name">內(nèi)聯(lián)的復選框和單選按鈕的實例</label>
<div>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 選項 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 選項 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 選項 3
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 選項 1
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosinline" id="optionsRadios4" value="option2"> 選項 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" 默認按鈕樣式 class="btn btn-primary" 原始按鈕樣式 class="btn btn-success" 成功按鈕樣式 class="btn btn-info" 信息按鈕樣式 class="btn btn-warning" 警告按鈕樣式 class="btn btn-danger" 危險按鈕樣式 class="btn btn-link" 鏈接按鈕樣式 class="btn btn-lg" 大的基本按鈕樣式 class="btn btn-sm" 小的基本按鈕樣式 class="btn btn-xs" 特別小的基本按鈕樣式 class="btn btn-block" 塊級的基本按鈕樣式，默認會填充滿父標簽的寬度
（2）按鈕激活、禁用
class="btn active" 定義激活按鈕樣式，背景色會改變（有色差） class="btn disabled" 定義禁止按鈕樣式，背景色會變（可能有些效果不能完全禁用）。
（3）按鈕組
class="btn-group" 創(chuàng)建一個按鈕組 class="btn-group-lg" 創(chuàng)建一個大按鈕組 class="btn-group-sm" 創(chuàng)建一個小按鈕組 class="btn-group-xs" 創(chuàng)建一個特別小按鈕組 class="btn-group-vertical" 創(chuàng)建一個垂直的按鈕組 class="btn-group-justified" 創(chuàng)建一個自適應大小的按鈕組（若內(nèi)部是<button>標簽，需給其加一個class="btn-group"） class="dropdown-menu" + class="caret" 可以創(chuàng)建一個有下拉框的按鈕
7、輔助樣式
（1）背景樣式
class="bg-primary" class="bg-success" class="bg-info" class="bg-warning" class="bg-danger"
（2）浮動與隱藏
class="pull-left" 元素浮動在左側(cè) class="pull-right" 元素浮動在右側(cè) class="text-center" 元素居中 class="show" 元素顯示 class="hidden" 元素隱藏 class="sr-only" 元素隱藏 class="text-hide" 元素隱藏
到此這篇關于Bootstrap的CSS樣式全面使用介紹的文章就介紹到這了,更多相關Bootstrap全局 CSS 樣式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
前幾天，我解釋了 CSS規(guī)則層疊時的算法 雖然看起來復雜，但是在實際應用過程中，還不算太復雜，因為諸如user style和inline style之類的東西我們很少考慮。2008-04-04
一個上下左右都居中的非table的純CSS實現(xiàn)代碼2008-11-11
制作WEB在線編輯器-插入HTML標簽...2007-03-03
通常對于無刷新提交表單，我們都是運用ajax實現(xiàn)的。前段時間了解到另一種無刷新提交表單的方法?，F(xiàn)在整理出來分享給大家。2014-05-05
純css實現(xiàn)的圓角邊框效果代碼2008-04-04
從加載到渲染的全鏈路提速的網(wǎng)站打開速度前端優(yōu)化
一個電商網(wǎng)站通過使用ChromeDevTools進行性能診斷,作者發(fā)現(xiàn)并解決了資源加載、圖片優(yōu)化、代碼分割、虛擬列表、狀態(tài)管理以及緩存策略等多個問題,經(jīng)過優(yōu)化,網(wǎng)站的首屏加載時間從8秒降至2秒,多性能指標均有顯著提升,和大家分享網(wǎng)站打開速度前端優(yōu)化的實戰(zhàn)經(jīng)驗2024-12-12
其實和跟border的屬性一樣的東西，做網(wǎng)頁的朋友熟練利用下面的樣式，就可以做出漂亮的邊框效果2008-09-09![頁面布局黃金比例[圖片]](http://img.jbzj.com/images/xgimg/bcimg7.png)
2007-12-12
淺談href=#與href=javascript:void(0)的區(qū)別
淺談href=#與href=javascript:void(0)的區(qū)別，需要的朋友可以參考一下2013-02-02
本文分享一個利用CSS3制作三角形的示例，感興趣的朋友可以參考一下。2016-03-03