Bootstrap 4- knoppie-groepe
Knoppie Groepe
Met Bootstrap 4 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-lgvir 'n groot knoppiegroep of die .btn-group-smvir 'n klein knoppiegroep:
Groot knoppies:
Verstekknoppies:
Klein knoppies:
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 4 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>
Neste-knoppiegroepe en aftrekkieslys
Nest-knoppiegroepe om aftrekkieslyste te skep (jy sal meer oor aftrekkies in 'n latere hoofstuk leer):
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
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</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
dropdown-toggle-split"
data-toggle="dropdown">
<span class="caret"></span>
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
Vertikale knoppiegroep met aftreklys
Voorbeeld
<div class="btn-group-vertical">
<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
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
Knoppiegroepe langs mekaar
Knoppiegroepe is by verstek "inlyn", wat hulle langs mekaar laat verskyn wanneer jy veelvuldige groepe het:
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>
<div class="btn-group">
<button type="button" class="btn btn-primary">BMW</button>
<button type="button" class="btn btn-primary">Mercedes</button>
<button type="button" class="btn btn-primary">Volvo</button>
</div>