1. Bootstrap 簡介
FE201_四處可見的 UI library:Bootstrap_Bootstrap 簡介
Bootstrap 就是幫你寫好的 CSS + JS
引進 bootstrap,去官網把 link 貼在 head 標籤裡面
aria- 是給無障礙網頁設計用的 (Accessibility)
如果要引入 dropdown menu 要引入 js,通常放在 body 標籤裡面最下面
funtional CSS 也太酷了吧!
邪魔歪道還是苦口良藥?Functional CSS 經驗分享
遇到的困難:
- 怎樣都無法用 jQuery,是半天發現原因是引入錯連結了,照著做也會錯,自己挖的坑好大,但也是笑笑就過了
2. Bootstrap 的網格系統
FE201_四處可見的 UI library:Bootstrap_Bootstrap 的網格系統
col-數字:這是最小的尺寸
- col-sm- / col-md- / col-lg- / col-xl-
- 還有 offset 的用法:偏移幾格,然後佔幾格:
- .col-md-3 .offset-md-3
3. 初探 Bootstrap 元件
FE201_四處可見的 UI library:Bootstrap_初探 Bootstrap 元件
- 官方網站裡面資料很豐富,可以看一下裡面的 component 跟其他東西,有個印象
4. 實作 todo list with Bootstrap
FE201_四處可見的 UI library:Bootstrap_Bootstrap 實戰
- 用 bootstrap 刻一個留言板
5. 總結 Bootstrap
FE201_四處可見的 UI library:Bootstrap_總結 Bootstrap
推薦 Bootstrap 模板網站 Bootswatch