Bootstrap เป็นชุดเครื่องมือโอเพนซอร์สที่เปิดตัวโดย Twitter สำหรับการพัฒนาส่วนหน้า มันได้รับการพัฒนาโดยนักออกแบบ Twitter Mark Otto และ Jacob Thornton และเป็นกรอบ CSS/HTML
กลุ่มปุ่ม
.btn-group> .btn: ชุดปุ่ม. btn ถูกห่อด้วย. btn-group
Elements.btn-Group {ตำแหน่ง/display/}
องค์ประกอบปุ่ม
<div role = "group"> <button type = "ปุ่ม"> ซ้าย </ปุ่ม> <button type = "ปุ่ม"> Middle </button> <button type = "ปุ่ม"> ขวา </button> </div>
แถบเครื่องมือปุ่ม
.BTN-TOOLBAR> .BTN-Group
Element.btn-toolbar {margin-left}
<div role = "toolbar"> <div role = "group"> ... </div> <div role = "กลุ่ม"> ... </div> <div role = "กลุ่ม"> ... </div> </div>
ขนาดปุ่ม
.BTN-Group-*(LG/MD/SM/XS)
.BTN-Group-*>. BTN {Padding/Font-Size/Border-Radius}
<div> <button> ซ้าย </putton> <button> Middle </ Button> <button> ขวา </button> </div>
การทำรังนก
.BTN-Group Nesting.btn-Group
<div role = "btn-group"> <button> button1 </button> <button> button2 </button> <div role = "btn-group"> <button data-toggle = "Dropdown"> ลาก </span> </da> <ul> <li> <a>
กลุ่มปุ่มจัดเรียงตามแนวตั้ง
.BTN-Group-Vertical
<div role = "btn-group"> ... </div>
จัดเรียงปลายทั้งสองของกลุ่มปุ่ม
มันเป็นที่ประจักษ์ว่าเติมความกว้างขององค์ประกอบหลัก
ข้อบกพร่อง: เนื่องจากมาร์จิ้นไม่รองรับการแสดงผล: ตารางเซลล์; ผลกระทบของเส้นขอบสองเท่าจะปรากฏขึ้น
ต้องการปุ่ม Nesting.btn-Group-justified {display/width/float}
<div role = "group"> <div role = "group"> <button> ซ้าย </button> </div> <div role = "กลุ่ม"> <button> ซ้าย </button> </div> <div role = "group"> <button data-toggle = "Dropdown"> <span> </span> </tond> <ul> <li> <a> รายการ 1 </a> </li> <li> <a> รายการ 2 </a> </li> </ul> </div> </div>
เมนูแบบเลื่อนลงสไตล์ปุ่ม
องค์ประกอบองค์ประกอบเอาท์ซอร์ส. btn-group {display/position
ใช้ปลั๊กอินเมนูแบบเลื่อนลง
เมนูแบบเลื่อนลงปุ่มเดียว
<div role = "group"> <button data-toggle = "Dropdown"> ปุ่ม <span> </span> </button> <ul> <li> <a href = ""> item1 </a> </li> <li> <a href = "" item2 </a> </li>
เมนูแบบเลื่อนลงปุ่ม
<div> <pution> ปุ่ม </button> <button data-toggle = "dropdown"> <span> </span> </button> <ul> <li> <a href = ""> รายการ 1 </a> </li> <li> <a href = "" item2 </a> </li>
ปุ่มขนาดเมนูแบบเลื่อนลง
size.btn-*:. btn-lg/btn-sm/btn-xs {padding/font-size/border-radius}
<div> <button data-toggle = "dropdown"> ปุ่ม <span> </span> </button> <ul> <li> <a href = ""> รายการ 1 </a> </li> <li> <a href = ""> รายการ 2 </a> </li>
เมนูป๊อปอัพขึ้น
ควบคุมทิศทางป๊อปอัพ DROPUP: .Dropup.Drop-Menu {ด้านล่าง/ส่วนล่าง-ล่าง}
<div> <button data-toggle = "dropdown"> ปุ่ม <span> </span> </button> <ul> <li> <a href = ""> รายการ 1 </a> </li> <li> <a href = ""> รายการ 2 </a> </li>
ข้างต้นเป็นความรู้ที่เกี่ยวข้องเกี่ยวกับปุ่ม Bootstrap (2) ปุ่มที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ!