مجموعة الأزرار هي أيضًا مكون مستقل. مجموعة الأزرار هي نفس مكون القائمة المنسدلة ويحتاج إلى الاعتماد على المكون الإضافي للزر.
ادمج مجموعة من <viv> في واحد <Div> لجعل مكونات أكثر تعقيدًا.
<div rob = "شريط الأدوات"> <viv> <button type = "button"> 1 </button> <button type = "button"> 2 </button> <button type = "button"> 3 </button> <button type = "button"> 4 <///////"type ="/"button> </div> اكتب = "زر"> 7 </button> <button type = "button"> 8 </buttan
تبدو القائمة المنسدلة للزر فقط مثل القائمة المنسدلة. الفرق الوحيد بينهما هو أن الحاوية الخارجية div.dropdown يتم استبدالها بمجموعة div.btn-group
<viv> <button data-toggle = "sropdown"> زر القائمة المنسدلة <span> </span> </button> <ul> <li> <A HREF = "#"> قائمة قائمة 1 </a> </li> <li> <li> <a href = "#"> قائمة القائمة 2 </a> </li> <li> HREF = "#"> قائمة قائمة القائمة 4 </a> </li> <li> <a href = "#"
ملف bootstrap.css
.btn-group .dropdown-toggle: نشط ، .btn-group.open .dropdown-toggle {Outline: 0 ؛}. Padding-Left: 8px ؛}. padding-left: 12px ؛}. box-shadow: inset 0 3px 5px rgba (0 ، 0 ، 0 ، .125) ؛}. مربع الشادو: لا شيء ؛}المثلث الصعودي لأعلى من الزر
المثلث الأسفل للزر هو عن طريق إضافة عنصر علامة Span إلى علامة الزر ، واسم الفئة هو .Caret
<button button data-toggle = "sropdown"> القائمة المنسدلة <span> </span> </button>
يتم تنفيذ هذا المثلث من خلال CSS. فيما يلي رمز المصدر لـ bootstrap.css:
.caret {display: inline block ؛ العرض: 0 ؛ الارتفاع: 0 ؛ الهامش اليساري: 2px ؛ المحاذاة الرأسية: الأوسط ؛ أعلى الحدود: 4 بكسل الصلبة. اليمين الحدودي: 4 بكسل شفاف صلب ؛ الحدود اليسرى: 4 بكسل شفاف صلب ؛}ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون مفيدًا لتعلم الجميع.