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>

Sɛbɛnniw sirili bali

N’i ​​t’a fɛ butɔni sɛbɛnni ka siri, i bɛ se ka .text-nowrapkalan fara butɔni kan. Sass kɔnɔ, i bɛ se $btn-white-space: nowrapka sɛbɛnniw sirili bali butɔni kelen-kelen bɛɛ kama.

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 u bɛ baara la ni kɔkanna dibi ye, ni dan ye dibi ye, ani ni biɲɛw bɛ baara la, ni biɲɛ min bɛ don a kɔnɔ. 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ɛ baara kɛ ni bololabaarakɛlaw <a>ye, olu ka kan ka kɛ aria-disabled="true"ni fɛn ye min bɛ fɛn in cogoya jira dɛmɛni fɛɛrɛw la.
• Butɔn minnu bɛ baara kɛ ni bali ye , olu <a> man kan kahref kɛ ni o fɛn ye.

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

Link baarakɛcogo lasɔmini

Walasa ka ko minnu Dabɔ i ka kan ka fɛn in To ' hrefjyɛn-yɔrɔ-ko-yɔrɔ-ko la, .disabledkàlanso bɛ baara Kɛ pointer-events: nonek'a ɲini ka 'jyɛn-yɔrɔ-ko baarakɛcogo bali <a>s. A kɔlɔsi ko nin CSS nafolo in ma labɛn fɔlɔ HTML kama, nka bi navigatɔrɔw bɛɛ b’a dɛmɛ. Ka fara o kan, hali navigatɛriw kɔnɔ minnu bɛ dɛmɛ don pointer-events: none, klaviyeti taamacogo tɛ tiɲɛ, o kɔrɔ ye ko klaviyeti ɲɛnatɔw ni dɛmɛ fɛɛrɛw baarakɛlaw bɛna se ka o jɛgɛnsira ninnu baara hali bi. O la walasa ka lakana, ka fara aria-disabled="true", fana ka fɛn dɔ tabindex="-1"Dòn o jɛgɛnsiraw kan walasa k’u bali ka klaviyeti sinsinnan Sɔrɔ, ani ka JavaScript ladamulen Kɛ k’u ka baarakɛcogo Dabila pewu.

<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">
  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> 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" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

Fɛɛrɛw