| 元件 | Bootstrap說明網站(繁中) | w3schools(英文) | RUNOOB(簡中) |
|---|---|---|---|
| Alerts 警報／信息提示框 | LINK | LINK | LINK |
| Badge 標籤 | LINK | LINK | LINK |
| Breadcrumb 麵包屑 | LINK | ||
| Buttons 按鈕 | LINK | LINK | LINK |
| Button group 按鈕群組 | LINK | LINK | LINK |
| Cards 卡片 | LINK | LINK | LINK |
| Pagination 分頁 | LINK | LINK | LINK |
| Popovers 彈出提示框 | LINK | LINK | LINK |
| Tooltips 工具提示框 | LINK | LINK | LINK |
| Progress 進度條 | LINK | LINK | LINK |
| Spinners 讀取圖示 | LINK | LINK | LINK |
| Toasts 吐司 | LINK | LINK |
| 項目 | 繁中說明 | 摘要說明 |
|---|---|---|
| 有關 display 通用類別 | LINK |
.d-none／
.d-inlne／
.d-inline-block／
.d-block／
.d-flex／... 可以配合「中斷點」sm、md、lg、xl、xxl 例如sm時隱藏md再以block顯示：.d-sm-none .d-md-block |
| 有關 flex 的設計使用 |
LINK |
可以配合「中斷點」sm、md、lg、xl、xxl，例如：
.d-flex／
.d-md-flex 方向性：.flex-row／.flex-row-reverse／.flex-column／.flex-column-reverse 水平對齊：.justify-content-start／end／center／between／around／evenly 垂直物件對齊：.align-items-start／end／center／baseline／stretch 垂直內容對齊：.align-content-start／end／center／between／around／stretch 自身對齊：.align-self-start／end／center／baseline／stretch (設定在子元素) 填滿寬度：.flex-fill (設定在子元素) 配合自動的margins： 右側結尾處.me-auto／ 左側起始處.ms-auto 是否允許換行：.flex-wrap／.flex-nowrap |
| 有關 margin ／ padding | LINK |
有關 margin 的設定以 .m- 開頭 有關 padding 的設定以 .p- 開頭 使用格式 {property}{sides}-{breakpoint}-{size} 命名，例如：.mt-2 .mt-md-4 sides 設定:
|
| 有關 float 浮動 | LINK | 浮動靠左 .float-start／ 浮動靠右 .float-end／ 不浮動 .float-none (可配合中斷點) |
| 有關文字選擇 | LINK |
.user-select-all --- 當使用者點選時，這個段落將會被全選 .user-select-auto --- 這個段落具有預設的選取行為 .user-select-none --- 當使用者點選的時候，此段落將不會被選取 |
| 有關 opacity 透明度 | LINK | 不透明度100% .opacity-100／.opacity-75／.opacity-50／.opacity-25 |
| 有關 overflow 溢出 | LINK | .overflow-auto／.overflow-hidden／.overflow-visible／.overflow-scroll |
| 有關 shadows 陰影 | LINK | .shadow-none／ .shadow-sm／ .shadow／ .shadow-lg |
| 有關 Sizing 尺寸 | LINK |
相對於父元素的百分比 .w-25／.w-50／.w-75／
.w-100／
.w-auto 還可以使用 max-width: 100%; 和 max-height: 100%; 相對於視窗的百分比 .min-vw-100／.min-vh-100／ .vw-100／.vh-100 |
| 有關 position 定位 | LINK |
.position-static／.position-relative／ .position-absolute／.position-fixed／.position-sticky |
| 有關文字水平對齊 | LINK | .text-start／.text-center／.text-end (可配合中斷點) |
| 有關文字斷行 | LINK | .text-break 表示文字在區塊空間中允許文字斷行 |
| 有關文字樣式 | LINK | 粗體 .fw-bold ／ 不加粗 .fw-normal ／ 斜體 .fst-italic ／ 不斜體 .fst-normal |
| 有關文字裝飾線條 | LINK | .text-decoration-underline ／ .text-decoration-line-through ／ .text-decoration-none |
| 有關 inline 物件 的垂直對齊 |
LINK |
.align-baseline ／ .align-text-top ／ .align-text-bottom .align-top ／ .align-middle ／ .align-bottom ／ |
| 有關 Visibility 可視性 | LINK |
.visible 顯示 .invisible 隱藏 --- 完全不會改變 display 的值, 也不影響佈局, 仍會佔用頁面空間 |
WEB