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>

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 (ka bokamorago bjo bo lefsifsi, mollwane wo moso, le moriti wa go tsenywa) ge di šoma. 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 di swanetše go akaretša aria-disabled="true"seka go laetša seemo sa elemente go theknolotši ya go thuša.

<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" autocomplete="off">
  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 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>

Mekgwa ya go šoma