Bootstrap- knoppiegroepe
Knoppie Groepe
Met Bootstrap kan jy 'n reeks knoppies saam (op 'n enkele reël) in 'n knoppiegroep groepeer:
Gebruik 'n <div>element met klas .btn-groupom 'n knoppiegroep te skep:
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>
Wenk: In plaas daarvan om knoppiegroottes op elke knoppie in 'n groep toe te pas, gebruik klas .btn-group-lg|sm|xsom alle knoppies in die groep te grootte:
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>
Vertikale knoppiegroepe
Bootstrap ondersteun ook vertikale knoppiegroepe:
Gebruik die klas .btn-group-verticalom 'n vertikale knoppiegroep te skep:
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>
Geregverdigde knoppiegroepe
Om oor die hele breedte van die skerm te strek, gebruik die .btn-group-justified
klas:
Voorbeeld met <a>elemente:
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>
Let wel: Vir <button>elemente moet jy elke knoppie in 'n .btn-groupklas toevou:
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>
Neste-knoppiegroepe en aftrekkieslys
Nest-knoppiegroepe om aftrekkieslyste te skep:
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>
Verdeelknoppie-aftrekkies
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>