元件 | 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 的值, 也不影響佈局, 仍會佔用頁面空間 |