[Bootstrap] 學習筆記

Bootstrap是目前響應式及行動裝置網頁設計，最知名的前端框架，提供了包含HTML、CSS 及 JS 等內容的框架。

Bootstrap 是一個響應式 CSS框架，扁平化UI風格，很適合沒有UI設計師的web項目，但不支持IE8及以下瀏覽器。

Bootstrap 的優點

• 行動優先（Mobile First）
• 瀏覽器支持
• 容易上手
• 響應式設計

以下幾點，是應用Bootstrap的優點

• 避免重工，可以應用一些現成的功能
• 較複雜的響應式設計則很快就可以應用
• 在不同專案中、或是同專案不同開發者
  可以在開發過程中取得應用及解讀程式碼的一致性
• Bootstrap也提供了一些速成樣板
• 確保跨瀏覽器的閱讀相容性

參考：入門觀念講解非常清楚的 Bootstrap 初學介紹 #靜態篇 -By 張凱喬
（非常推薦閱讀）

加入 Bootstrap

通過將以下代碼添加到HTML頂部來將Bootstrap添加到任何應用程序：

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity=”sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u” crossorigin=”anonymous”/>

Bootstrap 網格系統（Grid System）

格線，是bootstrap很重要的工具
也就是建立響應式網頁的不二法寶

Bootstrap 提供了一套響應式、行動優先的流式網格系統，隨著螢幕或視埠（viewport）尺寸的增加，系統會自動分為最多12列。

行必須放置在.container class內，以便獲得適當的對齊（alignment）和內邊距（padding）。

第一個概念是12欄位的設定
bootstrap把一個網頁分為十二欄
如果你想佔版面分兩欄，就是兩格六欄(2*6/12)
如果你想把版面分三欄，就是建三格四欄(3*4/12)

再來，第二個概念就是斷點(breakpoint)
bootstrap已經幫你先把裝置尺寸分為四類
分別是XS、SM、MD、LG
對應的前綴詞如下表所示

假設你需要在MD尺寸下建一行三格
就是三個 .col-md-4

小記

Bootstrap 是一個很方便的 CSS 框架，因為他的方法簡單明確，學習的過程中也加深了對 CSS 的理解，可以想見如果以 Bootstrap 開發會非常快速，而且也可以在既有的框架上做出自定義的更動。

Bootstrap 的 class 也很好理解，比如 active 就適用於很多 class 中，基本上也有著非常語易化的名稱，多使用會上手更快，就算忘記了也很快可以查詢到。