Tài liệu tham khảo nhanh Bootstrap
Tài liệu tham khảo Bootstrap 5.3 có thể tìm kiếm và in được — grid, spacing, kiểu chữ, màu sắc, tiện ích flex, nút, form và component. Miễn phí.
Lưới & bố cục
12<div class="container">
Container responsive độ rộng cố định
<div class="container-fluid">
Container toàn chiều rộng ở mọi breakpoint
<div class="container-md">
Rộng 100% cho tới breakpoint md
<div class="row">
Hàng lưới, chứa các cột
<div class="col">
Cột tự động cùng chiều rộng
<div class="col-6">
Trải 6 trên 12 cột
<div class="col-md-4">
4 cột từ breakpoint md trở lên
<div class="col-auto">
Cột vừa với nội dung của nó
<div class="offset-md-2">
Đẩy cột sang phải 2 cột
<div class="row g-3">
Khoảng cách gutter giữa các cột
<div class="row row-cols-3">
Buộc 3 cột bằng nhau mỗi hàng
<div class="order-2">
Sắp xếp lại một cột flex/grid
Tiện ích khoảng cách
12m-3
Margin mọi phía (thang 0-5)
mt-2
Margin trên
mx-auto
Margin ngang tự động để căn giữa
p-4
Padding mọi phía
py-2
Padding dọc (trên và dưới)
ms-3
Margin đầu (trái ở LTR, nhận biết RTL)
me-3
Margin cuối (phải ở LTR, nhận biết RTL)
ps-2
Padding đầu, nhận biết RTL
pe-2
Padding cuối, nhận biết RTL
gap-3
Khoảng cách giữa các mục flex/grid
m-n1
Margin âm
p-md-5
Padding responsive từ md trở lên
Kiểu chữ
14<h1>..<h6>
Các cấp tiêu đề với style mặc định
<p class="display-1">
Tiêu đề display lớn (display-1..6)
<p class="lead">
Đoạn mở đầu nổi bật
fw-bold
Độ đậm chữ bold
fw-semibold
Độ đậm chữ semibold
fst-italic
Kiểu chữ nghiêng
text-center
Căn giữa văn bản
text-start
Căn đầu văn bản, nhận biết RTL
text-end
Căn cuối văn bản, nhận biết RTL
text-truncate
Cắt phần tràn bằng dấu ba chấm
text-uppercase
Chuyển văn bản thành chữ hoa
fs-1
Cỡ chữ responsive (fs-1..6)
lh-base
Chiều cao dòng cơ bản (lh-1, lh-sm, lh-lg)
font-monospace
Họ phông monospace
Màu & nền
10text-primary
Màu chữ primary
bg-primary
Màu nền primary
bg-primary-subtle
Sắc nền primary nhạt
text-primary-emphasis
Chữ primary nhấn mạnh, nhận biết theme
text-bg-primary
Nền primary với chữ tự tương phản
link-primary
Tiện ích link có màu
bg-opacity-50
Áp độ trong suốt nền 50%
text-body-secondary
Chữ thân phụ mờ
text-body-emphasis
Chữ thân nhấn mạnh cao
border-primary-subtle
Màu viền primary nhạt
Tiện ích flex
10d-flex
Tạo một container flex
flex-row
Xếp các mục theo hàng
flex-column
Xếp các mục theo cột
justify-content-between
Dàn các mục theo trục chính
align-items-center
Căn giữa các mục theo trục phụ
flex-wrap
Cho phép phần tử xuống dòng
flex-grow-1
Cho một mục giãn để lấp đầy khoảng trống
flex-fill
Buộc chiều rộng linh hoạt bằng nhau
align-self-end
Căn một mục riêng về cuối
flex-md-row
Hướng flex responsive từ md
Hiển thị & vị trí
12d-none
Ẩn phần tử
d-md-block
Hiển thị dạng block từ breakpoint md
position-relative
Định vị tương đối
position-absolute
Định vị tuyệt đối
position-fixed
Định vị cố định
position-sticky
Định vị dính
top-0 start-0
Ghim vào trên-trái, nhận biết RTL
translate-middle
Căn giữa qua transform translate
fixed-top
Cố định phần tử ở đỉnh viewport
sticky-top
Dính lên đỉnh khi cuộn
z-3
Đặt z-index (z-0..3)
invisible
Ẩn nhưng giữ chỗ trong bố cục
Kích thước & viền
12w-100
Rộng 100% của cha
w-50
Rộng 50% của cha
h-100
Cao 100% của cha
mw-100
Chiều rộng tối đa 100%
vh-100
Cao 100% của viewport
border
Thêm viền mặc định mọi phía
border-0
Bỏ mọi viền
border-primary
Tô màu viền
rounded
Bo góc mặc định
rounded-pill
Hình viên thuốc bo tròn hoàn toàn
rounded-circle
Bo góc hình tròn
shadow-sm
Đổ bóng hộp nhỏ (shadow, shadow-lg)
Nút
9<button class="btn btn-primary">
Nút primary đặc
<button class="btn btn-outline-primary">
Biến thể nút viền
<button class="btn btn-lg">
Nút lớn (cũng có btn-sm)
<button class="btn btn-link">
Nút tạo kiểu như một link
<button class="btn-close">
Nút đóng (×) chung
<button class="btn disabled">
Trạng thái nút bị vô hiệu
<button class="btn active">
Trạng thái nút active
<div class="d-grid"><button class="btn">
Nút khối toàn chiều rộng qua d-grid
<div class="btn-group">
Nhóm các nút lại với nhau
Form
11<input class="form-control">
Ô nhập văn bản có kiểu
<label class="form-label">
Nhãn trường form
<select class="form-select">
Dropdown select có kiểu
<div class="form-check">
Vỏ bọc checkbox/radio
<input class="form-check-input">
Input checkbox hoặc radio có kiểu
<div class="form-check form-switch">
Thành phần công tắc gạt
<input class="form-control-lg">
Input lớn (cũng có form-control-sm)
<div class="input-group">
Nhóm input với add-on
is-invalid
Trạng thái xác thực không hợp lệ (is-valid)
<div class="form-floating">
Input nhãn nổi
col-form-label
Nhãn căn cho form ngang
Thành phần
14<div class="card">
Thẻ nội dung linh hoạt
<nav class="navbar navbar-expand-lg">
Thanh điều hướng responsive
data-bs-toggle="modal" data-bs-target="#m"
Kích hoạt một hộp thoại modal
data-bs-toggle="dropdown"
Bật/tắt một menu dropdown
data-bs-toggle="collapse"
Bật/tắt một phần tử thu gọn được
<div class="accordion">
Các panel thu gọn xếp chồng
<div class="alert alert-dismissible">
Thông báo alert có thể đóng
<span class="badge text-bg-primary">
Huy hiệu đếm hoặc nhãn nhỏ
<ul class="list-group">
Danh sách mục có kiểu
<ul class="nav nav-tabs">
Điều hướng dạng tab
<div class="toast">
Thông báo toast nhẹ
<div class="offcanvas">
Panel sidebar off-canvas
<div class="spinner-border">
Chỉ báo spinner đang tải
<nav><ul class="pagination">
Các link điều hướng phân trang
Tiện ích & khác
11data-bs-theme="dark"
Bật chế độ màu tối trên một phạm vi
<div class="ratio ratio-16x9">
Hộp tỉ lệ khung hình responsive
visually-hidden
Ẩn về mặt hình ảnh, giữ cho trình đọc màn hình
visually-hidden-focusable
Ẩn cho tới khi được focus (skip link)
stretched-link
Làm một phần tử cha có thể click toàn bộ
clearfix
Xóa float của các phần tử con
<div class="vstack gap-2">
Xếp chồng dọc các phần tử
<div class="hstack gap-2">
Xếp chồng ngang các phần tử
<a class="icon-link">
Link căn với một icon nội tuyến
<div class="progress">
Container thanh tiến trình
<nav class="breadcrumb">
Đường dẫn điều hướng breadcrumb
Không có mục nào khớp với “:q”.
Cần trợ giúp?
Gặp sự cố với công cụ này? Hãy cho đội ngũ của chúng tôi biết.