基本的HTML模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap的HTML標准模板</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--你自己的樣式文件 -->
<link href="css/your-style.css" rel="stylesheet">
<!-- 以下兩個插件用於在IE8以及以下版本瀏覽器支持HTML5元素和媒體查詢，如果不需要用可以移除 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- 如果要使用Bootstrap的js插件，必須先調入jQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根據需要使用的js插件調用 -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
排版
-
標題
<h1>到<h6>：標題后面緊跟着一行小的副標題使用<small>
<h1>Bootstrap標題一<small>我是副標題</small></h1> -
段落
<p>
1 全局文本字號為14px(font-size)
2 行高為1.42857143（line-height），大約是20px、顏色為深灰色（#333）
3 字體為"Helvetica Neue", Helvetica, Arial, sans-serif;（font-family） -
強調內容
1 類lead(突出段落)<p class="lead" >
2 文件加粗<strong>
3 斜體<em>
4 小號(取85%)<small>
5 正常<cite> -
強調相關的類，示例
<div class="text-warning">：
.text-muted：提示，使用淺灰色（#999）
.text-primary：主要，使用藍色（#428bca）
.text-success：成功，使用淺綠色(#3c763d)
.text-info：通知信息，使用淺藍色（#31708f）
.text-warning：警告，使用黃色（#8a6d3b）
.text-danger：危險，使用褐色（#a94442） -
文本對齊，示例
<p class="text-right">
.text-left：左對齊
.text-center：居中對齊
.text-right：右對齊
.text-justify：兩端對齊 -
列表
有序列表<ol>
無序列表<ul>
去點列表<ol class="list-unstyled">
內聯列表(為制作水平導航而生)<ul class="list-inline">
定義列表<dl><dt></dt><dd></dd><dd></dd><dl>
水平定義列表<dl class="dl-horizontal"><dt></dt><dd></dd><dd></dd><dl>，只有屏幕大於768px的時候，添加類名.dl-horizontal才具有水平定義列表效果 -
代碼風格，管使用哪種代碼風格，在代碼中碰到小於號
<要使用硬編碼<來替代，大於號>使用>來替代。
<code>：一般是針對於單個單詞或單個句子的代碼
<pre>：一般是針對於多行代碼（也就是成塊的代碼）
<kbd>:一般是表示用戶要通過鍵盤輸入的內容 -
表格是Bootstrap的一個基礎組件之一，在使用Bootstrap表格時，千萬注意，你的
<table>元素中一定不能缺少類名table。
.table：基礎表格
.table-striped：斑馬線表格
.table-bordered：帶邊框的表格
.table-hover：鼠標懸停高亮的表格
.table-condensed：緊湊型表格
.table-responsive：響應式表格，加在容器上，而不是表格table上 -
表格--表格行的類，要實現懸浮狀態，需要在
<table>標簽上加入table-hover類。bootstrap還為表格的行元素<tr>提供了五種不同的類名，每種類名控制了行的不同背景顏色
activesuccessinfowarningdanger
表單
表單控件
-
使用類名form-control。
<input type="password" class="form-control" placeholder="請輸入您的郵箱密碼"> -
水平表單
1 在<form>元素是使用類名form-horizontal
2 配合Bootstrap框架的網格系統。
3 一個.form-group一行 -
內聯表單，在
<form>元素中添加類名form-inline
1 此時，在input前面添加一個label標簽時，會導致input換行顯示。
2 如果必須添加這樣的一個label標簽，並且不想讓input換行，需要將label標簽也放在容器form-group中
3 沒有為輸入控件設置label標簽，屏幕閱讀器將無法正確識別。這也是Bootstrap框架另一個優點之處，為殘障人員進行了一定的考慮。可以加類隱藏label<label class="sr-only"> -
表單控件(輸入框input)
1 必須添加type類型
2 為了讓控件在各種表單風格中樣式不出錯，需要添加類名form-control -
表單控件(下拉選擇框select)，原始的一致，多行選擇設置multiple屬性的值為multiple
-
表單控件(文本域textarea)，和原始使用方法一樣，添加了類名“form-control”類名，寬度將為100%或auto
-
表單控件(復選框checkbox和單選擇按鈕radio)
1 不管是checkbox還是radio都使用label包起來了
2 checkbox連同label標簽放置在一個名為.checkbox的div容器內
3 radio連同label標簽放置在一個名為.radio的div容器內
4 主要借助.checkbox和.radio樣式，來處理復選框、單選按鈕與標簽的對齊方式。 -
表單控件(復選框和單選按鈕水平排列)
1 如果checkbox需要水平排列，只需要在label標簽上添加類名.checkbox-inline
2 如果radio需要水平排列，只需要在label標簽上添加類名radio-inline -
表單控件大小
1、.input-sm:讓控件比正常大小更小
2、.input-lg:讓控件比正常大小更大
3、借住Bootstrap框架的網格系統 控制表單寬度
4、.form-group就相當於網格系統中的.row -
表單控件狀態(禁用狀態)
1 在需要禁用的表單控件上加上disabled，<input type="text" disabled >
2 如果fieldset設置了disabled屬性，整個域都將處於被禁用狀態。 -
表單控件狀態(驗證狀態)
1、.has-warning:警告狀態（黃色）
2、.has-error：錯誤狀態（紅色）
3、.has-success：成功狀態（綠色）
4、為不同狀態表單設置icon，只需要在應的狀態下添加類名has-feedback -
表單提示信息
使用了一個.help-block樣式，將提示信息以塊狀顯示，並且顯示在控件底部。
在Bootstrap V2.x版本中，使用類名help-inline，使在同一行顯示
在BootstrapV3.x版本，需要借助於Bootstrap的網格系統
表單控件示例
<!-- form-horizontal水平表單，還有內聯表單form-inline -->
<form class="form-horizontal" role="form">
<h1>登錄，大小輸入框，驗證狀態，提示信息</h1>
<!-- form-group相當於網格系統中的row -->
<!-- has-error錯誤狀態（紅色），還有has-warning與has-success -->
<!-- has-feedback為不同狀態表單設置icon -->
<div class="form-group has-error has-feedback">
<label for="inputEmail3" class="col-sm-2 control-label">郵箱</label>
<!-- col-sm-4利用網格系統控制表單寬度 -->
<div class="col-sm-4">
<!-- form-control控件表單風格樣式不出錯 -->
<!-- input-lg大控件，還有input-sm -->
<!-- glyphicon glyphicon-remove刪除圖標 -->
<input type="email" class="form-control input-lg" id="inputEmail3" placeholder="請輸入您的郵箱地址"> <span
class="glyphicon glyphicon-remove form-control-feedback input-lg"></span>
</div>
</div>
<div class="form-group has-warning">
<label for="inputPassword3" class="col-sm-2 control-label">密碼</label>
<div class="col-sm-10">
<div class="row">
<div class="col-xs-6">
<input type="password" class="form-control input-sm" id="inputPassword3" placeholder="請輸入您的郵箱密碼">
</div>
<!-- help-block表單提示信息，顯示在控件底部，此處使用網格系統使之與password在同一行 -->
<span class="col-xs-6 help-block">你輸入的信息是正確的</span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<!-- 復選框，如果需要水平排列，只需要在label標簽上添加類名.checkbox-inline -->
<div class="checkbox">
<label> <input type="checkbox"> 記住密碼
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">進入郵箱</button>
</div>
</div>
<h1>下拉框，禁用下拉第一框</h1>
<div class="form-group">
<select class="form-control">
<option disabled>1</option>
<option>2</option>
</select>
</div>
<h1>水平單選</h1>
<div class="form-group">
<label class="radio-inline"> <input type="radio" name="gender" value="male">男性</input>
</label> <label class="radio-inline"> <input type="radio" name="gender" value="female">女性</input>
</label>
</div>
</form>
按鈕
- 7種按鈕風格，3種大小及塊狀按鈕
<button class="btn" type="button">基礎按鈕.btn</button>
<button class="btn btn-default" type="button">默認按鈕.btn-default</button>
<button class="btn btn-primary" type="button">主要按鈕.btn-primary</button>
<button class="btn btn-success" type="button">成功按鈕.btn-success</button>
<button class="btn btn-info" type="button">信息按鈕.btn-info</button>
<button class="btn btn-warning" type="button">警告按鈕.btn-warning</button>
<button class="btn btn-danger" type="button">危險按鈕.btn-danger</button>
<button class="btn btn-link" type="button">鏈接按鈕.btn-link</button>
<button class="btn btn-primary btn-lg" type="button">大型按鈕.btn-lg</button>
<button class="btn btn-primary" type="button">正常按鈕</button>
<button class="btn btn-primary btn-sm" type="button">小型按鈕.btn-sm</button>
<button class="btn btn-primary btn-xs" type="button">超小型按鈕</button>
<button class="btn btn-primary btn-block" type="button">塊狀按鈕</button>
- 禁用按鈕
1 在標簽中添加disabled屬性，可以禁止元素的默認行為的
2 在元素標簽中添加類名“disabled”，不會禁止按鈕的默認行為
圖像
<img class="img-rounded" alt="140x140" src="http://placehold.it/140x140">
Bootstrap框架中對於圖像的樣式風格提供以下幾種風格：
1、img-responsive：響應式圖片，主要針對於響應式設計
2、img-rounded：圓角圖片
3、img-circle：圓形圖片
4、img-thumbnail：縮略圖片
使用方法非常簡單，只需要在
標簽上添加對應的類名
可以通過控制容器的大小來設置圖片大小
圓角使用css3，IE8以及其以下版本不支持圓角
圖標
<span class="glyphicon glyphicon-search"></span>
所有icon都是以glyphicon-前綴的類名開始，然后后綴表示圖標的名稱
所有名稱查看：
請點擊：http://getbootstrap.com/components/#glyphicons 鏈接查閱
網格系統
-
實現原理
Bootstrap框架中的網格系統就是將容器平分成12份。 -
工作原理
1、數據行.row必須包含在容器.container中，以便為其賦予合適的對齊方式和內距padding
2、在行.row中可以添加列.col-md-數字，但列數之和不能超過平分的總列數，比如12
3、具體內容應當放置在列容器.col-md-數字之內，而且只有列.col-md-數字才可以作為行容器.row的直接子元素
4、通過設置內距padding從而創建列與列之間的間距。然后通過為第一列和最后一列設置負值的外距margin來抵消內距padding的影響 -
基本用法
Bootstrap框架的網格系統中有四種基本的用法，架在不同屏幕尺寸使用了不同的網格樣式
.col-xs-：屏寬auto，列寬auto
.col-sm-：屏寬750px，列寬~62px
.col-md-：屏寬970px，列寬~81px
.col-lg-：屏寬1170px，列寬~97px -
列偏移
1 只需要在列元素上添加類名col-md-offset-*(其中星號代表要偏移的列組合數)
2 要保證列與偏移列的總數不超過12，不然會致列斷行顯示 -
列排序
列排序其實就是改變列的方向，就是改變左右浮動，並且設置浮動的距離。在Bootstrap框架的網格系統中是通過添加類名col-md-push-*和col-md-pull-*(其中星號代表移動的列組合數)。 -
列的嵌套
1 可以在一個列中添加一個或者多個行（row）容器，然后在這個行容器中插入列
2 嵌套的列總數也需要遵循不超過12列。不然會造成末位列換行顯示
網格系統示例
<div class="container">
<h4>列向右移動四列的間距</h4>
<div class="row">
<div class="col-md-4">列1</div>
<div class="col-md-2 col-md-offset-4">列向右移動四列后的列2</div>
<div class="col-md-2">列3</div>
</div>
<div class="row">
<div class="col-md-4">列1</div>
<div class="col-md-4 col-md-offset-4">列向右移動四列后的列2</div>
</div>
</div>
菜單、按鈕組及導航
下拉菜單
-
注意
1 在Bootstrap框架中的下拉菜單組件是一個獨立的組件
2 必定會調用Bootstrap框架提供的bootstrap.js文件
3 在使用bootstrap.min.js之前一定要先加載jquery.min.js才會生效果 -
基本用法
1 使用一個名為dropdown的容器包裹了整個下拉菜單元素，示例：<div class="dropdown"></div>
2 使用了一個<button>按鈕做為父菜單，並且定義類名dropdown-toggle和自定義data-toggle屬性，且值必須和最外容器類名一致，示例：data-toggle="dropdown"
3 下拉菜單項使用一個ul列表，並且定義一個類名為dropdown-menu，示例：<ul class="dropdown-menu"> -
下拉分隔線
可以通過添加一個空的<li>，並且給這個<li>添加類名divider來實現添加下拉分隔線的功能
<li role="presentation" class="divider"></li> -
菜單標題，與添加下拉分隔線類似，添加類名
.dropdown-header
<li role="presentation" class="dropdown-header">第二部分菜單頭部</li> -
對齊方式
1 默認是左對齊
2 在dropdown-menu上添加一個pull-right或者dropdown-menu-right類名，讓下拉菜單相對於父容器右對齊
3 使用dropdown-menu-left，實現與父窗口左對齊 -
菜單項狀態
在對應的菜單項上添加對應的類名，當前狀態.active和禁用狀態.disabled -
示例
<!-- dropdown容器 -->
<div class="dropdown">
<!-- button父菜單：類名dropdown-toggle，自定義data-toggle值需與最外容器類名一致，當前即為dropdown -->
<!-- span中的caret為向下三角形，若最外容器為dropup，則為向上三角形 -->
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">下拉菜單<span class="caret"></span>
</button>
<!-- dropdown-menu使用ul定義下拉菜單列表 -->
<!-- pull-right讓下拉菜單相對於父容器右對齊，與dropdown-menu-right一樣 -->
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
<!-- disabled禁用狀態 -->
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
<!-- divider下拉分隔線 -->
<li role="presentation" class="divider"></li>
<!-- dropdown-header菜單標題 -->
<li role="presentation" class="dropdown-header">第二部分菜單頭部</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜單項</a></li>
</ul>
</div>
按鈕組
-
按鈕組
使用一個名為btn-group的容器，把多個按鈕放到這個容器中 -
按鈕組大小
1.btn-group-lg: 大按鈕組
2.btn-group-sm:小按鈕組
3.btn-group-xs:超小按鈕組 -
按鈕工具欄
將按鈕組.btn-group按組放在一個大的容器.btn-toolbar -
嵌套分組，實現類似於導航菜單的效果。
只需要把當初制作下拉菜單的dropdown的容器換成btn-group，並且和普通的按鈕放在同一級 -
垂直分組
只需要把水平分組的btn-group類名換成btn-group-vertical即可 -
等分按鈕
只需要在按鈕組btn-group上追加一個btn-group-justified類名
在制作等分按鈕組時，請盡量使用<a>標簽元素來制作按鈕，因為使用<button>標簽元素時，使用display:table在部分瀏覽器下支持並不友好。 -
按鈕的向下向上三角形
三角形完全是通過CSS代碼來實現的
向下三角形：在<button>標簽中添加一個<span>標簽元素，並且命名為.caret
下拉菜單會向上彈起，在.btn-group類上追加dropup類名 -
示例
<div class="btn-wrap">
<!-- btn-group分組容器 -->
<!-- btn-group-lg按鈕組大小，不有btn-group-sm與btn-group-xs -->
<!-- btn-group-vertical垂直分組 -->
<!-- btn-group-justified等分按鈕，自適應，盡量使用<a>標簽 -->
<div class="btn-group btn-group-lg btn-group-vertical btn-group-justified">
<a class="btn btn-default" href="#">首頁</a>
<a class="btn btn-default" href="#">產品展示</a>
<a class="btn btn-default" href="#">案例分析</a>
<!-- span中加類caret向下三角形 -->
<!-- 在上面btn-group后加dropup，則為向上三角形 -->
<a class="btn btn-default" href="#">聯系我們<span class="caret"></span></a>
</div>
</div>
導航
在Bootstrap框架將導航獨立出來成為一個導航組件
-
基礎樣式
Bootstrap框架中制作導航條主要通過.nav樣式。
默認的.nav樣式不提供默認的導航樣式，必須附加另外一個樣式才會有效，比如nav-tabs、nav-pills之類 -
標簽形tab導航，也稱為選項卡導航
通過“nav-tabs”樣式來實現。在制作標簽形導航時需要在原導航“nav”上追加此類名
想讓某一項為當前選中項，只需要在其<li>標簽上添加類名class="active"”即可
實現禁用狀態，只需要在標簽<li>上添加class="disabled"即可 -
膠囊形(pills)導航
實現方法和nav-tabs類似，同樣的結構，只需要把類名nav-tabs換成nav-pills即可 -
垂直堆疊的導航
制作垂直堆疊導航只需要在nav-pills的基礎上添加一個nav-stacked類名
分隔線：在導航項之間添加<li class=”nav-divider”></li> -
自適應導航
自適應導航指的是導航占據容器全部寬度，而且菜單項可以像表格的單元格一樣自適應寬度。
自適應導航和前面使用btn-group-justified制作的自適應按鈕組是一樣的。
只不過在制作自適應導航時更換了另一個類名nav-justified。 -
二級導航：導航加下拉菜單
將li當作父容器，使用類名dropdown，同時在li中嵌套另一個列表ul -
面包屑式導航
面包屑(Breadcrumb)一般用於導航，主要是起的作用是告訴用戶現在所處頁面的位置（當前位置）
使用方式就很簡單，為ol加入breadcrumb類，不支持低版本IE -
示例
<!-- nav-pills導航(還有nav-tabs導航)，nav-stacked垂直堆疊，nav-justified自適應 -->
<ul class="nav nav-pills nav-stacked nav-justified">
<!-- active選中當前項 -->
<li class="active"><a href="##">首頁</a></li>
<li class="dropdown"><a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<!-- nav-divider導航分隔線 -->
<li class="nav-divider"></li>
<!-- disabled禁用狀態 -->
<li class="disabled"><a href="##">Responsive</a></li>
</ul></li>
<li><a href="##">關於我們</a></li>
</ul>
<!-- breadcrumb面包屑式導航 -->
<ol class="breadcrumb">
<li><a href="#">首頁</a></li>
<li><a href="#">我的書</a></li>
<li class="active">《圖解CSS3》</li>
</ol>
導航條、分頁導航、標簽、徽章
導航條
-
導航條基礎
在導航條(navbar)中有一個背景色、而且導航條可以是純鏈接（類似導航）
導航條和導航從外觀上差別不是太多，但在實際使用中導航條要比導航復雜得多。 -
基礎導航條
1 首先在制作導航的列表<ul class=”nav”>基礎上添加類名navbar-nav
2 在列表外部添加一個容器div，並且使用類名navbar和navbar-default -
為導航條添加標題、二級菜單及狀態
加入導航條標題：通過navbar-header和navbar-brand來實現，改良一下可以當作是logo
導航條狀態、二級菜單：與導航中的二級導航類似 -
帶表單的導航條
在navbar容器中放置一個帶有navbar-form類名的表單
navbar-left讓表單左浮動，更好實現對齊
navbar-right樣式，讓元素在導航條靠右對齊 -
導航條中的按鈕、文本和鏈接
1、導航條中的按鈕navbar-btn
2、導航條中的文本navbar-text
3、導航條中的普通鏈接navbar-link
但這三種樣式在框架中使用時受到一定的限制，需要和navbar-brand、navbar-nav配合起來使用。而且對數量也有一定的限制，一般情況在使用一到兩個不會有問題，超過兩個就會有問題。 -
固定導航條
.navbar-fixed-top：導航條固定在瀏覽器窗口頂部
.navbar-fixed-bottom：導航條固定在瀏覽器窗口底部
頁面主內容頂部和底部都被固定導航條給遮住了，解決方法: 存在bug及解決方法
1 為body加css，padding-top: 70px;或padding-bottom: 70px;
2 固定導航條都放在頁面內容前面
.navbar-fixed-top ~ .content {
padding-top: 70px;
}
.navbar-fixed-bottom ~ .content {
padding-bottom: 70px;
}
-
響應式導航條
1、保證在窄屏時需要折疊的內容必須包裹在帶一個div內，並且為這個div加入collapse、navbar-collapse兩個類名。最后為這個div添加一個class類名或者id名。
2、保證在窄屏時要顯示的圖標樣式（固定寫法）
3、並為button添加data-target=".類名/#id名"，究競是類名還是id名呢？由需要折疊的div來決定 -
響應式導航條示例
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<!-- .navbar-toggle樣式用於toggle收縮的內容，即nav-collapse collapse樣式所在元素 -->
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button>
<!-- 確保無論是寬屏還是窄屏，navbar-brand都顯示 -->
<a href="##" class="navbar-brand">慕課網</a>
</div>
<!-- 屏幕寬度小於768px時，div.navbar-responsive-collapse容器里的內容都會隱藏，顯示icon-bar圖標，當點擊icon-bar圖標時，再展開。屏幕大於768px時，默認顯示。 -->
<div class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="##">網站首頁</a></li>
<li><a href="##">系列教程</a></li>
<li><a href="##">名師介紹</a></li>
<li><a href="##">成功案例</a></li>
<li><a href="##">關於我們</a></li>
</ul>
</div>
</div>
-
反色導航條
只是將navbar-deafult類名換成navbar-inverse -
導航條示例
<!-- navbar導航條 -->
<!-- navbar-default默認樣式導航條，還有navbar-inverse -->
<!-- navbar-fixed-top導航條固定到頂部，還有navbar-fixed-bottom，會遮掩頁面內容，需進行其它設置 -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- 導航條標題，但於導航條最前面，進行修改后，可當logo -->
<div class="navbar-header">
<a href="##" class="navbar-brand">慕課網</a>
</div>
<!-- navbar-nav導航條 -->
<ul class="nav navbar-nav">
<li class="active"><a href="##">網站首頁</a></li>
<!-- dropdown二級菜單 -->
<li class="dropdown"><a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="##">CSS3</a></li>
<li><a href="##">JavaScript</a></li>
<li class="disabled"><a href="##">PHP</a></li>
</ul></li>
<li><a href="##">名師介紹</a></li>
<li><a href="##">成功案例</a></li>
<li><a href="##">關於我們</a></li>
</ul>
<!-- navbar-form導航條的表單 -->
<!-- navbar-left對齊方式，還有navbar-right -->
<form action="##" class="navbar-form navbar-left" rol="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="請輸入關鍵詞" />
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
</div>
分頁導航
-
帶頁碼的分頁導航
Bootstrap框架中使用的是ul>li>a這樣的結構，在ul標簽上加入pagination類 -
大小設置
pagination-lg讓分頁導航變大
pagination-sm讓分頁導航變小 -
翻頁分頁導航
翻頁分頁導航和帶頁碼的分頁導航類似，為ul標簽加入pager類
previous：讓“上一步”按鈕居左
next：讓“下一步”按鈕居右 -
示例
<ul class="pagination pagination-lg">
<li><a href="#">«第一頁</a></li>
<li><a href="#">11</a></li>
<li><a href="#">12</a></li>
<li class="active"><a href="#">13</a></li>
<li><a href="#">14</a></li>
<li><a href="#">15</a></li>
<li class="disabled"><a href="#">最后一頁»</a></li>
</ul>
標簽
<span class="label label-default">默認標簽</span>
<span class="label label-primary">主要標簽</span>
<span class="label label-success">成功標簽</span>
<span class="label label-info">信息標簽</span>
<span class="label label-warning">警告標簽</span>
<span class="label label-danger">錯誤標簽</span>
徽章
如果你信息沒有看，系統會告訴你有多少信息未讀，微信、支付寶中常用伎倆
-
使用方法
可以像標簽一樣，使用span標簽來制作，然后為他加入badge類 -
示例
<!--nav-pills導航條勛章-->
<ul class="nav nav-pills">
<li class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
<br />
<ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
<li class="active"><a href="#"> <span class="badge pull-right">42</span> Home
</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#"> <span class="badge pull-right">3</span> Messages
</a></li>
</ul>
<br />
<!--按鈕勛章-->
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
其它內置組件
縮略圖
-
最常用的地方就是產品列表頁面，一行顯示幾張圖片，有的在圖片底下（左側或右側）帶有標題、描述等信息。
-
Bootstrap框架將這一部獨立成一個模塊組件。並通過
thumbnail樣式配合bootstrap的網格系統來實現。可以將產品列表頁變得更好看。 -
在僅有縮略圖的基礎上，添加了一個
div名為caption的容器，在這個容器中放置其他內容，比如說標題，文本描述，按鈕等 -
示例
<!-- col-xs-*自適應網格，col-md-*屏寬970px列寬~81px -->
<div class="col-xs-6 col-md-3">
<!-- thumbnail縮略圖 -->
<a href="#" class="thumbnail">
<img src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" alt="">
</a>
<!-- caption放置其他內容 -->
<div class="caption">
<h3>Bootstrap框架系列教程</h3>
<p>Bootstrap框架是一個優秀的前端框，就算您是一位后端程序員或者你是一位不懂設計的前端人員，你也能依賴於Bootstrap制作做優美的網站...</p>
<p>
<a href="##" class="btn btn-primary">開始學習</a>
<a href="##" class="btn btn-info">正在學習</a>
</p>
</div>
</div>
警示框
-
默認警示框
1、成功警示框：<div class="alert alert-success" role="alert">
2、信息警示框：<div class="alert alert-info" role="alert">
3、警告警示框：<div class="alert alert-warning" role="alert">
4、錯誤警示框：<div class="alert alert-danger" role="alert"> -
可關閉的警示框
1、需要在基本警示框alert的基礎上添加alert-dismissable樣式。
2、在button標簽中加入class="close"類，實現警示框關閉按鈕的樣式。
3、要確保關閉按鈕元素上設置了自定義屬性：data-dismiss="alert"（因為可關閉警示框需要借助於Javascript來檢測該屬性，從而控制警示框的關閉）。 -
警示框的鏈接
在Bootstrap框架中對警示框里的鏈接樣式做了一個高亮顯示處理。為不同類型的警示框內的鏈接進行了加粗處理，並且顏色相應加深。
給警示框加的鏈接添加一個名為alert-link的類名 -
示例
<!-- alert alert-success成功警示框 -->
<!-- alert-dismissable可關閉的警示框 -->
<div class="alert alert-success alert-dismissable" role="alert">
<!-- close實現警示框關閉按鈕的樣式 -->
<!-- data-dismiss="alert"要確保關閉按鈕元素上設置了自定義屬性 -->
<button class="close" type="button" data-dismiss="alert">×</button>
恭喜您操作成功！
<!-- a標簽 警示框的鏈接 -->
<a href="#" class="alert-link">this important alert message</a>
</div>
進度條
-
基本樣式
兩個容器，外容器使用progress樣式，子容器使用progress-bar樣式。
其中progress用來設置進度條的容器樣式，而progress-bar用於限制進度條的進度
結構優化：方便殘障人員瀏覽 -
彩色進度條，只需在基礎的進度上增加對應的類名
rogress-bar-info：表示信息進度條，進度條顏色為藍色
progress-bar-success：表示成功進度條，進度條顏色為綠色
progress-bar-warning：表示警告進度條，進度條顏色為黃色
progress-bar-danger：表示錯誤進度條，進度條顏色為紅色 -
條紋進度條
只需要在進度條的容器progress基礎上增加類名progress-striped
使用CSS3實現 -
動態條紋進度條
進度條progress progress-striped兩個類的基礎上再加入active類名
主要通過CSS3的animation來完成
要讓條紋進度條動起來，就需要讓progress-striped和active同時運用，不然條紋進度條是不具備動效效果。 -
層疊進度條
可以將不同狀態的進度條放置在一起，按水平方式排列。
層疊進度條寬度之和不能大於100% -
帶Label的進度條
只需要在進度條中添加你需要的值 -
示例
<h5>正常層疊進度條（進度之和不能大於100%）</h5>
<!-- progress外容器 -->
<!-- progress-striped條紋進度條 -->
<!-- active動態條紋 -->
<div class="progress progress-striped active">
<!-- progress-bar子容器 -->
<!-- progress-bar-warning黃色警告進度條 -->
<!-- role、aria-valuenow、aria-valuemin、aria-valuemax方便殘障人員瀏覽 -->
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="30" aria-valuemin="0"
aria-valuemax="100" style="width:90%">90%
</div>
</div>
<!-- 層疊進度條 -->
<div class="progress">
<!-- 帶Label的進度條 -->
<div class="progress-bar progress-bar-success" style="width:20%">20%</div>
<!-- progress-bar-striped與active也要放於此處 -->
<div class="progress-bar progress-bar-info progress-bar-striped active" style="width:20%">20%</div>
<div class="progress-bar progress-bar-warning" style="width:30%">30%</div>
<div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%">危險</div>
</div>
媒體對象
左邊居左（或居右），內容居右（或居左）排列
-
默認媒體對象，一組媒體對象常常包括以下幾個部分：
1 媒體對像的容器：常使用media類名表示，用來容納媒體對象的所有內容
2 媒體對像的對象：常使用media-object表示，就是媒體對象中的對象，常常是圖片
3 媒體對象的主體：常使用media-body表示，就是媒體對像中的主體內容，可以是任何元素，常常是圖片側邊內容
4 媒體對象的標題：常使用media-heading表示，就是用來描述對象的一個標題，此部分可選
除了上面四個部分之外，在Bootstrap框架中還常常使用pull-left或者pull-right來控制媒體對象中的對象浮動方式。 -
媒體對象的嵌套
在media-body中添加嵌套 -
媒體對象列表
在ul上添加類名media-list，而在li上使用media -
示例
<!-- media媒體對像容器 -->
<div class="media">
<!-- pull-left媒體對象浮動方式，還有pull-right -->
<a class="pull-left" href="#">
<!-- media-object媒體對像的對象 -->
<img class="media-object" src="http://img.mukewang.com/52e1d29d000161fe06000338-300-170.jpg" alt="...">
</a>
<!-- media-body媒體對象的主體 -->
<div class="media-body">
<!-- media-heading媒體對象的標題 -->
<h4 class="media-heading">系列：十天精通CSS3</h4>
<div>全方位深刻詳解CSS3模塊知識，經典案例分析，代碼同步調試，讓網頁穿上絢麗裝備！</div>
</div>
</div>
<!-- media-list媒體對象列表 -->
<ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://img.mukewang.com/52e1d29d000161fe06000338-300-170.jpg" alt="...">
</a>
<div class="media-body ">
<h4 class="media-heading">系列：十天精通CSS3</h4>
<div>全方位深刻詳解CSS3模塊知識，經典案例分析，代碼同步調試，讓網頁穿上絢麗裝備！</div>
</div>
</li>
<li class="media">…</li>
<li class="media">…</li>
</ul>
列表組
可以用來制作列表清單、垂直導航等效果
-
基礎列表組
list-group：列表組容器，常用的是ul元素，當然也可以是ol或者div元素
list-group-item：列表項，常用的是li元素，當然也可以是div元素 -
帶徽章的列表組
其實就是將Bootstrap框架中的徽章組件和基礎列表組結合在一起的一個效果。
只需要在list-group-item中添加徽章組件badge -
帶鏈接的列表組，列表項的任何區域都具備可點擊
將ul.list-group使用div.list-group來替換
而li.list-group-item直接用a.list-group-item來替換 -
自定義列表組
list-group-item-heading：用來定義列表項頭部樣式
list-group-item-text：用來定義列表項主要內容 -
列表項的狀態設置
active：表示當前狀態
disabled：表示禁用狀態 -
多彩列表組
在list-group-item基礎上增加對應的類名
list-group-item-success：成功，背景色綠色
list-group-item-info：信息，背景色藍色
list-group-item-warning：警告，背景色為黃色
list-group-item-danger：錯誤，背景色為紅色 -
示例
<h5>帶徽章的列表組</h5>
<!-- list-group列表組容器，常用的是ul元素，當然也可以是ol或者div元素 -->
<ul class="list-group">
<!-- list-group-item列表項，常用的是li元素，當然也可以是div元素 -->
<li class="list-group-item">
<!-- badge徽章，實現是將之右浮，所以在內容左或右都沒關系 -->
<a href="##">玩轉Bootstrap</a><span class="badge">23</span>
</li>
<li class="list-group-item">
<a href="##">玩轉Bootstrap</a><span class="badge">23</span>
</li>
</ul>
<h5>帶鏈接，在任何區域可點擊</h5>
<div class="list-group">
<a href="##" class="list-group-item">
<!-- list-group-item-heading列表項頭部樣式 -->
<h4 class="list-group-item-heading">Bootstrap<span class="badge">23</span></h4>
<!-- list-group-item-text列表項主要內容 -->
<p class="list-group-item-text">玩轉Bootstrap玩轉Bootstrap玩轉Bootstrap</p>
</a>
</div>
<h5>列表項的狀態</h5>
<div class="list-group">
<!-- active當前狀態 -->
<a href="##" class="list-group-item active"><span class="badge">5902</span>圖解CSS3</a>
<!-- list-group-item-success成功，背景色綠色，還有list-group-item-info，list-group-item-warning，list-group-item-danger -->
<a href="##" class="list-group-item list-group-item-success"><span class="badge">15902</span>W3cplus</a>
<a href="##" class="list-group-item"><span class="badge">59020</span>慕課網</a>
<!-- disabled禁用狀態 -->
<a href="##" class="list-group-item disabled"><span class="badge">0</span>Sass中國</a>
</div>
面板
-
基礎面板
一個div容器運用了.panel樣式，產生一個具有邊框的文本顯示塊
panel-default控制主題顏色
div.panel-body放置面板主體內容 -
帶有頭和尾的面板
panel-heading：用來設置面板頭部樣式
panel-footer：用來設置面板尾部樣式 -
彩色面板
panel-primary：重點藍
panel-success：成功綠
panel-info:信息藍
panel-warning：警告黃
panel-danger：危險紅 -
面板中嵌套表格
在panel-body放置需要的內容，可能是圖片、表格或者列表等
把table提取到panel-body外面，效果會比較好 -
面板中嵌套列表組
與嵌套表格類似 -
示例
<!-- panel產生一個具有邊框的文本顯示塊 -->
<!-- panel-primary彩色面板，還有panel-default、panel-success、panel-info、panel-warning、panel-danger -->
<div class="panel panel-primary">
<!-- panel-heading頭部樣式 -->
<div class="panel-heading">玩轉Bootstrap</div>
<!-- panel-body面板主體內容 -->
<div class="panel-body">玩轉Bootstrap玩轉Bootstrap玩轉Bootstrap</div>
<table class="table table-bordered">
<thead>
<tr><th>test</th><th>test</th></tr>
</thead>
<tbody>
<tr><td>test2</td><td>test2</td></tr>
</tbody>
</table>
<!-- panel-footer尾部樣式 -->
<div class="panel-footer">作者：大漠</div>
</div>