Komponentit

Bootstrapiin on sisäänrakennettu kymmeniä uudelleenkäytettäviä komponentteja, jotka tarjoavat navigointia, hälytyksiä, ponnahdusikkunoita ja paljon muuta.

Painikeryhmät

Käytä painikeryhmiä yhdistääksesi useita painikkeita yhdeksi yhdistelmäkomponentiksi. Rakenna ne sarjalla <a>tai <button>elementeillä.

Parhaat käytännöt

Suosittelemme seuraavia ohjeita painikeryhmien ja työkalurivien käyttöön:

  • Käytä aina samaa elementtiä yhdessä painikeryhmässä <a>tai <button>.
  • Älä sekoita erivärisiä painikkeita samassa painikeryhmässä.
  • Käytä kuvakkeita tekstin lisäksi tai sen sijaan, mutta muista sisällyttää alt- ja otsikkoteksti tarvittaessa.

Aiheeseen liittyvät painikeryhmät, joissa on pudotusvalikot (katso alla), tulee kutsua erikseen, ja niissä tulee aina olla pudotusvalikko, joka ilmaisee aiotun toiminnan.

Oletusesimerkki

Näin HTML etsii tavallista painikeryhmää, joka on rakennettu ankkuritunnistepainikkeilla:

  1. <div class="btn-group"> luokka = "btn-ryhmä" >
  2. <button class = "btn" > 1 </button>
  3. <button class = "btn" > 2 </button>
  4. <button class = "btn" > 3 </button>
  5. </div>

Esimerkki työkalupalkista

Yhdistä sarjat <div class="btn-group">osaksi <div class="btn-toolbar">monimutkaisempia komponentteja.

  1. <div class="btn-toolbar"> class = "btn-työkalupalkki" >
  2. <div class = "btn-ryhmä" >
  3. ...
  4. </div>
  5. </div>

Valintaruutu ja radio makuja

Painikeryhmät voivat toimia myös radioina, joissa vain yksi painike voi olla aktiivinen, tai valintaruutuina, joissa voi olla aktiivinen mikä tahansa määrä painikkeita. Katso Javascript-dokumentit sitä varten.

Hanki javascript »

Avattavat valikot painikeryhmissä

Varoitus! Pudotusvalikoilla varustetut painikkeet on käärittävä yksitellen omiin osiinsa .btn-group, .btn-toolbarjotta ne hahmontuvat oikein.

Painikkeiden pudotusvalikot

Esimerkki merkinnästä

Kuten painikeryhmässä, merkintämme käyttää tavallista painikemerkintää, mutta kourallinen lisäyksiä tyylin tarkentamiseksi ja Bootstrapin jQuery-laajennuksen tukemiseksi.

  1. <div class="btn-group"> luokka = "btn-ryhmä" >
  2. <a class = "btn dropdown-toggle" data-toggle = "pudotusvalikko" href = "#" >
  3. Toiminta
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "pudotusvalikko" >
  7. <!-- pudotusvalikon linkit -->
  8. </ul>
  9. </div>

Toimii kaikkien painikkeiden kokojen kanssa

Painikkeiden pudotusvalikot toimivat missä tahansa koossa. painikkeiden koot ovat .btn-large, .btn-smalltai .btn-mini.

Vaatii javascriptin

Painikkeiden avattavat valikot edellyttävät Bootstrap-pudotusvalikon toimiakseen.

Joissakin tapauksissa, kuten mobiililaitteissa, avattavat valikot ulottuvat näkymän ulkopuolelle. Sinun on ratkaistava kohdistus manuaalisesti tai mukautetulla javascriptillä.


Jakopainikkeen pudotusvalikot

Yleiskatsaus ja esimerkkejä

Painikeryhmien tyylien ja merkintöjen pohjalta voimme helposti luoda jaetun painikkeen. Split-painikkeissa on vakiotoiminto vasemmalla ja pudotusvalikon vaihtokytkin oikealla kontekstuaalisilla linkeillä.

Koot

Käytä ylimääräisiä painikeluokkia .btn-mini, .btn-smalltai .btn-largekoon mitoittamiseen.

  1. <div class="btn-group"> luokka = "btn-ryhmä" >
  2. ...
  3. <ul class = "pudotusvalikko vedä oikealle" >
  4. <!-- pudotusvalikon linkit -->
  5. </ul>
  6. </div>

Esimerkki merkinnästä

Laajennamme tavallisia painikkeiden avattavia valikoita tarjotaksemme toisen painiketoiminnon, joka toimii erillisenä avattavan valikon laukaisimena.

  1. <div class="btn-group"> luokka = "btn-ryhmä" >
  2. <button class = "btn" > Toiminto </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "pudotusvalikko" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "pudotusvalikko" >
  7. <!-- pudotusvalikon linkit -->
  8. </ul>
  9. </div>

Pudotusvalikot

Avattavat valikot voidaan myös vaihtaa alhaalta ylöspäin lisäämällä yksi luokka :n välittömään yläpäähän .dropdown-menu. Se kääntää suunnan .caretja siirtää itse valikon siirtymään alhaalta ylös ylhäältä alaspäin.

  1. <div class="btn-group dropup"> class = "btn-ryhmän pudotus" >
  2. <button class = "btn" > Pudota </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "pudotusvalikko" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "pudotusvalikko" >
  7. <!-- pudotusvalikon linkit -->
  8. </ul>
  9. </div>

Monen sivun sivutus

Milloin käyttää

Erittäin yksinkertainen ja minimalistinen sivutus Rdion inspiroimana, sopii erinomaisesti sovelluksiin ja hakutuloksiin. Suuri lohko on vaikea ohittaa, helposti skaalautuva ja tarjoaa suuria napsautusalueita.

Selkeät sivulinkit

Linkit ovat muokattavissa ja toimivat useissa olosuhteissa oikean luokan kanssa. .disablednapsauttamattomille linkeille ja .activenykyiselle sivulle.

Joustava kohdistus

Lisää jompikumpi kahdesta valinnaisesta luokasta muuttaaksesi sivutuslinkkien kohdistusta: .pagination-centeredja .pagination-right.

Esimerkkejä

Oletussivutuskomponentti on joustava ja toimii useissa muunnelmissa.

Merkintä

Käärittynä <div>sivunumerointi on vain <ul>.

  1. <div class="pagination"> luokka = "sivutus" >
  2. <ul>
  3. <li><a href = "#" > Edellinen </a></li>
  4. <li class = "aktiivinen" >
  5. <a href = "#" > 1 </a>
  6. </li>
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > 4 ​​</a></li>
  10. <li><a href = "#" > Seuraava </a></li>
  11. </ul>
  12. </div>

Hakulaite Nopeat edelliset ja seuraavat linkit

Tietoja hakulaitteesta

Hakulaite on joukko linkkejä yksinkertaisiin sivutustoteutuksiin kevyellä merkinnällä ja vielä kevyemmillä tyyleillä. Se sopii erinomaisesti yksinkertaisille sivustoille, kuten blogeille tai aikakauslehdille.

Valinnainen pois käytöstä tila

Hakulinkit käyttävät myös yleistä .disabledluokkaa sivutuksesta.

Oletusesimerkki

Oletusarvoisesti hakulaite keskittää linkit.

  1. <ul class="pager"> luokka = "hakulaite" >
  2. <li>
  3. <a href = "#" > Edellinen </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Seuraava </a>
  7. </li>
  8. </ul>

Tasaiset linkit

Vaihtoehtoisesti voit kohdistaa jokaisen linkin sivuille:

  1. <ul class="pager"> luokka = "hakulaite" >
  2. <li class = "edellinen" >
  3. <a href = "#" > Vanhempi </a>
  4. </li>
  5. <li class = "seuraava" >
  6. <a href = "#" > Uudempi → </a>
  7. </li>
  8. </ul>
Tarrat Merkintä
Oletus <span class="label">Default</span>
Menestys <span class="label label-success">Success</span>
Varoitus <span class="label label-warning">Warning</span>
Tärkeä <span class="label label-important">Important</span>
Tiedot <span class="label label-info">Info</span>
Käänteinen <span class="label label-inverse">Inverse</span>

Noin

Tunnusmerkit ovat pieniä, yksinkertaisia ​​komponentteja jonkinlaisen indikaattorin tai luvun näyttämiseen. Niitä löytyy yleensä sähköpostiohjelmista, kuten Mail.app, tai mobiilisovelluksista push-ilmoituksia varten.

Saatavilla olevat luokat

Nimi Esimerkki Merkintä
Oletus 1 <span class="badge">1</span>
Menestys 2 <span class="badge badge-success">2</span>
Varoitus 4 <span class="badge badge-warning">4</span>
Tärkeä 6 <span class="badge badge-important">6</span>
Tiedot 8 <span class="badge badge-info">8</span>
Käänteinen 10 <span class="badge badge-inverse">10</span>

Sankariyksikkö

Bootstrap tarjoaa kevyen, joustavan osan, jota kutsutaan sankariyksiköksi, joka esittelee sivustosi sisältöä. Se toimii hyvin markkinoinnissa ja paljon sisältöä sisältävillä sivustoilla.

Merkintä

Kääri sisältösi divesimerkiksi näin:

  1. <div class="hero-unit"> luokka = "sankariyksikkö" >
  2. <h1> Otsikko </h1>
  3. <p> Tunnuslause </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large" >
  6. Lue lisää
  7. </a>
  8. </p>
  9. </div>

Hei maailma!

Tämä on yksinkertainen sankariyksikkö, yksinkertainen jumbotron-tyylinen komponentti, joka kiinnittää erityistä huomiota esillä olevaan sisältöön tai tietoon.

Lue lisää

Sivun otsikko

Yksinkertainen komentotulkki h1sivun sisällön osioiden välittämistä ja segmentointia varten. Se voi käyttää h1oletuselementtiä smallsekä useimpia muita komponentteja (lisätyyleillä).

  1. <div class="page-header"> class = "sivun otsikko" >
  2. <h1> Esimerkkisivun otsikko </h1>
  3. </div>

Oletuspikkukuvat

Oletuksena Bootstrapin pikkukuvat on suunniteltu esittelemään linkitettyjä kuvia minimaalisella vaaditulla merkinnällä.

Erittäin muokattavissa

Pienellä ylimääräisellä merkinnällä on mahdollista lisätä pikkukuviin kaikenlaista HTML-sisältöä, kuten otsikoita, kappaleita tai painikkeita.

  • Pikkukuvatarra

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Toiminta Toiminta

  • Pikkukuvatarra

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Toiminta Toiminta

Miksi käyttää pikkukuvia

Pikkukuvat (aiemmin .media-gridversioon 1.4 asti) sopivat erinomaisesti valokuvien tai videoiden ruudukoille, kuvahakutuloksille, vähittäismyyntituotteille, portfolioille ja monelle muulle. Ne voivat olla linkkejä tai staattista sisältöä.

Yksinkertainen, joustava merkintä

Pikkukuvien merkintä on yksinkertaista – ulkaikki tarvittava määrä lielementtejä on a. Se on myös erittäin joustava, ja se mahdollistaa kaiken tyyppisen sisällön ja vain hieman enemmän merkintöjä sisällön käärimiseen.

Käyttää ruudukon sarakkeiden kokoja

Lopuksi pikkukuvakomponentti käyttää olemassa olevia ruudukon järjestelmäluokkia, kuten .span2tai .span3- pikkukuvien mittojen ohjaamiseen.

Merkintä

Kuten aiemmin mainittiin, pikkukuvien vaadittava merkintä on kevyt ja yksinkertainen. Tässä on katsaus linkitettyjen kuvien oletusasetuksiin :

  1. <ul class="thumbnails"> class = "pikkukuvat" >
  2. <li class = "span3" >
  3. <a href = "#" class = "pikkukuva" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

Pikkukuvien mukautetun HTML-sisällön merkintä muuttuu hieman. Jotta estotason sisältö voidaan sallia missä tahansa, vaihdamme <a>sen <div>vastaavaan:

  1. <ul class="thumbnails"> class = "pikkukuvat" >
  2. <li class = "span3" >
  3. <div class = "pikkukuva" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Pikkukuvan tunniste </h5>
  6. <p> Pikkukuvan kuvateksti tässä... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Lisää esimerkkejä

Tutustu kaikkiin vaihtoehtoihin käytettävissäsi olevien erilaisten ruudukkoluokkien avulla. Voit myös yhdistellä eri kokoja.

Kevyt oletusarvot

Uudelleen kirjoitettu perusluokka

Bootstrap 2:lla olemme yksinkertaistaneet perusluokkaa .alert: .alert-message. Olemme myös vähentäneet vaadittua vähimmäismerkintää – <p>oletuksena ei vaadita, vain ulompi <div>.

Yksittäinen hälytysviesti

Kestävämmän ja vähemmän koodia sisältävän komponentin saamiseksi olemme poistaneet erottuvan ulkoasun estohälytyksiltä, ​​viesteiltä, ​​joissa on enemmän täyttöä ja yleensä enemmän tekstiä. Myös luokka on vaihtunut muotoon .alert-block.


Toimii hyvin javascriptin kanssa

Bootstrapissa on upea jQuery-laajennus, joka tukee hälytysviestejä, mikä tekee niiden hylkäämisestä nopeaa ja helppoa.

Hanki laajennus »

Esimerkki hälytyksistä

Kääri viestisi ja valinnainen sulkemiskuvake diviksi yksinkertaisella luokalla.

Varoitus! Parasta tarkistaa itsesi, et näytä liian hyvältä.
  1. <div class="alert"> luokka = "hälytys" >
  2. <button class = "sulje" data-dismiss = "hälytys" > × </button>
  3. <strong> Varoitus! </strong> Tarkista itsesi, et näytä liian hyvältä.
  4. </div>

Varoitus! iOS-laitteet vaativat href="#"hälytysten poistamisen. Muista sisällyttää se ja ankkurin sulkemiskuvakkeiden data-attribuutti. Vaihtoehtoisesti voit käyttää <button>elementtiä data-attribuutilla, jonka olemme valinneet asiakirjoissamme. Kun käytät <button>, sinun on sisällytettävä type="button"lomakkeitasi tai niitä ei saa lähettää.

Laajenna vakiovaroitusviestiä helposti kahdella valinnaisella luokalla: .alert-blocklisää täyte- ja tekstiohjausobjekteja sekä .alert-headingvastaava otsikko.

Varoitus!

Parasta tarkistaa itsesi, et näytä liian hyvältä. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div class="alert alert-block"> class = "alert alert-block" >
  2. <a class = "sulje" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 class = "alert-heading" > Varoitus! </h4>
  4. Parasta tarkistaa itsesi, et ole...
  5. </div>

Asiayhteysvaihtoehdot Lisää valinnaisia ​​luokkia hälytyksen konnotaatioiden muuttamiseksi

Virhe tai vaara

Voi pahus! Muuta muutamia asioita ja yritä lähettää uudelleen.
  1. <div class="alert alert-error"> class = "alert alert-error" >
  2. ...
  3. </div>

Menestys

Hyvin tehty! Luit onnistuneesti tämän tärkeän varoitusviestin.
  1. <div class="alert alert-success"> class = "alert alert-success" >
  2. ...
  3. </div>

Tiedot

Varoitus! Tämä hälytys vaatii huomiotasi, mutta se ei ole erityisen tärkeä.
  1. <div class="alert alert-info"> class = "alert alert-info" >
  2. ...
  3. </div>

Esimerkit ja merkinnät

Perus

Oletus etenemispalkki, jossa on pystysuora kaltevuus.

  1. <div class="progress"> luokka = "edistyminen" >
  2. <div class = "baari"
  3. style = " leveys : 60 %; " ></div>
  4. </div>

Raidallinen

Käyttää liukuväriä luodakseen raidallisen tehosteen (ei IE:tä).

  1. <div class="progress progress-striped"> class = "edistyminen etenemisraidallinen" >
  2. <div class = "baari"
  3. style = " leveys : 20 %; " ></div>
  4. </div>

Animoitu

Ottaa raidallisen esimerkin ja animoi sen (ei IE:tä).

  1. <div class="progress progress-striped luokka = "edistyminen edistynyt raidallinen
  2. aktiivinen" >
  3. <div class = "baari"
  4. style = " leveys : 40 %; " ></div>
  5. </div>

Vaihtoehdot ja selaimen tuki

Lisävärit

Edistymispalkit käyttävät joitain samoja painike- ja hälytysluokkia yhtenäisten tyylien aikaansaamiseksi.

Raidalliset tangot

Kuten yhtenäiset värit, meillä on erilaisia ​​raidallisia edistymispalkkeja.

Käyttäytyminen

Etenemispalkit käyttävät CSS3-siirtymiä, joten jos säädät leveyttä dynaamisesti javascriptin avulla, sen koko muuttuu sujuvasti.

Jos käytät .activeluokkaa, .progress-stripededistymispalkit animoivat raidat vasemmalta oikealle.

Selaimen tuki

Edistymispalkit käyttävät CSS3-gradientteja, siirtymiä ja animaatioita saavuttaakseen kaikki tehonsa. Näitä ominaisuuksia ei tueta Firefoxin IE7-9:ssä tai vanhemmissa versioissa.

Opera ja IE eivät tue animaatioita tällä hetkellä.

Wells

Käytä kaivoa yksinkertaisena tehosteena elementissä antaaksesi sille upotetun vaikutelman.

Katso, olen kaivossa!
  1. <div class="well"> luokka = "hyvin" >
  2. ...
  3. </div>

Sulje kuvake

Käytä yleistä sulkemiskuvaketta sulkeaksesi sisällön, kuten modaalit ja hälytykset.

  1. <button class="close">×</button> class = "sulje" > × </button>

iOS-laitteet vaativat href="#"-merkin klikkaustapahtumille, jos käytät mieluummin ankkuria.

  1. <a class="close" href="#">×</a> class = "sulje" href = "#" > × </a>