Bootstrap 速查表
可搜尋、可列印的 Bootstrap 5.3 參考手冊——格線、間距、排版、色彩、彈性版面工具、按鈕、表單以及元件。免費。
格線與版面
12<div class="container">
固定寬度的響應式容器
<div class="container-fluid">
在所有斷點皆全寬的容器
<div class="container-md">
在 md 斷點前皆 100% 寬
<div class="row">
格線列，容納欄
<div class="col">
等寬自動欄
<div class="col-6">
佔 12 欄中的 6 欄
<div class="col-md-4">
自 md 斷點起佔 4 欄
<div class="col-auto">
依內容決定寬度的欄
<div class="offset-md-2">
將欄向右推 2 欄
<div class="row g-3">
欄間的溝槽間距
<div class="row row-cols-3">
強制每列 3 等欄
<div class="order-2">
重新排序 flex/grid 欄
間距工具類別
12m-3
四周外距 (尺度 0-5)
mt-2
上外距
mx-auto
自動水平外距以置中
p-4
四周內距
py-2
垂直內距 (上下)
ms-3
起始外距 (LTR 為左，支援 RTL)
me-3
結束外距 (LTR 為右，支援 RTL)
ps-2
起始內距，支援 RTL
pe-2
結束內距，支援 RTL
gap-3
flex/grid 項目間的間隙
m-n1
負外距
p-md-5
自 md 起的響應式內距
字體排印
14<h1>..<h6>
帶預設樣式的標題層級
<p class="display-1">
大型展示標題 (display-1..6)
<p class="lead">
突出的引言段落
fw-bold
粗體字重
fw-semibold
半粗字重
fst-italic
斜體字型樣式
text-center
文字置中對齊
text-start
文字靠起始對齊，支援 RTL
text-end
文字靠結束對齊，支援 RTL
text-truncate
以省略號截斷溢位
text-uppercase
將文字轉為大寫
fs-1
響應式字型大小 (fs-1..6)
lh-base
基本行高 (lh-1, lh-sm, lh-lg)
font-monospace
等寬字型家族
顏色與背景
10text-primary
主要文字顏色
bg-primary
主要背景顏色
bg-primary-subtle
淡化的主要背景色調
text-primary-emphasis
強調的主要文字，隨主題調整
text-bg-primary
主要背景搭配自動對比文字
link-primary
彩色連結輔助類別
bg-opacity-50
套用 50% 背景不透明度
text-body-secondary
柔和的次要內文文字
text-body-emphasis
高強調的內文文字
border-primary-subtle
淡化的主要邊框顏色
Flex 工具類別
10d-flex
建立 flex 容器
flex-row
將項目排成一列
flex-column
將項目排成一欄
justify-content-between
沿主軸分配項目間距
align-items-center
在交叉軸上置中項目
flex-wrap
允許項目換行
flex-grow-1
讓項目擴展以填滿空間
flex-fill
強制等比例彈性寬度
align-self-end
將單一項目對齊至結束端
flex-md-row
自 md 起的響應式 flex 方向
顯示與定位
12d-none
隱藏元素
d-md-block
自 md 斷點起以 block 顯示
position-relative
相對定位
position-absolute
絕對定位
position-fixed
固定定位
position-sticky
黏性定位
top-0 start-0
釘在左上，支援 RTL
translate-middle
透過 transform translate 置中
fixed-top
將元素固定在視口頂部
sticky-top
捲動時黏在頂部
z-3
設定 z-index (z-0..3)
invisible
隱藏但保留版面空間
尺寸與邊框
12w-100
寬度為父層的 100%
w-50
寬度為父層的 50%
h-100
高度為父層的 100%
mw-100
最大寬度 100%
vh-100
高度為視口的 100%
border
四周加上預設邊框
border-0
移除所有邊框
border-primary
為邊框上色
rounded
預設圓角
rounded-pill
完全圓角的藥丸形
rounded-circle
圓形圓角
shadow-sm
小型陰影 (shadow, shadow-lg)
按鈕
9<button class="btn btn-primary">
實心主要按鈕
<button class="btn btn-outline-primary">
外框按鈕變體
<button class="btn btn-lg">
大型按鈕 (另有 btn-sm)
<button class="btn btn-link">
外觀如連結的按鈕
<button class="btn-close">
通用關閉 (×) 按鈕
<button class="btn disabled">
停用按鈕狀態
<button class="btn active">
啟用按鈕狀態
<div class="d-grid"><button class="btn">
透過 d-grid 的全寬區塊按鈕
<div class="btn-group">
將按鈕分組
表單
11<input class="form-control">
帶樣式的文字輸入
<label class="form-label">
表單欄位標籤
<select class="form-select">
帶樣式的下拉選單
<div class="form-check">
核取方塊/選項按鈕外框
<input class="form-check-input">
帶樣式的核取方塊或選項按鈕
<div class="form-check form-switch">
切換開關元件
<input class="form-control-lg">
大型輸入 (另有 form-control-sm)
<div class="input-group">
將輸入與附加元件分組
is-invalid
無效的驗證狀態 (is-valid)
<div class="form-floating">
浮動標籤輸入
col-form-label
為水平表單對齊的標籤
元件
14<div class="card">
彈性內容卡片
<nav class="navbar navbar-expand-lg">
響應式導覽列
data-bs-toggle="modal" data-bs-target="#m"
觸發強制回應對話框
data-bs-toggle="dropdown"
切換下拉選單
data-bs-toggle="collapse"
切換可收合元素
<div class="accordion">
堆疊的可收合面板
<div class="alert alert-dismissible">
可關閉的警示訊息
<span class="badge text-bg-primary">
小型計數或標籤徽章
<ul class="list-group">
帶樣式的項目清單
<ul class="nav nav-tabs">
分頁式導覽
<div class="toast">
輕量的 toast 通知
<div class="offcanvas">
畫布外側邊欄面板
<div class="spinner-border">
載入中旋轉指示器
<nav><ul class="pagination">
分頁導覽連結
輔助與其他
11data-bs-theme="dark"
在某範圍啟用深色模式
<div class="ratio ratio-16x9">
響應式長寬比方塊
visually-hidden
視覺隱藏，保留給螢幕報讀器
visually-hidden-focusable
聚焦前隱藏 (跳過連結)
stretched-link
讓父層完全可點擊
clearfix
清除浮動子元素
<div class="vstack gap-2">
元素的垂直堆疊
<div class="hstack gap-2">
元素的水平堆疊
<a class="icon-link">
與內嵌圖示對齊的連結
<div class="progress">
進度列容器
<nav class="breadcrumb">
麵包屑導覽路徑
沒有條目符合「:q」。
需要協助？
使用此工具時遇到問題？請告訴我們的團隊。