Bootstrap
bootstrap是可用于架構(gòu)流行的用戶界面和交互接口的html，css滨巴，javascript工具集。
是簡潔強大的開發(fā)框架。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
在IE瀏覽器中運行最新的渲染模式
<meta name="viewport" content="width=device-width, initial-scale=1">`
viewport是移動瀏覽器的虛擬視口夭咬，通常比屏幕寬。
"content=width=device-width"：視口寬度等于物理設(shè)備真實的分辨率
"initial-scale=1"：初始的縮放比率為1
如果要使用Bootstrap的js插件铆隘，必須先調(diào)入jQuery
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
包括所有bootstrap的js插件或者可以根據(jù)需要使用的js插件調(diào)用
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Bootstrap
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" >
你自己的樣式文件
<link href="css/your-style.css" rel="stylesheet">
以下兩個插件用于在IE8以及以下版本瀏覽器支持HTML5元素和媒體查詢卓舵，如果不需要用可以移除
一.標(biāo)題
在Bootstrap中為了讓非標(biāo)題元素和標(biāo)題使用相同的樣式，還特意定義了.h1~.h6六個類名
ex：<div class="h1">Bootstrap標(biāo)題一</div>
二.小標(biāo)題
在Web的制作中膀钠，常常會碰到在一個標(biāo)題后面緊跟著一行小的副標(biāo)題掏湾。在Bootstrap中他也考慮了這種排版效果，使用了<small>標(biāo)簽來制作副標(biāo)題肿嘲。這個副標(biāo)題具有其自己的一些獨特樣式：
1融击、行高都是1，而且font-weight設(shè)置了normal變成了常規(guī)效果（不加粗）雳窟，同時顏色被設(shè)置為灰色（#999）尊浪。
2、由于<small>內(nèi)的文本字體在h1~h3內(nèi)封救，其大小都設(shè)置為當(dāng)前字號的65%拇涤；而在h4~h6內(nèi)的字號都設(shè)置為當(dāng)前字號的75%；
ex：<h1>Bootstrap標(biāo)題一<small>我是副標(biāo)題</small></h1>
三.正文文本
段落是排版中另一個重要元素之一誉结。在Bootstrap中為文本設(shè)置了一個全局的文本樣式（這里所說的文本是指正文文本）：
1鹅士、全局文本字號為14px(font-size)。
2惩坑、行高為1.42857143（line-height）掉盅，大約是20px(大家看到一串的小數(shù)或許會有疑惑，其實他是通過LESS編譯器計算出來的以舒，當(dāng)然Sass也有這樣的功能)趾痘。
3、顏色為深灰色（#333）稀轨；
4扼脐、字體為"Helvetica Neue", Helvetica, Arial, sans-serif;（font-family），或許這樣的字體對我們中文并不太合適，但在實際項目中瓦侮，大家可以根據(jù)自己的需求進行重置艰赞，在此我們不做過多闡述，我們回到這里肚吏。該設(shè)置都定義在`<body>`元素上方妖，由于這幾個屬性都是繼承屬性，所以Web頁面中文本（包括段落p元素）如無重置都會具有這些樣式效果罚攀。
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.42857143; color: #333; background-color: #fff; }
另外在Bootstrap中党觅，為了讓段落p元素之間具有一定的間距，便于用戶閱讀文本斋泄，特意設(shè)置了p元素的margin值（默認(rèn)情況之下杯瞻，p元素具有一個上下外邊距，并且保持一個行高的高度）：
p {
margin: 0 0 10px;
}
在實際項目中炫掐，對于一些重要的文本魁莉，希望突出強調(diào)的部分都會做另外的樣式處理。Bootstrap同樣對這部分做了一些輕量級的處理募胃。
如果想讓一個段落p突出顯示旗唁，可以通過添加類名“.lead”實現(xiàn)，其作用就是增大文本字號痹束，加粗文本检疫，而且對行高和margin也做相應(yīng)的處理
三.斜體
在排版中，除了用加粗來強調(diào)突出的文本之外祷嘶，還可以使用斜體屎媳。斜體類似于加粗一樣，除了可以給元素設(shè)置樣式font-style值為italic實現(xiàn)之外抹蚀，在Bootstrap中還可以通過使用標(biāo)簽<em>或<i>來實現(xiàn)剿牺。
四.強調(diào)相關(guān)的類
在Bootstrap中除了使用標(biāo)簽<strong>企垦、<em>等說明正文某些字詞环壤、句子的重要性，Bootstrap還定義了一套類名钞诡，這里稱其為強調(diào)類名（類似前面說的“.lead”）,這些強調(diào)類都是通過顏色來表示強調(diào)郑现，具本說明如下：
text-muted：提示，使用淺灰色（#999）
text-primary：主要荧降，使用藍色（#428bca）
text-success：成功接箫，使用淺綠色(#3c763d)
text-info：通知信息，使用淺藍色（#31708f）
text-warning：警告朵诫，使用黃色（#8a6d3b）
text-danger：危險辛友，使用褐色（#a94442）
示例:<div class="text-muted"></div>
五. 文本對齊風(fēng)格
在排版中離不開文本的對齊方式。在CSS中常常使用text-align來實現(xiàn)文本的對齊風(fēng)格的設(shè)置。其中主要有四種風(fēng)格：
左對齊废累，取值left
居中對齊邓梅，取值center
右對齊，取值right
兩端對齊邑滨，取值justify
為了簡化操作日缨，方便使用，Bootstrap通過定義四個類名來控制文本的對齊風(fēng)格：
text-left：左對齊
text-center：居中對齊
text-right：右對齊
text-justify：兩端對齊
示例：<p class="text-left">我居左</p>
六.列表
在HTML文檔中掖看，列表結(jié)構(gòu)主要有三種：有序列表匣距、無序列表和定義列表。具體使用的標(biāo)簽說明如下：
無序列表
<ul>
<li>…</li>
</ul>
有序列表
<ol>
<li>…</li>
</ol>
定義列表
<dl>
<dt>…</dt>
<dd>…</dd>
</dl>
Bootstrap根據(jù)平時的使用情形提供了六種形式的列表：
普通列表
有序列表
去點列表
內(nèi)聯(lián)列表
水平描述列表
列表--去點列表
Bootstrap為眾多開發(fā)者考慮的非常周道哎壳，通過給無序列表添加一個類名“.list-unstyled”,這樣就可以去除默認(rèn)的列表樣式的風(fēng)格毅待。
示例：
<ul class="list-unstyled">
<li>不帶項目符號</li>
<li>不帶項目符號</li>
</ul>
除了項目編號之外，還將列表默認(rèn)的左邊內(nèi)距也清０了归榕。
列表--內(nèi)聯(lián)列表
Bootstrap像去點列表一樣恩静，通過添加類名“.list-inline”來實現(xiàn)內(nèi)聯(lián)列表，簡單點說就是把垂直列表換成水平列表蹲坷，而且去掉項目符號（編號）驶乾，保持水平顯示。也可以說內(nèi)聯(lián)列表就是為制作水平導(dǎo)航而生循签。
示例：
<ul class="list-inline">
<li>W3cplus</li>
<li>Blog</li>
<li>CSS3</li>
<li>jQuery</li>
<li>PHP</li>
</ul>
列表--水平定義列表
水平定義列表就像內(nèi)聯(lián)列表一樣级乐，Bootstrap可以給<dl>添加類名“.dl-horizontal”給定義列表實現(xiàn)水平顯示效果。
源碼添加了一個媒體查詢县匠。也就是說风科，只有屏幕大于768px的時候，添加類名“.dl-horizontal”才具有水平定義列表效果乞旦。其實現(xiàn)主要方式：
1.將dt設(shè)置了一個左浮動贼穆，并且設(shè)置了一個寬度為160px
2.將dd設(shè)置一個margin-left的值為180px，達到水平的效果
3.當(dāng)標(biāo)題寬度超過160px時兰粉，將會顯示三個省略號
示例：
<dl class="dl-horizontal">
<dt>W3cplus</dt>
<dd>一個致力于推廣國內(nèi)前端行業(yè)的技術(shù)博客故痊。它以探索為己任，不斷活躍在行業(yè)技術(shù)最前沿玖姑，努力提供高質(zhì)量前端技術(shù)博文</dd>
<dt>慕課網(wǎng)</dt>
<dd>一個專業(yè)的愕秫，真心實意在做培訓(xùn)的網(wǎng)站</dd>
<dt>我來測試一個標(biāo)題，我來測試一個標(biāo)題</dt>
<dd>我在寫一個水平定義列表的效果焰络，我在寫一個水平定義列表的效果</dd>
</dl>
七.表格
表格是Bootstrap的一個基礎(chǔ)組件之一戴甩，Bootstrap為表格提供了1種基礎(chǔ)樣式和4種附加樣式以及1個支持響應(yīng)式的表格。在使用Bootstrap的表格過程中闪彼，只需要添加對應(yīng)的類名就可以得到不同的表格風(fēng)格甜孤。
主要包括：
? .table：基礎(chǔ)表格<table class="table">
? .table-striped：斑馬線表格<table class="table table-striped"> tbody隔行有一個淺灰色的背景色
? .table-bordered：帶邊框的表格<table class="table table-bordered"> 所有單元格具有一條1px的邊框。
? .table-hover：鼠標(biāo)懸停高亮的表格<table class="table table-striped table-bordered table-hover"> 當(dāng)鼠標(biāo)懸停在表格的行上面有一個高亮的背景色
? .table-condensed：緊湊型表格 <table class="table table-condensed"> 就是單元格沒內(nèi)距或者內(nèi)距較其他表格的內(nèi)距更小。換句話說缴川，要實現(xiàn)緊湊型表格只需要重置表格單元格的內(nèi)距padding的值囱稽。
? .table-responsive：響應(yīng)式表格 <div class="table-responsive"> <table class="table table-bordered">Bootstrap中響應(yīng)式表格效果表現(xiàn)為：當(dāng)你的瀏覽器可視區(qū)域小于768px時，表格底部會出現(xiàn)水平滾動條二跋。當(dāng)你的瀏覽器可視區(qū)域大于768px時战惊，表格底部水平滾動條就會消失
示例：
<div class="table-responsive"> <table class="table table-bordered"> <thead> <tr> <th>表格標(biāo)題</th> <th>表格標(biāo)題</th> <th>表格標(biāo)題</th> </tr> </thead> <tbody> <tr> <td>表格單元格</td> <td>表格單元格</td> <td>表格單元格</td> </tr> <tr> <td>表格單元格</td> <td>表格單元格</td> <td>表格單元格</td> </tr> <tr> <td>表格單元格</td> <td>表格單元格</td> <td>表格單元格</td> </tr> <tr> <td>表格單元格</td> <td>表格單元格</td> <td>表格單元格</td> </tr> </tbody> </table>
注：其實，鼠標(biāo)懸浮高亮表格扎即，可以和Bootstrap其他表格混合使用吞获。簡單點說，只要你想讓你的表格具備懸浮高亮效果谚鄙，你只要給這個表格添加“table-hover”類名就好了各拷。例如，將前面介紹的幾種表格結(jié)合使用：
<table class="table table-striped table-bordered table-hover">
…
</table>
表格行的類
Bootstrap還為表格的行元素<tr>提供了五種不同的類名闷营，每種類名控制了行的不同背景顏色烤黍，具體說明如下表所示
其使用非常的簡單，只需要在<tr>元素中添加上表對應(yīng)的類名傻盟，就能達到你自己需要的效果：
<tr class="active">
<td>…</td>
</tr>
特別提示：除了”.active”之外速蕊，其他四個類名和”.table-hover”配合使用時，Bootstrap針對這幾種樣式也做了相應(yīng)的懸浮狀態(tài)的樣式設(shè)置娘赴，所以如果需要給tr元素添加其他顏色樣式時规哲，在”.table-hover”表格中也要做相應(yīng)的調(diào)整。
注意要實現(xiàn)懸浮狀態(tài)诽表，需要在<table>標(biāo)簽上加入table-hover類唉锌。
如下代碼：
<table class="table-hover">
2016/10/24 11:41:46
