بناء أشرطة الأدوات btn-toolbar | مجموعات الأزرار في بوتستراب 5

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

لبناء شريط أدوات تحرير متكامل — مثل مجموعة تنسيق النص بجانب مجموعة المحاذاة ومجموعة التراجع — نغلف عدة عناصر .btn-group داخل حاوية أب تحمل الكلاس .btn-toolbar وسمة role="toolbar"، ثم نضبط المسافات الفاصلة بين كل مجموعة وأخرى باستخدام كلاسات التباعد المنطقية مثل .me-2 أو .gap-2.

الصف 2 كود برمجي

HTML

<div class="btn-toolbar gap-2" role="toolbar">
  <div class="btn-group" role="group" aria-label="Font">
    <button type="button" class="btn btn-primary">B</button>
    <button type="button" class="btn btn-primary">I</button>
  </div>
  <div class="btn-group" role="group" aria-label="Step">
    <button type="button" class="btn btn-dark">1</button>
    <button type="button" class="btn btn-dark">2</button>
  </div>
</div>

جرّب بنفسك

الصف 3 ملاحظة هامة

Button Toolbars Layout بناء أشرطة الأدوات btn-toolbar

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (مجموعات الأزرار في بوتستراب 5)