Butɔn kulu

Butɔnw sigiyɔrɔma dɔw fara ɲɔgɔn kan tigɛli kelen kan ni butɔni kulu ye, ka u fanga bonya ni JavaScript ye.

Misali jɔnjɔn

Aw bɛ butɔni dɔw siri ni .btnin ye .btn-group. fara JavaScript arajo sugandilenw kan ani sɛgɛsɛgɛli kɛcogo kɛcogo ni an ka butɔni plugin ye .

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">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ɛ.

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 mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="btn-group mr-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-secondary">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 mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon">@</div>
    </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-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon2">@</div>
    </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-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </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>