這一篇從最基礎的知識來瞭解Bootstrap. 雖然V4版本已經出來，但還是拿V3來做演示，因為V4我也沒用過 ~~ 官方中文文檔 ，寫的很詳細，但作為入門來說，我感覺不太友好 https://v3.bootcss.com/ 可視化佈局，可以方便的拿來官方文檔的例子，複製粘貼大法好 Bootstra ...
這一篇從最基礎的知識來瞭解Bootstrap. 雖然V4版本已經出來，但還是拿V3來做演示，因為V4我也沒用過 ~~
官方中文文檔 ，寫的很詳細，但作為入門來說，我感覺不太友好 https://v3.bootcss.com/
可視化佈局，可以方便的拿來官方文檔的例子，複製粘貼大法好 Bootstrap可視化佈局系統
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其後！ --> 8 <title>Bootstrap 101 Template</title> 9 10 <!-- Bootstrap --> 11 <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 12 13 <!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 --> 14 <!-- 警告：通過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起作用 --> 15 <!--[if lt IE 9]> 16 <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> 17 <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> 18 <![endif]--> 19 </head> 20 <body> 21 <h1>你好，世界！</h1> 22 <div class="container"> 23 <div class="row"> 24 <div class="col-xs-3 col-sm-4 col-md-6">left</div> 25 <div class="col-xs-3 col-sm-8 col-md-6"> 26 <div class="col-xs-3 col-sm-4 col-md-6">1</div> 27 <div class="col-xs-3 col-sm-8 col-md-6">2</div> 28 </div> 29 </div> 30 </div> 31 32 <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) --> 33 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> 34 <!-- 載入 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只載入單個插件。 --> 35 <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 36 </body> 37 </html>
保存html用瀏覽器打開，用瀏覽器調整頁面的寬度，模擬在手機、平板、顯示器等不同的瀏覽設備上，佈局都會發生一些變化，就叫做柵格化。
Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。 也就是說，不論顯示器的尺寸，都會自動將整個屏幕分為12列，即.col-xx-2 後面的2要加上.col-xx-10 才能湊夠鋪滿屏幕。這樣也就分成了左右佈局 左2右10的比例分配。
實例：從堆疊到水平排列 使用單一的一組 .col-md-* 柵格類，就可以創建一個基本的柵格系統，在手機和平板設備上一開始是堆疊在一起的（超小屏幕到小屏幕這一範圍），在桌面（中等）屏幕設備上變為水平排列。所有“列（column）必須放在 ” .row 內。 <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 class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div>
上面這個是官方的例子，非常的清晰，多看一下就理解了。鏈接：https://v3.bootcss.com/css/#grid-example-fluid
好，瞭解了bootstrap ,我們自己就可以按照設計圖來分配佈局了。
這些僅僅是博主的知識分享，而且博主僅僅看了兩天的官方文檔，東拼西湊的寫出了還算滿意的靜態頁面，而且無法共用給大家，所以沒有實例代碼。
我總結了一下自己學習Bootstrap從0入門，最大的障礙是不確定自己能不能學會，我肯定的告訴你，很簡單！多看一下官方文檔，善用搜索引擎，總是可以找到解決方法。不要神話任何的框架代碼，它們都是一步一步的完善出來的，而且都是基礎知識拼起來，更好的為我們提供服務。對於一個方便的工具，你要消去不存在的敬畏，拿著它玩來玩去，玩壞了就重新下載個，東搞搞西搞搞，才能總結出來自己的知識體系。以此與君共勉！
