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>

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 fono paveikslėlius ir spalvas bet kuriame mygtuke.

<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 rodomi paspausti (su tamsesniu fonu, tamsesniu kraštu ir įterptu šešėliu), kai jie bus aktyvūs. 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 turėtų būti įtrauktas aria-disabled="true"atributas, nurodantis pagalbinių technologijų elemento būseną.

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

Metodai