Bootstrap: الفئات المساعدة

Q: هل يمكن خلط الفئات المساعدة مع فئات المكونات؟

نعم، وهذا بالضبط فلسفة تصميم Bootstrap. أضف shadow إلى مكون بطاقة، rounded-pill إلى زر، border-0 إلى جدول — الفئات المساعدة هي "البهارات" للمكونات، تتيح التركيب الحر.

Q: ما الفرق بين invisible و d-none ؟

invisible يخفي العنصر لكنه لا يزال يحتل مساحة في الصفحة ( visibility: hidden ). d-none يزيل العنصر تمامًا ( display: none )، فلا يحتل مساحة.

Q: هل يمكنني تخصيص قيم الفئات المساعدة؟

نعم، عبر Sass. تجاوز values في خريطة $utilities لإضافة أو تعديل قيم الفئات المساعدة. مثلًا، أضف قيم عرض مثل w-15 ، w-35 ، أو غيّر أحجام ظلال shadow-* . مع طريقة CDN، لا يمكنك التخصيص وتقتصر على القيم الجاهزة.

آخر تحديث: 2026-08-26

1. مقدمة الدرس

(1) المتطلبات السابقة

حاويات ونظام الشبكة في Bootstrap
الدرس 17 Bootstrap Icons

(2) 🎯 ما ستتعلّمه

استخدام فئات الحدود (border) والاستدارة (rounded)
التحكم في عمق الظلال
استخدام الطفو (float) وclearfix
التحكم في الرؤية (مرئي/غير مرئي) والتجاوز (overflow)
استخدام فئات الأحجام المساعدة (w/h)

(3) المشكلة

تحتاج Alice إلى كتابة الكثير من CSS مخصص لتعديل الحدود والظلال وزوايا الاستدارة على عناصر الصفحة — يمكن لفئات Bootstrap المساعدة فعل ذلك باسم فئة واحد فقط.

(4) الحل

يوفر Bootstrap مجموعة شاملة من فئات CSS الذرية المساعدة التي تغطي الأنماط الشائعة مثل الحدود وزوايا الاستدارة والظلال والطفو والرؤية والتجاوز والأحجام.

(5) الفوائد

لا حاجة لكتابة CSS مخصص؛ فقط اجمع الفئات مباشرة في HTML لتحقيق تأثيرات بصرية متنوعة، مما يعزز سرعة التطوير والتنقيح بشكل كبير.

2. الحدود

فئات الحدود: border، border-top/end/bottom/start، border-0/1/2/3/4/5، border-{color}

(1) فئات الحدود المساعدة

الفئة	تأثير CSS
`border`	حد 1px مصمت `#dee2e6` من جميع الجهات
`border-top` / `border-end` / `border-bottom` / `border-start`	حد من جهة واحدة
`border-0`	إزالة جميع الحدود
`border-{1-5}`	عرض الحدود 1px ~ 5px
`border-{color}`	لون الحدود (`primary`/`success`/`danger` إلخ)

(2) جدول مرجع لعرض الحدود

الفئة	CSS	التأثير	حالة الاستخدام
`border-1`	`border-width: 1px`	أرفع حد	الحد الافتراضي، خلايا الجدول
`border-2`	`border-width: 2px`	حد رفيع	حد البطاقة، حقول الإدخال
`border-3`	`border-width: 3px`	حد متوسط	حد التأكيد، الأزرار
`border-4`	`border-width: 4px`	حد سميك	فاصل أقسام، تسطير العناوين
`border-5`	`border-width: 5px`	أثخن حد	خط تمييز يساري، حد تحذير

▶ مثال: عرض الحدود والاستدارة

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Borders & Rounded Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h5>Border Directions</h5>
    <div class="d-flex flex-wrap gap-2 mb-4">
      <div class="border p-3">border</div>
      <div class="border-top p-3">border-top</div>
      <div class="border-end p-3">border-end</div>
      <div class="border-bottom p-3">border-bottom</div>
      <div class="border-start p-3">border-start</div>
    </div>

    <h5>Border Width</h5>
    <div class="d-flex flex-wrap gap-2 mb-4">
      <div class="border border-1 p-3">border-1</div>
      <div class="border border-2 p-3">border-2</div>
      <div class="border border-3 p-3">border-3</div>
      <div class="border border-4 p-3">border-4</div>
      <div class="border border-5 p-3">border-5</div>
    </div>

    <h5>Border Colors</h5>
    <div class="d-flex flex-wrap gap-2 mb-4">
      <div class="border border-primary p-3">primary</div>
      <div class="border border-success p-3">success</div>
      <div class="border border-danger p-3">danger</div>
      <div class="border border-warning p-3">warning</div>
      <div class="border border-info p-3">info</div>
      <div class="border border-dark p-3">dark</div>
    </div>

    <h5>Rounded Sizes</h5>
    <div class="d-flex flex-wrap gap-2 align-items-center">
      <div class="border p-3 rounded-0">rounded-0</div>
      <div class="border p-3 rounded-1">rounded-1</div>
      <div class="border p-3 rounded-2">rounded-2</div>
      <div class="border p-3 rounded-3">rounded-3</div>
      <div class="border p-3 rounded-4">rounded-4</div>
      <div class="border p-3 rounded-5">rounded-5</div>
      <div class="border rounded-circle d-inline-flex align-items-center justify-content-center" style="width:60px;height:60px;">circle</div>
      <div class="border rounded-pill px-4 py-2">rounded-pill</div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

3. زوايا الاستدارة

فئات الاستدارة: rounded-0/1/2/3/4/5، rounded-circle، rounded-pill، rounded-top/end/bottom/start

(1) مرجع أحجام الاستدارة

الفئة	border-radius	التأثير
`rounded-0`	0 (بدون استدارة)	زوايا مربعة
`rounded-1`	0.125rem (2px)	استدارة طفيفة
`rounded-2`	0.25rem (4px)	استدارة صغيرة
`rounded-3`	0.375rem (6px)	الاستدارة الافتراضية
`rounded-4`	0.5rem (8px)	استدارة متوسطة
`rounded-5`	0.75rem (12px)	استدارة كبيرة
`rounded-circle`	50% (دائرة كاملة)	دائرة
`rounded-pill`	100rem (شكل حبة)	شكل حبة

(2) الاستدارة من جهة واحدة

الفئة	الوصف
`rounded-top`	استدارة الزاويتين العلويتين
`rounded-end`	استدارة الزاويتين اليمنيين
`rounded-bottom`	استدارة الزاويتين السفليتين
`rounded-start`	استدارة الزاويتين اليساريين

HTML

<img src="https://via.placeholder.com/100" class="rounded-circle" width="100" height="100" alt="Avatar">
<button class="btn btn-primary rounded-pill px-4">Pill Button</button>
<div class="rounded-4 p-3 bg-light border">Extra rounded corners</div>

▶ جرّب الكود

▶ مثال: معرض تأثيرات الحدود

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Border Effects Gallery</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <div class="row g-4">
      <div class="col-md-4"><div class="border border-primary p-3 rounded">Primary Border</div></div>
      <div class="col-md-4"><div class="border border-success border-3 p-3 rounded-3">Success Thick</div></div>
      <div class="col-md-4"><div class="border border-danger border-5 p-3 rounded-pill">Danger Pill</div></div>
      <div class="col-md-4"><div class="border-top border-warning border-4 p-3">Top Only</div></div>
      <div class="col-md-4"><div class="border-start border-info border-5 ps-3">Start Accent</div></div>
      <div class="col-md-4"><div class="border-0 bg-light p-3 rounded-circle text-center" style="width:80px;height:80px;">No Border</div></div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

فئات الظلال: shadow-none، shadow-sm، shadow، shadow-lg

(1) جدول مقارنة الظلال

الفئة	CSS box-shadow	العمق البصري	حالة الاستخدام
`shadow-none`	بلا ظل	مسطح	الجداول، القوائم، مجموعات البطاقات
`shadow-sm`	`0 0.125rem 0.25rem`	ضحل	البطاقات الافتراضية، الودجات الصغيرة
`shadow`	`0 0.5rem 1rem`	متوسط	القوائم المنسدلة، Popovers
`shadow-lg`	`0 1rem 3rem`	عميق	Modals، Toasts، الإشعارات

HTML

<div class="shadow-none p-3 mb-3 bg-light rounded">No shadow</div>
<div class="shadow-sm p-3 mb-3 bg-body rounded">Small shadow</div>
<div class="shadow p-3 mb-3 bg-body rounded">Regular shadow</div>
<div class="shadow-lg p-3 mb-3 bg-body rounded">Large shadow</div>

▶ جرّب الكود

▶ مثال: مقارنة عمق الظلال

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shadow Depth Comparison</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .shadow-card { transition: transform 0.2s, box-shadow 0.2s; cursor: default; }
    .shadow-card:hover { transform: translateY(-4px); }
  </style>
</head>
<body>
  <div class="container py-4">
    <h2 class="mb-4">Shadow Depth Scale</h2>
    <div class="row g-4">
      <div class="col-md-3">
        <div class="card shadow-none p-4 text-center shadow-card h-100 border">
          <div class="display-6 text-body-tertiary mb-2">0</div>
          <h5>shadow-none</h5>
          <p class="text-body-secondary small mb-0">No shadow, flat design. Good for tables and card groups.</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card shadow-sm p-4 text-center shadow-card h-100">
          <div class="display-6 text-secondary mb-2">1</div>
          <h5>shadow-sm</h5>
          <p class="text-body-secondary small mb-0">Subtle depth. Default for cards, small UI widgets.</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card shadow p-4 text-center shadow-card h-100">
          <div class="display-6 text-body mb-2">2</div>
          <h5>shadow</h5>
          <p class="text-body-secondary small mb-0">Moderate depth. Used for dropdowns and popovers.</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card shadow-lg p-4 text-center shadow-card h-100">
          <div class="display-6 text-dark mb-2">3</div>
          <h5>shadow-lg</h5>
          <p class="text-body-secondary small mb-0">Prominent depth. Ideal for modals, toasts, notifications.</p>
        </div>
      </div>
    </div>

    <h2 class="mt-5 mb-4">Combined Effects</h2>
    <div class="d-flex gap-3 flex-wrap">
      <div class="card shadow-sm rounded-3 p-4" style="width:200px;">shadow-sm + rounded-3</div>
      <div class="card shadow rounded-4 border-0 p-4" style="width:200px;">shadow + rounded-4</div>
      <div class="card shadow-lg rounded-pill px-4 py-3 text-center" style="width:220px;">shadow-lg + pill</div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

▶ جرّب الكود

4. الطفو وclearfix

الفئة	التأثير
`float-start`	`float: left`
`float-end`	`float: right`
`float-none`	`float: none`
`clearfix`	مسح الطفو (يُستخدم على الحاوي الأب)

HTML

<div class="clearfix">
  <div class="float-start bg-primary text-white p-3 rounded">Float left</div>
  <div class="float-end bg-success text-white p-3 rounded">Float right</div>
</div>

▶ جرّب الكود

(1) اختيار بين Float وFlex وGrid

البُعد	تخطيط Float	تخطيط Flexbox	تخطيط CSS Grid
فئة Bootstrap	`float-start/end` + `clearfix`	`d-flex` + `flex-*`	`row` + `col-*`
حالة الاستخدام	التفاف النص حول الصور، ترتيب يسار-يمين بسيط	ترتيب أحادي البُعد (صف أو عمود)، توسيط، توزيع متساوٍ	شبكة ثنائية الأبعاد، صفوف/أعمدة متعددة، تخطيطات معقدة
دعم الاستجابة	محدود (`float-md-start`)	غني (`flex-md-row` إلخ)	غني (`col-md-6` إلخ)
قدرات المحاذاة	ضعيف (يحتاج clearfix إضافي)	قوي (`align-items-` `justify-content-`)	قوي (`align-self-` `justify-items-`)
توصية Bootstrap	⚠ غير موصى به (فقط لالتفاف النص)	✅ موصى به (تخطيط أحادي البُعد)	✅ موصى به (تخطيط ثنائي الأبعاد)

5. الرؤية والتجاوز

(1) الرؤية

الفئة	CSS	الوصف
`visible`	`visibility: visible`	إظهار العنصر
`invisible`	`visibility: hidden`	مخفي لكنه يحتل مساحة

(2) التجاوز

الفئة	CSS	الوصف
`overflow-auto`	`overflow: auto`	تمرير عند التجاوز
`overflow-hidden`	`overflow: hidden`	إخفاء التجاوز
`overflow-visible`	`overflow: visible`	التجاوز مرئي (افتراضي)
`overflow-scroll`	`overflow: scroll`	إظهار شريط التمرير دائمًا

(3) المحاذاة الرأسية

الفئة	CSS
`align-baseline`	`vertical-align: baseline`
`align-top`	`vertical-align: top`
`align-middle`	`vertical-align: middle`
`align-bottom`	`vertical-align: bottom`
`align-text-top`	`vertical-align: text-top`
`align-text-bottom`	`vertical-align: text-bottom`

HTML

<!-- الرؤية -->
<div class="visible p-2 bg-light border">Visible element</div>
<div class="invisible p-2 bg-light border">Invisible (still occupies space)</div>

<!-- التجاوز -->
<div class="overflow-auto border p-2" style="height: 80px;">Content that may overflow...</div>
<div class="overflow-hidden border p-2" style="height: 80px;">Hidden overflow content...</div>

<!-- المحاذاة الرأسية -->
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>

▶ جرّب الكود

▶ مثال: تجاوز مع التمرير

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Overflow Examples</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .overflow-box { border: 2px solid #dee2e6; border-radius: 0.5rem; padding: 0.5rem; }
  </style>
</head>
<body>
  <div class="container py-4">
    <h2 class="mb-4">Overflow Behaviors</h2>
    <div class="row g-3">
      <div class="col-md-3">
        <div class="overflow-box overflow-auto" style="height:120px;">
          <p class="fw-bold text-success">overflow-auto</p>
          <p>Scrolls when content overflows. Bootstrap provides utility classes to control how content behaves when it exceeds its container. The overflow-auto class adds scrollbars only when needed, keeping the layout clean while ensuring content remains accessible to users.</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="overflow-box overflow-hidden" style="height:120px;">
          <p class="fw-bold text-danger">overflow-hidden</p>
          <p>Content clipped. The overflow-hidden class clips content that exceeds the container boundaries, hiding any overflow without scrollbars.</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="overflow-box overflow-visible" style="height:120px;">
          <p class="fw-bold text-warning">overflow-visible</p>
          <p>Content overflows bounds. The overflow-visible class allows content to overflow beyond the container.</p>
        </div>
      </div>
      <div class="col-md-3">
        <div class="overflow-box overflow-scroll" style="height:120px;">
          <p class="fw-bold text-primary">overflow-scroll</p>
          <p>Always shows scrollbars. The overflow-scroll class forces scrollbars to always display, even when content fits.</p>
        </div>
      </div>
    </div>

    <h2 class="mt-4">Horizontal Overflow</h2>
    <div class="overflow-auto bg-light p-2 rounded border" style="white-space: nowrap; max-width: 100%;">
      <span class="badge bg-primary me-2">Tag 1</span>
      <span class="badge bg-success me-2">Tag 2</span>
      <span class="badge bg-warning me-2">Tag 3</span>
      <span class="badge bg-danger me-2">Tag 4</span>
      <span class="badge bg-info me-2">Tag 5</span>
      <span class="badge bg-dark me-2">Tag 6</span>
      <span class="badge bg-secondary me-2">Tag 7</span>
      <span class="badge bg-primary me-2">Tag 8</span>
      <span class="badge bg-success me-2">Tag 9</span>
      <span class="badge bg-warning me-2">Tag 10</span>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

▶ جرّب الكود

6. الأحجام

(1) العرض

الفئة	CSS
`w-25` / `w-50` / `w-75` / `w-100`	`width: 25%/50%/75%/100%`
`mw-100`	`max-width: 100%`
`vw-100`	`width: 100vw`
`min-vw-100`	`min-width: 100vw`

(2) الارتفاع

الفئة	CSS
`h-25` / `h-50` / `h-75` / `h-100`	`height: 25%/50%/75%/100%`
`mh-100`	`max-height: 100%`
`vh-100`	`height: 100vh`
`min-vh-100`	`min-height: 100vh`

HTML

<div class="w-25 bg-primary text-white p-2 rounded-1 mb-1">w-25 (25%)</div>
<div class="w-50 bg-success text-white p-2 rounded-1 mb-1">w-50 (50%)</div>
<div class="w-75 bg-info text-white p-2 rounded-1 mb-1">w-75 (75%)</div>
<div class="w-100 bg-danger text-white p-2 rounded-1 mb-1">w-100 (100%)</div>
<div class="mw-100 bg-warning p-2 rounded-1" style="width: 200%;">mw-100 (max 100%)</div>

▶ جرّب الكود

▶ مثال: مساحة عرض وارتفاع تفاعلية

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Width & Height Playground</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h2 class="mb-3">Width Classes</h2>
    <div class="mb-4">
      <div class="w-25 p-3 mb-2 bg-primary text-white rounded-1">w-25</div>
      <div class="w-50 p-3 mb-2 bg-success text-white rounded-1">w-50</div>
      <div class="w-75 p-3 mb-2 bg-info text-white rounded-1">w-75</div>
      <div class="w-100 p-3 mb-2 bg-danger text-white rounded-1">w-100</div>
    </div>

    <h2 class="mb-3">Height Classes</h2>
    <div class="d-flex gap-2 border rounded-3 p-3 mb-4" style="height:160px;">
      <div class="h-25 bg-primary text-white p-2 rounded-1 d-flex align-items-center">h-25</div>
      <div class="h-50 bg-success text-white p-2 rounded-1 d-flex align-items-center">h-50</div>
      <div class="h-75 bg-info text-white p-2 rounded-1 d-flex align-items-center">h-75</div>
      <div class="h-100 bg-danger text-white p-2 rounded-1 d-flex align-items-center">h-100</div>
    </div>

    <h2 class="mb-3">Viewport Units</h2>
    <div class="vw-100 bg-warning text-dark p-2 rounded-1 mb-2">vw-100 (100% viewport width)</div>
    <div class="min-vw-100 bg-light border p-2 rounded-1">min-vw-100 (minimum 100% viewport)</div>

    <h2 class="mt-4 mb-3">Use Case: Sidebar + Content</h2>
    <div class="d-flex border rounded-3 overflow-hidden">
      <div class="w-25 bg-dark text-white p-3">
        <p class="fw-bold mb-1">Sidebar</p>
        <small>w-25</small>
      </div>
      <div class="w-75 bg-light p-3">
        <p class="fw-bold mb-1">Main Content</p>
        <small>w-75</small>
      </div>
    </div>

    <h2 class="mt-4 mb-3">Max Constraints</h2>
    <div class="mw-100 border p-2 rounded-1 mb-2" style="width:200%; background:#f8f9fa;">mw-100 limits width to 100%</div>
    <div class="mh-100 border p-2 rounded-1" style="height:50px; background:#f8f9fa;">mh-100 allows up to 100% height</div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

▶ جرّب الكود

(1) مخطط بنية الفئات المساعدة

graph TD
    A[Bootstrap Utilities] --> B[Spacing]
    A --> C[Typography]
    A --> D[Layout]
    A --> E[Visual]
    A --> F[Interactive]
    B --> B1[m/p + {side} + {size}]
    C --> C1[text-* / fw-* / fs-*]
    D --> D1[Display d-*]
    D --> D2[Flex flex-*]
    D --> D3[Float float-*]
    D --> D4[Width/Height w-*/h-*]
    E --> E1[Border border-*]
    E --> E2[Rounded rounded-*]
    E --> E3[Shadow shadow-*]
    E --> E4[Color text-*/bg-*]
    F --> F1[Overflow overflow-*]
    F --> F2[Visibility visible/invisible]
    F --> F3[Vertical align align-*]

❓ أسئلة شائعة

س هل يمكن خلط الفئات المساعدة مع فئات المكونات؟

ج نعم، وهذا بالضبط فلسفة تصميم Bootstrap. أضف shadow إلى مكون بطاقة، rounded-pill إلى زر، border-0 إلى جدول — الفئات المساعدة هي "البهارات" للمكونات، تتيح التركيب الحر.

س هل تدعم border-* وrounded-* لواحق نقاط التوقف؟

ج معظمها لا يدعم (فهي تُنفّذ عبر تجاوزات متغيرات CSS)، لكن فئة border تدعم مثل border-md-0 لإزالة الحدود عند نقاط التوقف المتجاوبة.

س ما الفرق بين invisible وd-none؟

ج invisible يخفي العنصر لكنه لا يزال يحتل مساحة في الصفحة (visibility: hidden). d-none يزيل العنصر تمامًا (display: none)، فلا يحتل مساحة.

س عند تعارض عدة فئات مساعدة، أيهما له أولوية أعلى؟

ج لنفس خاصية CSS، الفئة المُعرّفة لاحقًا هي التي تُطبّق. تُحمّل فئات Bootstrap المساعدة لاحقًا، فالأولوية العامة هي: فئات المكونات < الفئات المساعدة < CSS المخصص. مثلًا، text-primary ستتجاوز اللون الافتراضي للبطاقة، وborder-0 سيتجاوز حدود الجدول. للإجبار على التجاوز، استخدم !important أو محددًا أكثر تحديدًا.

س هل يمكنني تخصيص قيم الفئات المساعدة؟

ج نعم، عبر Sass. تجاوز values في خريطة $utilities لإضافة أو تعديل قيم الفئات المساعدة. مثلًا، أضف قيم عرض مثل w-15، w-35، أو غيّر أحجام ظلال shadow-*. مع طريقة CDN، لا يمكنك التخصيص وتقتصر على القيم الجاهزة.

📖 ملخص

الحدود: border، border-{direction}، border-{width}، border-{color}
زوايا الاستدارة: rounded-{0-5}، rounded-circle، rounded-pill، استدارة من جهة واحدة
الظلال: shadow-sm، shadow، shadow-lg، shadow-none
الطفو: float-start/end + clearfix؛ الرؤية: visible/invisible
الأحجام: w-{25/50/75/100}، h-{25/50/75/100}، وحدات إطار العرض
التجاوز: overflow-auto/hidden/visible/scroll

📝 تمارين

⭐ أنشئ ثلاث بطاقات باستدارة مختلفة: rounded-0 لأسلوب بطاقة عمل مربعة، rounded-3 لبطاقة قياسية، وrounded-pill لأسلوب زر حبة.
⭐⭐ أنشئ مقارنة ظل صغير مقابل ظل كبير: بطاقتان باستخدام shadow-sm وshadow-lg على التوالي، موضوعتان جنبًا إلى جنب.
⭐⭐⭐ استخدم w-50 وmx-auto لإنشاء كتلة موسطة بعرض 50%، مع إضافة border + rounded-4 + shadow.

الدرس السابق: Bootstrap Icons · الدرس التالي: مشروع عملي: صفحة رئيسية لموقع شركة

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن