什麼是bootstrap? row 和column的用法

bootstrap 是人家寫好的CSS套件，放在網路上open source 給人家include.
就是一種CDN (content delivery network)

其好處有

1. 引用別人寫好的，可以比較快來發展你的WEB
2. bootstrap 包含HTML、CSS的範本
3. 包含responsive design 就是讓HTML可以fit 到各種平台像是手機、筆電、平板

bootstrap 的button class 有，直接套用，不用在style 裏面先定義(好用耶:p)

btn :a button calss, will form a button like box

btn-block: a entire horizon button to your page width

預先定義好的顏色

btn-primary: button will highlighting to blue color.

btn-info: button will highlighting to light blue color.

btn-danger: button is highlighting to light red color for warning.


bootstrap Grid system
可以把畫面1 row 分為12 column
並可以回應視窗大小，自動調整column 寬度來符合screen size
依大小可分成四個class

• xs (for phones)
• sm (for tablets)
• md (for desktops)
• lg (for larger desktops)

bootstrap grid system 的規則

1. 必需建在 .container(fix width) 或 .container-fluid(full width) 底下
2. 使用rows來建立水平的column 群組
3. 內容會放進column裏，每一個column可以變成rows的children
4. 可預先定義好.row 或 .col-sm-4 產生grid的輸出
5. grid可以指定用幾個column來組成，如三等分，就可用平均4個column來組成

一般使用grid的手順為

from http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

範例:

先把同一個群組的element, ex:indoor;outdoor 用div分成同一組，並給予row class
接著給予每一個element 對應的column class,例中 col-xs-6 
就是說若在同一個row裏面會把12份分成兩個部分，所以每一個就會佔6個單位，所以是col-xs-6. 
若是分成三個部分就會是col-xs-4了

如此一來，所指定的elements就會在同一row裏面了