Bootstrap
注意下面的組件，很多是需要用到 js 的，所以要引入 Bootstrap 的 js 文件和
jquery 文件在示例代碼中枢贿，我只是沒有寫嘁圈，注意加上哦省骂。
字體圖標(biāo)
Bootstrap 中還帶有免費的圖標(biāo)供我們使用，這些圖標(biāo)使用起來很簡單最住，就像使用字體一樣钞澳，改變圖標(biāo)的大小就是改變字體的 font-size，改變圖標(biāo)的顏色就是改變字體的顏色 color涨缚。有了這些圖標(biāo)轧粟，再也不用切圖啦。另外還有第三方的圖標(biāo)我們可以使用脓魏，比如說 Font Awesome 兰吟，也是這種字體圖標(biāo)。在Bootstrap的下載包中茂翔，記得引入fonts文件混蔼，這樣圖標(biāo)才能顯示出來。
示例代碼如下：
<div class="container">
<div class="row">
<span class="glyphicon glyphicon-star" style="font-size: 40px; color: red;"></span>
</div>
<button class="btn btn-danger">
<span class="glyphicon glyphicon-camera" style="color: #000;"></span> kaivon
</button>
</div>
按鈕組
- btn-group 按鈕組
- btn-group-* 改變按鈕的尺寸珊燎，* 的內(nèi)容為 lg md sm xs
- btn-group-vertical 按鈕組豎著排
- btn-group-justified 讓按鈕兩端對齊惭嚣，三種實現(xiàn)方式，推薦使用 a 標(biāo)簽
- 如果說是 button 標(biāo)簽悔政，那需給他們添加一個父級晚吞，并且給父級添加一個 btn-group 的 class
- 如果說是 input 標(biāo)簽，那需給他們添加一個父級卓箫，并且給父級添加一個 btn-group 的 class
- 如果說是 a 標(biāo)簽载矿，則不需要給他們添加一個父級，寫起來起來比較簡單
示例代碼如下：
<div class="container">
<!--單個按鈕-->
<div class="row">
<button class="btn btn-primary">kaivon</button>
<button class="btn btn-success">kaivon</button>
<button class="btn btn-info">kaivon</button>
</div>
<!--按鈕組-->
<div class="row" style="margin-top: 10px;">
<div class="btn-group">
<button class="btn btn-primary">kaivon</button>
<button class="btn btn-success">kaivon</button>
<button class="btn btn-info">kaivon</button>
</div>
</div>
<!--按鈕組-->
<div class="row" style="margin-top: 10px;">
<div class="btn-group btn-group-lg">
<button class="btn btn-primary">kaivon</button>
<button class="btn btn-success">kaivon</button>
<button class="btn btn-info">kaivon</button>
</div>
<div class="btn-group btn-group-md">
<button class="btn btn-primary">kaivon</button>
<button class="btn btn-success">kaivon</button>
<button class="btn btn-info">kaivon</button>
</div>
<div class="btn-group btn-group-sm">
<button class="btn btn-primary">kaivon</button>
<button class="btn btn-success">kaivon</button>
<button class="btn btn-info">kaivon</button>
</div>
<div class="btn-group btn-group-xs">
<button class="btn btn-primary">kaivon</button>
<button class="btn btn-success">kaivon</button>
<button class="btn btn-info">kaivon</button>
</div>
</div>
<!--按鈕組,豎著排-->
<div class="row" style="margin-top: 10px;">
<div class="btn-group-vertical">
<button class="btn btn-primary">kaivon</button>
<button class="btn btn-success">kaivon</button>
<button class="btn btn-info">kaivon</button>
</div>
</div>
<!--btn兩端對齊烹卒，如果說是button闷盔，那需給他們添加一個父級，并且給父級添加一個btn-group的class-->
<div class="row" style="margin-top: 10px;">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button class="btn btn-primary">kaivon</button>
</div>
<div class="btn-group">
<button class="btn btn-success">kaivon</button>
</div>
<div class="btn-group">
<button class="btn btn-info">kaivon</button>
</div>
</div>
</div>
<!--btn兩端對齊旅急，如果說是input逢勾，那需給他們添加一個父級，并且給父級添加一個btn-group的class-->
<div class="row" style="margin-top: 10px;">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<input type="button" class="btn btn-primary" value="kaivon" />
</div>
<div class="btn-group">
<input type="button" class="btn btn-success" value="kaivon" />
</div>
<div class="btn-group">
<input type="button" class="btn btn-info" value="kaivon" />
</div>
</div>
</div>
<!--btn兩端對齊藐吮，如果說是 a 標(biāo)簽溺拱，則不需要給他們添加一個父級逃贝，寫起來起來比較簡單-->
<div class="row" style="margin-top: 10px;">
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">kaivon</a>
<a href="#" class="btn btn-success">kaivon</a>
<a href="#" class="btn btn-info">kaivon</a>
</div>
</div>
</div>
- 按鈕組圖標(biāo)
按鈕組中可以添加圖標(biāo)，比如說常見的下拉按鈕圖標(biāo),迫摔，同時添加的方式也有不同沐扳，下面還是給出了三種不同的標(biāo)簽添加，input標(biāo)簽是不能這樣使用的句占。
示例代碼如下：
<!--給按鈕添加三角形-->
<div class="row" style="margin-top: 10px;">
<div class="btn-group">
<button class="btn btn-primary">kaivon <span class="caret"></span></button>
<a href="#" class="btn btn-success">kaivon <span class="caret"></span></a>
<input type="button" class="btn btn-info" value="kaivon" /> <span class="caret"></span>
</div>
</div>
<!--能過組的試給按鈕添加下三角形-->
<div class="row" style="margin-top: 10px;">
<div class="btn-group">
<button class="btn btn-primary">kaivon</button>
<button class="btn btn-primary"><span class="caret"></span></button>
</div>
</div>
<!--能過組的試給按鈕添加上三角形-->
<div class="row" style="margin-top: 10px;">
<div class="btn-group dropup">
<button class="btn btn-primary">kaivon</button>
<button class="btn btn-primary"><span class="caret"></span></button>
</div>
</div>
下拉菜單
用 Bootstrap 做一個下拉菜單只需要三步沪摄，Bootstrap 官網(wǎng)上寫的有些復(fù)雜，這是因為 Bootstrap 考慮到了屏幕閱讀器這類用戶的體驗纱烘，我們則不需要這個杨拐。
- 1.給父級div添加一個 dropdown的class，或者給父級添加定位屬性
- 2.給button按鈕添加一個data-toggle="dropdown"的屬性擂啥，最好再加一個dropdown-toggle的class哄陶，這樣可以消除按鈕上的光環(huán)
- 3.ul需要添加一個dropdown-menu的class
示例代碼如下：
<div class="container">
<div class="row">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">前端 <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">html</a></li>
<li><a href="#">css</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">less</a></li>
<li><a href="#">bootstrap</a></li>
</ul>
</div>
</div>
</div>
下拉菜單的樣式
下拉菜單除了上面默認的樣式還有其他不同的樣式，比如說下拉菜單右對齊（默認是左對齊）哺壶，下拉菜單里面也有樣式可以選擇屋吨。
- open 默認菜單是展開的，給 dropdown 添加
- dropup 讓菜單在上面顯示变骡，將默認的 dropdown 換為dropup
- dropdown-menu-right 下拉菜單右對齊离赫，注意button按鈕的位置，要撐滿整個父級塌碌，可以用按鈕的 btn-block 類名
- dropdown-header 菜單里有標(biāo)題，給 li 添加
- text-center 讓內(nèi)容居中旬盯，對段落 p 標(biāo)簽也是適用的哦
- divider 分隔線台妆，給li添加
示例代碼如下：
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="dropdown open">
<button class="btn btn-default dropdown-toggle btn-block" data-toggle="dropdown">默認打開 <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">html</a></li>
<li><a href="#">css</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">less</a></li>
<li><a href="#">bootstrap</a></li>
</ul>
</div>
</div>
<div class="col-lg-4" style="margin-top: 150px;">
<div class="dropup">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">向上展開 <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">html</a></li>
<li><a href="#">css</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">less</a></li>
<li><a href="#">bootstrap</a></li>
</ul>
</div>
</div>
<div class="col-lg-4">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">帶有標(biāo)題和分割線 <span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="dropdown-header text-center"><a href="#">前端</a></li>
<li><a href="#">html</a></li>
<li><a href="#">css</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">less</a></li>
<li><a href="#">bootstrap</a></li>
<li class="divider"></li>
<li class="dropdown-header text-center"><a href="#">后端</a></li>
<li><a href="#">php</a></li>
<li><a href="#">java</a></li>
<li class="disabled"><a href="#">.net</a></li>
</ul>
</div>
</div>
</div>
</div>
輸入框
- input-group 輸入框組，只能針對輸入框胖翰，是我們前面說到的 form-group 的一部分
- input-group-addon 給輸入框前后添加的額外元素
- input-group-* 修改輸入框組的尺寸接剩，與之前不同的是，這里 * 的內(nèi)容只有 lg md sm 三種尺寸萨咳。
- input-group-btn 添加的額外元素是按鈕懊缺，一般的按鈕的話用 span 標(biāo)簽包裹起來，下拉菜單按鈕培他，外面需要 div 包裹起來鹃两，注意哦~。
示例代碼如下：
<div class="container">
<div class="row">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" />
</div>
</div>
<!--輸入框組的尺寸-->
<div class="row" style="margin-top: 10px;">
<div class="input-group input-group-lg">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" />
</div>
<div class="input-group input-group-md">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" />
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" />
</div>
<!--沒有這樣的尺寸-->
<!--<div class="input-group input-group-xs">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" />
</div>-->
</div>
<!--額外內(nèi)容里放的是checkbox-->
<div class="row" style="margin-top: 10px;">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" />
</span>
<input type="text" class="form-control" />
</div>
</div>
<!--額外內(nèi)容里放的是radio-->
<div class="row" style="margin-top: 10px;">
<div class="input-group">
<span class="input-group-addon">
<input type="radio" />
</span>
<input type="text" class="form-control" />
</div>
</div>
<!--額外內(nèi)容里放的是按鈕-->
<div class="row" style="margin-top: 10px;">
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-btn">
<button type="button" class="btn btn-default">搜索</button>
</span>
</div>
</div>
<!--額外內(nèi)容里放的是按鈕-->
<div class="row" style="margin-top: 10px;">
<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Bootstrap課程 <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">html</a></li>
<li><a href="#">css</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">less</a></li>
<li><a href="#">bootstrap</a></li>
</ul>
</div>
<input type="text" class="form-control" />
</div>
</div>
</div>
導(dǎo)航
Bootstrap 中的導(dǎo)航分為標(biāo)簽頁式導(dǎo)航舀凛，面包屑式導(dǎo)航俊扳，兩端對齊式導(dǎo)航，可以有需要的選擇使用猛遍，導(dǎo)航里面又可以放下拉菜單馋记。
示例代碼如下：
- nav 導(dǎo)航的基本樣式
- nav-tabs 標(biāo)簽式導(dǎo)航
- nav-pills 膠囊式導(dǎo)航
- nav-stacked 導(dǎo)航豎著排
- nav-stacked 兩端對齊式導(dǎo)航
<div class="container">
<div class="row">
<ul class="nav nav-tabs">
<li><a href="#">程序員</a></li>
<li class="active"><a href="#">程序媛</a></li>
<li><a href="#">code</a></li>
</ul>
</div>
<div class="row" style="margin-top: 10px;">
<ul class="nav nav-pills">
<li><a href="#">程序員</a></li>
<li class="active"><a href="#">程序媛</a></li>
<li><a href="#">code</a></li>
</ul>
</div>
<div class="row" style="margin-top: 10px;">
<ul class="nav nav-pills nav-stacked">
<li><a href="#">程序員</a></li>
<li class="active"><a href="#">程序媛</a></li>
<li><a href="#">code</a></li>
</ul>
</div>
<div class="row" style="margin-top: 10px;">
<ul class="nav nav-pills nav-justified">
<li><a href="#">程序員</a></li>
<li class="active"><a href="#">程序媛</a></li>
<li><a href="#">code</a></li>
</ul>
</div>
<!--導(dǎo)航中放下拉菜單 -->
<div class="row" style="margin-top: 10px;">
<ul class="nav nav-tabs">
<li><a href="#">程序媛</a></li>
<li class="active"><a href="#">程序猿</a></li>
<li><a href="#">kaivon</a></li>
<li>
<a href="#" data-toggle="dropdown">課程 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">html</a></li>
<li><a href="#">css</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">less</a></li>
<li><a href="#">bootstrap</a></li>
</ul>
</li>
</ul>
</div>
</div>
選項卡
上面的導(dǎo)航可以變成選項卡式的号坡，這樣對于內(nèi)容較多的頁面就可以進行有效的分離。
制作選項卡的步驟：
- 1.導(dǎo)航對應(yīng)的所有內(nèi)容需要放到一個class為tab-content的層里面
- 2.一個內(nèi)容塊都要加上一個名為tab-pane的class梯醒，并且給對應(yīng)的默認顯示的內(nèi)容添加一個active的class
- 3.給每一個導(dǎo)航的a標(biāo)簽添加一個data-toggle="tab"的自定義屬性表示選項卡宽堆，還記得下拉菜單的data-toggle的值嗎？沒錯茸习，是dropdown日麸。
- 4.給每一個內(nèi)容部分添加一個id
- 5.給每一個導(dǎo)航里的a標(biāo)簽添加一個錨點
示例代碼如下：
<style>
.tab1{
border: 1px solid #ddd;
border-top: none;
padding: 100px;
border-radius: 0 0 5px 5px;
}
</style>
<div class="container">
<div class="row">
<ul class="nav nav-tabs">
<li class="active"><a href="#content1" data-toggle="tab">程序員</a></li>
<li><a href="#content2" data-toggle="tab">程序媛</a></li>
<li><a href="#content3" data-toggle="tab">code</a></li>
</ul>
<div class="tab-content">
<div id="content1" class="tab-pane active">html</div>
<div id="content2" class="tab-pane">css</div>
<div id="content3" class="tab-pane">js</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<ul class="nav nav-tabs">
<li class="active"><a href="#content4" data-toggle="tab">程序員</a></li>
<li><a href="#content5" data-toggle="tab">程序媛</a></li>
<li><a href="#content6" data-toggle="tab">code</a></li>
</ul>
<div class="tab-content tab1">
<div id="content4" class="tab-pane active">html</div>
<div id="content5" class="tab-pane">css</div>
<div id="content6" class="tab-pane">js</div>
</div>
</div>
</div>
</div>
導(dǎo)航條
- 導(dǎo)航條的基本樣式
- navbar 導(dǎo)航條的基礎(chǔ)樣式
- nav navbar-nav 導(dǎo)航條里菜單的固定樣式組合class
- navbar-default 導(dǎo)航條的默認樣式
- navbar-inverse 導(dǎo)航條的樣式為黑色
- navbar-static-top 導(dǎo)航條為直角，改變導(dǎo)航條默認的圓角效果
- navbar-fixed-top 導(dǎo)航條固定在最上邊逮光，需要給body加一個padding或者margin代箭，使得固定的導(dǎo)航條不會覆蓋下面的內(nèi)容
-navbar-fixed-bottom 導(dǎo)航條固定在最下邊，不會隨滾動的滾動而變動
示例代碼如下：
<body style="padding: 50px 0; height: 2000px;">
<div class="container">
<!--默認樣式的導(dǎo)航條-->
<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
<li class="active"><a href="#">學(xué)院</a></li>
<li><a href="#">程序媛</a></li>
<li><a href="#">code</a></li>
</ul>
</nav>
<!--黑色的導(dǎo)航條-->
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">學(xué)院</a></li>
<li><a href="#">程序媛</a></li>
<li><a href="#">code</a></li>
</ul>
</nav>
<!--黑色的導(dǎo)航條-->
<nav class="navbar navbar-inverse navbar-static-top">
<ul class="nav navbar-nav">
<li class="active"><a href="#">學(xué)院</a></li>
<li><a href="#">程序媛</a></li>
<li><a href="#">code</a></li>
</ul>
</nav>
<!--固定在上邊的導(dǎo)航條-->
<nav class="navbar navbar-inverse navbar-fixed-top">
<ul class="nav navbar-nav">
<li class="active"><a href="#">學(xué)院</a></li>
<li><a href="#">程序媛</a></li>
<li><a href="#">code</a></li>
</ul>
</nav>
<!--固定在上邊的導(dǎo)航條-->
<nav class="navbar navbar-default navbar-fixed-bottom">
<ul class="nav navbar-nav">
<li class="active"><a href="#">學(xué)院</a></li>
<li><a href="#">程序媛</a></li>
<li><a href="#">code</a></li>
</ul>
</nav>
</div>
</body>
2.導(dǎo)航條的進階
- navbar-header 導(dǎo)航的頭部涕刚，一般情況下來放logo
- navbar-brand 用來放logo的嗡综，需要配合navbar-header
示例代碼如下：
<!--一般情況下都會把nav標(biāo)簽包在container的外面，解決 active 項溢出的問題-->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">logo</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">程序員</a></li>
<li><a href="#">程序媛</a></li>
<li><a href="#">code</a></li>
</ul>
</div>
</nav>
<!--對齊方式的導(dǎo)航條-->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">logo</a>
</div>
<!--navbar-left表示內(nèi)容以左邊對齊-->
<ul class="nav navbar-nav navbar-left">
<li class="active"><a href="#">程序員</a></li>
<li><a href="#">程序媛</a></li>
<li><a href="#">code</a></li>
</ul>
<!--navbar-left表示內(nèi)容以右邊對齊-->
<ul class="nav navbar-nav navbar-right">
<li><a href="#">登錄</a></li>
<li><a href="#">注冊</a></li>
</ul>
</div>
</nav>
<!--有鏈接與文字的導(dǎo)航條-->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">logo</a>
</div>
<!--navbar-left表示內(nèi)容以左邊對齊-->
<ul class="nav navbar-nav navbar-left">
<li class="active"><a href="#">程序員</a></li>
<li><a href="#">程序媛</a></li>
<li><a href="#">code</a></li>
</ul>
<!--如果導(dǎo)航里有文字需要給文字加上navbar-text杜漠，如果有鏈接需要給鏈接加上navbar-text-->
<a href="#" class="navbar-link navbar-text">鏈接</a>
<p class="navbar-text">這里是一段文字</p>
<!--navbar-left表示內(nèi)容以右邊對齊-->
<ul class="nav navbar-nav navbar-right">
<li><a href="#">登錄</a></li>
<li><a href="#">注冊</a></li>
</ul>
</div>
</nav>
<!--有表單的導(dǎo)航條-->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">logo</a>
</div>
<!--navbar-left表示內(nèi)容以左邊對齊-->
<ul class="nav navbar-nav navbar-left">
<li class="active"><a href="#">程序員</a></li>
<li><a href="#">程序媛</a></li>
<li><a href="#">code</a></li>
</ul>
<!--如果導(dǎo)航里只有一個按鈕极景，那給它加一個navbar-btn-->
<button class="btn btn-default navbar-btn">搜索</button>
<!--如果導(dǎo)航里有form，那就需要給form添加一個navbar-form驾茴，想讓它們在一行顯示盼樟，就要添加一個navbar-left-->
<form action="http://www.apeclass.com/" class="navbar-form navbar-left">
<input type="text" class="form-control" />
<button class="btn btn-default">搜索</button>
</form>
<!--navbar-left表示內(nèi)容以右邊對齊-->
<ul class="nav navbar-nav navbar-right">
<li><a href="#">登錄</a></li>
<li><a href="#">注冊</a></li>
</ul>
</div>
</nav>
路徑導(dǎo)航
在比較復(fù)雜點頁面中，有時候我們需要讓用戶知道自己所處的位置锈至，我們就可以使用路徑導(dǎo)航組件晨缴，使用起來也很簡單的。
示例代碼如下：
<div class="container">
<div class="row">
<ul class="breadcrumb">
<li><a href="#">bootstrap</a></li>
<li><a href="#">dist</a></li>
<li class="active">css</li>
</ul>
</div>
</div>
分頁
對一個數(shù)量比較多的列表內(nèi)容峡捡，我們需要使用分頁功能來顯示一部分內(nèi)容击碗，Bootstrap 為我們提供了分頁的組件。
示例代碼如下：
<div class="container">
<div class="row">
<ul class="pagination">
<li class="disabled"><a href="#"><<</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li class="active"><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">>></a></li>
</ul>
</div>
<div class="row">
<ul class="pagination pagination-lg">
<li class="disabled"><a href="#"><<</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li class="active"><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">>></a></li>
</ul>
</div>
<div class="row">
<ul class="pagination pagination-md">
<li class="disabled"><a href="#"><<</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li class="active"><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">>></a></li>
</ul>
</div>
<div class="row">
<ul class="pagination pagination-sm">
<li class="disabled"><a href="#"><<</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li class="active"><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">>></a></li>
</ul>
</div>
翻頁
可以分居兩邊们拙，只需要加上 previous 和 next 的class 類名
<ul class="pager">
<li><a href="#">←上一頁</a></li>
<li><a href="#">下一頁→</a></li>
</ul>
<ul class="pager">
<li class="previous disabled"><a href="#">←上一頁</a></li>
<li class="next"><a href="#">下一頁→</a></li>
</ul>
</div>
標(biāo)記
有時候想顯示消息的數(shù)目稍途，就像QQ或者微信那樣，我們可以實用標(biāo)記類加在 span 標(biāo)簽上砚婆。
示例代碼如下：
<div class="container">
<div class="row">
<a href="#">未讀消息<span class="badge">12</span></a>
<button class="btn btn-primary">未讀消息<span class="badge">12</span></button>
</div>
</div>
巨幕
巨幕可以用在全屏顯示或者鋪滿整個頁面械拍，還以用在頁頭，挺實用的類
示例代碼如下：
<div class="container">
<div class="jumbotron">
<h1>程序員</h1>
<p>程序員程序員程序員程序員程序員程序員程序員程序員程序員程序員程序員程序員程序員程序員程序員程序員程序員程序員程序員</p>
<p><a href="#" class="btn btn-primary">程序媛</a></p>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>程序員</h1>
<p>程序員程序員程序員程序員程序員程序員程序員程序員程序員程序員程序員程序員程序員程序員程序員程序員程序員程序員程序員</p>
<p><a href="#" class="btn btn-primary">程序媛</a></p>
</div>
</div>
縮略圖
圖片配上文字的首選装盯，只需要給父級添加一個 thumbnail 類名就可以變成一個縮略圖坷虑，而給文字加上 caption 類名會使文字與間距增大一點。
示例代碼如下：
<div class="container">
<div class="row">
<div class="col-lg-3">
<a class="thumbnail">
</a>
</div>
<div class="col-lg-3">
<a class="thumbnail">
</a>
</div>
<div class="col-lg-3">
<a class="thumbnail">
</a>
</div>
<div class="col-lg-3">
<a class="thumbnail">
</a>
</div>
</div>
<!--還可以把thumbnail給父級验夯，會有不同的樣式-->
<div class="row">
<div class="col-lg-4">
<div class="thumbnail">
<a >
</a>
<div>
<h3>程序員</h3>
<p>程序員愛程序媛程序員愛程序媛程序員愛程序媛程序員愛程序媛</p>
<p><a href="#" class="btn btn-primary">程序媛</a> <a href="#" class="btn btn-danger">code</a></p>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="thumbnail">
<a >
</a>
<div class="caption">
<h3>程序員</h3>
<p>程序員愛程序媛程序員愛程序媛程序員愛程序媛程序員愛程序媛</p>
<p><a href="#" class="btn btn-primary">程序媛</a> <a href="#" class="btn btn-danger">code</a></p>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="thumbnail">
<a >
</a>
<div class="caption">
<h3>程序員</h3>
<p>程序員愛程序媛程序員愛程序媛程序員愛程序媛程序員愛程序媛</p>
<p><a href="#" class="btn btn-primary">程序媛</a> <a href="#" class="btn btn-danger">code</a></p>
</div>
</div>
</div>
</div>
</div>
警告框
有時候用戶在填寫表單信息時猖吴，我們可以在輸入框下面填上一些信息，并帶有關(guān)閉的小按鈕挥转，Bootstrap 也為我們提供了這些組件海蔽，而不用我們自己在寫 js 的代碼共屈，還是通過自定義屬性實現(xiàn)的，data-dismiss="alert"党窜，在使用時只需要加上 alert 的類名即可拗引，其實現(xiàn)在可以感受到，學(xué)習(xí) Bootstrap 就是記住 class 幌衣，不用我們在使用是想樣式矾削。
示例代碼如下：
<div class="container">
<div class="row">
<p class="alert alert-success">這里是一個警告框！；砘ぁ：呖！<button class="close" data-dismiss="alert">×</button></p>
<p class="alert alert-info">這里是一個警告框３铩６喜俊！班缎！</p>
<p class="alert alert-warning">這里是一個警告框：狻！４镏贰蔑祟！</p>
<p class="alert alert-danger">這里是一個警告框！３吝搿＝椤！</p>
</div>
</div>
進度條
可以用來顯示一個事件的進度右冻，Bootstrap 也做了很多樣式装蓬，比如顏色，條紋纱扭，并且還可以使進度條動起來，但更多的效果功能還是要配合 js來實現(xiàn)儡遮。
示例代碼如下：
<div class="container">
<div class="row">
<div class="progress">
<div class="progress-bar" style="width: 60%;">60%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" style="width: 36%;">36%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" style="width: 70%;">70%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width: 20%;">20%</div>
</div>
<!--帶條紋的進度條-->
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped active" style="width: 20%;">20%</div>
</div>
<!--帶堆疊效果的進度條-->
<div class="progress">
<div class="progress-bar" style="width: 10%;">10%</div>
<div class="progress-bar progress-bar-info" style="width: 20%;">36%</div>
<div class="progress-bar progress-bar-warning" style="width: 30%;">70%</div>
<div class="progress-bar progress-bar-danger" style="width: 20%;">20%</div>
<div class="progress-bar progress-bar-danger progress-bar-striped active" style="width: 10%;">20%</div>
</div>
</div>
</div>
圖文編排
圖文編排也是網(wǎng)頁上經(jīng)常使用的組件乳蛾，例如在留言或者評論區(qū)域，或者文字說明鄙币，當(dāng)然需要結(jié)合其他樣式使用肃叶，才能是圖文搭配的更好看。
- media 圖文混排十嘿，默認圖片靠上對齊
- media-left 圖片的區(qū)域因惭，在左邊顯示
- media-right 圖片的區(qū)域，在右邊顯示
- media-middle 圖片居中對齊
- media-bottom 圖片靠下對齊
- media-body 內(nèi)容區(qū)域
- media-heading 內(nèi)容區(qū)域里的標(biāo)題
示例代碼如下
<div class="container">
<div class="row">
<div class="media">
<a class="media-left">
</a>
<div class="media-body">
<h4 class="media-heading">程序員</h4>
<p>程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員</p>
<p>程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員</p>
<p>程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員</p>
<p>程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員</p>
</div>
</div>
</div>
<!--圖片在右邊顯示-->
<div class="row">
<div class="media">
<div class="media-body">
<h4 class="media-heading">程序員</h4>
<p>程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員</p>
<p>程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員</p>
<p>程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員</p>
<p>程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員</p>
</div>
<a class="media-right">
</a>
</div>
</div>
圖文混排復(fù)雜的使用方式
<!--左右都有圖片-->
<div class="row">
<div class="media">
<a class="media-left">
</a>
<div class="media-body">
<h4 class="media-heading">程序員</h4>
<p>程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員</p>
<p>程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員</p>
<p>程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員</p>
<p>程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員</p>
</div>
<a class="media-right">
</a>
</div>
</div>
<!--圖片在居中對齊和靠下對齊-->
<div class="row">
<div class="media">
<a class="media-left media-middle">
</a>
<div class="media-body">
<h4 class="media-heading">程序員</h4>
<p>程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員</p>
<p>程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員</p>
<p>程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員</p>
<p>程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員</p>
</div>
<a class="media-right media-bottom">
</a>
</div>
</div>
<!--右側(cè)內(nèi)容又嵌套了一個media-->
<div class="row">
<div class="media">
<a class="media-left">
</a>
<div class="media-body">
<h4 class="media-heading">程序員</h4>
<p>程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員</p>
<p>程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員</p>
<p>程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員</p>
<p>程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員</p>
<div class="media">
<a class="media-left">
</a>
<div class="media-body">
<h4 class="media-heading">程序員</h4>
<p>程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員</p>
<p>程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員</p>
<p>程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員</p>
<p>程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員程序媛愛程序員</p>
</div>
</div>
</div>
</div>
</div>
</div>
列表組
可以用來用作側(cè)欄導(dǎo)航或者信息列表的展示绩衷。
- list-group 列表組,給 ul 添加
- list-group-item 列表項,給 li 添加
示例代碼如下：
<div class="row">
<ul class="list-group">
<li class="list-group-item">html</li>
<li class="list-group-item">css</li>
<li class="list-group-item">javascript</li>
<li class="list-group-item">html5/css3</li>
<li class="list-group-item">less/sass</li>
<li class="list-group-item">bootstrap</li>
</ul>
</div>
還可以結(jié)合前面的標(biāo)記組件來使用蹦魔，并且標(biāo)記會自動跑到右邊顯示激率。
示例代碼如下：
<!--給每個列表項添加了一個標(biāo)記，那這個標(biāo)記就會自動跑到右側(cè)-->
<div class="row">
<ul class="list-group">
<li class="list-group-item">html<span class="badge">12</span></li>
<li class="list-group-item">css<span class="badge">34</span></li>
<li class="list-group-item">javascript<span class="badge">52</span></li>
<li class="list-group-item">html5/css3<span class="badge">35</span></li>
<li class="list-group-item">less/sass<span class="badge">27</span></li>
<li class="list-group-item">bootstrap<span class="badge">7</span></li>
</ul>
</div>
列表組不僅可以用 ul 和 li 來做勿决，還可以使用 div 加 a 標(biāo)簽來做哦乒躺。
示例代碼如下：
<!--用a標(biāo)簽做的列表組，可以添加激活狀態(tài)低缩，禁用狀態(tài)嘉冒，背景色-->
<div class="row">
<div class="list-group">
<a href="#" class="list-group-item active">html<span class="badge">12</span></a>
<a href="#" class="list-group-item disabled">css<span class="badge">34</span></a>
<a href="#" class="list-group-item list-group-item-info">javascript<span class="badge">52</span></a>
<a href="#" class="list-group-item list-group-item-warning">html5/css3<span class="badge">35</span></a>
<a href="#" class="list-group-item list-group-item-danger">less/sass<span class="badge">27</span></a>
<a href="#" class="list-group-item list-group-item-success">bootstrap<span class="badge">7</span></a>
</div>
</div>
列表組里面還可以是標(biāo)題加段落，可以用來做文章列表咆繁。
- list-group-item-heading 列表組標(biāo)題
- list-group-item-text 列表組內(nèi)容
示例代碼如下：
<!--添加標(biāo)題與段落的列表組,列表組標(biāo)題：list-group-item-heading讳推，列表組內(nèi)容：list-group-item-text-->
<div class="row">
<ul class="list-group">
<li class="list-group-item active">
<h4 class="list-group-item-heading">程序媛</h4>
<p class="list-group-item-text">程序媛愛程序猿程序媛愛程序猿程序媛愛程序猿程序媛愛程序猿</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">程序媛</h4>
<p class="list-group-item-text">程序媛愛程序猿程序媛愛程序猿程序媛愛程序猿程序媛愛程序猿</p>
</li><li class="list-group-item">
<h4 class="list-group-item-heading">程序媛</h4>
<p class="list-group-item-text">程序媛愛程序猿程序媛愛程序猿程序媛愛程序猿程序媛愛程序猿</p>
</li><li class="list-group-item">
<h4 class="list-group-item-heading">程序媛</h4>
<p class="list-group-item-text">程序媛愛程序猿程序媛愛程序猿程序媛愛程序猿程序媛愛程序猿</p>
</li>
</ul>
</div>
面板
有標(biāo)題和內(nèi)容的部分就可以用面板來做。
- panel 面板
- panel-default 面板默認樣式
- panel-heading 面板的頭部區(qū)域玩般，不只是標(biāo)題银觅，還有副標(biāo)題等等
- panel-title 面板的頭部區(qū)域里標(biāo)題的樣式
- panel-body 面板的內(nèi)容區(qū)域
示例代碼如下：
<div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">愛秋的艷</h3>
</div>
<div class="panel-body">
<p>愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷</p>
</div>
</div>
</div>
<div class="row">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">愛秋的艷</h3>
</div>
<div class="panel-body">
<p>愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷</p>
</div>
</div>
</div>
<div class="row">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">愛秋的艷</h3>
</div>
<div class="panel-body">
<p>愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷</p>
</div>
</div>
</div>
<div class="row">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">愛秋的艷</h3>
</div>
<div class="panel-body">
<p>愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷</p>
</div>
</div>
</div>
<div class="row">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">愛秋的艷</h3>
</div>
<div class="panel-body">
<p>愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷</p>
</div>
</div>
</div>
<div class="row">
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">愛秋的艷</h3>
</div>
<div class="panel-body">
<p>愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷愛秋的艷</p>
</div>
</div>
</div>
面板還可以結(jié)合列表來使用，注意列表組沒有放在panel-body中哦壤短。
示例代碼如下：
<!--面板與列表組結(jié)合起來-->
<div class="row">
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">學(xué)院</h3>
</div>
<div class="panel-body">
<p>程序媛愛程序猿程序媛愛程序猿程序媛愛程序猿程序媛愛程序猿程序媛愛程序猿程序媛愛程序猿程序媛愛程序猿程序媛愛程序猿程序媛愛程序猿程序媛愛程序猿</p>
</div>
<ul class="list-group">
<li class="list-group-item">html</li>
<li class="list-group-item">css</li>
<li class="list-group-item">javascript</li>
<li class="list-group-item">html5/css3</li>
<li class="list-group-item">less/sass</li>
<li class="list-group-item">bootstrap</li>
</ul>
</div>
</div>
以上呢就是 Bootstrap 組件的全部內(nèi)容啦设拟，Bootstrap 的設(shè)計是很有規(guī)律的呢，多看多用久脯，自然就可以記住啦纳胧。
Bootstrap 系列：
Bootstrap學(xué)習(xí)文檔（一）
Bootstrap學(xué)習(xí)文檔（二）
Bootstrap學(xué)習(xí)文檔（三）
Bootstrap學(xué)習(xí)文檔（四）
