ورقة Bootstrap المرجعية
مرجع Bootstrap 5.3 قابل للبحث والطباعة — الشبكة، التباعد، الطباعة، الألوان، أدوات flex، الأزرار، النماذج والمكوّنات. مجانًا.
الشبكة والتخطيط
12<div class="container">
حاوية متجاوبة ثابتة العرض
<div class="container-fluid">
حاوية بعرض كامل عند كل نقطة توقف
<div class="container-md">
عرض 100% حتى نقطة التوقف md
<div class="row">
صف شبكة، يحتوي الأعمدة
<div class="col">
عمود تلقائي متساوي العرض
<div class="col-6">
يمتد عبر 6 من 12 عموداً
<div class="col-md-4">
4 أعمدة من نقطة التوقف md فصاعداً
<div class="col-auto">
عمود بحجم محتواه
<div class="offset-md-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 فصاعداً
الطباعة (Typography)
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
اتجاه flex متجاوب من md
العرض والموضع
12d-none
إخفاء العنصر
d-md-block
العرض ككتلة من نقطة التوقف md
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">
مسار تنقّل breadcrumb
لا يوجد إدخال يطابق “:q”.
هل تحتاج إلى مساعدة؟
هل واجهت مشكلة في هذه الأداة؟ أخبر فريقنا.