[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 中,基本上也有著非常語易化的名稱,多使用會上手更快,就算忘記了也很快可以查詢到。