ชีตสรุป Bootstrap
เอกสารอ้างอิง Bootstrap 5.3 ที่ค้นหาและพิมพ์ได้——grid, ระยะห่าง, การจัดวางตัวอักษร, สี, flex utility, ปุ่ม, ฟอร์ม และคอมโพเนนต์ ฟรี
Grid และ layout
12<div class="container">
container responsive ความกว้างคงที่
<div class="container-fluid">
container เต็มความกว้างทุก breakpoint
<div class="container-md">
กว้าง 100% จนถึง breakpoint md
<div class="row">
row ของ grid บรรจุ column
<div class="col">
column อัตโนมัติกว้างเท่ากัน
<div class="col-6">
ครอบ 6 จาก 12 column
<div class="col-md-4">
4 column ตั้งแต่ breakpoint md ขึ้นไป
<div class="col-auto">
column ปรับขนาดตามเนื้อหา
<div class="offset-md-2">
ดัน column ไปทางขวา 2 column
<div class="row g-3">
ระยะ gutter ระหว่าง column
<div class="row row-cols-3">
บังคับ 3 column เท่ากันต่อ row
<div class="order-2">
จัดลำดับ column ของ flex/grid ใหม่
ยูทิลิตีระยะห่าง
12m-3
margin ทุกด้าน (สเกล 0-5)
mt-2
margin ด้านบน
mx-auto
margin แนวนอนอัตโนมัติเพื่อจัดกึ่งกลาง
p-4
padding ทุกด้าน
py-2
padding แนวตั้ง (บนและล่าง)
ms-3
margin ด้านต้น (ซ้ายใน LTR รองรับ RTL)
me-3
margin ด้านท้าย (ขวาใน LTR รองรับ RTL)
ps-2
padding ด้านต้น รองรับ RTL
pe-2
padding ด้านท้าย รองรับ RTL
gap-3
ช่องว่างระหว่างรายการ flex/grid
m-n1
margin ค่าลบ
p-md-5
padding responsive ตั้งแต่ md ขึ้นไป
Typography
14<h1>..<h6>
ระดับ heading พร้อมสไตล์เริ่มต้น
<p class="display-1">
heading display ขนาดใหญ่ (display-1..6)
<p class="lead">
ย่อหน้านำที่โดดเด่น
fw-bold
น้ำหนักฟอนต์หนา
fw-semibold
น้ำหนักฟอนต์กึ่งหนา
fst-italic
สไตล์ฟอนต์เอียง
text-center
จัดข้อความกึ่งกลาง
text-start
จัดข้อความชิดต้น รองรับ RTL
text-end
จัดข้อความชิดท้าย รองรับ RTL
text-truncate
ตัดข้อความล้นด้วย ellipsis
text-uppercase
แปลงข้อความเป็นตัวพิมพ์ใหญ่
fs-1
ขนาดฟอนต์ responsive (fs-1..6)
lh-base
line height พื้นฐาน (lh-1, lh-sm, lh-lg)
font-monospace
ตระกูลฟอนต์ monospace
สี & พื้นหลัง
10text-primary
สีข้อความหลัก
bg-primary
สีพื้นหลังหลัก
bg-primary-subtle
เฉดพื้นหลังหลักอ่อน
text-primary-emphasis
ข้อความหลักเน้น รองรับธีม
text-bg-primary
พื้นหลังหลักพร้อมข้อความ contrast อัตโนมัติ
link-primary
ตัวช่วยลิงก์มีสี
bg-opacity-50
ใช้ความทึบพื้นหลัง 50%
text-body-secondary
ข้อความเนื้อหารองแบบจาง
text-body-emphasis
ข้อความเนื้อหาเน้นสูง
border-primary-subtle
สีเส้นขอบหลักอ่อน
ยูทิลิตี flex
10d-flex
สร้าง flex container
flex-row
วางรายการเป็นแถว
flex-column
วางรายการเป็นคอลัมน์
justify-content-between
กระจายรายการตามแกนหลัก
align-items-center
จัดรายการกึ่งกลางบนแกนขวาง
flex-wrap
ให้ item ขึ้นบรรทัดใหม่ได้
flex-grow-1
ให้รายการขยายเติมพื้นที่
flex-fill
บังคับความกว้างยืดหยุ่นเท่ากัน
align-self-end
จัดรายการเดียวชิดท้าย
flex-md-row
ทิศทาง flex responsive ตั้งแต่ md
Display และ position
12d-none
ซ่อน element
d-md-block
แสดงเป็น block ตั้งแต่ breakpoint md
position-relative
การจัดตำแหน่งแบบ relative
position-absolute
การจัดตำแหน่งแบบ absolute
position-fixed
การจัดตำแหน่งแบบ fixed
position-sticky
การจัดตำแหน่งแบบ sticky
top-0 start-0
ปักมุมบนซ้าย รองรับ RTL
translate-middle
จัดกึ่งกลางด้วย transform translate
fixed-top
ตรึง element ไว้บนสุดของ viewport
sticky-top
ยึดบนสุดเมื่อ scroll
z-3
ตั้ง z-index (z-0..3)
invisible
ซ่อนแต่คงพื้นที่ layout
การกำหนดขนาดและเส้นขอบ
12w-100
ความกว้าง 100% ของ parent
w-50
ความกว้าง 50% ของ parent
h-100
ความสูง 100% ของ parent
mw-100
Max-width 100%
vh-100
ความสูง 100% ของ viewport
border
เพิ่มเส้นขอบเริ่มต้นทุกด้าน
border-0
ลบเส้นขอบทั้งหมด
border-primary
ใส่สีเส้นขอบ
rounded
border-radius เริ่มต้น
rounded-pill
ทรง pill มนเต็มที่
rounded-circle
border-radius ทรงกลม
shadow-sm
เงากล่องเล็ก (shadow, shadow-lg)
ปุ่ม
9<button class="btn btn-primary">
ปุ่มหลักแบบทึบ
<button class="btn btn-outline-primary">
ปุ่มแบบ outline
<button class="btn btn-lg">
ปุ่มใหญ่ (มี btn-sm ด้วย)
<button class="btn btn-link">
ปุ่มที่จัดสไตล์เหมือนลิงก์
<button class="btn-close">
ปุ่มปิด (×) ทั่วไป
<button class="btn disabled">
สถานะปุ่มปิดใช้งาน
<button class="btn active">
สถานะปุ่ม active
<div class="d-grid"><button class="btn">
ปุ่ม block เต็มความกว้างผ่าน d-grid
<div class="btn-group">
จัดกลุ่มปุ่มเข้าด้วยกัน
ฟอร์ม
11<input class="form-control">
input ข้อความที่จัดสไตล์
<label class="form-label">
label ของ field ในฟอร์ม
<select class="form-select">
dropdown select ที่จัดสไตล์
<div class="form-check">
wrapper ของ checkbox/radio
<input class="form-check-input">
input checkbox หรือ radio ที่จัดสไตล์
<div class="form-check form-switch">
คอมโพเนนต์ toggle switch
<input class="form-control-lg">
input ใหญ่ (มี form-control-sm ด้วย)
<div class="input-group">
จัดกลุ่ม input พร้อม add-on
is-invalid
สถานะ validation ไม่ผ่าน (is-valid)
<div class="form-floating">
input แบบ floating label
col-form-label
label จัดแนวสำหรับฟอร์มแนวนอน
คอมโพเนนต์
14<div class="card">
card เนื้อหายืดหยุ่น
<nav class="navbar navbar-expand-lg">
แถบนำทาง responsive
data-bs-toggle="modal" data-bs-target="#m"
เรียก modal dialog
data-bs-toggle="dropdown"
สลับเมนู dropdown
data-bs-toggle="collapse"
สลับ element แบบยุบได้
<div class="accordion">
panel ยุบได้แบบซ้อน
<div class="alert alert-dismissible">
ข้อความ alert ที่ปิดได้
<span class="badge text-bg-primary">
badge นับหรือ label ขนาดเล็ก
<ul class="list-group">
รายการที่จัดสไตล์
<ul class="nav nav-tabs">
การนำทางแบบแท็บ
<div class="toast">
การแจ้งเตือน toast แบบเบา
<div class="offcanvas">
panel sidebar แบบ off-canvas
<div class="spinner-border">
ตัวบ่งชี้ spinner กำลังโหลด
<nav><ul class="pagination">
ลิงก์นำทางแบบแบ่งหน้า
ตัวช่วยและอื่นๆ
11data-bs-theme="dark"
เปิดโหมดสีเข้มในขอบเขตหนึ่ง
<div class="ratio ratio-16x9">
กล่อง aspect-ratio responsive
visually-hidden
ซ่อนเชิงสายตา คงไว้สำหรับ screen reader
visually-hidden-focusable
ซ่อนจนกว่าจะ focus (skip link)
stretched-link
ทำให้ parent คลิกได้ทั้งหมด
clearfix
เคลียร์ child ที่ float
<div class="vstack gap-2">
stack แนวตั้งของ element
<div class="hstack gap-2">
stack แนวนอนของ element
<a class="icon-link">
ลิงก์จัดแนวกับไอคอน inline
<div class="progress">
container ของ progress bar
<nav class="breadcrumb">
เส้นทางนำทาง breadcrumb
ไม่มีรายการที่ตรงกับ “:q”
ต้องการความช่วยเหลือ?
พบปัญหากับเครื่องมือนี้หรือไม่? แจ้งทีมงานของเรา