مجموعة أزرار التمهيد
تتيح مجموعة أزرار أزرار متعددة لتكون مكدسة على نفس الخط. عندما تريد محاذاة أزرار معا، وهو أمر مفيد للغاية. يمكنك التمهيد زر (زر) المكونات في إضافة خانة الاختيار ونمط مربع جافا سكريبت سلوك اختياري.
ويلخص الجدول التالي بعض من التمهيد الدرجة المهم استخدام الأزرار التي تقدمها المجموعة:
| Class | 描述 | 代码示例 |
|---|
| .btn-group | 该 class 用于形成基本的按钮组。在.btn-group中放置一系列带有 class.btn的按钮。 |
<div class="btn-group">
<button type="button" class="btn btn-default">Button1</button>
<button type="button" class="btn btn-default">Button2</button>
</div>
|
| .btn-toolbar | 该 class 有助于把几组 <div class="btn-group"> 结合到一个 <div class="btn-toolbar"> 中，一般获得更复杂的组件。 |
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">...</div>
<div class="btn-group">...</div>
</div>
|
| .btn-group-lg, .btn-group-sm, .btn-group-xs | 这些 class 可应用到整个按钮组的大小调整，而不需要对每个按钮进行大小调整。 |
<div class="btn-group btn-group-lg">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>
|
| .btn-group-vertical | 该 class 让一组按钮垂直堆叠显示，而不是水平堆叠显示。 |
<div class="btn-group-vertical">
...
</div>
|
المجموعات الأساسية من الأزرار
يوضح المثال التالي الجدول أعلاه لمناقشة استخدامالطبقة .btn-مجموعة:
أمثلة
<div الطبقة = "BTN-مجموعة">
<زر اكتب = "زر" الطبقة = "BTN BTN الافتراضي" > زر 1 </ زر>
<زر اكتب = "زر" الطبقة = "BTN BTN الافتراضي" > زر 2 </ زر>
<زر اكتب = "زر" الطبقة = "BTN BTN الافتراضي" > زر 3 </ زر>
</ div>
وكانت النتائج على النحو التالي:
زر على شريط الأدوات
يوضح المثال التالي الجدول أعلاه تمت مناقشتها فيالدرجة .btn-شريط الأدوات لاستخدام:
أمثلة
<div الطبقة = "BTN-شريط الأدوات" دور = "شريط الأدوات">
<div الطبقة = "BTN-مجموعة">
<زر اكتب = "زر" الطبقة = "BTN BTN الافتراضي" > زر 1 </ زر>
<زر اكتب = "زر" الطبقة = "BTN BTN الافتراضي" > زر 2 </ زر>
<زر اكتب = "زر" الطبقة = "BTN BTN الافتراضي" > زر 3 </ زر>
</ div>
<div الطبقة = "BTN-مجموعة">
<زر اكتب = "زر" الطبقة = "BTN BTN الافتراضي" > زر 4 </ زر>
<زر اكتب = "زر" الطبقة = "BTN BTN الافتراضي" > زر 5 </ زر>
<زر اكتب = "زر" الطبقة = "BTN BTN الافتراضي" > زر 6 </ زر>
</ div>
<div الطبقة = "BTN-مجموعة">
<زر اكتب = "زر" الطبقة = "BTN BTN الافتراضي" > أزرار 7 </ زر>
<زر اكتب = "زر" الطبقة = "BTN BTN الافتراضي" > زر 8 </ زر>
<زر اكتب = "زر" الطبقة = "BTN BTN الافتراضي" > زر 9 </ زر>
</ div>
</ div>
وكانت النتائج على النحو التالي:
حجم الزر
يوضح المثال التالي مناقشة الجدول أعلاه إلىالطبقة .btn-group- * الاستخدام:
أمثلة
<div الطبقة = "BTN-مجموعة btn- جماعة إل جي">
<زر اكتب = "زر" الطبقة = "BTN BTN الافتراضي" > زر 1 </ زر>
<زر اكتب = "زر" الطبقة = "BTN BTN الافتراضي" > زر 2 </ زر>
<زر اكتب = "زر" الطبقة = "BTN BTN الافتراضي" > زر 3 </ زر>
</ div>
<div الطبقة = "BTN-مجموعة btn- جماعة خ">
<زر اكتب = "زر" الطبقة = "BTN BTN الافتراضي" > زر 4 </ زر>
<زر اكتب = "زر" الطبقة = "BTN BTN الافتراضي" > زر 5 </ زر>
<زر اكتب = "زر" الطبقة = "BTN BTN الافتراضي" > زر 6 </ زر>
</ div>
<div الطبقة = "BTN-مجموعة btn- جماعة XS">
<زر اكتب = "زر" الطبقة = "BTN BTN الافتراضي" > أزرار 7 </ زر>
<زر اكتب = "زر" الطبقة = "BTN BTN الافتراضي" > زر 8 </ زر>
<زر اكتب = "زر" الطبقة = "BTN BTN الافتراضي" > زر 9 </ زر>
</ div>
وكانت النتائج على النحو التالي:
التعشيش
يمكنك عش مجموعة زر آخر ضمن مجموعة، وهذا هو، داخل عش.btn-مجموعة-مجموعة .btn آخر.عند استخدام مزيج من سلسلة من الأزرار والقوائم المنسدلة لجعل، وسوف تستخدم هذه.
أمثلة
<div الطبقة = "BTN-مجموعة">
<زر اكتب = "زر" الطبقة = "BTN BTN الافتراضي" > زر 1 </ زر>
<زر اكتب = "زر" الطبقة = "BTN BTN الافتراضي" > زر 2 </ زر>
<div الطبقة = "BTN-مجموعة">
<زر اكتب = "زر" الطبقة = "BTN BTN الافتراضي المنسدلة -toggle" بيانات تبديل = "المنسدلة"> هذه <SPAN الطبقة = "الإقحام"> </ SPAN>
</ زر>
<UL الطبقة = "المنسدلة-القائمة">
<لي> <ل أ href = "#"> رابط المنسدلة 1 </ أ> </ لى >
<لي> <ل أ href = "#"> رابط المنسدلة 2 </ أ> </ لى >
</ UL>
</ div>
</ div>
وكانت النتائج على النحو التالي:
مجموعة أزرار عمودية
يوضح المثال التالي مناقشة الجدول أعلاه إلىالطبقة .btn-مجموعة-العمودية الاستخدام:
أمثلة
<div الطبقة = "BTN-مجموعة-العمودي ">
<زر اكتب = "زر" الطبقة = "BTN BTN الافتراضي" > زر 1 </ زر>
<زر اكتب = "زر" الطبقة = "BTN BTN الافتراضي" > زر 2 </ زر>
<div الطبقة = "BTN-مجموعة-العمودي ">
<زر اكتب = "زر" الطبقة = "BTN BTN الافتراضي المنسدلة -toggle" ، تبديل البيانات = "المنسدلة"> القائمة المنسدلة <SPAN الطبقة = "الإقحام"> </ SPAN>
</ زر>
<UL الطبقة = "المنسدلة-القائمة">
<لي> <ل أ href = "#"> رابط المنسدلة 1 </ أ> </ لى >
<لي> <ل أ href = "#"> رابط المنسدلة 2 </ أ> </ لى >
</ UL>
</ div>
</ div>
وكانت النتائج على النحو التالي:
