Mygtukai

Naudokite Bootstrap tinkintus mygtukų stilius veiksmams formose, dialoguose ir kt., palaikydami kelis dydžius, būsenas ir kt.

Pavyzdžiai

„Bootstrap“ apima kelis iš anksto nustatytus mygtukų stilius, kurių kiekvienas atlieka savo semantinę paskirtį, su keliais priedais, kad būtų galima geriau valdyti.

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

Išjungti teksto vyniojimą

Jei nenorite, kad mygtuko tekstas būtų apvyniotas, galite pridėti .text-nowrapklasę prie mygtuko. „Sass“ galite nustatyti, $btn-white-space: nowrapkad būtų išjungtas kiekvieno mygtuko teksto įvyniojimas.

Mygtukų žymos

Klasės .btnskirtos naudoti su <button>elementu. Tačiau šias klases galite naudoti <a>ir <input>elementuose (nors kai kurios naršyklės gali taikyti šiek tiek kitokį atvaizdavimą).

Kai naudojate mygtukų klases <a>elementuose, kurie naudojami puslapio funkcijoms suaktyvinti (pvz., turinio sutraukimui), o ne nuorodoms į naujus puslapius ar skiltis dabartiniame puslapyje, šios nuorodos turėtų būti pateiktos role="button"tinkamai perteiktų jų paskirtį pagalbinėms technologijoms, pvz. ekrano skaitytuvai.

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

Kontūro mygtukai

Reikia mygtuko, bet ne ryškių fono spalvų? Pakeiskite numatytąsias modifikavimo klases tomis .btn-outline-*, kad pašalintumėte visus bet kurio mygtuko fono paveikslėlius ir spalvas.

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

Dydžiai

Mėgstate didesnius ar mažesnius mygtukus? Pridėti .btn-lgarba .btn-smpapildomų dydžių.

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

Sukurkite bloko lygio mygtukus – tuos, kurie apima visą pirminio plotį – pridėdami .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>

Aktyvi būsena

Mygtukai bus paspausti, kai jie bus aktyvūs, su tamsesniu fonu, tamsesniu kraštu ir, kai įjungti šešėliai, įterptu šešėliu. Nereikia pridėti klasės prie <button>s, nes jie naudoja pseudoklasę . Tačiau vis tiek galite priversti tą pačią aktyvią išvaizdą naudodami .active(ir įtraukti aria-pressed=“true”atributą), jei jums reikės programiškai kopijuoti būseną.

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

Neįgalus būsena

disabledPridėkite loginį atributą prie bet kurio <button>elemento , kad mygtukai atrodytų neaktyvūs .

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

Išjungti mygtukai, naudojantys <a>elementą, veikia šiek tiek kitaip:

• <a>s nepalaiko disabledatributo, todėl turite pridėti .disabledklasę, kad ji vizualiai atrodytų išjungta.
• Įtraukti kai kurie ateičiai tinkami stiliai, leidžiantys išjungti visus pointer-eventsinkaro mygtukus. Naršyklėse, kurios palaiko šią nuosavybę, išjungto žymeklio iš viso nematysite.
• Į išjungtus mygtukus <a>turėtų būti įtrauktas aria-disabled="true"atributas, nurodantis elemento būseną pagalbinėms technologijoms.
• Išjungtuose mygtukuose <a> neturėtų būti hrefatributo.

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

Nuorodos funkcijos įspėjimas

Kad apimtų atvejus, kai turite išlaikyti hrefatributą išjungtoje nuorodoje, .disabledklasė naudoja pointer-events: nonebandydama išjungti s nuorodos funkcionalumą <a>. Atminkite, kad ši CSS ypatybė dar nėra standartizuota HTML, tačiau visos šiuolaikinės naršyklės ją palaiko. Be to, net naršyklėse, kurios palaiko pointer-events: none, klaviatūros naršymas lieka nepakitęs, o tai reiškia, kad regintys klaviatūros ir pagalbinių technologijų naudotojai vis tiek galės suaktyvinti šias nuorodas. Taigi, kad būtų saugu, šiose nuorodose aria-disabled="true"taip pat įtraukite tabindex="-1"atributą, kad jos negalėtų gauti klaviatūros fokusavimo, ir naudokite tinkintą JavaScript, kad visiškai išjungtumėte jų funkcijas.

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

Mygtukų papildinys

Padarykite daugiau naudodami mygtukus. Valdykite mygtukų būsenas arba sukurkite mygtukų grupes daugiau komponentų, pvz., įrankių juostoms.

Perjungti būsenas

Pridėti data-toggle="button", kad perjungtumėte mygtuko activebūseną. Jei iš anksto perjungiate mygtuką, turite rankiniu būdu pridėti .activeklasę ir aria-pressed="true" prie <button>.

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

Žymės langelis ir radijo mygtukai

„Bootstrap“ .buttonstiliai gali būti taikomi kitiems elementams, pvz., „ <label>s“, kad būtų galima perjungti žymimąjį laukelį arba radijo stiliaus mygtukus. Pridėkite data-toggle="buttons"prie, .btn-groupkuriame yra tie modifikuoti mygtukai, kad įgalintumėte jų perjungimo elgseną naudojant „JavaScript“, ir pridėkite .btn-group-togglestilių <input>savo mygtukų viduje. Atminkite, kad galite sukurti atskirus įvesties mygtukus arba jų grupes.

Šių mygtukų pažymėta būsena atnaujinama tik per mygtuko clickįvykį . Jei įvesčiai atnaujinti naudojate kitą metodą, pvz., naudodami įvesties ypatybę <input type="reset">arba taikydami ją rankiniu būdu, turėsite įjungti rankiniu būdu.checked.active<label>

Atminkite, kad naudojant iš anksto pažymėtus mygtukus reikia rankiniu būdu pridėti .activeklasę prie įvesties <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>

Metodai