مجموعات زر التمهيد
مجموعات الأزرار
يتيح لك Bootstrap تجميع سلسلة من الأزرار معًا (على سطر واحد) في مجموعة أزرار:
استخدم <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|sm|xsحجم جميع الأزرار في المجموعة:
مثال
<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 أيضًا مجموعات الأزرار العمودية:
استخدم الفصل .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>
مجموعات الأزرار المضبوطة
لتوسيع عرض الشاشة بالكامل ، استخدم .btn-group-justified
الفئة:
مثال <a>بالعناصر:
مثال
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apple</a>
<a href="#" class="btn btn-primary">Samsung</a>
<a href="#" class="btn btn-primary">Sony</a>
</div>
ملاحظة: بالنسبة <button>للعناصر ، يجب عليك التفاف كل زر في .btn-groupالفصل الدراسي:
مثال
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Samsung</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
</div>
</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 <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>
</div>
تقسيم القوائم المنسدلة
مثال
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>