برگه تقلب Bootstrap
مرجع Bootstrap 5.3 قابل جستوجو و چاپ — گرید، فاصلهگذاری، تایپوگرافی، رنگها، ابزارهای flex، دکمهها، فرمها و کامپوننتها. رایگان.
گرید و چیدمان
12<div class="container">
container واکنشگرای عرضثابت
<div class="container-fluid">
container تمامعرض در هر breakpoint
<div class="container-md">
عرض ۱۰۰٪ تا breakpoint md
<div class="row">
ردیف گرید، نگهدارنده ستونها
<div class="col">
ستون خودکار با عرض برابر
<div class="col-6">
گسترش بر ۶ از ۱۲ ستون
<div class="col-md-4">
۴ ستون از breakpoint md به بالا
<div class="col-auto">
ستون اندازهشده به محتوایش
<div class="offset-md-2">
هلدادن ستون بهاندازه ۲ ستون به راست
<div class="row g-3">
فاصله gutter بین ستونها
<div class="row row-cols-3">
اعمال ۳ ستون برابر در هر ردیف
<div class="order-2">
بازچینش یک ستون flex/grid
ابزارهای فاصلهگذاری
12m-3
margin در همه طرفها (مقیاس ۵-۰)
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
gap بین اقلام flex/grid
m-n1
margin منفی
p-md-5
padding واکنشگرا از md به بالا
تایپوگرافی
14<h1>..<h6>
سطوح heading با سبک پیشفرض
<p class="display-1">
heading نمایشی بزرگ (display-1..6)
<p class="lead">
پاراگراف lead برجسته
fw-bold
وزن فونت bold
fw-semibold
وزن فونت semibold
fst-italic
سبک فونت italic
text-center
همترازی وسط متن
text-start
همترازی شروع متن، آگاه از RTL
text-end
همترازی پایان متن، آگاه از RTL
text-truncate
کوتاهکردن سرریز با ellipsis
text-uppercase
تبدیل متن به حروف بزرگ
fs-1
اندازه فونت واکنشگرا (fs-1..6)
lh-base
ارتفاع خط پایه (lh-1، lh-sm، lh-lg)
font-monospace
خانواده فونت monospace
رنگها و پسزمینه
10text-primary
رنگ متن primary
bg-primary
رنگ پسزمینه primary
bg-primary-subtle
تهرنگ ملایم پسزمینه primary
text-primary-emphasis
متن primary تأکیدی، آگاه از theme
text-bg-primary
پسزمینه primary با متن خودکنتراست
link-primary
ابزار لینک رنگی
bg-opacity-50
اعمال شفافیت پسزمینه ۵۰٪
text-body-secondary
متن بدنه ثانویه کمرنگ
text-body-emphasis
متن بدنه پرتأکید
border-primary-subtle
رنگ حاشیه primary ملایم
ابزارهای flex
10d-flex
ساخت یک container فلکس
flex-row
چیدن اقلام در یک ردیف
flex-column
چیدن اقلام در یک ستون
justify-content-between
فاصلهگذاری اقلام در امتداد محور اصلی
align-items-center
مرکزچینی اقلام روی محور عرضی
flex-wrap
اجازه شکست آیتمها
flex-grow-1
اجازه رشد یک قلم برای پرکردن فضا
flex-fill
اعمال عرضهای انعطافپذیر برابر
align-self-end
همترازی یک قلم به انتها
flex-md-row
جهت flex واکنشگرا از md
نمایش و موقعیت
12d-none
پنهانکردن عنصر
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
ثابتکردن عنصر به بالای viewport
sticky-top
چسبیدن به بالا هنگام اسکرول
z-3
تنظیم z-index (z-0..3)
invisible
پنهانکردن با حفظ فضای چیدمان
اندازهگذاری و حاشیهها
12w-100
عرض ۱۰۰٪ والد
w-50
عرض ۵۰٪ والد
h-100
ارتفاع ۱۰۰٪ والد
mw-100
حداکثر عرض ۱۰۰٪
vh-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">
دکمه 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">
حالت دکمه فعال
<div class="d-grid"><button class="btn">
دکمه block تمامعرض با d-grid
<div class="btn-group">
گروهبندی دکمهها با هم
فرمها
11<input class="form-control">
ورودی متنی سبکدار
<label class="form-label">
برچسب فیلد فرم
<select class="form-select">
select بازشوی سبکدار
<div class="form-check">
wrapper برای checkbox/radio
<input class="form-check-input">
ورودی checkbox یا radio سبکدار
<div class="form-check form-switch">
کامپوننت کلید toggle
<input class="form-control-lg">
ورودی بزرگ (همچنین form-control-sm)
<div class="input-group">
گروهبندی ورودیها با add-onها
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"
راهاندازی یک پنجره modal
data-bs-toggle="dropdown"
تغییر وضعیت یک منوی dropdown
data-bs-toggle="collapse"
تغییر وضعیت یک عنصر جمعشونده
<div class="accordion">
پنلهای جمعشونده رویهم
<div class="alert alert-dismissible">
پیام هشدار قابلبستن
<span class="badge text-bg-primary">
badge کوچک شمارش یا برچسب
<ul class="list-group">
فهرست اقلام سبکدار
<ul class="nav nav-tabs">
ناوبری تبدار
<div class="toast">
اعلان toast سبک
<div class="offcanvas">
پنل سایدبار off-canvas
<div class="spinner-border">
نشانگر spinner بارگذاری
<nav><ul class="pagination">
لینکهای ناوبری صفحهبندیشده
ابزارها و متفرقه
11data-bs-theme="dark"
فعالسازی حالت رنگ تیره روی یک scope
<div class="ratio ratio-16x9">
جعبه نسبتابعاد واکنشگرا
visually-hidden
پنهان دیداری، حفظ برای screen readerها
visually-hidden-focusable
پنهان تا زمان فوکوس (skip linkها)
stretched-link
قابلکلیککردن کامل یک والد
clearfix
پاککردن فرزندان floatشده
<div class="vstack gap-2">
پشته عمودی عناصر
<div class="hstack gap-2">
پشته افقی عناصر
<a class="icon-link">
لینک همتراز با یک آیکن درونخطی
<div class="progress">
container نوار پیشرفت
<nav class="breadcrumb">
مسیر ناوبری breadcrumb
هیچ موردی با «:q» مطابقت ندارد.
به کمک نیاز دارید؟
با این ابزار مشکلی پیدا کردید؟ به تیم ما اطلاع دهید.