Butɔn kulu
Butɔnw tugu-tugu ɲɔgɔn na kulu kelen kan tigɛli kelen kan walima k’u fara ɲɔgɔn kan kulu jɔlen dɔ kɔnɔ.
Misali jɔnjɔn
Aw bɛ butɔni dɔw siri ni .btn
in ye .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>
Aw bɛ aw jija a bɛnnen don role
ani ka sɛbɛn dɔ di a ma
Walasa dɛmɛni fɛɛrɛw (i n’a fɔ ɛkran kalanbagaw) ka se k’a jira ko butɔni dɔw sigilen bɛ kuluw kɔnɔ, fɛn bɛnnen dɔ role
ka kan ka di. Butɔn kuluw ta fan fɛ, o bɛna kɛ role="group"
, k’a sɔrɔ baarakɛminɛnw ka kan ka kɛ ni role="toolbar"
.
Ka fara o kan, kuluw ni baarakɛminɛnw ka kan ka taamasiyɛn jɛlen di u ma, bawo dɛmɛnfɛɛrɛ fanba tɛna u laseli kɛ, hali ni jɔyɔrɔko jogo ɲuman bɛ yen. Misali minnu bɛ yan, an bɛ baara Kɛ ni aria-label
, nka fɛɛrɛ wɛrɛw i n’a fɔ aria-labelledby
olu fana bɛ Se ka Kɛ.
O kalanw fana bɛ se ka fara jɛgɛnsira kuluw kan, i n’a fɔ sira wɛrɛ min bɛ kɛ ka ɲɛsin .nav
navigatiɔn yɔrɔw ma .
<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>
Styles ɲagaminenw
<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>
Fɛɛrɛ minnu ɲɛfɔlen don
<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>
Checkbox ani arajo butɔni kuluw
Butɔn i n’a fɔ jatebɔyɔrɔ ani arajo sɛgɛsɛgɛli butɔni fara ɲɔgɔn kan ka kɛ butɔni kulu ye min tɛ fɛn tiɲɛ.
<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>
Butɔn baarakɛminɛnw
Butɔn kuluw kuluw fara ɲɔgɔn kan ka kɛ butɔni baarakɛminɛnw ye walasa ka yɔrɔw sɔrɔ minnu ka gɛlɛn kosɛbɛ. Baara kɛ ni nafama kalanw ye i n’a fɔ a mago bɛ cogo min na walasa ka kuluw, butɔni ani fɛn wɛrɛw cɛ janya.
<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>
Aw kana siga ka donna-jɛkuluw ni butɔni kuluw ɲagami aw ka baarakɛminɛnw kɔnɔ. I n’a fɔ misali min bɛ sanfɛ, a ka c’a la, i mago bɛna kɛ nafamafɛn dɔw la hali ni walasa ka fɛnw bila yɔrɔ la ka ɲɛ.
<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>
Sizing (Sizing) kɛ
Sani i ka butɔni hakɛ jatebɔ kalanw Kɛ butɔni kelen-kelen bɛɛ kan kulu dɔ kɔnɔ, i bɛ dɔ Fàra dɔrɔn .btn-group-*
kelen-kelen bɛɛ .btn-group
kan , hali kelen-kelen bɛɛ n’i bɛ kulu caman 'kɔnɔ.
<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>
Denw dilanni
Aw bɛ dɔ bila dɔ .btn-group
wɛrɛ kɔnɔ .btn-group
ni aw b’a fɛ ka fɛnw jira minnu bɛ jigin ka ɲagami ni butɔni dɔw ye minnu bɛ tugu ɲɔgɔn na.
<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>
Yɛlɛma jɔlen
Aw bɛ butɔni kulu dɔ kɛ i n’a fɔ u bɛ ɲɔgɔn kan cogo tilennen na sanni u ka kɛ tilennen ye. Butɔn tila-tilalenw tɛ dɛmɛn yan.
<div class="btn-group-vertical">
...
</div>