一.什么是Bootstrap？
Bootstrap电禀，來自 Twitter幢码，是目前很受歡迎的前端框架。Bootstrap 是基于 HTML尖飞、CSS症副、JAVASCRIPT 的店雅，它簡(jiǎn)潔靈活，使得 Web 開發(fā)更加快捷贞铣∧掷玻——《百度百科》
1.Bootstrap：下載地址
2.準(zhǔn)備工作
1.響應(yīng)式布局：
<meta name="viewport" content="width=device-width,initial-scale=1">
3.引入jquery
<script src="js/jquery-1.12.4.min.js"></script>
2.引入文件：
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<script src="dist/js/bootstrap.min.js"></script>
準(zhǔn)備工作
二.布局容器類樣式：
1..container 和 .container-fluid
.container 固定寬度并且具有響應(yīng)式。
<div class="container">
<h1> Bootstrap</h1>
<p>Bootstrap辕坝，來自 Twitter窍奋，是目前很受歡迎的前端框架。Bootstrap 是基于 HTML酱畅、CSS琳袄、JAVASCRIPT 的，它簡(jiǎn)潔靈活纺酸，
使得 Web 開發(fā)更加快捷挚歧。它由Twitter的設(shè)計(jì)師Mark Otto和Jacob Thornton合作開發(fā)，是一個(gè)CSS/HTML框架吁峻。Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范滑负，
它即是由動(dòng)態(tài)CSS語(yǔ)言Less寫成。Bootstrap一經(jīng)推出后頗受歡迎用含，一直是GitHub上的熱門開源項(xiàng)目矮慕，包括NASA的MSNBC（微軟全國(guó)廣播公司
）的Breaking News都使用了該項(xiàng)目。[2] 國(guó)內(nèi)一些移動(dòng)開發(fā)者較為熟悉的框架啄骇，如WeX5前端開源框架等痴鳄，
也是基于Bootstrap源碼進(jìn)行性能優(yōu)化而來。</p>
</div>
樣式結(jié)果
.container-fluid 自由寬度（100%寬度）
<div class="container-fluid">
<h1> Bootstrap</h1>
<p>Bootstrap缸夹，來自 Twitter痪寻，是目前很受歡迎的前端框架。Bootstrap 是基于 HTML虽惭、CSS橡类、JAVASCRIPT 的，它簡(jiǎn)潔靈活芽唇，
使得 Web 開發(fā)更加快捷顾画。它由Twitter的設(shè)計(jì)師Mark Otto和Jacob Thornton合作開發(fā)，是一個(gè)CSS/HTML框架匆笤。Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范研侣，
它即是由動(dòng)態(tài)CSS語(yǔ)言Less寫成。Bootstrap一經(jīng)推出后頗受歡迎炮捧，一直是GitHub上的熱門開源項(xiàng)目庶诡，包括NASA的MSNBC（微軟全國(guó)廣播公司
）的Breaking News都使用了該項(xiàng)目。[2] 國(guó)內(nèi)一些移動(dòng)開發(fā)者較為熟悉的框架咆课，如WeX5前端開源框架等末誓，
也是基于Bootstrap源碼進(jìn)行性能優(yōu)化而來扯俱。</p>
</div>
樣式結(jié)果
2.標(biāo)題樣式.h1~.h6
<span class="h1">我是h1</span>
<span class="h2">我是h2</span>
<span class="h3">我是h1</span>
結(jié)果樣式
3.文本對(duì)齊： .text-left .text-center .text-right .text-justify
.text-left 左對(duì)齊
.text-center 局中
.text-right 右對(duì)齊
.text-justify 兩端對(duì)齊
<h1 class="text-left">Bootstrap</h1>
<h1 class="text-center">Bootstrap</h1>
<h1 class="text-right">Bootstrap</h1>
<h1 class="text-justify">Bootstrap</h1>
樣式結(jié)果
4. 樣式列表：.list-unstyled(無(wú)符號(hào)) .list-inline(行內(nèi)塊)
.list-unstyled(無(wú)符號(hào))
<ul class="list-unstyled">
<li>Bootstrap</li>
<li>Bootstrap</li>
<li>Bootstrap</li>
<li>Bootstrap</li>
</ul>
結(jié)果演示
.list-inline(行內(nèi)塊)
<ul class="list-inline">
<li>Bootstrap</li>
<li>Bootstrap</li>
<li>Bootstrap</li>
<li>Bootstrap</li>
</ul>
結(jié)果演示
5.表格樣式 .table .table-striped .table-bordered .table-hover .table-condensed
.table
<table class="table">
<tr>
<td>Bootstrap</td>
<td>Bootstrap</td>
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr>
<tr>
<td>Bootstrap</td>
<td>Bootstrap</td>
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr>
</table>
結(jié)果演示
.table-striped 漸變顏色
<table class="table table-striped" >
<tr>
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr>
<tr>
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr>
<tr>
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr>
<tr>
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr>
</table>
結(jié)果演示
.table-bordered 帶邊框的表格
<table class="table-bordered table " >
<tr>
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr>
<tr>
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr>
<tr>
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr>
</table>
結(jié)果演示
.table-hover 鼠標(biāo)事件變色
<div class="container"><br>
<table class="table-hover table " >
<tr>
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr>
<tr>
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr>
<tr>
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr>
</table>
結(jié)果演示
.table-condensed 緊湊型
<table class="table-condensed table " >
<tr>
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr>
<tr>
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr>
<tr>
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr>
</table>
結(jié)果演示
6.行或單元格背景色 .active .success .info .warning .danger
.active 當(dāng)前顏色
.success 成功顏色
.info 信息顏色
.warning 警告顏色
.danger 危險(xiǎn)顏色
<table class=" table" >
<tr>
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr >
<tr class="active">
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr >
<tr class="success">
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr>
<tr class="info" >
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr>
<tr class="warning" >
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr>
<tr class="danger" >
<td>Bootstrap</td>
<td>Bootstrap</td>
</tr>
</table>
結(jié)果演示
<div class="container">
<div class="table-responsive">
<table class=" table table-condensed" >
<tr>
<td>Bootstrap</td>
<td>Bootstrap</td>
............省略....................
</tr>
............省略....................
</table>
</div>
</div>
文集：Bootstrap學(xué)習(xí)筆記
