Bootstrap adalah toolkit open source yang diluncurkan oleh Twitter untuk pengembangan front-end. Ini dikembangkan oleh perancang Twitter Mark Otto dan Jacob Thornton dan merupakan kerangka kerja CSS/HTML.
Grup tombol
.btn-group> .btn: satu set tombol .btn dibungkus dengan .btn-group
Outsourcing elemen.btn-group {position/display/}
Elemen tombol.btn
<Div Role = "Group"> <tombol type = "Tombol"> Kiri </button> <tombol type = "Tombol"> Middle </buttond
Toolbar Tombol
.btn-toolbar> .btn-group
Outsourcing element.btn-toolbar {margin-left}
<Div Role = "ToolBar"> <Div Role = "Group"> ... </div> <Div Role = "Group"> ... </div> <Div Role = "Group"> ... </div> </div>
Ukuran tombol
.btn-group-*(lg/md/sm/xs)
.btn-group-*>. btn {padding/font-size/border-radius}
<div> <button> Kiri </button> <button> tengah </button> <button> Kanan </button> </div>
Tombol bersarang
.btn-group nesting.btn-group
<div role="btn-group"><button>Button1</button><button>Button2</button><div role="btn-group"><button data-toggle="dropdown">Drag down<span></span></button><ul><li><a>Project 1</a></li><li><a>Project 2</a></li></ul></div></div>
Grup tombol diatur secara vertikal
.btn-group-vertikal
<Div Role = "btn-group"> ... </div>
Sejajarkan kedua ujung grup tombol
Itu dimanifestasikan sebagai mengisi lebar elemen induk
Kelemahan: Karena margin tidak mendukung tampilan: sel meja; Efek perbatasan ganda akan muncul
Need Button Nesting.Btn-group-dibenarkan {display/width/float}
<Div Role = "Group"> <Div Role = "Group"> <button> kiri </button> </div> <Div Role = "Group"> <button> Kiri </button> </div> <Div Role = "Group"> <tombol data-kilat = "dropdown"> Benar <span> </span> </button> <ul> <li> <a> item1 </a> </li> <li> <a> item2 </a> </li> </ul> </div> </div>
Menu drop-down bergaya tombol
Outsourcing elemen class.btn-group {display/position}
Mengandalkan plugin menu drop-down
Menu drop-down tombol tunggal
<Div Role = "Group"> <tombol data-koggle = "dropdown"> <span> </span> </button> <ul> <li> <a href = ""> item1 </a> </li> <li> <a href = ""> item2 </a> </li> </ul> </div>
Menu pull-down tombol pisahkan
<div> <button> Tombol </button> <tombol data-koggle = "dropdown"> <span> </span> </button> <ul> <li> <a href = ""> item1 </a> </li> <li> <a href = ""> item2 </a> </li> </ul> </div>
Ukuran menu drop-down tombol
Control size.btn-*:. btn-lg/btn-sm/btn-xs {padding/font-size/border-radius}
<div> <tombol data-koggle = "dropdown"> Tombol <span> </span> </button> <ul> <li> <a href = "" item1 </a> </li> <li> <a href = ""> item2 </a> </li> </ul> </div>
Menu popup
Kontrol Pop-up Direction.dropup: .dropup.drop-menu {Bottom/Margin-Bottom}
<div> <tombol data-koggle = "dropdown"> Tombol <span> </span> </button> <ul> <li> <a href = "" item1 </a> </li> <li> <a href = ""> item2 </a> </li> </ul> </div>
Di atas adalah pengetahuan yang relevan tentang tombol Bootstrap Component (2) yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda!