1. Home
  2. กลุ่มปุ่มบูต

บทช่วยสอน กลุ่มปุ่มบูต ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ กลุ่มพื้นฐานของปุ่ม,ตัวอย่าง,ปุ่มบนแถบเครื่องมือ,ตัวอย่าง,ขนาดของปุ่ม,ตัวอย่าง,การทำรัง,ตัวอย่าง,กลุ่มปุ่มแนวตั้ง,ตัวอย่าง,

กลุ่มปุ่มบูต

กลุ่มปุ่มช่วยให้ปุ่มหลายที่จะซ้อนกันในบรรทัดเดียวกัน เมื่อคุณต้องการที่จะปรับปุ่มด้วยกันซึ่งจะมีประโยชน์มาก คุณสามารถ บูตปุ่ม (ปุ่ม) plug-in เพื่อเพิ่มตัวเลือกกล่องกาและรูปแบบกล่องพฤติกรรม JavaScript

ตารางต่อไปนี้สรุปบางส่วนของเงินทุนชั้นที่สำคัญโดยใช้ปุ่มที่มีให้โดยกลุ่ม:

Class描述代码示例
.btn-group该 class 用于形成基本的按钮组。在.btn-group中放置一系列带有 class.btn的按钮。 
<div class="btn-group">
  <button type="button" class="btn btn-default">Button1</button>
   <button type="button" class="btn btn-default">Button2</button>
</div>
.btn-toolbar该 class 有助于把几组 <div class="btn-group"> 结合到一个 <div class="btn-toolbar"> 中，一般获得更复杂的组件。 
<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">th.</div>
  <div class="btn-group">th.</div>
</div>
.btn-group-lg, .btn-group-sm, .btn-group-xs这些 class 可应用到整个按钮组的大小调整，而不需要对每个按钮进行大小调整。 
<div class="btn-group btn-group-lg">th.</div>
<div class="btn-group btn-group-sm">th.</div>
<div class="btn-group btn-group-xs">th.</div>
.btn-group-vertical该 class 让一组按钮垂直堆叠显示，而不是水平堆叠显示。 
<div class="btn-group-vertical">
  th.
</div>

กลุ่มพื้นฐานของปุ่ม

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงตารางข้างต้นเพื่อหารือเกี่ยวกับการใช้งานของระดับ .btn-กลุ่ม:

ตัวอย่าง

<div class = "BTN กลุ่ม"> <ปุ่ม type = "ปุ่ม" class = "btn BTN-default" > ปุ่ม 1 </ ปุ่ม> <ปุ่ม type = "ปุ่ม" class = "btn BTN-default" > 2 ปุ่ม </ ปุ่ม> <ปุ่ม type = "ปุ่ม" class = "btn BTN-default" > 3 ปุ่ม </ ปุ่ม> </ div>

ลอง»

ผลมีดังนี้

กลุ่มพื้นฐานของปุ่ม

ปุ่มบนแถบเครื่องมือ

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงตารางข้างต้นจะกล่าวถึงในระดับ .btn แถบเครื่องมือที่จะใช้:

ตัวอย่าง

<div class = "BTN แถบเครื่องมือ" บทบาท = "แถบเครื่องมือ"> <div class = "BTN กลุ่ม"> <ปุ่ม type = "ปุ่ม" class = "btn BTN-default" > ปุ่ม 1 </ ปุ่ม> <ปุ่ม type = "ปุ่ม" class = "btn BTN-default" > 2 ปุ่ม </ ปุ่ม> <ปุ่ม type = "ปุ่ม" class = "btn BTN-default" > 3 ปุ่ม </ ปุ่ม> </ div> <div class = "BTN กลุ่ม"> <ปุ่ม type = "ปุ่ม" class = "btn BTN-default" > 4 ปุ่ม </ ปุ่ม> <ปุ่ม type = "ปุ่ม" class = "btn BTN-default" > ปุ่ม 5 </ ปุ่ม> <ปุ่ม type = "ปุ่ม" class = "btn BTN-default" > ปุ่ม 6 </ ปุ่ม> </ div> <div class = "BTN กลุ่ม"> <ปุ่ม type = "ปุ่ม" class = "btn BTN-default" > ปุ่ม 7 </ ปุ่ม> <ปุ่ม type = "ปุ่ม" class = "btn BTN-default" > ปุ่ม 8 </ ปุ่ม> <ปุ่ม type = "ปุ่ม" class = "btn BTN-default" > ปุ่ม 9 </ ปุ่ม> </ div> </ div>

ลอง»

ผลมีดังนี้

ปุ่มบนแถบเครื่องมือ

ขนาดของปุ่ม

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการอภิปรายตารางข้างต้นไปเรียน .btn-กลุ่มการใช้งาน *:

ตัวอย่าง

<div class = "BTN กลุ่ม btn- กลุ่ม LG"> <ปุ่ม type = "ปุ่ม" class = "btn BTN-default" > ปุ่ม 1 </ ปุ่ม> <ปุ่ม type = "ปุ่ม" class = "btn BTN-default" > 2 ปุ่ม </ ปุ่ม> <ปุ่ม type = "ปุ่ม" class = "btn BTN-default" > 3 ปุ่ม </ ปุ่ม> </ div> <div class = "BTN กลุ่ม btn- กลุ่มเอสเอ็ม"> <ปุ่ม type = "ปุ่ม" class = "btn BTN-default" > 4 ปุ่ม </ ปุ่ม> <ปุ่ม type = "ปุ่ม" class = "btn BTN-default" > ปุ่ม 5 </ ปุ่ม> <ปุ่ม type = "ปุ่ม" class = "btn BTN-default" > ปุ่ม 6 </ ปุ่ม> </ div> <div class = "BTN กลุ่ม btn- กลุ่ม XS"> <ปุ่ม type = "ปุ่ม" class = "btn BTN-default" > ปุ่ม 7 </ ปุ่ม> <ปุ่ม type = "ปุ่ม" class = "btn BTN-default" > ปุ่ม 8 </ ปุ่ม> <ปุ่ม type = "ปุ่ม" class = "btn BTN-default" > ปุ่ม 9 </ ปุ่ม> </ div>

ลอง»

ผลมีดังนี้

ขนาดของกลุ่มที่ปุ่ม

การทำรัง

คุณสามารถรังอีกกลุ่มปุ่มภายในกลุ่มที่เป็นภายใน.btn กลุ่มรังอีก .btn กลุ่มเมื่อคุณใช้การรวมกันของชุดของปุ่มและเมนูแบบเลื่อนลงเพื่อให้นี้จะถูกนำมาใช้

ตัวอย่าง

<div class = "BTN กลุ่ม"> <ปุ่ม type = "ปุ่ม" class = "btn BTN-default" > ปุ่ม 1 </ ปุ่ม> <ปุ่ม type = "ปุ่ม" class = "btn BTN-default" > 2 ปุ่ม </ ปุ่ม> <div class = "BTN กลุ่ม"> <ปุ่ม type = "ปุ่ม" class = "btn BTN-default เลื่อนลง -toggle" ข้อมูลสลับ = "เลื่อนลง"> เหล่านี้ <span class = "ลูกศร"> </ span> </ ปุ่ม> <ul class = "แบบเลื่อนลงเมนู"> <li> <a href = "#"> การเชื่อมโยงแบบเลื่อนลง 1 </ a> </ li > <li> <a href = "#"> การเชื่อมโยงแบบเลื่อนลง 2 </ a> </ li > </ ul> </ div> </ div>

ลอง»

ผลมีดังนี้

กลุ่มที่ซ้อนกันของปุ่ม

กลุ่มปุ่มแนวตั้ง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการอภิปรายตารางข้างต้นเพื่อกลุ่มแนวตั้ง .btnใช้คลาส:

ตัวอย่าง

<div class = "BTN กลุ่มแนวตั้ง "> <ปุ่ม type = "ปุ่ม" class = "btn BTN-default" > ปุ่ม 1 </ ปุ่ม> <ปุ่ม type = "ปุ่ม" class = "btn BTN-default" > 2 ปุ่ม </ ปุ่ม> <div class = "BTN กลุ่มแนวตั้ง "> <ปุ่ม type = "ปุ่ม" class = "btn BTN-default เลื่อนลง -toggle" ข้อมูลสลับ = "เลื่อนลง"> เลื่อนลง <span class = "ลูกศร"> </ span> </ ปุ่ม> <ul class = "แบบเลื่อนลงเมนู"> <li> <a href = "#"> การเชื่อมโยงแบบเลื่อนลง 1 </ a> </ li > <li> <a href = "#"> การเชื่อมโยงแบบเลื่อนลง 2 </ a> </ li > </ ul> </ div> </ div>

ลอง»

ผลมีดังนี้

กลุ่มปุ่มแนวตั้ง

บทแนะนำยอดนิยม

Contact US

กลุ่มปุ่มบูต
10/30