bootstrap 學習筆記（1）---介紹bootstrap和柵格系統
學習前端許久，對於布置框架和響應瀏覽器用html 和javascript 寫的有點繁瑣，無意間看到這個框架，覺得挺好用的就開始學習了，但是這個框架上面有很多知識，不是所有的都要學的，故將學習筆記和覺得重點的東西寫下來，以便以後學習。
Bootstrap 是一個相應式的布局的一個前端框架。
bootstrap 學習有以下步驟：
1、bootstrap 安裝，
2、bootstrap 全局css 樣式
3、bootstrap css組件
4、bootstrap javascript 插件
bootstrap 安裝：官網下載壓縮包解壓到項目中，然後在項目文件中引入下面三行代碼：
<link rel="stylesheet" href="bs/css/bootstrap.css" />
<script src="bs/js/jquery-3.1.1.js"></script>
<script src="bs/js/bootstrap.js"></script>
全局css 樣式：
a.必須是html5文檔類型<!DOCTYPE html>
b.移動設備優先 通過為視口（viewport）設置 meta 屬性為 user-scalable=no 可以禁用其縮放（zooming）功能。
這樣禁用縮放功能後，用戶只能滾動屏幕，就能讓你的網站看上去更像原生應用的感覺。註意，這種方式我們並不推薦所有網站使用，
還是要看你自己的情況而定！(這被稱為視寬)
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
柵格系統：
1、Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨著屏幕或視口（viewport）尺寸的增加，
系統會自動分為最多12列。它包含了易於使用的預定義類，還有強大的mixin 用於生成更具語義的布局。
比較有用的例子：class="col-md-" 意思是將列分成12格子，col-md-num 中num的值是每個元素占據多少格子，12/num算出有多少個元素。
row 1行12列
<div class="row">
<div class="col-md-3">
<img src="images/1.png" width="100%" />
</div>
<div class="col-md-3">
<img src="images/1.png" width="100%" />
</div>
<div class="col-md-3">
<img src="images/1.png" width="100%" />
</div>
<div class="col-md-3">
<img src="images/1.png" width="100%" />
</div>
</div>
用下面的方法產生臨時圖片：
<div class="row">
<div class="col-md-3">
<img src="holder.js/100x300" />
</div>
</div>
2、前面的幾個不要，使圖片前面空幾個格子用：col-md-offset-num
eg:
<div class="row">
<div class="col-md-3">
<img src="images/1.png" width="100%" />
</div>
<div class="col-md-3">
<img src="images/1.png" width="100%" />
</div>
<div class="col-md-3 col-md-offset-3">
<img src="images/1.png" width="100%" />
</div>
</div>
3、有個列排序沒必要看，用這個也可以實現：pull-right pull-left
eg:
<div class="row">
<div class="col-md-3 pull-left">
<img src="images/1.png" width="100%" />
</div>
<div class="col-md-3 pull-left">
<img src="images/1.png" width="100%" />
</div>
</div>
bootstrap 學習筆記（1）---介紹bootstrap和柵格系統