Bootstrap學習筆記之總體架構

　　以前有粗略地看過一下Bootstrap的內容，不過那只是蜻蜓點水式地看下是怎麼用的，以及裏面有什麼控件，因此就沒想着記筆記。如今因爲要給部門作分享，因此不得不深刻地去學習下，否則僅是簡單地說下怎麼用，那就無異於「謀殺」別人（浪費別人的時間等於謀財害命——魯迅）。

一、總體架構　

---

　　下圖爲Bootstrap的總體架構圖，共分爲六大部分：

 

 1.一、12柵格系統

　　12柵格系統就是把網頁的總寬度平分爲12份，咱們能夠自由按份組合。柵格系統使用的總寬度能夠不固定，Bootstrap是按百分比進行平分。（保留15位小數點精度）

　　12柵格系統是整個Bootstrap的核心功能，也是響應式設計核心理念的一個實現形式。

1.二、JQuery

 　　Bootstrap全部的JavaScript插件都依賴於jQuery1.10+，若是要使用這些插件，那就必須引用jQuery庫。若是你只用CSS組件，那就能夠不引用它了。

1.三、響應式設計

  　　響應式設計是一個理念，而非功能。Bootstrap的全部內容，都是以響應式設計爲設計理念來實現的。

　　響應式設計的目的：讓頁面應該有能力自動響應用戶的設備環境。響應式網頁設計就是一個網站可以兼容多個終端，而不是爲每一個終端作一個特定的版本。

　　實踐方式：由多方面決定，包括彈性網格和佈局、圖片、CSS媒體查詢（media query）的使用等。

 

二、柵格系統

---

 

 2.一、實現原理

　　經過定義容器大小，平分12份，再調整內外邊距，最後再結合媒體查詢，就製做出了強大的響應式的柵格系統。Bootstrap默認的柵格系統平分爲12份，在使用的時候你們也能夠根據狀況經過從新編譯LESS源碼來修改12這個數值。

2.二、工做原理

　　•一行數據（row）必須包含在.container中，以便爲其賦予合適的對齊方式和內邊距。

　　•使用行（row）在水平方向建立一組列（column）。

　　•具體內容應當放置於列（column）內，並且只有列（column）能夠做爲行（row）的直接子元素。

　　•使用像.row和.col-xs-4這樣的樣式來快速建立柵格佈局。

　　•經過設置列padding從而建立列（column）之間的間隔。而後經過爲第一列和最後一列設置負值的margin從而抵消掉padding的影響。

　　•柵格系統中的列是經過指定1到12的值來表示其跨越的範圍的。

 

　　Container的做用：

• 提供寬度限制。container隨着頁面寬度變化而變化，因爲column的寬度是基於百分比，因此它們的寬度不用去管。
• 提供左右padding，以致於文本內容不會觸及瀏覽器邊緣。container左右有15px的padding。以下圖：

　　

 

　　Row:

• Row是Column的存放容器，Row中最多隻能放12個左浮動的Column。
• Row有個特殊的地方就是左右-15px的margin。這樣正好抵消父容器container中的15px的padding。（剛開始我以爲這樣不是在瞎折騰嗎？但看到後面才發現這正是它的精妙之處）
  
  Column:
• column有左右15px的padding,因此位於兩邊的column有15px的padding，可使其內容不會碰到container的邊界，而同時不一樣column的內容之間就有了30px的槽，以下圖：
  
  
  嵌套：
• 上面提到它的精妙之處就是爲嵌套而設計的。因爲container和column都有15px的padding，因此在嵌套時column就至關container了，這樣就能夠實現任意的嵌套。
  
  列偏移（Offset）：
• 爲當前元素增長了左邊距（left-margin）。
  
  列排序（Push and Pull）
  

設置元素的定位，而非邊距（margin）。push和pull必須同時使用，不然會重疊。

三、結束語
　　主要參考：一、《深刻理解boostarp》

　　　　　　　二、http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works