Nupud

Kasutage Bootstrapi kohandatud nupustiile vormides, dialoogides ja muudes toimingutes koos mitme suuruse, oleku ja muu toega.

Näited

Bootstrap sisaldab mitut eelmääratletud nupustiili, millest igaüks täidab oma semantilist eesmärki ja millele on lisatud mõned lisad, et paremini juhtida.

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

Nuppude sildid

Klassid on mõeldud .btnkasutamiseks koos <button>elemendiga. Siiski saate neid klasse kasutada ka elementide <a>või <input>elementide puhul (kuigi mõned brauserid võivad rakendada veidi erinevat renderdamist).

Kui kasutate nuppude klasse <a>elementidel, mida kasutatakse lehesisese funktsioonide käivitamiseks (nt sisu kokkutõmbamine), selle asemel, et linkida praeguse lehe uutele lehtedele või jaotistele, tuleks nendele linkidele role="button"anda nende eesmärk asjakohaselt edasi anda abitehnoloogiatele, näiteks ekraanilugejad.

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

Kontuurinupud

Kas vajate nuppu, kuid mitte nende pakutavaid kopsakaid taustavärve? Asendage vaikimisi modifikaatoriklassid klassidega .btn-outline-*, et eemaldada kõik taustpildid ja värvid mis tahes nupult.

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

Suurused

Kas soovite suuremaid või väiksemaid nuppe? Lisa .btn-lgvõi .btn-smlisasuuruste jaoks.

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

Looge plokitaseme nupud – need, mis katavad kogu vanema laiust – lisades .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>

Aktiivne olek

Kui need on aktiivsed, kuvatakse nupud vajutatuna (tumedama tausta, tumedama äärise ja varjundiga). Klassi s ei ole vaja lisada, <button>kuna nad kasutavad pseudoklassi . Kui teil on vaja olekut programmiliselt kopeerida , saate siiski sama aktiivse välimuse sundida .active(ja atribuudi kaasata ).aria-pressed="true"

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

Puudega olek

Muutke nupud passiivseks, lisades mis tahes elemendile disabledtõeväärtuse atribuudi .<button>

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

Elementi kasutavad keelatud nupud <a>käituvad veidi erinevalt:

• <a>s ei toeta seda disabledatribuuti, seega peate .disabledklassi lisama, et see visuaalselt keelatud.
• Kaasas on mõned tulevikusõbralikud stiilid, et kõik pointer-eventsankurnuppudel keelata. Seda atribuuti toetavates brauserites ei näe te keelatud kursorit üldse.
• Keelatud nupud peaksid sisaldama aria-disabled="true"atribuuti, mis näitab abitehnoloogiate jaoks elemendi olekut.

<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

Nupu pistikprogramm

Tehke nuppudega rohkem. Juhtnupu olekud või nupurühmade loomine rohkemate komponentide, näiteks tööriistaribade jaoks.

Lülitage olekuid

Lisa data-toggle="button"nupu activeoleku vahetamiseks. Kui lülitate nuppu eelnevalt ümber, peate .activeklassi ja aria-pressed="true" klassi käsitsi lisama <button>.

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

Märkeruut ja raadionupud

Bootstrapi .buttonstiile saab rakendada muudele elementidele, näiteks <label>s-le, et võimaldada märkeruudu või raadiostiili nuppude ümberlülitamist. Lisage neid muudetud nuppe sisaldavasse data-toggle="buttons"a .btn-group-sse, et võimaldada nende ümberlülituskäitumist JavaScripti kaudu, ja lisage oma nuppudes .btn-group-toggleolevad s-i stiilid . Pange tähele, et saate luua üksikuid sisendtoitega nuppe või nende rühmi.<input>

Nende nuppude kontrollitud olekut värskendatakse ainultclick nupul oleva sündmuse kaudu. Kui kasutate sisendi värskendamiseks mõnda muud meetodit (nt sisendi atribuudiga <input type="reset">või käsitsi rakendades), peate selle käsitsi sisse lülitama.checked.active<label>

Pange tähele, et eelkontrollitud nupud nõuavad .activeklassi käsitsi lisamist sisendisse <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>

meetodid