English 中文 العربية 日本語 Português

Bootstrap: الأزرار ومجموعات الأزرار

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

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

(1) المتطلبات الأساسية

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

(3) المشكلة

تحتاج صفحة تسجيل Alice إلى ثلاثة أزرار: إرسال (زر أساسي أزرق)، إعادة تعيين (زر ثانوي رمادي)، وتسجيل الدخول بحساب موجود (نمط رابط) — كل زر له نمط مختلف لكن جميعها تستند إلى الفئة الأساسية .btn.

(4) الحل

يوفر Bootstrap مجموعة غنية من أنماط الأزرار وخيارات الأحجام، بالإضافة إلى القدرة على دمج وترتيب الأزرار في مجموعات.

لفهم الفكرة: الأزرار مثل أزرار جهاز التحكم عن بُعد — اللون يمثّل الوظيفة (أزرق=رئيسي، أحمر=خطر، أخضر=نجاح)، الحجم يناسب الحاويات المختلفة، وdisabled يشير إلى أنه غير قابل للاستخدام.

(5) الفوائد

مع نظام أزرار Bootstrap، يمكنك تنفيذ واجهات أزرار احترافية ومتسقة وقابلة للوصول دون كتابة CSS مخصص.

2. أساسيات الأزرار

يستخدم Bootstrap فئة .btn كفئة أساسية للزر، مدمجة مع تنويعات الألوان:

HTML 
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
▶ جرّب الكود

النتيجة: مكوّنات بأنماط Bootstrap 5.3 (مثل الأزرار، البطاقات، الCarousel، الCollapse، إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (فاتحة) والشبكة المتجاوبة افتراضيًا.

▶ مثال: عرض تنويعات الأزرار

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Button 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>Standard Buttons</h5>
    <button class="btn btn-primary">Primary</button>
    <button class="btn btn-secondary">Secondary</button>
    <button class="btn btn-success">Success</button>
    <button class="btn btn-danger">Danger</button>
    <button class="btn btn-warning">Warning</button>
    <button class="btn btn-info">Info</button>
    <button class="btn btn-light">Light</button>
    <button class="btn btn-dark">Dark</button>
    <button class="btn btn-link">Link</button>

    <hr>

    <h5>Outline Buttons</h5>
    <button class="btn btn-outline-primary">Primary</button>
    <button class="btn btn-outline-secondary">Secondary</button>
    <button class="btn btn-outline-success">Success</button>
    <button class="btn btn-outline-danger">Danger</button>

    <hr>

    <h5>Button Sizes</h5>
    <button class="btn btn-primary btn-lg">Large</button>
    <button class="btn btn-primary">Default</button>
    <button class="btn btn-primary btn-sm">Small</button>
  </div>
</body>
</html>
▶ جرّب الكود

النتيجة: مكوّنات بأنماط Bootstrap 5.3 (مثل الأزرار، البطاقات، الCarousel، الCollapse، إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (فاتحة) والشبكة المتجاوبة افتراضيًا.

3. تنويعات الأزرار

(1) دلالات الألوان

الفئة اللون الاستخدام
btn-primary أزرق الإجراءات الرئيسية (إرسال، الخطوة التالية)
btn-secondary رمادي الإجراءات الثانوية (إلغاء، رجوع)
btn-success أخضر إجراءات النجاح (حفظ، تأكيد)
btn-danger أحمر إجراءات خطرة (حذف، خروج)
btn-warning أصفر إجراءات التحذير
btn-info سماوي إجراءات معلوماتية
btn-light أبيض استخدام على خلفيات فاتحة
btn-dark أسود استخدام على خلفيات داكنة
btn-link لون الرابط تنكّر زر كرابط

(2) الأزرار المحددة (Outline)

HTML 
<button class="btn btn-outline-primary">Outline Primary</button>
<button class="btn btn-outline-danger">Outline Danger</button>
▶ جرّب الكود

النتيجة: مكوّنات بأنماط Bootstrap 5.3 (مثل الأزرار، البطاقات، الCarousel، الCollapse، إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (فاتحة) والشبكة المتجاوبة افتراضيًا. الأزرار المحددة تملأ لون الخلفية عند التمرير عليها، مما يجعلها مناسبة للإجراءات الثانوية.

(3) أحجام الأزرار

الفئة حجم الخط المسافة الداخلية السيناريو
btn-lg 1.25rem 0.5rem 1rem دعوات بارزة، أقسام Hero
افتراضي 1rem 0.375rem 0.75rem استخدام عام
btn-sm 0.875rem 0.25rem 0.5rem داخل الجداول، المساحات المضغوطة

4. حالات الأزرار

HTML 
<button class="btn btn-primary" disabled>Disabled button</button>
<a href="#" class="btn btn-primary disabled" tabindex="-1">Disabled link</a>

<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>
▶ جرّب الكود

النتيجة: مكوّنات بأنماط Bootstrap 5.3 (مثل الأزرار، البطاقات، الCarousel، الCollapse، إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (فاتحة) والشبكة المتجاوبة افتراضيًا. عنصر <button> يدعم أصلاً السمة disabled. يتم تعطيل وسم <a> عبر الفئة .disabled.

5. أزرار الكتلة (Block)

HTML 
<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Full-width block button</button>
  <button class="btn btn-outline-secondary" type="button">Also full width</button>
</div>
▶ جرّب الكود

النتيجة: مكوّنات بأنماط Bootstrap 5.3 (مثل الأزرار، البطاقات، الCarousel، الCollapse، إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (فاتحة) والشبكة المتجاوبة افتراضيًا.

6. مجموعات الأزرار

HTML 
<div class="btn-group" role="group">
  <button class="btn btn-primary">Left</button>
  <button class="btn btn-primary">Middle</button>
  <button class="btn btn-primary">Right</button>
</div>
▶ جرّب الكود

النتيجة: مكوّنات بأنماط Bootstrap 5.3 (مثل الأزرار، البطاقات، الCarousel، الCollapse، إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (فاتحة) والشبكة المتجاوبة افتراضيًا.

(1) تنويعات مجموعات الأزرار

HTML 
<div class="btn-group-vertical">
  <button class="btn btn-primary">Top</button>
  <button class="btn btn-primary">Middle</button>
  <button class="btn btn-primary">Bottom</button>
</div>

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group me-2">
    <button class="btn btn-outline-secondary">B</button>
    <button class="btn btn-outline-secondary">I</button>
    <button class="btn btn-outline-secondary">U</button>
  </div>
  <div class="btn-group">
    <button class="btn btn-outline-secondary">Left</button>
    <button class="btn btn-outline-secondary">Center</button>
    <button class="btn btn-outline-secondary">Right</button>
  </div>
</div>
▶ جرّب الكود

النتيجة: مكوّنات بأنماط Bootstrap 5.3 (مثل الأزرار، البطاقات، الCarousel، الCollapse، إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (فاتحة) والشبكة المتجاوبة افتراضيًا.

الفئة التأثير السيناريو
btn-group تجميع أفقي أشرطة الأدوات، الترقيم
btn-group-vertical تجميع عمودي خيارات الشريط الجانبي
btn-toolbar يدمج مجموعات متعددة في شريط أدوات محررات النصوص الغنية

7. قرارات الأزرار ومرجعها

(1) مخطط اختيار تنويعات الأزرار

100% 
graph TD
    A[Need a button] --> B{Primary or secondary?}
    B -->|Primary action| C{Color selection}
    B -->|Secondary action| D[btn-outline-* or btn-link]
    C --> E[Submit/Save → btn-primary]
    C --> F[Danger/Delete → btn-danger]
    C --> G[Success/Confirm → btn-success]
    C --> H[Warning/Alert → btn-warning]
    D --> I{Bordered?}
    I -->|Yes| J[btn-outline-primary / outline-danger]
    I -->|No| K[btn-link link style]
    A --> L{Size requirement?}
    L --> M[Prominent → btn-lg]
    L --> N[Standard → Default]
    L --> O[Compact → btn-sm]
    A --> P{Grouped?}
    P --> Q[btn-group horizontal / btn-group-vertical vertical]

النتيجة: مكوّنات بأنماط Bootstrap 5.3 (مثل الأزرار، البطاقات، الCarousel، الCollapse، إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (فاتحة) والشبكة المتجاوبة افتراضيًا.

(2) مرجع أحجام الأزرار الكامل

الفئة حجم الخط padding-y padding-x نصف القطر السيناريو
btn-lg 1.25rem 0.5rem 1rem 0.5rem دعوات بارزة، أقسام Hero
افتراضي 1rem 0.375rem 0.75rem 0.375rem أزرار عامة
btn-sm 0.875rem 0.25rem 0.5rem 0.25rem جداول، مساحات مضغوطة

(3) مرجع أنواع مجموعات الأزرار

الفئة التخطيط بنية HTML السيناريو
btn-group ترتيب أفقي div.btn-group > button*N الترقيم، مجموعات الإجراءات
btn-group-vertical ترتيب عمودي div.btn-group-vertical > button*N أزرار الشريط الجانبي
btn-toolbar يدمج عدة btn-groups div.btn-toolbar > div.btn-group*N محررات النصوص الغنية
btn-group + dropup يفتح للأعلى div.btn-group.dropup قوائم الرفع
btn-group + dropend يفتح لليمين div.btn-group.dropend قوائم جانبية

▶ مثال: شريط أدوات الأزرار

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Button Toolbar</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>Rich Text Editor Toolbar</h5>

    <div class="btn-toolbar mb-3" role="toolbar" aria-label="Formatting toolbar">
      <div class="btn-group me-2" role="group" aria-label="Text style">
        <button type="button" class="btn btn-outline-secondary">B</button>
        <button type="button" class="btn btn-outline-secondary">I</button>
        <button type="button" class="btn btn-outline-secondary">U</button>
      </div>
      <div class="btn-group me-2" role="group" aria-label="Alignment">
        <button type="button" class="btn btn-outline-secondary">⬅</button>
        <button type="button" class="btn btn-outline-secondary">⬇</button>
        <button type="button" class="btn btn-outline-secondary">➡</button>
      </div>
      <div class="btn-group" role="group" aria-label="Actions">
        <button type="button" class="btn btn-outline-secondary">🔗</button>
        <button type="button" class="btn btn-outline-secondary">📷</button>
      </div>
    </div>

    <p class="text-muted small">btn-toolbar combines multiple btn-groups, me-2 controls group spacing</p>
  </div>
</body>
</html>
▶ جرّب الكود

النتيجة: مكوّنات بأنماط Bootstrap 5.3 (مثل الأزرار، البطاقات، الCarousel، الCollapse، إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (فاتحة) والشبكة المتجاوبة افتراضيًا.

▶ مثال: أزرار التبديل

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Toggle Buttons</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 class="mb-3">Radio Toggle</h5>
    <div class="btn-group mb-4" role="group" aria-label="Basic radio toggle">
      <input type="radio" class="btn-check" name="options" id="option1" checked>
      <label class="btn btn-outline-primary" for="option1">Day View</label>

      <input type="radio" class="btn-check" name="options" id="option2">
      <label class="btn btn-outline-primary" for="option2">Week View</label>

      <input type="radio" class="btn-check" name="options" id="option3">
      <label class="btn btn-outline-primary" for="option3">Month View</label>
    </div>

    <h5 class="mb-3">Checkbox Toggle</h5>
    <div class="btn-group" role="group" aria-label="Basic checkbox toggle">
      <input type="checkbox" class="btn-check" id="checkbox1">
      <label class="btn btn-outline-success" for="checkbox1">Bold</label>

      <input type="checkbox" class="btn-check" id="checkbox2">
      <label class="btn btn-outline-success" for="checkbox2">Italic</label>

      <input type="checkbox" class="btn-check" id="checkbox3">
      <label class="btn btn-outline-success" for="checkbox3">Underline</label>
    </div>

    <p class="text-muted small mt-3">Uses <code>btn-check</code> + <code>&lt;label&gt;</code> to achieve toggle effect, no JavaScript required.</p>
  </div>
</body>
</html>
▶ جرّب الكود

النتيجة: مكوّنات بأنماط Bootstrap 5.3 (مثل الأزرار، البطاقات، الCarousel، الCollapse، إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (فاتحة) والشبكة المتجاوبة افتراضيًا.

▶ مثال: أزرار حالة التحميل

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Loading Buttons</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 class="mb-4">Loading State Buttons</h5>

    <div class="d-flex gap-2 mb-3">
      <button class="btn btn-primary" disabled>
        <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
        Loading...
      </button>
      <button class="btn btn-success" disabled>
        <span class="spinner-grow spinner-grow-sm me-2" role="status" aria-hidden="true"></span>
        Saving...
      </button>
      <button class="btn btn-danger" disabled>
        <span class="spinner-border spinner-border-sm me-2" role="status"></span>
        Deleting...
      </button>
    </div>

    <div class="d-flex gap-2">
      <button class="btn btn-outline-primary" disabled>
        <span class="spinner-border spinner-border-sm me-2" role="status"></span>
        Connecting...
      </button>
      <button class="btn btn-outline-success">
        <span class="spinner-border spinner-border-sm me-2 d-none" role="status"></span>
        Submit Button
      </button>
    </div>

    <p class="text-muted small mt-3">Uses <code>spinner-border</code> or <code>spinner-grow</code> with <code>disabled</code> to implement loading state.</p>
  </div>
</body>
</html>
▶ جرّب الكود

النتيجة: مكوّنات بأنماط Bootstrap 5.3 (مثل الأزرار، البطاقات، الCarousel، الCollapse، إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (فاتحة) والشبكة المتجاوبة افتراضيًا.

▶ مثال: أزرار الكتلة

HTML 
<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Block Buttons</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 class="mb-3">Block Buttons (d-grid)</h5>

    <div class="d-grid gap-2 mb-4">
      <button class="btn btn-primary btn-lg" type="button">Primary Action — Full-width button</button>
      <button class="btn btn-outline-secondary" type="button">Secondary Action</button>
    </div>

    <h5 class="mb-3">Responsive Block</h5>
    <div class="d-grid gap-2 d-md-block">
      <button class="btn btn-primary me-md-2" type="button">Desktop Side-by-side</button>
      <button class="btn btn-outline-secondary" type="button">Mobile Stacked</button>
    </div>

    <p class="text-muted small mt-3">
      <code>d-grid gap-2</code> implements stacked full-width buttons, <code>d-md-block</code> restores side-by-side on desktop.
    </p>

    <hr>

    <h5 class="mb-3">Button Group Block Variant</h5>
    <div class="d-grid gap-2">
      <div class="btn-group" role="group">
        <button class="btn btn-primary">Option One</button>
        <button class="btn btn-primary">Option Two</button>
        <button class="btn btn-primary">Option Three</button>
      </div>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

النتيجة: مكوّنات بأنماط Bootstrap 5.3 (مثل الأزرار، البطاقات، الCarousel، الCollapse، إلخ). تستخدم الصفحة سمة Bootstrap الافتراضية (فاتحة) والشبكة المتجاوبة افتراضيًا.

❓ أسئلة شائعة

س ما الفرق بين استخدام <button> و<a> كزر؟
ج يُستخدم <button> لتشغيل إرسال النماذج أو الإجراءات التفاعلية (إرسال، حفظ، حذف). يُستخدم <a> للتنقل بين الصفحات (صفحات التفاصيل، الروابط الخارجية). دلاليًا، الزر يفعل شيئًا، والرابط يذهب إلى مكان ما.
س ما وظيفة type="button" على الزر؟
ج تمنع الزر من تشغيل إرسال النموذج. داخل <form>، يكون <button> افتراضيًا type="submit"، مما سيُحدّث الصفحة عند النقر. تحديد type="button" صراحةً يتجنب هذا السلوك.
س كيف يمكنني تخصيص ألوان الأزرار؟
ج بطريقتين: (1) تجاوز متغيرات CSS في Bootstrap — --bs-btn-bg، --bs-btn-color، --bs-btn-hover-bg؛ (2) في المرحلة 5، التخصيص عبر متغير Sass $theme-colors.
س هل يمكن تداخل مجموعات الأزرار؟
ج نعم. يمكنك وضع btn-group أخرى داخل btn-group لإنشاء مجموعات منسدلة، مثلاً: <div class="btn-group"><button>1</button><div class="btn-group"><button class="dropdown-toggle">More</button><ul class="dropdown-menu">...</ul></div></div>. مجموعات الأزرار المتداخلة ستبقى على نفس السطر، مناسبة لزر "المزيد" في مكوّن الترقيم.
س هل يمكن وضع أيقونات داخل الأزرار؟ كيف أصنع زر أيقونة فقط؟
ج نعم. ببساطة ضع <i> أو <svg> مباشرة داخل <button>. بالنسبة لأزرار الأيقونة فقط، يُوصى بإضافة aria-label لوصف نصي: <button class="btn btn-outline-secondary" aria-label="Search"><svg ...></svg></button>. Bootstrap Icons هي مكتبة الأيقونات الرسمية المرافقة، استخدم <i class="bi bi-search"></i> لتضمينها.

📖 ملخص

📝 تمارين

  1. ⭐ أنشئ شريط إجراءات سفلي لنموذج: إرسال (btn-primary btn-lg)، حفظ مسودة (btn-outline-secondary)، حذف (btn-outline-danger)، إلغاء (btn-link).
  2. ⭐⭐ استخدم btn-group لإنشاء مكوّن ترقيم: السابق + أرقام صفحات 1-5 + التالي، مع تمييز رقم الصفحة المحدد كـ btn-primary.
  3. ⭐⭐⭐ أنشئ شريط أدوات: استخدم btn-toolbar لدمج مجموعتي أزرار: تنسيق النص (B/I/U) والمحاذاة (يسار/وسط/يمين).

الدرس السابق: Navbar · الدرس التالي: Cards

Web-Tutorial.com

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

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

100%