Painikkeet

Käytä Bootstrapin mukautettuja painiketyylejä toimintoihin lomakkeissa, valintaikkunoissa ja muissa useiden kokojen, tilojen ja muiden tukien avulla.

Esimerkkejä

Bootstrap sisältää useita ennalta määritettyjä painiketyylejä, joista jokainen palvelee omaa semanttista tarkoitustaan, ja muutama lisätoiminto lisäten hallintaa.

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

Poista tekstin rivitys käytöstä

Jos et halua painikkeen tekstin rivittyvän, voit lisätä .text-nowrapluokan painikkeeseen. Sassissa voit asettaa $btn-white-space: nowrappoistamaan jokaisen painikkeen tekstin rivityksen käytöstä.

Painikkeiden tunnisteet

Luokat .btnon suunniteltu käytettäviksi <button>elementin kanssa. Voit kuitenkin käyttää näitä luokkia myös <a>elementeissä <input>(tosin jotkin selaimet saattavat käyttää hieman erilaista hahmonnusta).

Kun käytät painikeluokkia <a>elementeissä, joita käytetään käynnistämään sivun sisäisiä toimintoja (kuten tiivistämään sisältöä), sen sijaan, että linkittäisiin nykyisen sivun uusille sivuille tai osiin, näille linkeille tulee antaa role="button"tarkoituksenmukaisesti välittää niiden tarkoitus aputekniikoille, kuten esim. näytönlukijat.

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

Jäsennyspainikkeet

Tarvitsetko painikkeen, mutta et niiden tuomia muhkeita taustavärejä? Korvaa oletusmuokkausluokat luokilla .btn-outline-*poistaaksesi kaikki taustakuvat ja värit mistä tahansa painikkeesta.

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

Koot

Haluatko suurempia vai pienempiä painikkeita? Lisää .btn-lgtai .btn-smlisäkokoja varten.

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

Luo lohkotason painikkeita – sellaisia, jotka kattavat ylätason koko leveyden – lisäämällä .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>

Aktiivinen tila

Aktiiviset painikkeet näkyvät tummemmalla taustalla, tummemmalla reunuksella ja, kun varjot ovat käytössä, upotetulla varjolla. Luokkaa s ei tarvitse lisätä, <button>koska ne käyttävät pseudoluokkaa . Voit kuitenkin silti pakottaa saman aktiivisen ulkoasun kanssa .active(ja sisällyttää aria-pressed=“true”määritteen), jos sinun on kopioitava tila ohjelmallisesti.

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

Pois käytöstä

Saat painikkeet näyttämään passiivisilta lisäämällä disabledloogisen attribuutin mihin tahansa <button>elementtiin.

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

Elementtiä käyttävät käytöstä poistetut painikkeet <a>käyttäytyvät hieman eri tavalla:

• <a>s eivät tue disabledmääritettä, joten sinun on lisättävä .disabledluokka, jotta se näyttää visuaalisesti pois käytöstä.
• Mukana on joitain tulevaisuuteen sopivia tyylejä, jotka poistavat kaikki pointer-eventsankkuripainikkeet käytöstä. Selaimissa, jotka tukevat tätä ominaisuutta, et näe käytöstä poistettua kohdistinta ollenkaan.
• Käytöstä poistettujen painikkeiden <a>tulee sisältää aria-disabled="true"attribuutti, joka ilmaisee elementin tilan avustaville tekniikoille.
• Käytöstä poistetut painikkeet <a> eivät saa sisältää hrefmääritettä.

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

Varoitus linkin toimivuudesta

Kattaakseen tapaukset, joissa hrefattribuutti on säilytettävä käytöstä poistetussa linkissä, .disabledluokka pointer-events: noneyrittää poistaa <a>s:n linkkitoiminnot käytöstä. Huomaa, että tätä CSS-ominaisuutta ei ole vielä standardoitu HTML:lle, mutta kaikki nykyaikaiset selaimet tukevat sitä. Lisäksi jopa selaimissa, jotka tukevat pointer-events: none, näppäimistönavigointi pysyy ennallaan, mikä tarkoittaa, että näkevät näppäimistön käyttäjät ja avustavien tekniikoiden käyttäjät voivat silti aktivoida nämä linkit. Joten varmuuden vuoksi sisällytä näihin linkkeihin aria-disabled="true"myös tabindex="-1"attribuutti, joka estää niitä vastaanottamasta näppäimistökohdistusta, ja käytä mukautettua JavaScriptiä niiden toiminnan poistamiseksi kokonaan käytöstä.

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

Painikelaajennus

Tee enemmän painikkeilla. Ohjaa painikkeen tiloja tai luo painikeryhmiä muita osia, kuten työkalurivejä, varten.

Vaihda tilat

Lisää data-toggle="button"vaihtaaksesi painikkeen activetilan. Jos vaihdat painiketta etukäteen, sinun on lisättävä .activeluokka ja aria-pressed="true" luokka manuaalisesti <button>.

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

Valintaruutu ja valintanapit

Bootstrapin .buttontyylejä voidaan soveltaa muihin elementteihin, kuten <label>s:iin, valintaruudun tai valintanappipainikkeen vaihtamiseksi. Lisää data-toggle="buttons"niitä .btn-groupmuokattuja painikkeita sisältävään ryhmään, jotta ne voivat vaihdella JavaScriptin kautta, ja lisää .btn-group-togglepainikkeiden tyyliin <input>. Huomaa, että voit luoda yksittäisiä syöttötehoisia painikkeita tai ryhmiä niistä.

Näiden painikkeiden tarkistettu tila päivitetään vain painikkeen clicktapahtuman kautta . Jos käytät jotakin muuta menetelmää syötteen päivittämiseen – esim. <input type="reset">syötteen ominaisuuden kanssa tai manuaalisesti checked– sinun on otettava se käyttöön .activemanuaalisesti <label>.

Huomaa, että esivalitut painikkeet edellyttävät, että .activeluokka on lisättävä manuaalisesti syötteiden kenttään <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>

menetelmät