กลุ่มปุ่มนั้นเหมือนกับส่วนประกอบเมนูแบบเลื่อนลงและจำเป็นต้องพึ่งพาปลั๊กอินปุ่ม JS เพื่อให้ทำงานได้อย่างถูกต้อง
แง่มุมโครงสร้าง: ใช้คอนเทนเนอร์ที่มีชื่อคลาส BTN-Group และวางปุ่มหลายปุ่มในคอนเทนเนอร์นี้
กลุ่มปุ่มยังเป็นองค์ประกอบอิสระดังนั้นไฟล์ต้นฉบับที่เกี่ยวข้องสามารถพบได้:
น้อยลง: ปุ่มไม่มี
Sass: _buttons.scss
CSS: Bootstrap.css Line 3131 ~ 3291
<div> <button type = "ปุ่ม"> <span> </span> </button> … <button type = "ปุ่ม"> <span> </span> </button> </div>
CSS:
.BTN-Group, .BTN-Group-Vertical {ตำแหน่ง: ญาติ; แสดง: Inline-Block; แนวตั้ง-แนวตั้ง: กลาง;}. BTN-Group> .Btn, .Btn-group-vertical> .BTN {ตำแหน่ง: float: ซ้าย; .BTN: โฟกัส, .BTN-Group-Vertical> .BTN: โฟกัส, .BTN-Group-Vertical> .BTN: active, .btn-group-vertical> .btn: active, .btn-group> .btn.active, .btn-group-vertical {โครงร่าง: ไม่มี;}. btn-group .btn + .btn, .btn-group .btn + .btn-group, .btn-group .btn-group + .btn-group {margin-left: -1px;}นอกเหนือจากการใช้องค์ประกอบ <button> คุณยังสามารถใช้องค์ประกอบแท็กอื่น ๆ เช่นแท็ก <a> สิ่งเดียวที่จะทำให้แน่ใจได้คือไม่ว่าแท็กจะใช้อะไรองค์ประกอบแท็กในคอนเทนเนอร์. BTN-Group จำเป็นต้องมีชื่อคลาส BTN
มุมทั้งสี่ของกลุ่มปุ่มคือมุมโค้งมนทั้งหมดยกเว้นปุ่มแรกและปุ่มสุดท้ายที่มีมุมโค้งมนที่ขอบปุ่มอื่น ๆ ไม่มีมุมกลม
คำอธิบายโดยละเอียด:
1. ค่าเริ่มต้น: ปุ่มทั้งหมดเป็นมุมโค้งมน
2. ยกเว้นปุ่มแรกและปุ่มสุดท้ายปุ่มอื่น ๆ จะถูกปัดเศษ
3. ปุ่มสุดท้ายจะถูกทิ้งไว้เป็นมุมโค้งมนและมุมขวาล่างเท่านั้น
ซอร์สโค้ด:
.BTN-Group> .BTN: ไม่ (: ลูกคนแรก): ไม่ (: เด็กสุดท้าย): ไม่ (.DropDown-Toggle) {Border-Radius: 0;}. BTN-Group> .Btn: เด็กแรก {Margin-left: 0;}. btn-group> .Btn {ชายแดน-ขวา-ขวา--radius: 0; ขอบล่าง-ขวา-ขวา-ขวา: 0;}. btn-group> .btn: Last-Child: ไม่ (: ลูกคนแรก), Btn-group> .dropdown-toggle: ไม่ (: ลูกคนแรก) {float: ซ้าย;}. btn-group> .btn-group: ไม่ (: เด็กแรก): ไม่ (: last-child)> .btn {Border-Radius: 0;}. Btn-Group> .Btn-Group: First-Child> .Btn: Last-Child 0; ชายแดนด้านล่างขวา-ขวา: 0;}. BTN-Group> .Btn-Group: Last-Cild> .Btn: ลูกคนแรก {ชายแดนด้านซ้าย-ซ้าย-ซ้าย---0;แถบเครื่องมือกลุ่มปุ่ม
ในตัวแก้ไขข้อความที่อุดมไปด้วยกลุ่มปุ่มจัดเรียงกันเช่นคัดลอกตัดวางกลุ่มจัดตำแหน่งซ้ายตรงกลางขวาและสองปลายและใช้ปุ่มเครื่องมือ bootstrap btn-toolbar
<div> <div> … </div> <div> … </div> </div> … </div> </div> … </div> </div> … </div> </div>
หลักการ: ส่วนใหญ่ปล่อยให้องค์ประกอบหลายกลุ่ม. btn-group ลอยและเก็บระยะห่างด้านนอก 5px ซ้ายระหว่างกลุ่ม
.BTN-TOOLBAR {MARGIN-Left: -5PX;}. BTN-TOOLBAR .BTN-Group, .BTN-TOOLBAR .input-Group {Float: ซ้าย;}. Btn-Toolbar> .Btn, .btn-toolbar> .Btn-Groupหมายเหตุที่ล้างการลอยบน btn-toolbar
.BTN-TOOLBAR: ก่อนหน้า, .BTN-TOOLBAR: หลังจาก {แสดง: ตาราง; เนื้อหา: "";}. BTN-TOOLBAR: หลังจาก {เคลียร์: ทั้งสอง;}ตัวอย่าง:
<div> <div> <button type = "ปุ่ม"> <span> </span> </ปุ่ม> <button type = "ปุ่ม"> <span> </span> </ปุ่ม> <button> <button> </span> </button> <button type = "span> </span>
การจัดกลุ่มการทำรัง
หลายครั้งที่เราจัดกลุ่มปุ่มของเมนูดรอปดาวน์ร่วมกันเพื่อให้ได้เอฟเฟกต์คล้ายกับเมนูการนำทาง:
เมื่อใช้งานเพียงแค่เปลี่ยนชื่อคลาสของคอนเทนเนอร์แบบเลื่อนลงที่ทำเมนูแบบเลื่อนลงก่อนที่จะเป็น BTN-Group และวางไว้ในระดับเดียวกับปุ่มปกติ:
<div> <button type = "ปุ่ม"> home </button> <button type = "ปุ่ม"> การแสดงผลผลิตภัณฑ์ </button> <button type = "ปุ่ม"> การวิเคราะห์ตัวพิมพ์ใหญ่ </button> <button type = "ปุ่ม"> ติดต่อเรา </button> <div> <button data-toggle = "dropdown" type = "ปุ่ม"> โปรไฟล์ </a> </li> <li> <a href = "#"> วัฒนธรรมองค์กร </a> </li> <li> <a href = "#"> โครงสร้างองค์กร </a> </li> <li> <a href = "#"> บริการลูกค้า </a> </li> > .Btn-Group: ไม่ (: เด็กคนแรก): ไม่ (: Last-Child)> .Btn {Border-Radius: 0;}. BTN-Group> .Btn-Group: First-Child, .Btn-Group> .Btn-Group: First-Child> .Dropdown-toggle .BTN-Group: Last-Child> .BTN: ลูกคนแรก {ชายแดนด้านซ้าย-ซ้าย-ไรเดอัส: 0; ชายแดนด้านล่างซ้าย-ซ้าย------0;}. BTN-group. DROPDOWN-TOGGLE: active, .BTN-group.Open .DropDown-toggle 8px; Padding-Left: 8px;}. Btn-Group> .btn-lg + .dropdown-Toggle {padding-right: 12px; Padding-left: 12px;}. btn-group.open .dropdown-toggle {-webkit-box-shadow .125); Box-Shadow: Inset 0 3PX 5PX RGBA (0, 0, 0, .125);}. btn-group.open .dropdown-toggle.btn-link {-webkit-box-shadow: ไม่มี; Box-Shadow: ไม่มี;ปุ่มจัดกลุ่มในแนวตั้ง
เพียงแทนที่ชื่อคลาสที่จัดกลุ่มในแนวนอน. BTN-Group ด้วย. BTN-Group-Vertical
<div> <button type = "ปุ่ม"> home </button> <button type = "ปุ่ม"> การแสดงผลผลิตภัณฑ์ </button> <button type = "ปุ่ม"> การวิเคราะห์ตัวพิมพ์ใหญ่ </button> <button type = "ปุ่ม"> ติดต่อเรา </button> <div> <button data-toggle = "dropdown" type = "ปุ่ม"> โปรไฟล์ </a> </li> <li> <a href = "#"> วัฒนธรรมองค์กร </a> </li> <li> <a href = "#"> โครงสร้างองค์กร </a> </li> <li> <a href = "#"> บริการลูกค้า </a> </li> .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, .BTN-Group-Vertical> .BTN + .BTN-Group, .BTN-Group-Vertical> .BTN-Group + .BTN, .BTN-Group-Vertical> .BTN-Group + .BTN-Group {margin-top: -1px; margin-left: 0;}. {ชายแดน-ขวา-ขวา-ไรเดอัส: 4px; ชายแดน-ล่าง-ขวา-ขวา-------บอตน์ {ชายแดน-ซ้าย-ซ้าย-ไรเดอัส: 0;}. btn-group-vertical> .btn: Last-child: ไม่ใช่ (: เด็กคนแรก) {ชายแดน 4px;}. btn-group-vertical> .btn-group: ไม่ (: ลูกคนแรก): ไม่ (: last-child)> .btn {Border-Radius: 0;}. BTN-Group-Vertical> .Btn-Group: First-Child: ไม่ใช่ (Last-Child)>. .BTN-Group: เด็กคนแรก: ไม่ (: Last-Child)> .Dropdown-Toggle {ชายแดน-ล่าง-ขวา-ไรเดอัส: 0; ขอบล่าง-ซ้าย-ซ้าย--ราดอุ่น: 0;}. btn-group-vertical> .btn-group: Last-Child: ไม่ใช่ (: First-child) >> 0;}ปุ่ม Equalization เรียกอีกอย่างว่าปุ่มปรับการจัดกลุ่ม:
ความกว้างของกลุ่มปุ่มทั้งหมดคือ 100% ของคอนเทนเนอร์และแต่ละปุ่มในกลุ่มปุ่มแบ่งความกว้างของคอนเทนเนอร์ทั้งหมด ตัวอย่างเช่นมีปุ่มห้าปุ่มในกลุ่มปุ่มแต่ละปุ่มคือ 20% ของความกว้างของคอนเทนเนอร์ มีปุ่มสี่ปุ่มในกลุ่มปุ่มแต่ละปุ่มคือ 25% ของความกว้างของคอนเทนเนอร์
วิธีการใช้
<div> <buttton type = "ปุ่ม"> home </buttton> <buttton type = "ปุ่ม"> การวิเคราะห์กรณี </buttton> <buttton type = "ปุ่ม"> ติดต่อเรา </buttton> </div> .BTN-Group {Display: Table-Cell; Float: None; Width: 1%;}. BTN-Group-Justified> .Btn-Group .BTN {WIDTH: 100%;}จำลอง. btn-group-justified ลงในตาราง (จอแสดงผล: ตาราง) และจำลองเทมเพลตปุ่มภายในเข้าไปในเซลล์ตาราง (จอแสดงผล: ตารางเซลล์)
หมายเหตุ: เมื่อสร้างกลุ่มของปุ่มเท่ากันให้ลองใช้แท็ก <a> เพื่อสร้างปุ่มเพราะเมื่อใช้องค์ประกอบแท็กปุ่มโดยใช้การแสดงผล: ตารางไม่เป็นมิตรที่จะรองรับในเบราว์เซอร์บางตัว
การอ่านที่แนะนำจาก wulin.com:
คำอธิบายโดยละเอียดของปุ่ม bootstrap
ด้านบนเป็นส่วนประกอบปุ่ม Bootstrap ที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ!