Pogas

Izmantojiet Bootstrap pielāgotos pogu stilus darbībām veidlapās, dialoglodziņos un citur ar atbalstu vairākiem izmēriem, stāvokļiem un citiem.

Piemēri

Bootstrap ietver vairākus iepriekš definētus pogu stilus, no kuriem katrs kalpo savam semantiskajam mērķim, ar dažām papildu funkcijām lielākai kontrolei.

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

Atspējot teksta aplaušanu

Ja nevēlaties, lai pogas teksts tiktu aplauzts, varat pievienot .text-nowrapklasi pogai. Programmā Sass varat iestatīt $btn-white-space: nowrap, lai katrai pogai tiktu atspējota teksta aplaušana.

Pogu atzīmes

Klases .btnir paredzētas lietošanai kopā ar <button>elementu. Tomēr šīs klases varat izmantot arī elementos <a>vai <input>elementos (lai gan dažas pārlūkprogrammas var izmantot nedaudz atšķirīgu renderēšanu).

Ja izmantojat pogu klases <a>elementiem, kas tiek izmantoti, lai aktivizētu lapas funkcionalitāti (piemēram, satura sakļaušanai), nevis saiti uz jaunām lapām vai sadaļām pašreizējā lapā, šīm saitēm ir jābūt, role="button"lai tās atbilstoši nodotu to mērķim palīgtehnoloģijās, piemēram, ekrāna lasītāji.

<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ūru pogas

Vai jums ir vajadzīga poga, bet ne spēcīgās fona krāsas? Aizstājiet noklusējuma modifikatoru klases ar tām .btn-outline-*, lai no jebkuras pogas noņemtu visus fona attēlus un krāsas.

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

Izmēri

Vai vēlaties lielākas vai mazākas pogas? Pievienojiet .btn-lgvai .btn-smpapildu izmēriem.

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

Izveidojiet bloka līmeņa pogas — tās, kas aptver visu vecāka platumu, pievienojot .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>

Aktīvs stāvoklis

Pogas tiks nospiestas, kad tās ir aktīvas, ar tumšāku fonu, tumšāku apmali un, ja ir iespējotas ēnas, iestrādātu ēnu. Klase s nav jāpievieno, <button>jo tās izmanto pseidoklasi . Tomēr jūs joprojām varat piespiest to pašu aktīvo izskatu ar .active(un iekļaut aria-pressed=“true”atribūtu), ja jums ir nepieciešams programmatiski replicēt stāvokli.

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

Atspējots stāvoklis

Padariet pogas neaktīvas, disabledjebkuram <button>elementam pievienojot Būla atribūtu.

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

Atspējotās pogas, kas izmanto <a>elementu, darbojas nedaudz savādāk:

• <a>s neatbalsta disabledatribūtu, tāpēc jums ir jāpievieno .disabledklase, lai tā vizuāli izskatītos atspējota.
• Ir iekļauti daži nākotnei piemēroti stili, lai atspējotu visas pointer-eventsenkura pogas. Pārlūkprogrammās, kas atbalsta šo īpašumu, atspējotais kursors vispār netiks rādīts.
• Atspējotajām pogām <a>ir jāiekļauj aria-disabled="true"atribūts, kas norāda elementa stāvokli palīgtehnoloģijās.
• Atspējotās pogas, kas izmanto <a> , nedrīkst ietvert hrefatribūtu.

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

Saites funkcionalitātes brīdinājums

Lai aptvertu gadījumus href, kad atspējotās saites atribūts ir jāsaglabā, .disabledklase izmanto pointer-events: none, lai mēģinātu atspējot <a>s saites funkcionalitāti. Ņemiet vērā, ka šis CSS rekvizīts vēl nav standartizēts HTML, taču visas mūsdienu pārlūkprogrammas to atbalsta. Turklāt pat pārlūkprogrammās, kas atbalsta pointer-events: none, tastatūras navigācija paliek nemainīga, kas nozīmē, ka redzīgi tastatūras lietotāji un palīgtehnoloģiju lietotāji joprojām varēs aktivizēt šīs saites. Tāpēc, lai būtu droši, šajās saitēs aria-disabled="true"iekļaujiet arī tabindex="-1"atribūtu, lai tās nesaņemtu tastatūras fokusu, un izmantojiet pielāgotu JavaScript, lai pilnībā atspējotu to funkcionalitāti.

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

Pogas spraudnis

Padariet vairāk ar pogām. Vadības pogu stāvokļi vai izveidot pogu grupas citiem komponentiem, piemēram, rīkjoslām.

Pārslēgt stāvokļus

Pievienot data-toggle="button", lai pārslēgtu pogas activestāvokli. Ja iepriekš pārslēdzat pogu, jums manuāli jāpievieno .activeklase un .aria-pressed="true"<button>

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

Izvēles rūtiņa un radio pogas

Bootstrap .buttonstilus var lietot citiem elementiem, piemēram, <label>s, lai nodrošinātu izvēles rūtiņas vai radio stila pogu pārslēgšanu. Pievienojiet data-toggle="buttons"tam, kas .btn-groupsatur šīs modificētās pogas, lai iespējotu to pārslēgšanos, izmantojot JavaScript, un pievienojiet pogām s .btn-group-togglestilu . Ņemiet vērā, ka varat izveidot atsevišķas ar ievadi darbināmas pogas vai to grupas.<input>

Šo pogu pārbaudītais stāvoklis tiek atjaunināts tikai ar clicknotikumu uz pogas. Ja ievades atjaunināšanai izmantojat citu metodi, piemēram, ar <input type="reset">vai manuāli lietojot ievades checkedrekvizītu, jums būs jāieslēdz .activemanuāli <label>.

Ņemiet vērā, ka, lai izmantotu iepriekš pārbaudītas pogas, ir manuāli jāpievieno .activeklase ievades <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>

Metodes