مجموعات أزرار Bootstrap 4
مجموعات الأزرار
يتيح لك Bootstrap 4 تجميع سلسلة من الأزرار معًا (على سطر واحد) في مجموعة أزرار:
استخدم <div>عنصرًا مع فئة .btn-groupلإنشاء مجموعة أزرار:
مثال
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
نصيحة: بدلاً من تطبيق أحجام الأزرار على كل زر في مجموعة ، استخدم فئة .btn-group-lgلمجموعة أزرار كبيرة أو لمجموعة .btn-group-smأزرار صغيرة:
أزرار كبيرة:
الأزرار الافتراضية:
أزرار صغيرة:
مثال
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
مجموعات الأزرار العمودية
يدعم Bootstrap 4 أيضًا مجموعات الأزرار العمودية:
استخدم الفصل .btn-group-verticalلإنشاء مجموعة أزرار عمودية:
مثال
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
مجموعات الأزرار المتداخلة والقوائم المنسدلة
مجموعات أزرار Nest لإنشاء قوائم منسدلة (ستتعلم المزيد عن القوائم المنسدلة في فصل لاحق):
مثال
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
تقسيم القوائم المنسدلة
مثال
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle
dropdown-toggle-split"
data-toggle="dropdown">
<span class="caret"></span>
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
مجموعة الأزرار العمودية مع القائمة المنسدلة
مثال
<div class="btn-group-vertical">
<button type="button" class="btn
btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
مجموعات الأزرار جنبًا إلى جنب
تكون مجموعات الأزرار "مضمنة" بشكل افتراضي ، مما يجعلها تظهر جنبًا إلى جنب عندما يكون لديك مجموعات متعددة:
مثال
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">BMW</button>
<button type="button" class="btn btn-primary">Mercedes</button>
<button type="button" class="btn btn-primary">Volvo</button>
</div>