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ɔ.

Nin ɲɛ in kan

Misali jɔnjɔn

Aw bɛ butɔni dɔw siri ni .btnin 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ɔ roleka 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 dira yan, an bɛ baara Kɛ ni aria-label, nka fɛɛrɛ wɛrɛw i n’a fɔ aria-labelledbyolu 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 .navnavigatiɔn yɔrɔw ma .

Lien actif Ka tugu Ka tugu

<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ɲɛ.

Box 1 lajɛ A’ ye yɔrɔ lajɛ 2nan na A’ ye yɔrɔ lajɛ 3nan na

<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>

Arajo 1. Bamako, Mali Arajo 2nan Arajo 3nan

<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 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 donnakow 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 ka dɔ Fàra dɔrɔn .btn-group-*kelen-kelen bɛɛ .btn-groupkan , 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>

Nesting (kɔnɔnafili).

Aw bɛ dɔ bila dɔ .btn-groupwɛrɛ kɔnɔ .btn-groupni 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.