Helaian Rujukan Bootstrap
Rujukan Bootstrap 5.3 yang boleh dicari dan dicetak — grid, spacing, tipografi, warna, utiliti flex, butang, borang, dan komponen. Percuma.
Grid & susun atur
12<div class="container">
Kontena responsif lebar tetap
<div class="container-fluid">
Kontena lebar penuh pada setiap breakpoint
<div class="container-md">
100% lebar sehingga breakpoint md
<div class="row">
Baris grid, menyimpan lajur
<div class="col">
Lajur auto lebar sama
<div class="col-6">
Merentang 6 daripada 12 lajur
<div class="col-md-4">
4 lajur dari breakpoint md ke atas
<div class="col-auto">
Lajur bersaiz ikut kandungannya
<div class="offset-md-2">
Tolak lajur 2 lajur ke kanan
<div class="row g-3">
Jarak gutter antara lajur
<div class="row row-cols-3">
Paksa 3 lajur sama setiap baris
<div class="order-2">
Susun semula lajur flex/grid
Utiliti jarak
12m-3
Margin pada semua sisi (skala 0-5)
mt-2
Margin atas
mx-auto
Margin mendatar auto untuk tengahkan
p-4
Padding pada semua sisi
py-2
Padding menegak (atas dan bawah)
ms-3
Margin permulaan (kiri dalam LTR, sedar RTL)
me-3
Margin penghujung (kanan dalam LTR, sedar RTL)
ps-2
Padding permulaan, sedar RTL
pe-2
Padding penghujung, sedar RTL
gap-3
Gap antara item flex/grid
m-n1
Margin negatif
p-md-5
Padding responsif dari md ke atas
Tipografi
14<h1>..<h6>
Aras tajuk dengan gaya lalai
<p class="display-1">
Tajuk paparan besar (display-1..6)
<p class="lead">
Perenggan utama menonjol
fw-bold
Berat fon tebal
fw-semibold
Berat fon separa tebal
fst-italic
Gaya fon condong
text-center
Jajar teks ke tengah
text-start
Jajar teks ke permulaan, sedar RTL
text-end
Jajar teks ke penghujung, sedar RTL
text-truncate
Pangkas limpahan dengan elipsis
text-uppercase
Tukar teks kepada huruf besar
fs-1
Saiz fon responsif (fs-1..6)
lh-base
Tinggi baris asas (lh-1, lh-sm, lh-lg)
font-monospace
Keluarga fon monospace
Warna & latar belakang
10text-primary
Warna teks utama
bg-primary
Warna latar belakang utama
bg-primary-subtle
Seri latar belakang utama halus
text-primary-emphasis
Teks utama penekanan, sedar tema
text-bg-primary
Latar utama dengan teks auto-kontras
link-primary
Pembantu pautan berwarna
bg-opacity-50
Gunakan kelegapan latar belakang 50%
text-body-secondary
Teks badan sekunder lembut
text-body-emphasis
Teks badan penekanan tinggi
border-primary-subtle
Warna sempadan utama halus
Utiliti flex
10d-flex
Cipta bekas flex
flex-row
Susun item dalam baris
flex-column
Susun item dalam lajur
justify-content-between
Jarakkan item sepanjang paksi utama
align-items-center
Tengahkan item pada paksi silang
flex-wrap
Benarkan item membalut
flex-grow-1
Biar item membesar mengisi ruang
flex-fill
Paksa lebar fleksibel sama
align-self-end
Jajar satu item ke penghujung
flex-md-row
Arah flex responsif dari md
Paparan & kedudukan
12d-none
Sembunyi elemen
d-md-block
Papar sebagai blok dari breakpoint md
position-relative
Kedudukan relatif
position-absolute
Kedudukan mutlak
position-fixed
Kedudukan tetap
position-sticky
Kedudukan melekat
top-0 start-0
Sematkan ke atas-kiri, sedar RTL
translate-middle
Tengahkan melalui transform translate
fixed-top
Tetapkan elemen ke atas viewport
sticky-top
Lekat ke atas semasa tatal
z-3
Tetapkan z-index (z-0..3)
invisible
Sembunyi tetapi kekalkan ruang susun atur
Saiz & sempadan
12w-100
Lebar 100% daripada induk
w-50
Lebar 50% daripada induk
h-100
Tinggi 100% daripada induk
mw-100
Lebar maksimum 100%
vh-100
Tinggi 100% daripada viewport
border
Tambah sempadan lalai pada semua sisi
border-0
Buang semua sempadan
border-primary
Warnakan sempadan
rounded
Border-radius lalai
rounded-pill
Bentuk pil bulat sepenuhnya
rounded-circle
Border-radius bulat
shadow-sm
Bayang kotak kecil (shadow, shadow-lg)
Butang
9<button class="btn btn-primary">
Butang utama pejal
<button class="btn btn-outline-primary">
Varian butang garis luar
<button class="btn btn-lg">
Butang besar (juga btn-sm)
<button class="btn btn-link">
Butang bergaya seperti pautan
<button class="btn-close">
Butang tutup generik (×)
<button class="btn disabled">
Keadaan butang dilumpuhkan
<button class="btn active">
Keadaan butang aktif
<div class="d-grid"><button class="btn">
Butang blok lebar penuh melalui d-grid
<div class="btn-group">
Kumpulkan butang bersama
Borang
11<input class="form-control">
Input teks bergaya
<label class="form-label">
Label medan borang
<select class="form-select">
Dropdown select bergaya
<div class="form-check">
Pembalut kotak semak/radio
<input class="form-check-input">
Input kotak semak atau radio bergaya
<div class="form-check form-switch">
Komponen suis togol
<input class="form-control-lg">
Input besar (juga form-control-sm)
<div class="input-group">
Kumpulkan input dengan add-on
is-invalid
Keadaan pengesahan tidak sah (is-valid)
<div class="form-floating">
Input label terapung
col-form-label
Label dijajar untuk borang mendatar
Komponen
14<div class="card">
Kad kandungan fleksibel
<nav class="navbar navbar-expand-lg">
Bar navigasi responsif
data-bs-toggle="modal" data-bs-target="#m"
Cetus dialog modal
data-bs-toggle="dropdown"
Togol menu dropdown
data-bs-toggle="collapse"
Togol elemen boleh runtuh
<div class="accordion">
Panel boleh runtuh bertindan
<div class="alert alert-dismissible">
Mesej amaran boleh tutup
<span class="badge text-bg-primary">
Lencana kiraan atau label kecil
<ul class="list-group">
Senarai item bergaya
<ul class="nav nav-tabs">
Navigasi bertab
<div class="toast">
Pemberitahuan toast ringan
<div class="offcanvas">
Panel bar sisi luar-kanvas
<div class="spinner-border">
Penunjuk pemutar memuatkan
<nav><ul class="pagination">
Pautan navigasi berpaginasi
Pembantu & lain-lain
11data-bs-theme="dark"
Dayakan mod warna gelap pada skop
<div class="ratio ratio-16x9">
Kotak nisbah aspek responsif
visually-hidden
Sembunyi secara visual, kekalkan untuk pembaca skrin
visually-hidden-focusable
Tersembunyi sehingga difokus (pautan langkau)
stretched-link
Jadikan induk boleh diklik sepenuhnya
clearfix
Kosongkan anak terapung
<div class="vstack gap-2">
Timbunan elemen menegak
<div class="hstack gap-2">
Timbunan elemen mendatar
<a class="icon-link">
Pautan dijajar dengan ikon inline
<div class="progress">
Kontena bar kemajuan
<nav class="breadcrumb">
Jejak navigasi breadcrumb
Tiada entri sepadan dengan “:q”.
Perlukan bantuan?
Menemui masalah dengan alat ini? Beritahu pasukan kami.