Source

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>

Go fetišetša tlhalošo go theknolotši ya go thuša

Go šomiša mmala go oketša tlhalošo go fa fela taetšo ya go bonwa, yeo e ka se fetišwego go badiriši ba theknolotši ya go thuša – go swana le babadi ba skrine. Netefatša gore tshedimošo yeo e bontšhitšwego ka mmala e ka ba e bonagala gabotse go tšwa diteng ka botšona (mohlala, sengwalwa se se bonagalago), goba e akaretšwa ka mekgwa ye mengwe, go swana le sengwalwa sa tlaleletšo seo se utilwego le .sr-onlysehlopha.

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.

Amanya

<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 fifetšego, 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.

Kgokagano ya mathomo Amanya

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

Kgokagano ya mathomo Amanya

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

Kgokaganya tshebetso temošo

Sehlopha .disabledse šomiša pointer-events: nonego leka go šitiša mošomo wa kgokagano wa <a>s, eupša thepa yeo ya CSS ga se ya hlwa e bewa maemo. 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 gore o bolokege, oketš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.

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

E hlahlobja

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

Mafolofolo Seyalemoya Seyalemoya

<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

Mokgwa	Tlhalošo
`$().button('toggle')`	Toggles kgorometsa boemo. E fa konope ponagalo ya gore e tsentšwe tirišong.
`$().button('dispose')`	E senya konope ya elemente.