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>

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 būs nospiestas (ar tumšāku fonu, tumšāku apmali un iestrādātu ēnu), kad tās būs aktīvas. 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ās pogās ir jāiekļauj aria-disabled="true"atribūts, kas norāda palīgtehnoloģiju elementa stāvokli.

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

Metodes