Likonopo

Sebelisa mekhoa ea tloaelo ea Bootstrap bakeng sa liketso ka mefuta, lipuisano, le tse ling ka tšehetso ea boholo bo fapaneng, linaha le tse ling.

Mehlala

Bootstrap e kenyelletsa mefuta e 'maloa ea likonopo e boletsoeng esale pele, e' ngoe le e 'ngoe e sebeletsa sepheo sa eona sa semantic, e nang le litlatsetso tse' maloa tse kentsoeng bakeng sa taolo e eketsehileng.

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

Tlosa ho phuthela mongolo

Haeba u sa batle hore mongolo oa konopo o phutheloe, o ka eketsa .text-nowrapsehlopha ho konopo. Ho Sass, o ka seta $btn-white-space: nowrapho tima ho phuthela mongolo bakeng sa konopo ka 'ngoe.

Li-tag tsa konopo

Lihlopha .btnli etselitsoe ho sebelisoa le <button>element. Leha ho le joalo, u ka sebelisa litlelase tsena ho <a>kapa <input>likarolo (leha libatli tse ling li ka sebelisa phetolelo e fapaneng hanyane).

Ha o sebelisa li-button class ho <a>likarolo tse sebelisetsoang ho qala ts'ebetso ea leqephe (joalo ka litaba tse putlamang), ho fapana le ho hokahana le maqephe a macha kapa likarolo tse ka har'a leqephe la hajoale, likhokahano tsena li lokela ho fuoa monyetla oa role="button"ho fetisa sepheo sa tsona ka nepo ho mahlale a thusang joalo ka. babali ba skrine.

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

Likonopo tsa moralo

Na u hloka konopo, empa eseng mebala e meholo eo ba e tlisang? Beha sebaka sa litlelase tsa li-default ka .btn-outline-*tse tla tlosa litšoantšo tsohle le mebala ho konopo efe kapa efe.

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

Boholo

U batla likonopo tse kholoanyane kapa tse nyane? Eketsa .btn-lgkapa .btn-smbakeng sa boholo bo eketsehileng.

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

Etsa likonopo tsa "block level" - tse fetang bophara ba motsoali - ka ho eketsa .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>

Boemo bo sebetsang

Likonopo li tla hlaha li hatelloa ha li sebetsa ka bokamorao bo lefifi, moeli o lefifi, 'me ha meriti e buletsoe, ho tla ba le moriti o kenang. Ha ho na tlhoko ea ho kenyelletsa sehlopha ho <button>s ha ba ntse ba sebelisa sehlopha sa pseudo . Leha ho le joalo, o ntse o ka qobella ponahalo e ts'oanang e sebetsang ka .active(mme o kenyelletsa aria-pressed=“true”semelo) haeba o hloka ho pheta naha ka mokhoa o hlophisitsoeng.

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

Boemo ba bokooa

Etsa hore likonopo li shebahale li sa sebetse ka ho kenya disabledsemelo sa boolean nthong efe kapa efe <button>.

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

Likonopo tse holofetseng tse sebelisang <a>element li sebetsa ka tsela e fapaneng:

• <a>s ha e tšehetse disabledtšobotsi, kahoo o tlameha ho eketsa .disabledsehlopha ho etsa hore e bonahale e holofetse.
• Mefuta e meng ea bokamoso e kenyellelitsoe ho tima tsohle pointer-eventslikonopong tsa ankora. Ho li-browser tse tšehetsang thepa eo, u ke ke ua bona sekhechana se holofetseng ho hang.
• Likonopo tse holofetseng tse sebelisoang li <a>lokela ho kenyelletsa aria-disabled="true"tšobotsi ho bontša boemo ba element ho mahlale a thusang.
• Likonopo tse holofetseng tse sebelisoang <a> ha lia lokela ho kenyelletsa hreftšobotsi.

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

Khokahano ea ts'ebetso ea caveat

Ho koahela linyeoe moo o tlamehang ho boloka hreftšobotsi ho sehokelo se holofetseng, .disabledsehlopha se sebelisa pointer-events: noneho leka ho tima tšebetso ea lihokelo tsa <a>s. Hlokomela hore thepa ena ea CSS ha e e-so be boemong ba HTML, empa libatli tsohle tsa sejoale-joale lia e tšehetsa. Ho feta moo, esita le ho li-browser tse tšehetsang pointer-events: none, ho tsamaea ha keyboard ho lula ho sa amehe, ho bolelang hore basebelisi ba li-keyboard ba boneng le basebelisi ba mahlale a thusang ba ntse ba tla khona ho kenya likhokahano tsena. E le hore u bolokehe, ho phaella ho aria-disabled="true", kenyelletsa tabindex="-1"tšobotsi ho lihokelo tsena ho ba thibela ho fumana tsepamiso ea keyboard, le ho sebelisa JavaScript e tloaelehileng ho tima ts'ebetso ea bona ka botlalo.

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

Konopo plugin

Etsa ho eketsehileng ka likonopo. Konopo ea ho laola e bolela kapa etsa lihlopha tsa likonopo bakeng sa likarolo tse ling tse kang lithulusi.

Fetolela linaha

Eketsa data-toggle="button"ho fetola boemo ba konopo active. Haeba u toggle konopo pele, u tlameha ho kenya .activesehlopha ka bowena le aria-pressed="true" ho <button>.

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

Likonopo tsa li-checkbox le radio

Mekhoa ea Bootstrap e .buttonka sebelisoa ho likarolo tse ling, joalo ka <label>s, ho fana ka lebokose la tlhahlobo kapa konopo ea setaele sa seea-le-moea. Eketsa data-toggle="buttons"ho e .btn-groupnang le likonopo tse fetotsoeng ho thusa mokhoa oa bona oa ho fetola ka JavaScript le .btn-group-toggleho eketsa setaele sa <input>s ka har'a likonopo tsa hau. Hlokomela hore o ka etsa likonopo tse nang le matla a le mong kapa lihlopha tsa tsona.

Boemo bo hlahlobiloeng ba likonopo tsena bo ntlafatsoa feela ka clickketsahalo e konopo. Haeba u sebelisa mokhoa o mong oa ho nchafatsa lintho tseo u li kenyang—mohlala, ka <input type="reset">ho sebelisa kapa ka ho sebelisa checkedthepa eo u e kenyang—u tla hloka ho e sebelisa .activeka <label>letsoho.

Hlokomela hore likonopo tse hlahlobiloeng esale pele li hloka hore u kenye .activesehlopha ka bowena ho tse kentsoeng <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>

Mekhoa