Tɛmɛn ka taa kunnafoni kunbabaw la Tɛmɛn ka taa docs navigation kan
Check
in English

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.

html ye 
<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 roleani 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
html ye 
<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

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

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

html ye 
<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>
html ye 
<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.

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

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



html ye 
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
  <button type="button" class="btn btn-outline-dark">Left</button>
  <button type="button" class="btn btn-outline-dark">Middle</button>
  <button type="button" class="btn btn-outline-dark">Right</button>
</div>
<br>
<div class="btn-group" role="group" aria-label="Default button group">
  <button type="button" class="btn btn-outline-dark">Left</button>
  <button type="button" class="btn btn-outline-dark">Middle</button>
  <button type="button" class="btn btn-outline-dark">Right</button>
</div>
<br>
<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
  <button type="button" class="btn btn-outline-dark">Left</button>
  <button type="button" class="btn btn-outline-dark">Middle</button>
  <button type="button" class="btn btn-outline-dark">Right</button>
</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.

html ye 
<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 type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown
    </button>
    <ul class="dropdown-menu">
      <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.

html ye 
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-dark">Button</button>
  <button type="button" class="btn btn-dark">Button</button>
  <button type="button" class="btn btn-dark">Button</button>
  <button type="button" class="btn btn-dark">Button</button>
  <button type="button" class="btn btn-dark">Button</button>
  <button type="button" class="btn btn-dark">Button</button>
</div>
html ye 
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
  <button type="button" class="btn btn-primary">Button</button>
  <button type="button" class="btn btn-primary">Button</button>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
    </ul>
  </div>
  <button type="button" class="btn btn-primary">Button</button>
  <button type="button" class="btn btn-primary">Button</button>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
    </ul>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
    </ul>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
      <li><a class="dropdown-item" href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>
html ye 
<div class="btn-group-vertical" role="group" aria-label="Vertical radio toggle button group">
  <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio1" autocomplete="off" checked>
  <label class="btn btn-outline-danger" for="vbtn-radio1">Radio 1</label>
  <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio2" autocomplete="off">
  <label class="btn btn-outline-danger" for="vbtn-radio2">Radio 2</label>
  <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio3" autocomplete="off">
  <label class="btn btn-outline-danger" for="vbtn-radio3">Radio 3</label>
</div>