Dikonope

Šomiša ditaele tša konope ya tlwaelo ya Bootstrap bakeng sa ditiro ka diforomong, dipoledišanong, le tše dingwe ka thekgo ya bogolo bjo bontši, dilete, le tše dingwe.

Mehlala

Bootstrap e akaretša mekgwa e mmalwa ya konope yeo e hlalošitšwego e sa le pele, e nngwe le e nngwe e hlankela morero wa yona wa semantiki, ka dilo tše sego kae tše di oketšegilego tšeo di lahlilwego ka gare bakeng sa taolo e oketšegilego.

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

Thibela go phuthela sengwalwa

Ge o sa nyake gore sengwalwa sa konope se phuthele, o ka oketša .text-nowrapklase go konope. Ka go Sass, o ka beakanya $btn-white-space: nowrapgo šitiša go phuthela sengwalwa sa konope ye nngwe le ye nngwe.

Dithegi tša konope

Diklase di .btnhlamilwe go šomišwa le <button>elemente. Le ge go le bjalo, o ka šomiša gape diklase tše godimo ga <a>goba <input>dielemente (le ge e le gore diphensele tše dingwe di ka diriša phetolelo ye e fapanego gannyane).

Ge o šomiša diklase tša konope go <a>dielemente tšeo di šomišwago go hlohleletša mošomo wa ka gare ga letlakala (go swana le diteng tša go phuhlama), go e na le go kgokaganya le matlakala a maswa goba dikarolo ka gare ga letlakala la bjale, dikgokagano tše di swanetše go fiwa a role="button"go fetišetša morero wa tšona ka tshwanelo go theknolotši ya go thuša go swana le babadi 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">

Dikonope tša go hlaloša

O hloka konopo, eupša e sego mebala e boima ya morago yeo ba e tlišago? Efa diklase tša sefetoši sa go se fetoge legato ka tšeo di .btn-outline-*tlago go tloša diswantšho ka moka tša ka morago le mebala go konope efe goba 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>

Bogolo

Fancy dikonope tše kgolo goba tše nnyane? Oketša .btn-lggoba .btn-smbakeng sa bogolo bja tlaleletšo.

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

Hlama dikonope tša maemo a go thibela—tšeo di akaretšago bophara bjo bo tletšego bja motswadi—ka go oketša .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 bjo bo šomago

Dikonope di tla tšwelela di tobetšwe ge di šoma ka mokokotlo wo moso, mollwane wo moso, gomme, ge meriti e kgontšhitšwe, moriti wo o tsentšwego. Ga go nyakege gore o oketše sehlopha go <button>s ka ge ba šomiša sehlopha sa maaka . Le ge go le bjalo, o sa dutše o ka gapeletša ponagalo ye e swanago ye e šomago ka .active(le go akaretša aria-pressed=“true”seka) ge o ka swanelwa ke go boeletša mmušo ka lenaneo.

<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 bjo bo golofetšego

Dira gore dikonope di bonagale di sa šome ka go tlaleletša disabledseka sa boolean go <button>elemente efe goba efe.

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

Dikonope tše di golofetšego tšeo di šomišago <a>elemente di itshwara ka go fapana go se nene:

• <a>s ga di thekge disabledseka, ka fao o swanete go oketša .disabledsehlopha go dira gore se bonagale se golofetše ka pono.
• Mekgwa e mengwe yeo e nago le bogwera bja nakong e tlago e akareditšwe go šitiša ka moka pointer-eventsgo dikonope tša ankora. Ka go diphensele tšeo di thekgago thepa yeo, o ka se bone khesara ye e golofetšego le gatee.
• Dikonope tše di golofetšego tše di šomišago <a>di swanetše go akaretša aria-disabled="true"seka go laetša seemo sa elemente go theknolotši ya go thuša.
• Dikonope tše di golofetšego tše di šomišago ga se tša <a> swanela go akaretša hrefseka.

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

Kgokaganya tshebetso temošo

Go akaretša maemo ao o swanetšego go boloka hrefseka go kgokagano ye e golofetšego, .disabledsehlopha se šomiša pointer-events: nonego leka go šitiša mošomo wa kgokagano wa <a>s. Hlokomela gore thepa ye ya CSS ga se ya hlwa e bewa maemo a HTML, eupša diphensele ka moka tša sebjalebjale di e thekga. Go tlaleletša, gaešita le go diphensele tšeo di dirago thekgo pointer-events: none, go sepelasepela ga khiiboto go dula go sa amege, go bolela gore badiriši ba khiiboto bao ba bonago le badiriši ba thekinolotši ya go thuša ba sa dutše ba tla kgona go tsenya dikgokagano tše tirišong. Ka fao go ba yo a bolokegilego, go tlaleletša go aria-disabled="true", gape akaretša tabindex="-1"seka go dikgokagano tše go di thibela go amogela go tsepamiša kgopolo ga khiiboto, gomme o šomiše JavaScript ya tlwaelo go šitiša mošomo wa tšona ka mo go feletšego.

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

Plugin ya konopo

Dira mo gontši ka dikonope. Taolo konope e bolela goba hlama dihlopha tša dikonope bakeng sa dikarolo tše dingwe go swana le dibara tša didirišwa.

Toggle e re

Oketša data-toggle="button"go fetola boemo bja konope active. Ge e le gore o fetoša konope pele, o swanetše go oketša ka seatla .activesehlopha le aria-pressed="true" go <button>.

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

Lepokisi la go hlahloba le dikonope tša radio

Ditaele tša Bootstrap .buttondi ka dirišwa go dielemente tše dingwe, go swana le <label>s, go fa lepokisi la go hlahloba goba go fetoša konope ya setaele sa radio. Oketša data-toggle="buttons"go a yeo e .btn-groupnago le dikonope tšeo tše di fetotšwego go kgontšha boitshwaro bja bona bja go fetoša ka JavaScript gomme o tlaleletše .btn-group-togglego setaele sa <input>s ka gare ga dikonope tša gago. Hlokomela gore o ka hlama dikonope tše tee tšeo di šomišwago ke tsenyo goba dihlopha tša tšona.

Boemo bjo bo hlahlobjago bja dikonope tše bo mpshafatšwa fela ka clicktiragalo godimo ga konope. Ge o šomiša mokgwa wo mongwe go mpshafatša tsenyo—mohlala, ka <input type="reset">goba ka go diriša ka seatla checkedthepa ya tsenyo—o tla swanelwa ke go fetoša .activeka <label>seatla.

Hlokomela gore dikonope tše di hlahlobjago pele di nyaka gore o oketše .activesehlopha ka seatla go ya tsenyo ya <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>

Mekgwa ya go šoma