標簽（空格分隔）： bootstrap
既然項目中使用Bootstrap，那么Bootstrap本身自帶的類，可以添加很多常用樣式舷夺，很方便的，能用Bootstrap本身自帶的鄙陡，盡量不自己寫
強調(diào)內(nèi)容
- 強調(diào)內(nèi)容: 如果想讓一個段落p突出顯示冕房，可以通過添加類名“.lead”實現(xiàn)，其作用就是增大文本字號趁矾，加粗文本耙册，而且對行高和margin也做相應的處理。
- “.lead”對應的樣式如下：
源碼查看bootstrap.css文件第470行~480行
.lead {
margin-bottom: 20px;
font-size: 16px;
font-weight: 200;
line-height: 1.4;
}
@media (min-width: 768px) {/*大中型瀏覽器字體稍大*/
.lead {
font-size: 21px;
}
}
強調(diào)相關(guān)的類
.text-muted：提示毫捣，使用淺灰色（#999）.text-primary:主要详拙，使用藍色（#428bca）.text-success:成功帝际，使用淺綠色(#3c763d).text-info:通知信息，使用淺藍色（#31708f）.text-warning:警告饶辙，使用黃色（#8a6d3b）.text-danger:危險蹲诀，使用褐色（#a94442）
具本源碼查看bootstrap.css文件第500行~第532行：
.text-muted {
color: #999;
}
.text-primary {
color: #428bca;
}
a.text-primary:hover {
color: #3071a9;
}
.text-success {
color: #3c763d;
}
a.text-success:hover {
color: #2b542c;
}
.text-info {
color: #31708f;
}
a.text-info:hover {
color: #245269;
}
.text-warning {
color: #8a6d3b;
}
a.text-warning:hover {
color: #66512c;
}
.text-danger {
color: #a94442;
}
a.text-danger:hover {
color: #843534;
}
文本對齊風格
-
.text-left：左對齊 -
.text-center：居中對齊 -
.text-right：右對齊 -
.text-justify：兩端對齊
具體源碼查看bootstrap.css文件第488行~第499行：
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}
特別聲明：目前兩端對齊在各瀏覽器下解析各有不同，特別是應用于中文文本的時候弃揽。所以項目中慎用脯爪。
列表--去點列表
通過給無序列表添加一個類名.list-unstyled,這樣就可以去除默認的列表樣式的風格。
源碼請查看bootstrap.css文件第580行~第583行
.list-unstyled {
padding-left: 0;
list-style: none;
}
列表--內(nèi)聯(lián)列表
通過添加類名.list-inline來實現(xiàn)內(nèi)聯(lián)列表矿微，簡單點說就是把垂直列表換成水平列表痕慢，而且去掉項目符號（編號），保持水平顯示涌矢。也可以說內(nèi)聯(lián)列表就是為制作水平導航而生掖举。
源碼查看bootstrap.css文件第584行~第593行
.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}
表格
表格是Bootstrap的一個基礎組件之一，Bootstrap為表格提供了1種基礎樣式和4種附加樣式以及1個支持響應式的表格娜庇。在使用Bootstrap的表格過程中塔次，只需要添加對應的類名就可以得到不同的表格風格。
[x]
.table：基礎表格[x]
.table-striped：斑馬線表格[x]
.table-bordered：帶邊框的表格[x]
.table-hover：鼠標懸停高亮的表格[x]
.table-condensed：緊湊型表格[x]
.table-responsive：響應式表格
eg:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>基礎表格</title>
<link rel="stylesheet" >
</head>
<body>
<h1>基礎表格</h1>
<table class="table">
<thead>
<tr>
<th>表格標題</th>
<th>表格標題</th>
<th>表格標題</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格單元格</td>
<td>表格單元格</td>
<td>表格單元格</td>
</tr>
<tr>
<td>表格單元格</td>
<td>表格單元格</td>
<td>表格單元格</td>
</tr>
</tbody>
</table>
<h1>斑馬線表格</h1>
<table class="table table-striped">
<thead>
<tr>
<th>表格標題</th>
<th>表格標題</th>
<th>表格標題</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>
<h1>帶邊框的表格</h1>
<table class="table table-bordered">
<thead>
<tr>
<th>表格標題</th>
<th>表格標題</th>
<th>表格標題</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>
<h1>鼠標懸浮高亮的表格</h1>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>表格標題</th>
<th>表格標題</th>
<th>表格標題</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>
<h1>緊湊型表格</h1>
<table class="table table-condensed">
<thead>
<tr>
<th>表格標題</th>
<th>表格標題</th>
<th>表格標題</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>
<h1>響應式表格</h1>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>表格標題</th>
<th>表格標題</th>
<th>表格標題</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>
</div>
</body>
</html>
表格-表格行的類
其使用非常的簡單名秀，只需要在<tr>元素中添加上表對應的類名励负，就能達到你自己需要的效果：
eg:
<tr class="active"> <td>…</td> </tr>還有
.table-hover是表格的hover效果。
基本表格
.table主要有三個作用：
[x] 給表格設置了margin-bottom:20px以及設置單元內(nèi)距
[x] 在thead底部設置了一個2px的淺灰實線
[x] 每個單元格頂部設置了一個1px的淺灰實線
主要源碼查看bootstrap.css文件第1402行～第1441行
按鈕
Bootstrap框架的按鈕也是一個獨立部分匕得，我們同樣在不同的版本之中能找到對應的代碼：
LESS版本：查看源文件buttons.less
Sass版本：查看源文件_buttons.scss
已編譯版本：查看源文件bootstrap.css文件第1992行～第2353行
按鈕類型
<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>
定制風格按鈕
圖像
圖像在網(wǎng)頁制作中也是常要用到的元素熄守，在Bootstrap框架中對于圖像的樣式風格提供以下幾種風格：
-
img-responsive：響應式圖片，主要針對于響應式設計 -
img-rounded：圓角圖片 -
img-circle：圓形圖片 -
img-thumbnail：縮略圖片
圖標
這里說的圖標就是Web制作中澈孽耍看到的小icon圖標，可以說這些小icon圖標是一個優(yōu)秀Web中不可缺少的一部分攒发，起到畫龍點睛的效果调塌。在Bootstrap框架中也為大家提供了近200個不同的icon圖片，而這些圖標都是使用CSS3的@font-face屬性配合字體來實現(xiàn)的icon效果惠猿。
Bootstrap圖標
