|
.row |
行 |
排版>排版 |
|
| + |
.col-* |
欄 |
排版>排版 |
數字 1-12 |
|
sm / md/ lg/ xl/ xxl |
斷點 |
排版>排版 |
|
| + |
.container |
容器 |
排版>排版 |
|
| + |
.align-items-* |
垂直對齊 |
排版>欄 |
start/ center/ end |
| + |
.align-self-* |
彈性項目自行對齊 |
排版>欄 |
start/ center/ end |
| + |
.justify-content-* |
水平對齊 |
排版>欄 |
start/ center/ end/ between/ evenly/ around |
| + |
.d-block |
display:block |
–––– |
|
| + |
.d-none |
display:none |
–––– |
|
| + |
.d-flex |
display:flex |
–––– |
|
| + |
.d-inline-block |
|
|
|
| + |
.d-inline |
|
|
|
| + |
.d-grid |
|
排版>CSS Grid |
|
| + |
.d-table |
|
|
|
| + |
.d-inline-flex |
|
|
|
| + |
.d-table-cell |
|
|
|
| + |
.d-table-row |
|
|
|
| + |
.order-* |
排序 |
排版>排序 |
數值/ frist |
| + |
.offset-* |
欄的推移 |
排版 |
數值 |
|
.blockquote |
引用來源 |
排版>文字排版 |
用於<blockquote>標籤 |
|
.gy-* |
欄之間的 padding |
排版>Gutters |
數值 |
|
.gx-* |
欄之間的 padding |
排版>Gutters |
數值 |
|
.g-* |
欄之間的 padding |
排版>Gutters |
數值 |
|
.address |
地址 |
內容 |
|
|
.sub |
上標 |
內容 |
|
|
.sup |
下標 |
內容 |
|
|
.display-* |
文字標題 |
內容 |
1-6 |
|
.lead |
前導主題 |
內容>文本元素 |
|
|
.mark |
|
內容>文本元素 |
|
|
.small |
|
內容>文本元素 |
|
|
.text-decoration-underline |
|
內容>文本元素 |
|
|
.text-decoration-line-through |
|
內容>文本元素 |
|
|
<abbr> |
縮寫 |
內容 |
|
|
.img-fluid |
圖片等比滿版 |
內容>圖片 |
|
|
.img-thumbnail |
圖片圓角 |
內容>圖片 |
|
|
|
圖片對齊 |
內容>圖片 |
|
|
<thead> |
表格t-head |
內容>表格 |
|
|
<tbody> |
表格t-body |
內容>表格 |
|
|
<tfoot> |
表格t-foot |
內容>表格 |
|
|
.table-* |
表格(變數)顏色 |
內容>表格 |
primary/ info/ secondary/ success/ danger/ warning/ light/ dark |
|
.table-striped |
表格條紋樣式 |
內容>表格 |
|
|
.table-hover |
表格滑入的狀態 |
內容>表格 |
|
|
.table-bordered |
表格四邊加上邊框 |
內容>表格 |
|
|
.table-borderless |
無框表格 |
內容>表格 |
|
|
.border-* |
邊框顏色 |
內容>表格 |
primary/ info/ secondary/ success/ danger/ warning/ light/ dark |
|
.d-inline-flex |
|
通用類別-Flex |
|
|
.flex-row-* |
flex水平 |
通用類別-Flex |
reverse |
|
.flex-column-* |
flex垂直 |
通用類別-Flex |
reverse |
| + |
.flex-fill |
填滿/ flex: 1 1 auto = flex: auto，內容太多可以撐開欄位寬度 |
通用類別-Flex |
|
| + |
.flex-grow-1 |
伸縮值/內容不會撐開欄位寬度 |
通用類別-Flex |
|
|
.me-auto |
margin-right |
通用類別-Flex |
|
|
.ms-auto |
margin-left |
通用類別-Flex |
|
| + |
.flex-wrap |
進行換行 |
通用類別-Flex |
reverse |
| + |
.bg-* |
背景顏色 |
通用類別 |
primary/ info/ secondary/ success/ danger/ warning/ light/ dark/ body/ white/ transparent |
|
.bg-gradient |
背景漸層 |
通用類別 |
|
|
.bg-opacity-* |
背景透明度 |
通用類別 |
數值 |
|
.border-* |
增加邊框 |
通用類別 |
top/bottom/end/start |
|
.border-*-0 |
減少邊框 |
通用類別 |
top/bottom/end/start |
|
.border-* |
邊框粗細 |
通用類別 |
數值 |
|
.rounded-* |
Border-radius |
通用類別 |
top/bottom/end/start/circle/pill |
| + |
.text-* |
文字顏色 |
通用類別 |
primary/ info/ secondary/ success/ danger/ warning/ light/ dark/ body/ white/ transparent |
|
.d-print-non |
螢幕出現(列印隱藏) |
通用類別 |
|
|
.d-print-block |
列印出現(螢幕隱藏) |
通用類別 |
|
| + |
.float-* |
浮動 |
通用類別 |
none/end/start |
|
.user-select-all |
使用者點選時，這個段落將會被全選 |
通用類別 |
|
|
.user-select-auto |
這個段落具有預設的選取行為 |
通用類別 |
|
|
.user-select-none |
點選的時候，此段落將不會被選取 |
通用類別 |
|
|
.pe-none |
連結不可被點 |
通用類別 |
|
|
.pe-auto |
預設 |
通用類別 |
|
|
.particle |
|
通用類別 |
|
|
.opacity-* |
透明度 |
通用類別 |
0-100 |
|
.position-* |
Position |
通用類別 |
static/ relative/ absolute/ fixed/ sticky |
|
.{property}-{position} |
排列位置 |
通用類別 |
|
|
.translate-middle |
translateX(-50%) 與 translateY(-50%) |
通用類別 |
|
| + |
.w-* |
寬度width |
通用類別 |
auto/ 0-100% |
|
.h-* |
高度 height |
通用類別 |
auto/ 0-100% |
|
.p-* |
padding |
通用類別 |
auto/ 0-5 |
|
.m-* |
margin |
通用類別 |
auto/ 0-5 |
|
.ps-* |
padding-left |
通用類別 |
auto/ 0-100% |
|
.ms-* |
margin-left |
通用類別 |
auto/ 0-100% |
|
.mt-* |
margin-top |
通用類別 |
auto/ 0-100% |
|
.pt-* |
padding-top |
通用類別 |
auto/ 0-100% |
|
.mb-* |
bottom |
通用類別 |
auto/ 0-100% |
|
.pb-* |
bottom |
通用類別 |
auto/ 0-100% |
|
.me-* |
right |
通用類別 |
auto/ 0-100% |
|
.pe-* |
right |
通用類別 |
auto/ 0-100% |
|
.mx-* |
-left |
通用類別 |
auto/ 0-100% |
|
.px-* |
-left |
通用類別 |
auto/ 0-100% |
|
.my-* |
-right |
通用類別 |
auto/ 0-100% |
|
.py-* |
-right |
通用類別 |
auto/ 0-100% |
| + |
.text-* |
文字對齊 |
通用類別 |
start/ end/ center |
|
.text-nowrap |
不換行 |
通用類別 |
|
|
.text-lowercase |
小寫 |
通用類別 |
|
|
.text-uppercasr |
大寫 |
通用類別 |
|
|
.text-capitalize |
第一個字大寫 |
通用類別 |
|
|
.fs-* |
文字大小fontSize |
通用類別 |
1-6 |
|
.link-綴詞 |
連結顏色 |
工具 |
|
|
.ratio |
比例 |
工具 |
比例請詳見筆記/文件 |
|
.fixed-top |
固定上方 |
工具 |
|
|
.fixed-bottom |
固定下方 |
工具 |
|
|
.sticky-top |
|
工具 |
|
|
.vstack |
垂直堆疊 |
工具 |
|
|
.hstack |
水平堆疊 |
工具 |
|
|
.gap-* |
間隔 |
通用類別 |
詳見文件 |
|
.vr |
產生分隔線 |
工具 |
|
|
.stretched-link |
連結延伸 |
工具 |
|
|
.text-truncate |
文字截斷 |
工具 |
|
|
.accordion-flush |
移除預設 background-color、外框和圓角使該手風琴能和父容器緊鄰 |
元件>手風琴 |
|
|
form-control |
重製外觀 appcearance :none ，會是寬度 100% block 並調整內距、文字、顏色… |
表單>表單控制 |
|
|
.form-control-* |
表單尺寸>表單控制 |
表單 |
sm/ lg |
|
布林屬性 disabled |
禁用>表單控制 |
表單 |
|
|
布林屬性 readonly |
僅能閱讀 |
表單>表單控制 |
|
|
.form-control-plaintext |
僅能閱讀的文本 |
表單>表單控制 |
|
|
.form-select |
下拉選擇功能表 |
表單>選擇功能表 |
|
|
布林屬性 multiple |
展開 |
表單>選擇功能表 |
|
|
.form-check |
checkbox |
表單>核取方塊和選項按鈕 |
|
|
.form-switch |
切換開關 |
表單>核取方塊和選項按鈕 |
|
|
.form-check |
|
表單>核取方塊和選項按鈕 |
|
|
.form-check-inline |
|
表單>核取方塊和選項按鈕 |
|
|
.btn-check |
切換按鈕 |
表單>核取方塊和選項按鈕 |
|
|
.form-range |
|
表單>範圍 |
|
|
.input-group |
|
表單>Input 群組 |
|
|
.form-floating |
|
表單>浮動標籤 |
|
|
.needs-validation |
|
表單>驗證 |
|
|
.alert-綴詞 |
警報 |
元件>警報 |
|
|
.badge |
標籤 |
元件>標籤 |
|
|
.breadcrumb |
麵包屑 |
元件 |
|
|
.btn |
預先定義的按鈕樣式 |
元件>按鈕 |
也可以在 <a> 或 <input> 元素上使用這些 Class（儘管有些瀏覽器可能會使用稍微不同的渲染） |
|
.btn-綴詞 |
|
元件>按鈕 |
|
|
.btn-outline-綴詞 |
Out line 按鈕樣式 |
元件>按鈕 |
|
|
.btn-* |
按鈕尺寸 |
元件>按鈕 |
sm/ lg |
|
.disabled |
視覺上看起來被禁用 |
元件>按鈕 |
|
|
.active |
預設顯示 |
|
|
|
data-bs-toggle="button" |
切換按鈕 |
元件>按鈕 |
|
|
.btn-group |
按鈕群組 |
元件>按鈕群組 |
|
|
.btn-outline-綴詞 |
outline樣式 |
元件>按鈕群組 |
|
|
.btn-group-* |
尺吋 |
元件>按鈕 |
sm/ lg |
|
.list-group |
列表群組 |
元件>列表群組 |
|
|
.list-group-item |
群組內的 item |
元件>列表群組 |
可加 .active |
|
.list-group-item-action |
hover |
元件>列表群組 |
|
|
.list-group-flush |
移除部分邊框及圓角，以在父容器中 (如：卡片) 產生邊緣貼齊的列表群組 |
元件>列表群組 |
|
|
.list-group-numbered |
編號 |
元件>列表群組 |
|
| + |
.list-group-horizo ntal |
將列表群組在所有斷點的排版從垂直更改為水平 |
元件>列表群組 |
|
|
list-group-item-綴詞 |
元件>列表群組 |
|
|
|
.card |
卡片 |
元件>卡片 |
|
|
.card-header |
卡片結構 |
元件>卡片 |
|
|
.card-body |
卡片結構 |
元件>卡片 |
|
|
.card-footer |
卡片結構 |
元件>卡片 |
|
|
.card-title |
卡片主標title |
元件>卡片 |
|
|
.card-link |
卡片連結link樣式 |
元件>卡片 |
|
|
.card-subtitle |
卡片次標subtitle |
元件>卡片 |
|
|
.card-img-top |
把圖片放在卡片的頂部 |
元件>卡片 |
|
|
.card-img-bottom |
把圖片放在卡片的底部 |
元件>卡片 |
|
|
.card-text |
文字內容可以添加到卡片 |
元件>卡片 |
|
|
.text-reset |
重置一個文字或連結色彩 |
通用類別>文字 |
|
|
.card-img-overlay |
將圖片轉換為卡片背景，並疊加卡片的文字 |
元件>卡片 |
|
|
.card-group |
卡片群組 |
元件>卡片 |
|
|
.carousel |
輪播圖 |
元件>輪播 |
|
|
.carousel-indicators |
下方指示器 |
元件>輪播 |
顯示輪播的圖片數量、並可以點選跳至該圖播放。 |
|
.carousel-inner |
放圖片的容器 |
元件>輪播 |
|
|
.carousel-item |
放圖片的容器 |
元件>輪播 |
|
|
.carousel-control-prev |
上一張按鈕 |
元件>輪播 |
data-bs-target #id 須跟輪播圖一致 |
|
.carousel-control-next |
下一張按鈕 |
元件>輪播 |
data-bs-target #id 須跟輪播圖一致 |
|
.carousel-caption |
字幕(字在圖上方) |
元件>輪播 |
|
|
data-bs-interval="毫秒" |
設定輪播秒數，放在.carousel |
元件>輪播 |
|
|
data-bs-touch="*" |
手機裝置觸控設定 |
元件>輪播 |
true/false |
|
.carousel-fade |
淡入淡出 |
元件>輪播 |
|
|
.slide |
滑動效果 |
元件>輪播 |
|
|
.carousel-dark |
深色模式，文字會變黑 |
元件>輪播 |
|
|
.carousel-fade |
淡入淡出 |
元件>輪播 |
|
|
.btn-close |
關閉(X)的按鈕樣式 |
元件>關閉按鈕 |
|
|
.btn-close-white |
關閉(X)的按鈕樣式(白色) |
元件>關閉按鈕 |
|
|
.collapse |
隱藏內容。 |
元件>摺疊 |
|
|
.collapsing |
會在轉換的過程中被套用。 |
元件>摺疊 |
|
|
.collapse.show |
顯示內容。 |
元件>摺疊 |
|
|
data-bs-toggle="collapse" |
觸發摺疊功能 |
元件>摺疊 |
|
|
.collapse-horizontal |
水平折疊 |
元件>摺疊 |
|
|
.modal |
互動視窗 |
元件>互動視窗 |
|
|
.modal-content |
內容 |
元件>互動視窗 |
|
|
.modal-header |
|
元件>互動視窗 |
|
|
.modal-title |
標題 |
元件>互動視窗 |
|
|
.modal-body |
內文 |
元件>互動視窗 |
|
|
.modal-footer |
按鈕 |
元件>互動視窗 |
|
|
data-bs-toggle="modal" |
互動視窗功能 |
元件>互動視窗 |
|
|
data-bs-backdrop="static" |
靜態背景 |
元件>互動視窗 |
|
|
.modal-dialog-scrollable |
滾輪 |
元件>互動視窗 |
|
|
.modal-dialog-centered |
水平垂直置中 |
元件>互動視窗 |
|
|
.modal-* |
尺寸1140px/預設500px/800px/300px |
元件>互動視窗 |
xl/lg/sm |
|
data-bs-dismiss="modal" |
關閉 modal 視窗 |
元件>互動視窗 |
|
|
.modal-dialog |
視窗下滑的效果 |
元件>互動視窗 |
|
|
.fade |
淡入淡出 |
元件>互動視窗 |
|
|
.nav |
導覽 |
元件>導覽與頁籤 |
應用在menu |
|
.nav-item |
|
元件>導覽與頁籤 |
|
|
.nav-link |
|
元件>導覽與頁籤 |
|
|
.nav-tabs |
分頁標籤 |
元件>導覽與頁籤 |
|
|
.nav-pills |
膠囊狀樣式 |
元件>導覽與頁籤 |
|
|
.nav-fill |
填充 |
元件>導覽與頁籤 |
|
|
.nav-justified |
對齊 |
元件>導覽與頁籤 |
|
|
.tab-content |
標籤內文父元素 |
元件>導覽與頁籤 |
|
|
.tab-pane |
標籤內文子元素 |
元件>導覽與頁籤 |
|
|
.navbar |
導覽列 |
元件>導覽列 |
|
|
.navbar-brand |
導覽列LOGO位置 |
元件>導覽列 |
|
|
.navbar-expand |
響應式 |
元件>導覽列 |
|
|
.navbar-dark |
導覽列文字顯示"白色 |
元件>導覽列 |
|
|
.navbar-light |
導覽列文字顯示"黑色 |
元件>導覽列 |
|
|
.navbar-toggler |
導覽響應式摺疊icon(漢堡按鈕) |
元件>導覽列 |
|
|
.navbar-nav |
導覽列的頁籤 |
元件>導覽列 |
|
|
.navbar-collapse |
|
元件>導覽列 |
|
|
.dropdown |
下拉選單 |
元件>下拉選單 |
|
|
data-bs-toggle="dropdown" |
|
|
|
|
.dropdown-menu |
下拉清單 |
元件>下拉選單 |
|
| + |
.dropdown-menu-end |
選單靠右 |
元件>下拉選單 |
|
| + |
.dropdown-menu-start |
選單靠左 |
元件>下拉選單 |
|
|
.dropdown-header |
分類標題 |
元件>下拉選單 |
|
|
.dropdown-item |
下拉清單item |
元件>下拉選單 |
|
|
.dropdown-divider |
清單中分隔線 |
元件>下拉選單 |
|
|
.dropdown-toggle |
white-space: nowrap; |
元件>下拉選單 |
|
|
.dropdown-toggle-split |
分割按鈕 |
元件>下拉選單 |
|
|
.dropdown-menu-dark |
深色樣式 |
元件>下拉選單 |
|
|
.dropup |
選單方向-向上 |
元件>下拉選單 |
|
|
.dropend |
向右 |
元件>下拉選單 |
|
|
.dropstart |
向左 |
元件>下拉選單 |
|
|
data-bs-auto-close="fales" |
限制點按鈕才可以關閉選單 |
元件>下拉選單 |
|
|
.pagination |
分頁 |
元件>分頁 |
|
|
.page-item |
分頁item |
元件>分頁 |
|
|
.page-link |
分頁link |
元件>分頁 |
|
|
.progress |
外層使用 .progress 來指定進度條的最大值 |
元件>進度條 |
|
|
.progress-bar |
內層使用 .progress-bar 來指定進度條目前的值 |
元件>進度條 |
|
|
.progress-bar-striped |
進度條-條紋樣式 |
元件>進度條 |
|
|
.progress-bar-animated |
進度條-動態樣式 |
元件>進度條 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
HackMD
