Bootstrap- knopgroepen
Knop groepen
Met Bootstrap kunt u een reeks knoppen groeperen (op een enkele regel) in een knopgroep:
Gebruik een <div>element met klasse .btn-groupom een knopgroep te maken:
Voorbeeld
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Tip: in plaats van knopgroottes toe te passen op elke knop in een groep, gebruikt u klasse .btn-group-lg|sm|xsom alle knoppen in de groep de grootte te geven:
Voorbeeld
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Verticale knopgroepen
Bootstrap ondersteunt ook verticale knopgroepen:
Gebruik de klasse .btn-group-verticalom een verticale knopgroep te maken:
Voorbeeld
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Uitgevulde knopgroepen
Gebruik de .btn-group-justified
klasse om de volledige breedte van het scherm te overspannen:
Voorbeeld met <a>elementen:
Voorbeeld
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apple</a>
<a href="#" class="btn btn-primary">Samsung</a>
<a href="#" class="btn btn-primary">Sony</a>
</div>
Opmerking: voor <button>elementen moet u elke knop in een .btn-groupklasse inpakken:
Voorbeeld
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Samsung</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div>
Knopgroepen en vervolgkeuzemenu's nesten
Nest-knopgroepen om vervolgkeuzemenu's te maken:
Voorbeeld
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>
</div>
Vervolgkeuzemenu's voor splitsen
Voorbeeld
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>