Buttuni

Uża l-istili tal-buttuni tad-dwana ta 'Bootstrap għal azzjonijiet f'forom, dialogs, u aktar b'appoġġ għal daqsijiet multipli, stati, u aktar.

Eżempji

Bootstrap jinkludi diversi stili ta 'buttuni predefiniti, kull wieħed iservi l-iskop semantiku tiegħu stess, bi ftit ekstras jintefgħu għal aktar kontroll.

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

Iddiżattiva t-tgeżwir tat-test

Jekk ma tridx li t-test tal-buttuna jkebbeb, tista 'żżid il- .text-nowrapklassi mal-buttuna. F'Sass, tista 'tissettja $btn-white-space: nowrapli tiddiżattiva t-tgeżwir tat-test għal kull buttuna.

Tikketti tal-buttuni

Il- .btnklassijiet huma ddisinjati biex jintużaw mal- <button>element. Madankollu, tista 'wkoll tuża dawn il-klassijiet fuq <a>jew <input>elementi (għalkemm xi browsers jistgħu japplikaw rendering kemmxejn differenti).

Meta jintużaw klassijiet tal-buttuni fuq <a>elementi li huma wżati biex jagħtu bidu għal funzjonalità fil-paġna (bħal kontenut li jikkrolla), aktar milli jgħaqqdu ma' paġni jew sezzjonijiet ġodda fil-paġna attwali, dawn ir-rabtiet għandhom jingħataw role="button"biex iwasslu b'mod xieraq l-iskop tagħhom għal teknoloġiji ta' assistenza bħal qarrejja tal-iskrin.

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

Outline buttuni

Fil-bżonn ta 'buttuna, iżda mhux il-kuluri tal-isfond hefty li jġibu? Ibdel il-klassijiet tal-modifikatur default ma ' .btn-outline-*dawk biex tneħħi l-immaġini u l-kuluri kollha fl-isfond fuq kwalunkwe buttuna.

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

Daqsijiet

Fancy buttuni akbar jew iżgħar? Żid .btn-lgjew .btn-smgħal daqsijiet addizzjonali.

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

Oħloq buttuni tal-livell tal-blokki—dawk li jkopru l-wisa’ sħiħa ta’ ġenitur—billi żżid .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>

Stat attiv

Il-buttuni jidhru magħfus meta jkunu attivi bi sfond aktar skur, fruntiera aktar skura, u, meta d-dellijiet huma attivati, dell inset. M'hemmx bżonn li żżid klassi ma' <button>s peress li jużaw psewdo-klassi . Madankollu, xorta tista 'tisforza l-istess dehra attiva bi .active(u tinkludi l- aria-pressed=“true”attribut) jekk ikollok bżonn tirreplika l-istat b'mod programmatiku.

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

Stat b'diżabilità

Agħmel il-buttuni jidhru inattivi billi żżid l- disabledattribut boolean ma' kwalunkwe <button>element.

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

Buttuni b'diżabilità li jużaw l- <a>element jaġixxu daqsxejn differenti:

• <a>s ma jappoġġjawx l- disabledattribut, għalhekk trid iżżid il- .disabledklassi biex tagħmilha tidher b'diżabilità viżwalment.
• Xi stili favur il-futur huma inklużi biex jiskonnettjaw il pointer-events-buttuni tal-ankra kollha. Fil-browsers li jappoġġjaw dik il-proprjetà, ma tara xejn il-cursor b'diżabilità.
• L- użu ta' buttuni b'diżabilità <a>għandu jinkludi l- aria-disabled="true"attribut li jindika l-istat tal-element għat-teknoloġiji ta' assistenza.
• L- użu ta' buttuni b'diżabilità <a> m'għandux jinkludi l- hrefattribut.

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

Twissija dwar il-funzjonalità tal-link

Biex tkopri każijiet fejn għandek iżżomm l- hrefattribut fuq link diżabbli, il- .disabledklassi tuża pointer-events: nonebiex tipprova tiddiżattiva l-funzjonalità tal-link ta ' <a>s. Innota li din il-proprjetà CSS għadha mhix standardizzata għall-HTML, iżda l-browsers moderni kollha jappoġġjawha. Barra minn hekk, anke fil-browsers li jappoġġjaw pointer-events: none, in-navigazzjoni bit-tastiera tibqa' mhux affettwata, li jfisser li l-utenti tat-tastiera b'vista u l-utenti ta' teknoloġiji ta' assistenza xorta jkunu jistgħu jattivaw dawn il-links. Allura biex tkun sigura, minbarra aria-disabled="true", tinkludi wkoll tabindex="-1"attribut fuq dawn il-links biex ma tħallihomx jirċievu fokus fuq it-tastiera, u uża JavaScript personalizzat biex tiddiżattiva l-funzjonalità tagħhom għal kollox.

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

Agħmel aktar bil-buttuni. Ikkontrolla l-istati tal-buttuna jew toħloq gruppi ta 'buttuni għal aktar komponenti bħal toolbars.

Aqleb l-istati

Żid data-toggle="button"biex taqleb l-istat tal-buttuna active. Jekk qed taqleb buttuna minn qabel, trid iżżid manwalment il- .activeklassi u aria-pressed="true" mal- <button>.

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

Checkbox u buttuni tar-radju

L-istili tal-Bootstrap .buttonjistgħu jiġu applikati għal elementi oħra, bħal <label>s, biex jipprovdu checkbox jew toggling tal-buttuna tal-istil tar-radju. Żid data-toggle="buttons"ma' .btn-groupli fih dawk il-buttuni modifikati biex tippermetti l-imġieba ta' toggling tagħhom permezz ta' JavaScript u żid .btn-group-togglegħall-istil tal- <input>i fil-buttuni tiegħek. Innota li tista 'toħloq buttuni waħda li jaħdmu bl-input jew gruppi minnhom.

L-istat iċċekkjat għal dawn il-buttuni huwa aġġornat biss permezz ta' clickavveniment fuq il-buttuna. Jekk tuża metodu ieħor biex taġġorna l-input—eż., bi <input type="reset">jew bl-applikazzjoni manwalment tal- checkedproprjetà tal-input—jeħtieġlek taqleb .activefuq il- <label>manwalment.

Innota li l-buttuni verifikati minn qabel jeħtieġu li żżid il- .activeklassi manwalment mal-input's <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>

Metodi