- bootstrap 基礎
- 使用方法
首先下載 bootstrap
傳送門：中文文檔http://v3.bootcss.com/
傳送門：英文文檔http://getbootstrap.com/
bootstrap基本模板
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9] 解決IE6，IE7，IE8的響應式>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins)
jQuery文件引入要在bootstrap文件引入之前 這里是線上引用，當然你可以使用下載好的本地文件 -->
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
全局樣式style.css
移除body的margin聲明
設置body的背景色為白色
為排版設置了基本的字體、字號和行高
設置全局鏈接顏色，且當鏈接處于懸浮“:hover”狀態時才會顯示下劃線樣式
標題類
<h1>你好，世界！</h1>
<h2>你好，世界！</h2>
<h3>你好，世界！</h3>
<h4>你好，世界！</h4>
<h5>你好，世界！</h5>
<h6>你好，世界！</h6>
<!-- 標題類 h1-h6 -->
<div class="h1">hello world</div>
<div class="h2">hello world</div>
<div class="h3">hello world</div>
<div class="h4">hello world</div>
<div class="h5">hello world</div>
.h1~.h6 效果
Mou icon
副標題
<div class="h1">hello world<small>你好 世界！</small></div>
<div class="h2">hello world<small>你好 世界！</small></div>
<div class="h3">hello world<small>你好 世界！</small></div>
<div class="h4">hello world<small>你好 世界！</small></div>
<div class="h5">hello world<small>你好 世界！</small></div>
效果如下：
Mou icon
bootstrap 預處理
在bootstrap中有些便簽是本來就一應預處理好的
例：a 標簽 本身是自帶一些默認性的，如：
color: -webkit-link;
text-decoration: underline;
cursor: auto;
但是在bootstrap中這些屬性都被預處理了
設置了全局鏈接顏色，并且當處于懸浮“：hover”時才會顯示下劃線樣式
color: #337ab7;
text-decoration: none;
background-color: transparent;
強調內容
.lead 一般段落標簽使用
例：<p class="lead">我是段落</p>與<p>我是段落</p>
效果如下：
Mou icon
a.其他強調標簽
<small>
<strong></strong> <b></b>(已經快廢棄)
<em></em> <i></i>
<cite></cite>
強調相關的類
text-muted：提示，使用淺灰色（#999）
text-primary：主要，使用藍色（#428bca）
text-success：成功，使用淺綠色(#3c763d)
text-info：通知信息，使用淺藍色（#31708f）
text-warning：警告，使用黃色（#8a6d3b）
text-danger：危險，使用褐色（#a94442）
例：
<p class="text-muted">我是text-muted</p>
<p class="text-primary">我是text-primary</p>
<p class="text-success">我是text-success</p>
<p class="text-info">我是text-info</p>
<p class="text-warning">我是text-warning</p>
<p class="text-danger">我是text-danger</p>
<p class="">我是段落</p>
效果如下：
Mou icon
文本對齊風格
text-left：左對齊
text-center：居中對齊
text-right：右對齊
text-justify：兩端對齊
例：
<div class="text-left">
<!-- text-left：左對齊 -->
Bootstrap 中文網 為 Bootstrap 專門構建了自己的免費 CDN <br/>
加速服務。基于國內云廠商的 CDN 服務，訪問速度更快、加速效果更明顯、沒有速<br/>度和帶寬限制、永久免費。Bootstrap 中文網還對大量的前端開源工具庫提供了 CDN 加速服務，請進入BootCDN <br/>
主頁查看更多可用的工具庫。
</div>
<div class="text-center">
<!-- text-center：居中對齊 -->
Bootstrap 中文網 為 Bootstrap 專門構建了自己的免費 CDN <br/>
加速服務。基于國內云廠商的 CDN 服務，訪問速度更快、加速效果更明顯、沒有速<br/>度和帶寬限制、永久免費。Bootstrap 中文網還對大量的前端開源工具庫提供了 CDN 加速服務，請進入BootCDN <br/>
主頁查看更多可用的工具庫。
</div>
<div class="text-right">
<!-- text-right：右對齊 -->
Bootstrap 中文網 為 Bootstrap 專門構建了自己的免費 CDN <br/>
加速服務。基于國內云廠商的 CDN 服務，訪問速度更快、加速效果更明顯、沒有速<br/>度和帶寬限制、永久免費。Bootstrap 中文網還對大量的前端開源工具庫提供了 CDN 加速服務，請進入BootCDN <br/>
主頁查看更多可用的工具庫。
</div>
<div class="text-justify">
<!-- text-justify：兩端對齊(其實就是自動換行) -->
Bootstrap 中文網 為 Bootstrap 專門構建了自己的免費 CDN 加速服務。基于國內云廠商的 CDN 服務，訪問速度更快、加速效果更明顯、沒有速度和帶寬限制、永久免費。Bootstrap 中文網還對大量的前端開源工具庫提供了 CDN 加速服務，請進入BootCDN 主頁查看更多可用的工具庫。
</div>
效果如下：
Mou icon
列表
ul 去序列樣式 <ul class="list-unstyled">
例：
<ul class="list-unstyled">
<li >我是無序列</li>
<li>我是無序列</li>
<li>我是無序列</li>
</ul>
效果如下：
Mou icon
Mou icon
ol 去序列樣式<ol class="list-unstyled">
例：
<ol class="list-unstyled">
<li>我是有序</li>
<li>我是有序</li>
<li>我是有序</li>
</ol>
效果入下：
Mou icon
Mou icon
ul ol 水平列表：list-inline
把垂直列表換成水平列表，而且去掉項目符號（編號），保持水平顯示
例：
<ul class="list-inline">
<li >我是無序列</li>
<li>我是無序列</li>
<li>我是無序列</li>
</ul>
<ol class="list-inline">
<li >我是有序</li>
<li>我是有序</li>
<li>我是有序</li>
</ol>
效果如下：
Mou icon
dl 水平列表：dl-horizontal
屏幕大于768px的時候，添加類名“.dl-horizontal”才具有水平定義列表效果
例：
<dl class="dl-horizontal">
<dt>我是列標題</dt>
<dd>我是內容</dd>
<dd>我市內容</dd>
</dl>
屏幕小于768px
Mou icon
屏幕大于768px
Mou icon
代碼風格
code標簽
<code> 標簽用于表示計算機源代碼或者其他機器可以閱讀的文本內容。
軟件代碼的編寫者已經習慣了編寫源代碼時文本表示的特殊樣式。<code> 標簽就是為他們設計的。包含在該標簽內的文本將用等寬、類似電傳打字機樣式的字體（Courier）顯示出來，對于大多數程序員戶來說，這應該是十分熟悉的。
只應該在表示計算機程序源代碼或者其他機器可以閱讀的文本內容上使用 <code> 標簽。雖然 <code> 標簽通常只是把文本變成等寬字體，但它暗示著這段文本是源程序代碼。將來的瀏覽器有可能會加入其他顯示效果。例如，程序員的瀏覽器可能會尋找 <code> 片段，并執行某些額外的文本格式化處理，如循環和條件判斷語句的特殊縮進等。
一般是針對于單個單詞或單個句子的代碼
例：
<code>
var mun1=10
</code>
效果如下：
Mou icon
pre-scrollable
只需要在pre標簽上添加類名“.pre-scrollable”，就可以控制代碼塊區域最大高度為340px，一旦超出這個高度，就會在Y軸出現滾動條。
例：
<pre class="pre-scrollable">
function(){
我是一個函數
我是測試
}
function(){
我是一個函數
我是測試
}
function(){
我是一個函數
我是測試
}
function(){
我是一個函數
我是測試
}
function(){
我是一個函數
我是測試
}
function(){
我是一個函數
我是測試
}
function(){
我是一個函數
我是測試
}
function(){
我是一個函數
我是測試
}
</pre>
效果如下：
Mou icon
bootstrap-表格
基礎表格：
.table
給表格設置了margin-bottom:20px以及設置單元內距
在thead底部設置了一個2px的淺灰實線
每個單元格頂部設置了一個1px的淺灰實線
例：<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>
<tr>
<td>我是單元格</td>
<td>我是單元格</td>
<td>我是單元格</td>
</tr>
</tbody>
</table>
效果如下：
Mou icon
附加樣式表格
附加樣式表格
.table-striped：斑馬線表格
.table-bordered：帶邊框的表格
.table-hover：鼠標懸停高亮的表格
.table-condensed：緊湊型表格（減小paading 值）
例：
Mou icon
響應式表格
.table-responsive
<div class=“table-responsive”>
<table class=“table table-bordered”>
Bootstrap提供了一個容器，并且此容器設置類名“.table-responsive”,此容器就具有響應式效果，然后將<table class=“table”>置于這個容器當中，這樣表格也就具有響應式效果
當你的瀏覽器可視區域小于768px時，表格底部會出現水平滾動條。當你的瀏覽器可視區域大于768px時，表格底部水平滾動條就會消失
例：
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover 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>
</tbody>
</table>
</div>
屏幕小于768px
Mou icon
屏幕大于768px
Mou icon
bootstrap-圖片 和圖標
bootstrap－圖片
使用方法非常簡單，只需要在<img>標簽上添加對應的類名
img-responsive：響應式圖片，主要針對于響應式設計
img-rounded：圓角圖片
img-circle：圓形圖片
img-thumbnail：縮略圖片
bootstrap-圖標
Bootstrap框架中也為大家提供了近200個不同的icon圖片，
而這些圖標都是使用CSS3的@font-face屬性配合字體來實現的icon效果。
傳送門：中文http://getbootstrap.com/components/#glyphicons
傳送門：英文http://v3.bootcss.com/components/
查看所有圖標名稱
任何行級元素都可以，通常使用span標簽坐圖標容器
在Bootstrap框架中是通過給元素添加“glyphicon”類名來實現，
<span class=“glyphic glyphicon-search”></span>
<span class=“glyphic glyphicon-asterisk”></span>
<span class=“glyphic glyphicon-plus”></span>
<span class=“glyphic glyphicon-cloud”></span>
好了到這里 bootstrap基礎（一）就結束了，，，