Butɔnw

Baara kɛ ni Bootstrap ka butɔni cogoyaw ye minnu bɛ kɛ ka kɛɲɛ ni u yɛrɛ sago ye, walasa ka walew kɛ sɛbɛnw kɔnɔ, kumasenw kɔnɔ, ani fɛn wɛrɛw la ni dɛmɛ ye hakɛ caman, cogoyaw ani fɛn wɛrɛw la.

Misaliw

Bootstrap kɔnɔ, butɔni cogoya damadɔ minnu ɲɛfɔlen don ka kɔn, olu kelen-kelen bɛɛ bɛ baara kɛ n’u yɛrɛ ka kɔrɔko ye, ni farankan damadɔ ye minnu bɛ fili a kɔnɔ walasa ka kunnafoni caman sɔrɔ.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

Butɔnw ka taamasiyɛnw

Kalansow .btndabɔra ka baara kɛ ni <button>element ye. Nka, i bɛ Se fana ka baara Kɛ ni o kàlanw ye <a>walima <input>fɛn dɔw kan (hali n’a y’a Sɔrɔ navigatɔrɔ dɔw bɛ Se ka baarakɛcogo dɔ Kɛ min tɛ kelen ye dɔɔnin).

Ni baara bɛ kɛ ni butɔni kalasi ye <a>fɛnw kan minnu bɛ kɛ ka ɲɛ kɔnɔ baarakɛcogo daminɛ (i n’a fɔ kɔnɔkow bɛrɛbɛrɛ), sanni ka ɲɔgɔn cɛsiri ni ɲɛ kuraw walima yɔrɔ kuraw ye ɲɛ sisan kɔnɔ, o jɛgɛnsiraw ka kan ka di a role="button"ma walasa k’u kuntilenna lase cogo bɛnnen na dɛmɛ fɛɛrɛw ma i n’a fɔ ekran kalanbagaw.

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

Butɔnw labɛncogo

I mago bɛ butɔni na, nka u tɛ na ni kɔkanna kulɛri gɛlɛnw ye wa? Aw bɛ fɛn minnu bɛ fɛn caman sɛmɛntiya, olu bila u nɔ na ni .btn-outline-*minnu ye walasa ka kɔkanna jaw ni kulɛriw bɛɛ bɔ butɔni o butɔni kan.

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Bonyaw

Fancy butɔni belebelebaw walima fitininw? Aw bɛ a fara a kan .btn-lgwalima .btn-smwalasa ka hakɛ wɛrɛw fara a kan.

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

Butɔnw dabɔ ni bloki nivo ye—minnu bɛ bangebaga dɔ bonya bɛɛ lajɛlen na—i kɛtɔ ka .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

Jamana min bɛ baara la

Butɔnw bɛna jira ni u digilen don (ni kɔkanna dibi don, ni dan ye dibi ye, ani ni inset shadow ye) ni u bɛ baara la. Wajibi tɛ ka kalasi dɔ fara <button>s kan i n'a fɔ u bɛ baara kɛ ni kalansen nkalonma ye cogo min na . Nka, i bɛ Se hali bi ka o yecogo waleyali kelen in Wajibiya ni .active(ani ka aria-pressed="true"fɛnɲɛnɛma in Dòn a la) n’i mago bɛ ka cogoya in Lasegin porogaramu fɛ.

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

Jamana min ye bololabaara ye

Aw bɛ butɔni kɛ i n’a fɔ baarakɛbaliw ni disabledboolean fɛnsɛbɛnni farali ye fɛn o <button>fɛn kan.

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

Butɔn minnu bɛ baara kɛ ni <a>fɛn ye, olu bɛ baara kɛ ni fɛn ye min tɛ kelen ye dɔɔnin:

• <a>s tɛ fɛn in dɛmɛ disabled, o la i ka kan ka .disabledkalasi fara a kan walasa a ka kɛ i n’a fɔ a tɛ se ka baara kɛ.
• Siti dɔw bɛ yen minnu bɛ se ka kɛ siniɲɛsigi ye walasa ka bɛɛ bali pointer-eventsankɔri butɔni kan. Navigatɛri minnu bɛ o nafolo dɛmɛ, i tɛna taamasiyɛn balilen ye fewu.
• Butɔn minnu bɛ se ka baara kɛ, olu ka kan ka kɛ ni aria-disabled="true"fɛn ye min bɛ se ka fɛn in cogoya jira dɛmɛni fɛɛrɛw la.

<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

Butɔnw ka plugin

Aw bɛ dɔ fara a kan ni butɔni ye. Kontrɔli butɔni bɛ fɔ walima ka butɔni kuluw Dabɔ yɔrɔ caman kama i n’a fɔ baarakɛminɛnw.

Toggle jamanaw

A fara a kan data-toggle="button"ka butɔni dɔ activecogoya wuli. N’i ​​bɛ ka butɔni dɔ wuli ka kɔn, i ka kan ka .activekalansen fara i bolo fɛ ani aria-pressed="true" ka fara <button>.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

Jateminɛ kɛsu ani arajo butɔni

Bootstrap ka .buttoncogoyaw bɛ se ka baara kɛ ni fɛn wɛrɛw ye, i n’a fɔ <label>s, walasa ka jatebɔyɔrɔ walima arajo cogoya butɔni wulicogo di. Fàra a data-toggle="buttons"kan min .btn-groupkɔnɔ o butɔni caman b'u la walasa k'u ka toggling kɛcogo Kɛ JavaScript fɛ ani ka dɔ Fàra s kan i ka butɔni kɔnɔ .btn-group-togglecogoya la . A kɔlɔsi ko i bɛ se ka butɔni kelenw dilan minnu bɛ baara kɛ ni donnakow ye walima u kuluw.<input>

O butɔni ninnu cogoya min sɛgɛsɛgɛra, o bɛ Lakodɔn dɔrɔn clickko kɛlen fɛ butɔni kan. N’i ​​bɛ baara Kɛ ni fɛɛrɛ wɛrɛ ye walasa ka donnakow kuraya—misali la, ni <input type="reset">donnakow ka nafa ye walima ni i bɛ baara Kɛ ni bolo ye checked—i bɛna a ɲini ka toggle .activeon the <label>manually.

A kɔlɔsi ko butɔni minnu lajɛra ka kɔn, olu b’a ɲini i fɛ i ka .activekalansen fara i yɛrɛ bolo donnakow kan <label>.

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked autocomplete="off"> Checked
  </label>
</div>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

Fɛɛrɛw