جدول الدروس

تعليمات Bootstrap 5

• دليل BS5
• مقدمة BS5
• صناديق BS5
• أساس شبكة BS5
• تدوين BS5
• ألوان BS5
• جداول BS5
• صور BS5
• Jumbotron BS5
• نافذة التحذير BS5
• أزرار BS5
• مجموعات الأزرار BS5
• شعار BS5
• شريط التقدم BS5
• شاشات التحميل BS5
• صفحات التشطيب BS5
• مجموعات القوائم BS5
• بطاقات BS5
• قوائم السقوط BS5
• طي BS5
• توجيه BS5
• شريط التوجيه BS5
• شاشات العرض BS5
• نوافذ الم��يل BS5
• نصائح BS5
• قوائم النصائح BS5
• Toast BS5
• Scrollspy BS5
• Offcanvas BS5
• أدوات BS5
• Flex BS5

نماذج Bootstrap 5

• نموذج BS5
• قائمة اختيار BS5
• المربعات المحددة والأسهم المحددة BS5
• محدد BS5
• مجموعة مدخلات BS5
• أشارات تحريك BS5
• تأكيد النموذج BS5

شبكة Bootstrap 5

• نظام شبكة BS5
• BS5 متداخل/أفقية
• شبكة BS5 Extra Small
• شبكة BS5 Small
• شبكة BS5 Medium
• شبكة BS5 Large
• شبكة BS5 Extra Large
• شبكة BS5 XXL
• مثال شبكة BS5

Bootstrap 5 أخرى

• نموذج أساسي BS5
• امتحان BS5

الدورات الإضافية

توصيات الدورة:

• حقيبة CodeW3C.com

مجموعة زر

Bootstrap 5 يتيح لك تجميع مجموعة من الأزرار معًا في مجموعة زر (في سطر واحد):

استخدم الفئة المزودة بـ .btn-group فئة <div> لإنشاء مجموعة من الأزرار:

مثال

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <button type="button" class="btn btn-primary">Xiaomi</button>
</div>

جرب بنفسك

إشارة:لا تطبق حجم الأزرار على كل زر في المجموعة، بل استخدم الفئة .btn-group-lg للمجموعات الكبيرة من الأزرار أو لتحديد .btn-group-sm للمجموعات الصغيرة من الأزرار:

مثال

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <button type="button" class="btn btn-primary">Xiaomi</button>
</div>

جرب بنفسك

مجموعات أزرار عمودية

يدعم Bootstrap 5 أيضًا مجموعات الأزرار العمودية:

استخدم الفئة .btn-group-vertical إنشاء مجموعة أزرار عمودية:

مثال

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <button type="button" class="btn btn-primary">Xiaomi</button>
</div>

جرب بنفسك

مجموعات أزرار متوازية

بافتراض، تكون مجموعة الأزرار "inline"، وتظهر الأزرار المختلفة بجوار بعضها البعض عند وجود عدة مجموعات أزرار:

مثال

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <button type="button" class="btn btn-primary">Xiaomi</button>
</div>
<div class="btn-group">
  <button type="button" class="btn btn-primary">Jiālì</button>
  <button type="button" class="btn btn-primary">Chángchéng</button>
  <button type="button" class="btn btn-primary">Hóngqí</button>
</div>

جرب بنفسك

مجموعة الأزرار المدمجة وقائمة منسدلة

مجموعة الأزرار المدمجة، يمكنك إنشاء قائمة منسدلة (ستتعلم المزيد عن القوائم المنسدلة في الفصول القادمة):

مثال

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">شركة Xiaomi</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">الهاتف</a>
      <a class="dropdown-item" href="#">الحاسوب اللوحي</a>
    </div>
  </div>
</div>

جرب بنفسك

مجموعة الأدوات

امتحان JavaScript

روابط الممولين