المجموعات زر
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-* لحجم كل الأزرار في المجموعة:
مثال
<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> انها محاولة لنفسك » زر تداخل المجموعات والقوائم المنسدلة
مجموعة زر عش لخلق القوائم المنسدلة:
مثال
<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> انها محاولة لنفسك » DROPDOWNS زر تقسيم
مثال
<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> انها محاولة لنفسك » اختبر نفسك مع تمارين!
التمرين 1 » التمرين 2» التمرين 3 » التمرين 4» التمرين 5 »