# Bootstrap 筆記列表

## 看前須知
- [[Bootstrap 5] 認識 Bootstrap 的文件](https://hackmd.io/@Shen-An/rku-gBFZY)
- [[Bootstrap] Bootstrap 的學前知識](https://hackmd.io/@Shen-An/ryAm94Y8K)
- [Bootstrap 4 變成 Bootstrap 5 的差異 ⭐⭐⭐](https://hackmd.io/@Shen-An/SJgPqYnFF)
- [Bootstrap 增加中文字體 ⭐⭐⭐](https://hackmd.io/@Shen-An/S1TnVhY9F)

## 參考網址
- [Bootstrap 4 繁體中文手冊 [六角學院譯]](https://bootstrap.hexschool.com/)[target=_blank]
- [Bootstrap 5 繁體中文文件 - 六角學院](https://bootstrap5.hexschool.com/)[target=_blank]
- [Bootstrap Layoutit - 排版工具](https://www.layoutit.com/build)[target=_blank]
- [BootstrapCDN - CDN連結](https://www.bootstrapcdn.com/)[target=_blank]

## 內容 (Content)
- [重置 (Reboot)](https://hackmd.io/@Shen-An/SJAr9ZqZt)
- [文字排版 (Typography)](https://hackmd.io/@Shen-An/H1Kn6MqWY)
- [圖片 (Images) 與 圖片區 (Figures)](https://hackmd.io/@Shen-An/S1RNEQ9-t)
- [表格 (Tables)](https://hackmd.io/@Shen-An/SyWR6KcWF)

## Flex 、網格系統 及相關的排版概念
- [網格系統 - 介紹](https://hackmd.io/@Shen-An/HkVmdmjWF)
- [響應式中斷點 (Breakpoints)](https://hackmd.io/@Shen-An/B1l4yuj-F)
- [Container - 格線容器](https://hackmd.io/@Shen-An/Hy8jrWRZK)
- [網格系統 - 練習](https://hackmd.io/@Shen-An/Hydv5PqGY)
- [欄與欄的間距：Gutter](https://hackmd.io/@Shen-An/BkgM7RJDt)
- [行列式 row-cols-{欄數}](https://hackmd.io/@Shen-An/B13fMJxDF)
- [Flex 與 BS 欄位](https://hackmd.io/@Shen-An/HkL6f63Zt)
- [通用類別 - Flex](https://hackmd.io/@Shen-An/SJlog02-t)

## 通用類別 (Utilities)
- [Utilities 與 helpers 基本介紹](https://hackmd.io/@Shen-An/HkuW_OMPF)
- [Background - 背景色彩⭐⭐](https://hackmd.io/@Shen-An/HyQtyjXPY)
- [Borders - 邊框⭐⭐](https://hackmd.io/@Shen-An/B1hB0t2zK)
- [Text color - 文字色彩](https://hackmd.io/@Shen-An/r1lsjq2Gt)
- [Display - 盒模型修改⭐⭐⭐](https://hackmd.io/@Shen-An/HJKggs2zF)
- [Float - 浮動排版](https://hackmd.io/@Shen-An/HJp6yJAMY)
- [Interactions - 互動功能(文字選取、滑鼠事件)⭐](https://hackmd.io/@Shen-An/BJ_xkmBDY)
- [Overflow - 文字內容溢出](https://hackmd.io/@Shen-An/ByRP49SPY)
- [Position - 位置⭐⭐](https://hackmd.io/@Shen-An/SkzxSIAzK)
- [Shadow - 陰影⭐](https://hackmd.io/@Shen-An/ry6n4P8DY)
- [Sizing - 尺寸⭐⭐](https://hackmd.io/@Shen-An/BylP5fDAfY)
- [Text - 文字⭐](https://hackmd.io/@Shen-An/ryNCt4k7t)
- [Vertical alignment - 垂直對齊](https://hackmd.io/@Shen-An/H1qua5ymt)
- [Visibility & d-none - 可視性](https://hackmd.io/@Shen-An/BJ37Qj1Xt)
<!-- - [Media object](https://hackmd.io/@Shen-An/SJjmAnozF) -->
<!-- - [通用類別 Flex](https://hackmd.io/@Shen-An/Hkk7N0pMF) -->
- [~~Image replacement 圖像替換~~ (不推薦使用)](https://hackmd.io/@Shen-An/BkyI31RfY)
<!-- - [Spacing 間隔](https://hackmd.io/@Shen-An/SyGfJXJXY) -->

## 工具 (Helpers)

- [Clearfix - 清除浮動](https://hackmd.io/@Shen-An/rkQl_chfF)
- [Colored links - 連結顏色⭐⭐](https://hackmd.io/@Shen-An/B171XGN_F)
- [Embed & Ratios⭐](https://hackmd.io/@Shen-An/rkZH0bpzF)
- [Screen readers & Visually hidden](https://hackmd.io/@Shen-An/S1zXxvRMF)
- [Stretched link - 連結延伸⭐⭐](https://hackmd.io/@Shen-An/BkKbKCEOF)
- [Text truncation - 文字截斷⭐](https://hackmd.io/@Shen-An/S1B1DySuK)

## 表單運用

- [知識點：網頁親和性 - aria 標籤](https://hackmd.io/@Shen-An/BJvjuUodY)
- [表單運用概觀](https://hackmd.io/@Shen-An/SkAeWFiuY)
- [表單元素常用的 `form-control`](https://hackmd.io/@Shen-An/r1AOdxnuF)
- [表單 Select `.form-select`](https://hackmd.io/@Shen-An/rJoih32Ot)
- [表單的 Radio 與 Checkbox 運用](https://hackmd.io/@Shen-An/r1AF033uK)
- [表單的 Range 樣式](https://hackmd.io/@Shen-An/rkethTnOF)
- [群組式 input](https://hackmd.io/@Shen-An/BkBuaS6OY)
- [表單驗證](https://hackmd.io/@Shen-An/r1ekcwp9mF)
- [新的表單樣式！form-floating⭐⭐](https://hackmd.io/@Shen-An/H1pruq0OY)
- [表單排版技巧⭐](https://hackmd.io/@Shen-An/SJWgC5R_K)
- [~~Forms 表單~~(舊)](https://hackmd.io/@Shen-An/SyRwnuFmt)

## 元件 (Components) - BS4 跟 BS5 混在一起

- [元件結構⭐⭐⭐](https://hackmd.io/@Shen-An/Bk0TW4FIY)
- [元件與 JavaScript 之間的關係⭐⭐](https://hackmd.io/@Shen-An/SJ4MOd1Ft)
- [Accordion - 手風琴](https://hackmd.io/@Shen-An/BJCupOJtY)
- [Alerts - 警報⭐](https://hackmd.io/@Shen-An/Sy_RLCbmY)
- [Badges - 標籤⭐](https://hackmd.io/@Shen-An/r193EJGXY)
- [breadcrumb - 麵包屑⭐](https://hackmd.io/@Shen-An/ByTFxdNmK)
- [Buttons - 按鈕⭐⭐⭐](https://hackmd.io/@Shen-An/SyMmEdV7t)
- [Button group - 按鈕群組⭐⭐](https://hackmd.io/@Shen-An/SJnfDfP7t)
- [Card - 卡片⭐⭐](https://hackmd.io/@Shen-An/ryOGSQwmK)
- [Carousel - 輪播](https://hackmd.io/@Shen-An/B1xlV5vmK)
- [Close button - 關閉按鈕⭐](https://hackmd.io/@Shen-An/HJK6cq3fY)
- [Collapse - 折疊⭐⭐](https://hackmd.io/@Shen-An/BkAF57dQt)
- [Dropdowns - 下拉選單⭐](https://hackmd.io/@Shen-An/B1BFSYu7t)
- [List group - 列表群組⭐](https://hackmd.io/@Shen-An/HkH_XzoQY)
- [Modal - 互動視窗⭐⭐](https://hackmd.io/@Shen-An/BJAp2fsQY)
- [Navs and tabs - 導覽與頁籤](https://hackmd.io/@Shen-An/HyqI-Fo7K)
- [Navbar - 導覽列⭐⭐](https://hackmd.io/@Shen-An/rkMKOYo7t)
- [Offcanvas - 側欄滑動導覽⭐](https://hackmd.io/@Shen-An/r1u6G3XcF)
- [Pagination - 分頁⭐](https://hackmd.io/@Shen-An/rkM7EspmK)
- [Popovers - 彈出提示框](https://hackmd.io/@Shen-An/H1Eh5jTmK)
- [Progress - 進度條⭐](https://hackmd.io/@Shen-An/Hyz9_npXY)
- [Scrollspy - 滾動監控](https://hackmd.io/@Shen-An/HkQCE26XY)
- [Spinners - 讀取圖示⭐⭐](https://hackmd.io/@Shen-An/rkXv1l89Y)
- [Toasts - 吐司⭐⭐](https://hackmd.io/@Shen-An/Sygl4LI9K)
- [Tooltips - 工具提示框 ⭐](https://hackmd.io/@Shen-An/BJOMwXw5K)

## BS4 元件

- [Input group / Input 群組⭐](https://hackmd.io/@Shen-An/rkl2U-jQt)
- [Jumbotron 廣告大屏幕](https://hackmd.io/@Shen-An/ry17-GsXt)

## JavaScript 操作

- [JavaScript 使用總結](https://hackmd.io/@Shen-An/r1QpvAtBt)
- [JavaScript 啟用方法](https://hackmd.io/@Shen-An/B1A4LEDct)
- [建立實體方法](https://hackmd.io/@Shen-An/SkeMIdiDcF)
- [選項、方法與事件](https://hackmd.io/@Shen-An/ByUPvu_9K)
- [jQuery 用法](https://hackmd.io/@Shen-An/rkbkHFdcF)

## Bootstrap 與神奇的 Sass

<!-- BS5 -->
- [Bootstrap 與 Sass 的關係](https://hackmd.io/@Shen-An/Sy3ehB55t)
- [在 VSCode 中加入 Sass 環境](https://hackmd.io/@Shen-An/H1MfBMiqF)
- [匯入 Bootstrap 並調整樣式](https://hackmd.io/@Shen-An/rk5eD7jqt)
- [手動匯入部分元件](https://hackmd.io/@Shen-An/BkQgh6ncF)
- [修改特定的元件的變數](https://hackmd.io/@Shen-An/HJs0NqaqF)
- [RFS 響應式文字縮放功能](https://hackmd.io/@Shen-An/SJmnJapcF)
- [自定義通用類別](https://hackmd.io/@Shen-An/SymexR6qK)
- [使用 Bootstrap 方法，產生獨立元件](https://hackmd.io/@Shen-An/HyuqYgJsY)
- [在 Sass 中，自訂高可用性的元件](https://hackmd.io/@Shen-An/H1_ASGkjt)
<!-- BS4 -->
- [[BS4] 如何自定義 Bootstrap 樣式](https://hackmd.io/@Shen-An/r1Eg19NSt)
- [[BS4] 客製化載入用檔案區別](https://hackmd.io/@Shen-An/ByctkBLFY)
- [[BS4] 版型設計 - 從相關的資源臨摹](https://hackmd.io/@Shen-An/Sk1NjrvSY)
- [[BS4] 使用 Sass 開發屬於自己的元件](https://hackmd.io/@Shen-An/HyHVRIKBt)

## Bootstrap 5 單日直播 2021

- [01 新手常見切版問題](https://hackmd.io/@Shen-An/rJBuakGqF)

## 範例

- [[Bootstrap 4] Blog 版型製作](https://hackmd.io/@Shen-An/SJRj3jZNY)
- [[Bootstrap 4] 形象首頁 版型製作](https://hackmd.io/@Shen-An/r15waj-4t)
- [[Bootstrap 4] 後台(Dashboard) 版型製作](https://hackmd.io/@Shen-An/B1H6vgP4K)
- [[Bootstrap 4] 購物網站介面製作](https://hackmd.io/@Shen-An/BytlfehEK)