W12_Bootstrap 筆記


Posted by Christy on 2021-08-30

1. Bootstrap 簡介

FE201_四處可見的 UI library:Bootstrap_Bootstrap 簡介

  1. Bootstrap 就是幫你寫好的 CSS + JS

  2. 引進 bootstrap,去官網把 link 貼在 head 標籤裡面

  3. aria- 是給無障礙網頁設計用的 (Accessibility)

  4. 如果要引入 dropdown menu 要引入 js,通常放在 body 標籤裡面最下面

  5. funtional CSS 也太酷了吧!

CSS 檢測網站

邪魔歪道還是苦口良藥?Functional CSS 經驗分享

遇到的困難:

  • 怎樣都無法用 jQuery,是半天發現原因是引入錯連結了,照著做也會錯,自己挖的坑好大,但也是笑笑就過了

2. Bootstrap 的網格系統

FE201_四處可見的 UI library:Bootstrap_Bootstrap 的網格系統

  1. 參考資料

  2. col-數字:這是最小的尺寸

  • col-sm- / col-md- / col-lg- / col-xl-
  1. 還有 offset 的用法:偏移幾格,然後佔幾格:
  • .col-md-3 .offset-md-3

3. 初探 Bootstrap 元件

FE201_四處可見的 UI library:Bootstrap_初探 Bootstrap 元件

  1. 官方網站裡面資料很豐富,可以看一下裡面的 component 跟其他東西,有個印象

4. 實作 todo list with Bootstrap

FE201_四處可見的 UI library:Bootstrap_Bootstrap 實戰

  1. 用 bootstrap 刻一個留言板

5. 總結 Bootstrap

FE201_四處可見的 UI library:Bootstrap_總結 Bootstrap

推薦 Bootstrap 模板網站 Bootswatch










Related Posts

利用後端框架 express 實作抽獎網站的 API

利用後端框架 express 實作抽獎網站的 API

利用 Elm 製作 Chrome Extension

利用 Elm 製作 Chrome Extension

Day 5 - Flex Panels Image Gallery

Day 5 - Flex Panels Image Gallery


Comments