BootStrap簡介與使用
1.BootStrap的簡介
Bootstrap，是來自 Twitter的目前最受歡迎的響應式前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷
2.BootStrap的特點
(1)HTML5文件型別
BootStrap使用到的某些HTML元素和CSS屬性需要將頁面設定為HTML5的文件型別,在專案中的每個頁面都要參照下面的格式設計
<!DOCTYPE html>
<html lang="zh-CN">
...
</html>（2）移動裝置優先
BootStrap3整個是支援移動裝置的，為了確保適當的繪製和觸屏縮放，需要在<head>中新增viewport元資料標籤
<meta name="viewport" content="width=device-width, initial-scale=1">（3）排版與連結
Bootstrap 排版、連結樣式設定了基本的全域性樣式，分別是：
為
body 元素設定
background-color: #fff;
使用 @font-family-base、@font-size-base 和
@line-height-base 變數作為排版的基本引數
為所有連結設定了基本顏色
@link-color ，並且當連結處於
:hover 狀態時才新增下劃線
(4)佈局容器
Bootstrap 需要為頁面內容和柵格系統包裹一個 .container
padding 等屬性的原因，這兩種 容器類不能互 相巢狀
.container類用於固定寬度並支援響應式佈局的容器
<div class="container">
...
</div>.container-fluid 類用於 100% 寬度，佔據全部視口（viewport）的容器<div class="container-fluid">
...
</div>3.刪格系統
Bootstrap 提供了一套響應式、移動裝置優先的流式柵格系統，隨著螢幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義類，還有強大的mixin用於生成更具語義的佈局。
“行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便為其賦予合適的排列（aligment）和內補（padding）。
通過“行（row）”在水平方向建立一組“列（column）”。
你的內容應當放置於“列（column）”內，並且，只有“列（column）”可以作為行（row）”的直接子元素。
類似 .row 和 .col-xs-4 這種預定義的類，可以用來快速建立柵格佈局。Bootstrap 原始碼中定義的 mixin 也可以用來建立語義化的佈局。
通過為“列（column）”設定 padding 屬性，從而建立列與列之間的間隔（gutter）。通過為 .row 元素設定負值 margin 從而抵消掉為 .container 元素設定的 padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。
負值的 margin就是下面的示例為什麼是向外突出的原因。在柵格列中的內容排成一行。
柵格系統中的列是通過指定1到12的值來表示其跨越的範圍。例如，三個等寬的列可以使用三個 .col-xs-4 來建立。
如果一“行（row）”中包含了的“列（column）”大於 12，多餘的“列（column）”所在的元素將被作為一個整體另起一行排列。
柵格類適用於與螢幕寬度大於或等於分界點大小的裝置 ， 並且針對小螢幕裝置覆蓋柵格類。 因此，在元素上應用任何 .col-md-* 柵格類適用於與螢幕寬度大於或等於分界點大小的裝置 ， 並且針對小螢幕裝置覆蓋柵格類。 因此，在元素上應用任何 .col-lg-* 不存在， 也影響大螢幕裝置
下面從實踐中更好的學習BootStrap
HTML程式碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一個BootStrap檔案</title>
<link href="bootstrap.min.css" rel="stylesheet">
<script src="bootstrap.min.js"></script>
<script src="jquery-migrate-1.4.1.min.js"></script>
<style>
.row{
margin-top: 10px;
margin-bottom: 0;
}
[class*="col-"]{
padding-top: 15px;
padding-bottom: 15px;
background-color: rgba(84,64,124,.15);
border: 1px solid #dddddd;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
</div>
</body>
</html>瀏覽器結果:
上面所寫和上述所描述的刪格系統一直，都是把一行分成好幾個列，並且列不能超過12列，如果超過會自動在下一行.
這是一個最簡單的bootstrap，當然bootstrap還有很多的樣式和用法，可以去官網檢視.
http://www.bootcss.com/