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>

Keela teksti murdmine

Kui te ei soovi, et nupu tekst murtaks, saate .text-nowrapklassi lisada nupule. Sassis saate $btn-white-space: nowrapkeelata iga nupu teksti murramise.

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

Nupud kuvatakse vajutatuna, kui need on aktiivsed, tumedama tausta, tumedama äärisega ja kui varjud on lubatud, siis sisemise varjuga. 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.
• Kasutatavad keelatud nupud <a>peaksid sisaldama aria-disabled="true"atribuuti, mis näitab abitehnoloogiate jaoks elemendi olekut.
• Keelatud nupud <a> ei tohikshref atribuuti sisaldada .

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

Lingi funktsionaalsuse hoiatus

Juhtude katmiseks, kui peate hrefatribuuti hoidma keelatud lingil, püüab .disabledklass s-i lingifunktsiooni keelata. Pange tähele, et see CSS-i atribuut pole veel HTML-i jaoks standarditud, kuid kõik kaasaegsed brauserid toetavad seda. Lisaks jääb klaviatuuriga navigeerimine muutumatuks isegi brauserites, mis toetavad , mis tähendab, et nägemisega klaviatuurikasutajad ja abitehnoloogiate kasutajad saavad neid linke siiski aktiveerida. Ohutuse huvides lisage nendele linkidele lisaks atribuutidele ka atribuut, mis takistab neil klaviatuuri fookuse saamist, ja kasutage nende funktsioonide täielikuks keelamiseks kohandatud JavaScripti.pointer-events: none<a>pointer-events: nonearia-disabled="true"tabindex="-1"

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

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

meetodid