Grupi i butonave
Gruponi një seri butonash së bashku në një rresht të vetëm ose vendosni ato në një kolonë vertikale.
Shembull themelor
Mbështillni një seri butonash me .btn
në .btn-group
.
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
Sigurohuni të saktë role
dhe jepni një etiketë
Në mënyrë që teknologjitë ndihmëse (të tilla si lexuesit e ekranit) të përcjellin se një seri butonash është grupuar, role
duhet të sigurohet një atribut i përshtatshëm. Për grupet e butonave, kjo do të ishte role="group"
, ndërsa shiritat e veglave duhet të kenë një role="toolbar"
.
Për më tepër, grupeve dhe shiritave të veglave duhet t'u jepet një etiketë e qartë, pasi shumica e teknologjive ndihmëse përndryshe nuk do t'i shpallin ato, pavarësisht nga prania e atributit të saktë të rolit. Në shembujt e dhënë këtu, ne përdorim aria-label
, por alternativa të tilla si aria-labelledby
mund të përdoren gjithashtu.
Këto klasa gjithashtu mund të shtohen në grupe lidhjesh, si një alternativë ndaj .nav
komponentëve të navigimit .
<div class="btn-group">
<a href="#" class="btn btn-primary active" aria-current="page">Active link</a>
<a href="#" class="btn btn-primary">Link</a>
<a href="#" class="btn btn-primary">Link</a>
</div>
Stilet e përziera
<div class="btn-group" role="group" aria-label="Basic mixed styles example">
<button type="button" class="btn btn-danger">Left</button>
<button type="button" class="btn btn-warning">Middle</button>
<button type="button" class="btn btn-success">Right</button>
</div>
Stilet e përshkruara
<div class="btn-group" role="group" aria-label="Basic outlined example">
<button type="button" class="btn btn-outline-primary">Left</button>
<button type="button" class="btn btn-outline-primary">Middle</button>
<button type="button" class="btn btn-outline-primary">Right</button>
</div>
Kutitë e kontrollit dhe grupet e butonave të radios
Kombinoni kutinë e kontrollit të ngjashëm me butonat dhe butonat e ndërrimit të radios në një grup butonash me pamje pa probleme.
<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
<input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
<input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>
Shiriti i veglave të butonave
Kombinoni grupe të grupeve të butonave në shiritat e veglave të butonave për komponentë më kompleksë. Përdorni klasat e shërbimeve sipas nevojës për të ndarë grupet, butonat dhe më shumë.
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group me-2" role="group" aria-label="First group">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
<button type="button" class="btn btn-primary">4</button>
</div>
<div class="btn-group me-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-secondary">5</button>
<button type="button" class="btn btn-secondary">6</button>
<button type="button" class="btn btn-secondary">7</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-info">8</button>
</div>
</div>
Mos ngurroni të përzieni grupet e hyrjes me grupet e butonave në shiritat e veglave tuaja. Ngjashëm me shembullin e mësipërm, ka të ngjarë që do t'ju nevojiten disa shërbime për t'i vendosur gjërat siç duhet.
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group me-2" role="group" aria-label="First group">
<button type="button" class="btn btn-outline-secondary">1</button>
<button type="button" class="btn btn-outline-secondary">2</button>
<button type="button" class="btn btn-outline-secondary">3</button>
<button type="button" class="btn btn-outline-secondary">4</button>
</div>
<div class="input-group">
<div class="input-group-text" id="btnGroupAddon">@</div>
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
</div>
</div>
<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="First group">
<button type="button" class="btn btn-outline-secondary">1</button>
<button type="button" class="btn btn-outline-secondary">2</button>
<button type="button" class="btn btn-outline-secondary">3</button>
<button type="button" class="btn btn-outline-secondary">4</button>
</div>
<div class="input-group">
<div class="input-group-text" id="btnGroupAddon2">@</div>
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
</div>
</div>
Përmasat
Në vend që të aplikoni klasa për madhësinë e butonave për çdo buton në një grup, thjesht shtoni .btn-group-*
në secilin .btn-group
, duke përfshirë secilën kur futni grupe të shumta.
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
Folezimi
Vendosni një .btn-group
brenda një tjetri .btn-group
kur dëshironi që menutë rënëse të përzihen me një seri butonash.
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
</div>
Variacion vertikal
Bëni që një grup butonash të shfaqen vertikalisht dhe jo horizontalisht. Listat e butonave të ndarjes nuk mbështeten këtu.
<div class="btn-group-vertical">
...
</div>