กลุ่มปุ่มยังเป็นองค์ประกอบอิสระ กลุ่มปุ่มนั้นเหมือนกับส่วนประกอบเมนูแบบเลื่อนลงและจำเป็นต้องพึ่งพาปลั๊กอินปุ่ม. js เป็นฟังก์ชั่นปกติ
รวมกลุ่มของ <div> เป็นหนึ่ง <div> เพื่อสร้างส่วนประกอบที่ซับซ้อนมากขึ้น
<div role = "toolbar"> <div> <button type = "ปุ่ม"> 1 </button> <button type = "ปุ่ม"> 2 </button> <button type = "ปุ่ม"> 3 </button> <button type = "ปุ่ม"> 4 </button> <button type = "ปุ่ม" type = "ปุ่ม"> 7 </button> <button type = "ปุ่ม"> 8 </button> </div> <div> <button type = "ปุ่ม"> 9 </button> </div> </div>
เมนูแบบเลื่อนลงของปุ่มดูเหมือนเมนูแบบเลื่อนลงเท่านั้น ความแตกต่างเพียงอย่างเดียวระหว่างพวกเขาคือคอนเทนเนอร์ภายนอก div.dropdown จะถูกแทนที่ด้วย div.btn-group
<div> <button data-toggle = "dropdown"> เมนูแบบเลื่อนลงของปุ่ม <san> </span> </ปุ่ม> <ul> <li> <a href = "#"> รายการเมนู 1 </a> </li> <li> <a href = "#"> รายการเมนู 2 </a> </li> <li> <li> href = "#"> รายการเมนู 4 </a> </li> <li> <a href = "#"> รายการเมนู 5 </a> </li> </ul> </div>
ไฟล์ bootstrap.css
.BTN-Group .DropDown-Toggle: Active, .btn-group.open .dropdown-Toggle {โครงร่าง: 0;}. BTN-Group> .Btn + .Dropdown-Toggle {Padding-Right: 8px; Padding-Left: 8px;}. BTN-Group> .Btn-lg + .Dropdown-Toggle {Padding-Right: 12px; Padding-left: 12px;}. btn-group.open .dropdown-toggle {-webkit-box-shadow: inset 0 3px 5px rgba (0, 0, 0, .125); Box-shadow: inset 0 3px 5px rgba (0, 0, 0, .125);}. btn-group.open .dropdown-toggle.btn-link {-webkit-box-shadow: ไม่มี; Box-Shadow: ไม่มี;}สามเหลี่ยมขึ้นด้านบนของปุ่ม
รูปสามเหลี่ยมล่างของปุ่มคือการเพิ่มองค์ประกอบแท็ก span ลงในแท็กปุ่มและชื่อคลาสคือ.
<button data-toggle = "dropdown"> เมนูแบบเลื่อนลงของปุ่ม <san> </span> </button>
รูปแบบสามเหลี่ยมนี้ดำเนินการผ่าน CSS ต่อไปนี้เป็นซอร์สโค้ดของ bootstrap.css:
.Caret {แสดง: Inline-block; ความกว้าง: 0; ความสูง: 0; ขอบซ้าย: 2px; แนวตั้ง-แนว: กลาง; ชายแดนด้านบน: 4px Solid; ชายแดนขวา: 4px ของแข็งโปร่งใส; ชายแดนซ้าย: 4px แข็งโปร่งใส;}ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน