مجموعة الأزرار هي نفس مكون القائمة المنسدلة ، ويحتاج إلى الاعتماد على المكون الإضافي للزر.
الجانب الهيكلي: استخدم حاوية تحمل اسم الفئة BTN-Group ووضع أزرار متعددة في هذه الحاوية.
مجموعة الأزرار هي أيضًا مكون مستقل ، لذلك يمكن العثور على ملف المصدر المقابل:
أقل: أزرار
Sass: _buttons.Scss
CSS: bootstrap.css خط 3131 ~ 3291
<div> <button type = "button"> <span> </span> </utton> ... <button type = "button"> <span> </span> </utton> </viv>
CSS:
.btn-group ، .btn-group-vertrical {الموضع: النسبية ؛ العرض: inline block ؛ algan-align: middle ؛}. .btn: hover ، .btn-group-vertical> .btn: focus ، .btn-group-vertical> .btn: focus ، .btn-group-vertical> .btn:. .btn: Focus ، .btn-group-vertrical> .btn: Focus {Outline: none ؛}.بالإضافة إلى استخدام عنصر <Nustom> ، يمكنك أيضًا استخدام عناصر العلامات الأخرى ، مثل علامة <A>. الشيء الوحيد الذي يجب التأكد منه هو أنه بغض النظر عن العلامة المستخدمة ، يحتاج عنصر العلامة في حاوية مجموعة .BTN
الزوايا الأربع لمجموعة الأزرار كلها زوايا مستديرة ، باستثناء الأزرار الأولى والأخيرة التي تحتوي على زوايا مدورة على الحواف ، لا تحتوي الأزرار الأخرى على زوايا مستديرة.
شرح مفصل:
1. الافتراضي: جميع الأزرار مدورة
2. باستثناء الزر الأول والزر الأخير ، سيتم تقريب الأزرار الأخرى.
3. لا يتم ترك الزر الأخير إلا كزوايا مدورة والزوايا اليمنى السفلية.
رمز المصدر:
.btn-group> .btn: not (: first-child): not (: child last): not (.dropdown-toggle) {border-radius: 0 ؛}. {border-top-right-radius: 0 ؛ Border-Bottom-Right-Radius: 0 ؛}. {float: left ؛}. 0 ؛ Border-Bottom-Right-Radius: 0 ؛}.زر مجموعة أدوات مجموعة
في محرر نصي غني ، ترتيب مجموعات الأزرار معًا ، مثل النسخ ، القطع ، لصق مجموعة ، محاذاة اليسار ، الوسط ، اليمين ونهايات ، واستخدم شريط أدوات زر الإطار BTN-Toolbar
<viv> <viv> ... </viv> <viv> ... </div> <viv> ... </viv> <viv> ... </viv> <viv> ... </viv> </viv>
المبدأ: دعنا تطفو مجموعات متعددة من حاوية.
.btn-toolbar {margin-left: -5px ؛}.لاحظ أنه مسح التعويم على BTN-Toolbar
.btn-toolbar: قبل ، .btn-toolbar: بعد {display: table ؛ المحتوى: "" ؛}.مثال:
<div> <viv> <button type = "button"> <span> </span> </utton> <button type = "button"> <span> </span> </button> <button> <button> </span> </sutric> <button type = "button"> </span>
زر التعشيش التجميع
في كثير من الأحيان ، نرتب مجموعات الأزرار من القائمة المنسدلة معًا لتحقيق تأثير مشابه لقائمة التنقل:
عند استخدامه ، ما عليك سوى تغيير اسم فئة الحاوية المنسدلة التي جعلت القائمة المنسدلة من قبل إلى BTN-Group ووضعها على نفس مستوى الزر العادي:
<div> <button type = "button"> home </utton> <button type = "button"> عرض المنتج </button> <button type = "button"> تحليل الحالة </button> <button type = "button"> اتصل بنا </button> <viv> <button-toggle = "typedown" type = "button" ملف تعريف </a> </li> <li> <a href = "#"> ثقافة الشركات </a> </li> <li> <a href = "#" اليسار ؛}. 0 ؛}. .dropdown-toggle {padding-right: 8px ؛ padding-left: 8px ؛}. RGBA (0 ، 0 ، 0 ، .125) ؛ box-shadow: inset 0 3px 5px rgba (0 ، 0 ، 0 ، .125) ؛}.أزرار تم تجميعها رأسياً
ما عليك سوى استبدال اسم الفئة المجمعة أفقياً.
<div> <button type = "button"> home </utton> <button type = "button"> عرض المنتج </button> <button type = "button"> تحليل الحالة </button> <button type = "button"> اتصل بنا </button> <viv> <button-toggle = "typedown" type = "button" ملف تعريف </a> </li> <li> <a href = "#"> ثقافة الشركات </a> </li> <li> <a href = "#" .btn-group ، .btn-group-vertical> .btn-group ، .btn-group-vertical> .btn-group-vertical> .btn-group-vertical> .btn {display: block ؛ float: none ؛ width: 100 ٪ ؛ max-width: 100 ٪ ؛}. . .btn: not (: first-child): not (: child-child) {border-top-right-radius: 4px ؛ border-bottom-radius: .btn {border-bottom-left-radius: 0 ؛}. 0. .btn-group: أول-تشيلد: لا (: آخر-تشيلد)>. 0 ؛}يسمى زر المعادلة أيضًا زر التجميع التكيفي:
عرض مجموعة الأزرار بأكملها هو 100 ٪ من الحاوية ، وكل زر في مجموعة الأزرار يقسم عرض الحاوية بأكملها. على سبيل المثال ، هناك خمسة أزرار في مجموعة زر ، كل زر هو 20 ٪ من عرض الحاوية ؛ هناك أربعة أزرار في مجموعة زر ، كل زر هو 25 ٪ من عرض الحاوية ؛
طريقة التنفيذ: فقط أضف اسم فئة.
<viv> <buttton type = "button"> home </button> <buttton type = "button"> تحليل الحالة </buttton> <buttton type = "button" .btn ، .btn-group-Justified> .btn-group {display: table-cell ؛ float: none ؛ width: 1 ٪ ؛}.محاكاة .btn-group-تم تحديدها في جدول (العرض: الجدول) ، ومحاكاة قالب الزر داخل خلية جدول (عرض: خلايا الجدول).
ملاحظة: عند إنشاء مجموعة من الأزرار المتساوية ، حاول استخدام علامة <A> لصنع أزرار ، لأنه عند استخدام عناصر العلامات الزر ، استخدام العرض: الجدول ليس ودودًا لدعمه في بعض المتصفحات.
القراءات الموصى بها من wulin.com:
شرح مفصل لزر bootstrap
ما سبق هو مكون زر bootstrap الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا لك!