Esimerkki

Vaihteleva kontekstivalikko linkkiluetteloiden näyttämistä varten. Tehty interaktiiviseksi avattavalla JavaScript-laajennuksella .

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Toimi </a></li>  
  <li><a tabindex = "-1" href = "#" > Toinen toiminto </a></li>  
  <li><a tabindex = "-1" href = "#" > Jotain muuta tässä </a></li>  
  <li class = "jakaja" ></li> 
  <li><a tabindex = "-1" href = "#" > Erillinen linkki </a></li>  
</ul>

Merkintä

Tässä on vaadittu HTML-koodi avattavasta valikosta. Sinun on käärittävä avattavan valikon käynnistin ja avattava valikko sisään .dropdowntai muuhun elementtiin, joka ilmoittaa position: relative;. Luo sitten vain valikko.

<div class = "pudotusvalikko" > 
  <!-- Linkki tai painike avattavaan valikkoon -->
  <ul class = "dropdown-menu" role = "menu" aria- labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Toimi </a></li>  
    <li><a tabindex = "-1" href = "#" > Toinen toiminto </a></li>  
    <li><a tabindex = "-1" href = "#" > Jotain muuta tässä </a></li>  
    <li class = "jakaja" ></li> 
    <li><a tabindex = "-1" href = "#" > Erillinen linkki </a></li>  
  </ul>
</div>

Vaihtoehdot

Tasaa valikot oikealle ja lisää avattavia valikoita.

Valikoiden kohdistaminen

Lisää .pull-righta .dropdown-menu-kohtaan oikealle tasaa avattava valikko.

<ul class = "dropdown-menu pull-right" role = "menu" aria- labelledby = "dLabel" >   
  ...
</ul>

Poistetut valikon vaihtoehdot

Lisää .disableda <li>alasvetovalikosta poistaaksesi linkin käytöstä.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Tavallinen linkki </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > Linkki pois käytöstä </a></li>   
  <li><a tabindex = "-1" href = "#" > Toinen linkki </a></li>  
</ul>

Alavalikot avattavissa valikoissa

Lisää ylimääräisiä avattavia valikoita, jotka näkyvät OS X:n tapaan osoittimen päällä muutamilla yksinkertaisilla lisäysmerkinnöillä. Lisää .dropdown-submenumihin tahansa liolemassa olevaan avattavaan valikkoon automaattista muotoilua varten.

Oletus

Pudotus

Vasen alivalikko

<ul class = "dropdown-menu" role = "menu" aria- labelledby = "dLabel" >   
  ...
  <li class = "pudotusvalikko" > 
    <a tabindex = "-1" href = "#" > Lisää vaihtoehtoja </a>  
    <ul class = "pudotusvalikko" > 
      ...
    </ul>
  </li>
</ul>

Esimerkkejä

Kaksi perusvaihtoehtoa sekä kaksi tarkempaa muunnelmaa.

Yksi painikeryhmä

Kääri useita painikkeita .btnsisään -merkillä .btn-group.

<div class = "btn-ryhmä" > 
  <button class = "btn" > Vasen </button> 
  <button class = "btn" > Keskimmäinen </button> 
  <button class = "btn" > Oikea </button> 
</div>

Useita painikeryhmiä

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

<div class = "btn-työkalupalkki" > 
  <div class = "btn-ryhmä" > 
    ...
  </div>
</div>

Pystysuuntaiset painikeryhmät

Saa painikkeet näyttämään pystysuorassa pinossa vaakasuoran sijaan.

<div class = "btn-group btn-group-vertical" > 
  ...
</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.

Avattavat valikot painikeryhmissä

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

Yleiskatsaus ja esimerkkejä

Käytä mitä tahansa painiketta avataksesi pudotusvalikon sijoittamalla sen a- .btn-groupkohtaan ja antamalla oikeat valikkomerkinnät.

<div class = "btn-ryhmä" > 
  <a class = "btn dropdown-toggle" data-toggle = "pudotusvalikko" href = "#" >   
    Toiminta
    <span class = "caret" ></span> 
  </a>
  <ul class = "pudotusvalikko" > 
    <!-- pudotusvalikon linkit -->
  </ul>
</div>

Toimii kaikkien painikkeiden kokojen kanssa

Painikkeiden avattavat valikot toimivat missä tahansa koossa: .btn-large, .btn-small, tai .btn-mini.

Edellyttää JavaScriptiä

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

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

<div class = "btn-ryhmä" > 
  <button class = "btn" > Toiminto </button> 
  <button class = "btn dropdown-toggle" data-toggle = "pudotusvalikko" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "pudotusvalikko" > 
    <!-- pudotusvalikon linkit -->
  </ul>
</div>

Koot

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

<div class = "btn-ryhmä" > 
  <button class = "btn btn-mini" > Toiminto </button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "pudotusvalikko" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "pudotusvalikko" > 
    <!-- pudotusvalikon linkit -->
  </ul>
</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.

<div class = "btn-group dropup" > 
  <button class = "btn" > Pudota </button> 
  <button class = "btn dropdown-toggle" data-toggle = "pudotusvalikko" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "pudotusvalikko" > 
    <!-- pudotusvalikon linkit -->
  </ul>
</div>

Kevyt oletusarvot Sama merkintä, eri luokat

Kaikilla täällä olevilla navigointikomponenteilla - välilehdillä, pillereillä ja luetteloilla - on sama.nav perusmerkintä ja -tyyli luokassa.

Perusvälilehdet

Ota säännöllisesti <ul>linkkejä ja lisää .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li class = "aktiivinen" > 
    <a href = "#" > Etusivu </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Perus pillerit

Ota sama HTML, mutta käytä .nav-pillssen sijaan:

<ul class = "nav nav-pills" > 
  <li class = "aktiivinen" > 
    <a href = "#" > Etusivu </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Pois käytöstä

Lisää kaikille navigointikomponenteille (välilehdille, pillereille tai luetteloille), .disabledjotta saat harmaita linkkejä, mutta ei hover-tehosteita . Linkit pysyvät kuitenkin klikattavissa, ellet poista hrefmääritettä. Vaihtoehtoisesti voit ottaa käyttöön mukautetun JavaScriptin estääksesi kyseiset napsautukset.

<ul class = "nav nav-pills" > 
  ...
  <li class = "pois käytöstä" ><a href = "#" > Etusivu </a></li>  
  ...
</ul>

Komponenttien kohdistus

Kohdista navigointilinkit käyttämällä apuluokkia .pull-lefttai .pull-right. Molemmat luokat lisäävät CSS-kellukkeen määritettyyn suuntaan.

Pinottava

Koska välilehdet ja pillerit ovat oletuksena vaakasuuntaisia, lisää vain toinen luokka, .nav-stackedjotta ne näyttävät pystysuunnassa pinottuilta.

Pinotut välilehdet

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

Pinottu pillereitä

<ul class = "nav nav-pills nav-stacked" > 
  ...
</ul>

Pudotusvalikosta

Lisää avattavat valikot hieman ylimääräisellä HTML-koodilla ja avattavalla JavaScript-laajennuksella .

Välilehdet avattavilla valikoilla

<ul class = "nav nav-tabs" > 
  <li class = "pudotusvalikko" > 
    <a class = "pudotusvalikko-vaihto" 
       data-toggle = "pudotusvalikko"
       href = "#" >
        Pudota alas
        <b class = "caret" ></b> 
      </a>
    <ul class = "pudotusvalikko" > 
      <!-- linkit -->
    </ul>
  </li>
</ul>

Pillerit pudotusvalikoilla

<ul class = "nav nav-pills" > 
  <li class = "pudotusvalikko" > 
    <a class = "pudotusvalikko-vaihto" 
       data-toggle = "pudotusvalikko"
       href = "#" >
        Pudota alas
        <b class = "caret" ></b> 
      </a>
    <ul class = "pudotusvalikko" > 
      <!-- linkit -->
    </ul>
  </li>
</ul>

Nav-luettelot

Yksinkertainen ja helppo tapa luoda navigointilinkkien ryhmiä valinnaisilla otsikoilla. Niitä käytetään parhaiten sivupalkeissa, kuten Finderissa OS X:ssä.

Esimerkki navigointiluettelosta

Ota luettelo linkeistä ja lisää class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > Luettelon otsikko </li> 
  <li class = "aktiivinen" ><a href = "#" > Etusivu </a></li>  
  <li><a href = "#" > Kirjasto </a></li> 
  ...
</ul>

MerkintäSisäistääksesi navigointiluettelon, sisällytä class="nav nav-list"mihin tahansa sisäkkäiseen <ul>.

Vaakasuuntaiset jakajat

Lisää vaakasuuntainen jakaja luomalla tyhjä luettelokohde luokassa .divider, kuten näin:

<ul class = "nav nav-list" > 
  ...
  <li class = "jakaja" ></li> 
  ...
</ul>

Tabbable nav

Herätä välilehdet henkiin yksinkertaisella laajennuksella, jolla voit vaihtaa sisällön välillä välilehtien kautta. Bootstrap yhdistää välilehdet neljään tyyliin: ylhäällä (oletus), oikealle, alapuolelle ja vasemmalle.

Tabuloitu esimerkki

Voit tehdä välilehdistä välilehtiä luomalla .tab-panejokaiselle välilehdelle yksilöllisen tunnuksen ja käärimällä ne .tab-content.

Olen osastolla 1.

Hei, olen osiossa 2.

Mitä kuuluu tyttö, tämä on osa 3.

<div class = "välilehti" > <!-- Vaaditaan vain vasemmalle/oikealle välilehdelle -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "välilehti" > Osa 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "välilehti" > Osa 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Olen osiossa 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Hei, olen osiossa 2. </p>
    </div>
  </div>
</div>

Häivyttää välilehdissä

Saat välilehdet häivyttää lisäämällä .fadekuhunkin .tab-pane.

Vaatii jQuery-laajennuksen

Kaikki välilehdet saavat virtansa kevyestä jQuery-laajennuksestamme. Lue lisää välilehtien herättämisestä henkiin JavaScript-dokumentit -sivulla .

Tabletti mihin tahansa suuntaan

Pohjassa välilehdet

Käännä HTML-koodin järjestystä ja lisää luokka välilehtien sijoittamiseksi alareunaan.

Olen osastolla A.

Hei, olen B-osiossa.

Mitä kuuluu tyttö, tämä on osa C.

<div class = "välilehdet-alla" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Välilehdet vasemmalla

Vaihda luokkaa lisäämään välilehdet vasemmalle.

Olen osastolla A.

Hei, olen B-osiossa.

Mitä kuuluu tyttö, tämä on osa C.

<div class = "tabable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Välilehdet oikealla

Vaihda luokkaa niin, että välilehdet laitetaan oikealle.

Olen osastolla A.

Hei, olen B-osiossa.

Mitä kuuluu tyttö, tämä on osa C.

<div class = "tabbable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Perusnavigointipalkki

Aluksi navigointipalkit ovat staattisia (ei kiinnitetty yläosaan) ja sisältävät tuen projektin nimelle ja perusnavigaatiolle. Sijoita se mihin tahansa .containerkohtaan , joka määrittää sivustosi ja sisällön leveyden.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Otsikko </a>  
    <ul class = "nav" > 
      <li class = "aktiivinen" ><a href = "#" > Etusivu </a></li>  
      <li><a href = "#" > Linkki </a></li> 
      <li><a href = "#" > Linkki </a></li> 
    </ul>
  </div>
</div>

Navbarin komponentit

Brändi

Yksinkertainen linkki brändisi tai projektisi nimen näyttämiseen vaatii vain ankkuritunnisteen.

<a class = "brand" href = "#" > Projektin nimi </a>

Nav linkit

Nav-kohteet on helppo lisätä järjestämättömien luetteloiden kautta.

<ul class = "nav" > 
  <li class = "aktiivinen" > 
    <a href = "#" > Etusivu </a> 
  </li>
  <li><a href = "#" > Linkki </a></li> 
  <li><a href = "#" > Linkki </a></li> 
</ul>

Voit helposti lisätä jakajia navigointilinkkeihisi tyhjällä luettelokohdalla ja yksinkertaisella luokalla. Lisää tämä linkkien väliin:

<ul class = "nav" > 
  ...
  <li class = "jakaja-vertical" ></li> 
  ...
</ul>

Lomakkeet

Voit muotoilla ja sijoittaa lomakkeen oikein navigointipalkkiin lisäämällä sopivat luokat alla olevan kuvan mukaisesti. Oletuslomakkeelle sisällytä .navbar-formja joko .pull-lefttai .pull-righttasataksesi sen oikein.

<form class = "navbar-form pull-left" > 
  <syöttötyyppi = " teksti" class = "span2" >  
  <button type = "submit" class = "btn" > Lähetä </button>  
</form>

Hakulomake

Saat mukautetun hakulomakkeen lisäämällä navigointipalkin erikoistyylejä .navbar-searchkoskeviin syötteisiin ja form..search-query

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" placeholder = "Haku" >   
</form>

Komponenttien kohdistus

Tasaa navigointilinkit, hakulomake tai teksti, käytä .pull-lefttai .pull-righthyödyllisyysluokkia. Molemmat luokat lisäävät CSS-kellukkeen määritettyyn suuntaan.

Pudotusvalikoiden käyttäminen

Lisää avattavia valikoita ja pudotusvalikkoja navigointiin pienellä merkinnällä ja avattavalla JavaScript-laajennuksella .

<ul class = "nav" > 
  <li class = "pudotusvalikko" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "pudotusvalikko" >   
      Tili
      <b class = "caret" ></b> 
    </a>
    <ul class = "pudotusvalikko" > 
      ...
    </ul>
  </li>
</ul>

Tutustu JavaScript-pudotusvalikoiden dokumentaatioon saadaksesi lisää merkintöjä ja tietoja kutsuvista avattavista valikoista.

Teksti

Kääri tekstijonot elementtiin merkillä .navbar-text, yleensä <p>tunnisteeseen oikean johdon ja värin takaamiseksi.

Valinnaiset näyttömuunnelmat

Kiinnitä navigointipalkki näkymän ylä- tai alaosaan lisäluokalla uloimpaan divaan .navbar.

Kiinnitetty yläosaan

Lisää .navbar-fixed-topja muista ottaa huomioon sen alla oleva piilotettu alue lisäämällä vähintään 40 kuvapistettä padding. <body>Muista lisätä tämä Bootstrap-ydinCSS:n jälkeen ja ennen valinnaista reagoivaa CSS:ää.

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

Kiinnitetty pohjaan

Lisää .navbar-fixed-bottomsen sijaan.

<div class = "navbar navbar-fixed-bottom" > 
  ...
</div>

Staattinen ylänavigointipalkki

Luo täysleveä navigointipalkki, joka vierii pois sivulta lisäämällä .navbar-static-top. Toisin kuin .navbar-fixed-topluokassa, sinun ei tarvitse vaihtaa täyttöä body.

<div class = "navbar navbar-static-top" > 
  ...
</div>

Responsiivinen navigointipalkki

Ota käyttöön kutistuva reagoiva navigointipalkki käärimällä navigointipalkin sisältö div .nav-collapse.collapse-merkkiin ja lisäämällä navigointipalkin vaihtopainike .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "säilö" > 
 
      <!-- .btn-navbar käytetään tiivistetyn navigointipalkin sisällön vaihtokytkimenä -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span class = "kuvakepalkki" ></span> 
        <span class = "kuvakepalkki" ></span> 
        <span class = "kuvakepalkki" ></span> 
      </a>
 
      <!-- Muista jättää brändi ulos, jos haluat sen näkyvän -->
      <a class = "brand" href = "#" > Projektin nimi </a>  
 
      <!-- Kaikki mitä haluat piilottaa enintään 940 pikseliä, sijoita tähän -->
      <div class = "nav-collapse collapse" > 
        <!-- .nav, .navbar-search, .navbar-form jne -->
      </div>
 
    </div>
  </div>
</div>

Varoitus! Responsiivinen navigointipalkki vaatii tiivistyslaajennuksen ja reagoivan Bootstrap CSS - tiedoston .

Käänteinen variaatio

Muokkaa navigointipalkin ulkoasua lisäämällä .navbar-inverse.

<div class = "navbar navbar-inverse" > 
  ...
</div>

Esimerkkejä

Yksi esimerkki näytetään, koska se voidaan näyttää useilla sivuilla.

<ul class = "leivänmuru" > 
  <li><a href = "#" > Etusivu </a> <span class = "jakaja" > / </span></li>   
  <li><a href = "#" > Kirjasto </a> <span class = "jakaja" > / </span></li>   
  <li class = "aktiivinen" > Tiedot </li> 
</ul>

Normaali sivutus

Yksinkertainen Rdion inspiroima sivutus, joka sopii erinomaisesti sovelluksiin ja hakutuloksiin. Suuri lohko on vaikea ohittaa, helposti skaalautuva ja tarjoaa suuria napsautusalueita.

<div class = "sivutus" > 
  <ul>
    <li><a href = "#" > Edellinen </a></li> 
    <li><a href = "#" > 1 </a></li> 
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 </a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li><a href = "#" > Seuraava </a></li> 
  </ul>
</div>

Vaihtoehdot

Pois käytöstä ja aktiiviset tilat

Linkit ovat muokattavissa erilaisiin olosuhteisiin. Käytä .disabledlinkkeihin, joita ei voi napsauttaa, ja .activeosoittamaan nykyisen sivun.

<div class = "sivutus" > 
  <ul>
    <li class = "pois käytöstä" ><a href = "#" > « </a></li>  
    <li class = "aktiivinen" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

Voit halutessasi vaihtaa aktiiviset tai käytöstä poistetut ankkurit jänneväliin poistaaksesi napsautustoiminnot säilyttäen samalla aiotut tyylit.

<div class = "sivutus" > 
  <ul>
    <li class = "pois käytöstä" ><span> « </span></li> 
    <li class = "aktiivinen" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Koot

Haluatko suuremman vai pienemmän sivun? Lisää .pagination-large, .pagination-small, tai .pagination-minilisäkokoja varten.

<div class = "sivutus sivutus-suuri" > 
  <ul>
    ...
  </ul>
</div>
<div class = "sivutus" > 
  <ul>
    ...
  </ul>
</div>
<div class = "sivujen sivutus-pieni" > 
  <ul>
    ...
  </ul>
</div>
<div class = "sivutus sivutus-mini" > 
  <ul>
    ...
  </ul>
</div>

Tasaus

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

<div class = "sivutus sivutuskeskeinen" > 
  ...
</div>

<div class = "sivutus oikealla" > 
  ...
</div>

Hakulaite

Nopeat edelliset ja seuraavat linkit yksinkertaisiin sivutustoteutuksiin kevyellä merkinnällä ja tyyleillä. Se sopii erinomaisesti yksinkertaisille sivustoille, kuten blogeille tai aikakauslehdille.

Oletusesimerkki

Oletusarvoisesti hakulaite keskittää linkit.

<ul class = "hakulaite" > 
  <li><a href = "#" > Edellinen </a></li> 
  <li><a href = "#" > Seuraava </a></li> 
</ul>

Tasaiset linkit

Vaihtoehtoisesti voit kohdistaa jokaisen linkin sivuille:

<ul class = "hakulaite" > 
  <li class = "edellinen" > 
    <a href = "#" > ← Vanhempi </a> 
  </li>
  <li class = "seuraava" > 
    <a href = "#" > Uudempi → </a> 
  </li>
</ul>

Valinnainen pois käytöstä tila

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

<ul class = "hakulaite" > 
  <li class = "edellinen poistettu käytöstä" > 
    <a href = "#" > ← Vanhempi </a> 
  </li>
  ...
</ul>

Tarrat

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

Tunnusmerkit

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

Helposti kokoontaitettava

Käyttöönoton helpottamiseksi tarrat ja merkit yksinkertaisesti kutistuvat (CSS:n :emptyvalitsimen kautta), kun sisällä ei ole sisältöä.

Sankariyksikkö

Kevyt, joustava komponentti sivustosi keskeisen sisällön esittelyyn. Se toimii hyvin markkinoinnissa ja paljon sisältöä sisältävillä sivustoilla.

Hei maailma!

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

Lue lisää

<div class = "sankariyksikkö" > 
  <h1> Otsikko </h1>
  <p> Tunnuslause </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Lue lisää
    </a>
  </p>
</div>

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ä).

<div class = "sivun otsikko" > 
  <h1> Esimerkkisivun otsikko <small> Otsikon alateksti </small></h1>
</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
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 :

<ul class = "pikkukuvat" > 
  <li class = "span4" > 
    <a href = "#" class = "pikkukuva" >  
      <img data-src = "holder.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

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

<ul class = "pikkukuvat" > 
  <li class = "span4" > 
    <div class = "pikkukuva" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Pikkukuvan tunniste </h3>
      <p> Pikkukuvan kuvateksti... </p>
    </div>
  </li>
  ...
</ul>

Lisää esimerkkejä

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

Oletushälytys

Kääri teksti ja valinnainen hylkäyspainike .alertsaadaksesi perusvaroitusviestin.

Varoitus! Parasta tarkistaa itsesi, et näytä liian hyvältä.

<div class = "hälytys" > 
  <button type = "button" class = "sulje" data-dismiss = "hälytys" > × </button>   
  <strong> Varoitus! </strong> Tarkista itsesi, et näytä liian hyvältä.
</div>

Hylkää painikkeet

Mobiili Safari ja Mobile Opera -selaimet data-dismiss="alert"vaativat määritteen href="#"lisäksi hälytyksiä käytettäessä <a>tunnistetta.

<a href = "#" class = "sulje" data-dismiss = "hälytys" > × </a>

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

<button type = "button" class = "sulje" data-dismiss = "hälytys" > × </button>

Hylkää hälytykset JavaScriptin kautta

Käytä hälytyksiä jQuery-laajennusta hälytysten poistamiseen nopeasti ja helposti.

Vaihtoehdot

Pidempiä viestejä varten lisää täyttöä hälytyskääreen ylä- ja alaosassa lisäämällä .alert-block.

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.

<div class = "alert alert-block" > 
  <button type = "button" class = "sulje" data-dismiss = "hälytys" > × </button>   
  <h4> Varoitus! </h4>
  Parasta tarkistaa itsesi, et ole...
</div>

Kontekstuaaliset vaihtoehdot

Lisää valinnaisia luokkia muuttaaksesi hälytyksen konnotaatiota.

Virhe tai vaara

Voi pahus! Muuta muutamia asioita ja yritä lähettää uudelleen.

<div class = "alert alert-error" > 
  ...
</div>

Menestys

Hyvin tehty! Luit onnistuneesti tämän tärkeän varoitusviestin.

<div class = "alert alert-success" > 
  ...
</div>

Tiedot

Varoitus! Tämä hälytys vaatii huomiotasi, mutta se ei ole erityisen tärkeä.

<div class = "alert alert-info" > 
  ...
</div>

Esimerkit ja merkinnät

Perus

Oletus etenemispalkki, jossa on pystysuora kaltevuus.

<div class = "edistyminen" > 
  <div class = "bar" style = " leveys : 60 %; " ></div>   
</div>

Raidallinen

Käyttää gradienttia luodakseen raidallisen tehosteen. Ei saatavilla IE7-8:ssa.

<div class = "edistyminen edistynyt raidallinen" > 
  <div class = "bar" style = " leveys : 20 %; " ></div>   
</div>

Animoitu

Lisää .active: .progress-stripedanimoidaksesi raidat oikealta vasemmalle. Ei saatavilla kaikissa IE:n versioissa.

<div class = "edistyminen edistynyt raidallinen aktiivinen" > 
  <div class = "bar" style = " leveys : 40 %; " ></div>   
</div>

Pinottu

Aseta useita tankoja samaan .progresspinoaksesi ne.

<div class = "edistyminen" > 
  <div class = "bar bar-success" style = " leveys : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " leveys : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " leveys : 10 %; " ></div>   
</div>

Vaihtoehdot

Lisävärit

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

<div class = "edistymistiedot" > 
  <div class = "bar" style = " leveys : 20 % " ></div>   
</div>
<div class = "edistyminen edistys-menestys" > 
  <div class = "bar" style = " leveys : 40 % " ></div>   
</div>
<div class = "edistymisen edistymisvaroitus" > 
  <div class = "bar" style = " leveys : 60 % " ></div>   
</div>
<div class = "edistymisen vaara" > 
  <div class = "bar" style = " leveys : 80 % " ></div>   
</div>

Raidalliset tangot

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

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " leveys : 20 % " ></div>   
</div>
<div class = "edistyminen edistys-menestys edistys-raidallinen" > 
  <div class = "bar" style = " leveys : 40 % " ></div>   
</div>
<div class = "edistymisvaroitus edistymisraidallinen" > 
  <div class = "bar" style = " leveys : 60 % " ></div>   
</div>
<div class = "edistyminen edistyminen-vaara edistyminen-raidallinen" > 
  <div class = "bar" style = " leveys : 80 % " ></div>   
</div>

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.

Internet Explorer 10:tä ja Opera 12:ta aiemmat versiot eivät tue animaatioita.

Abstrakteja objektityylejä erityyppisten komponenttien (kuten blogikommenttien, twiittien jne.) rakentamiseen, joissa on vasemmalle tai oikealle tasattu kuva tekstisisällön ohella.

Oletusesimerkki

Oletusmedia sallii mediaobjektin (kuvien, videon, äänen) kellumisen sisältölohkon vasemmalle tai oikealle puolelle.

Media otsikko

Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media otsikko

<div class = "media" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > Mediaotsikko </h4> 
    ...
 
    <!-- Sisäkkäinen mediaobjekti -->
    <div class = "media" > 
      ...
    </div>
  </div>
</div>

Media lista

Pienellä ylimääräisellä merkinnällä voit käyttää median sisäistä luetteloa (hyödyllinen kommenttiketjuissa tai artikkeliluetteloissa).

Media otsikko

Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Sisäkkäinen mediaotsikko
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Sisäkkäinen mediaotsikko
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Sisäkkäinen mediaotsikko
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Media otsikko
Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

<ul class = "medialuettelo" > 
  <li class = "media" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > Mediaotsikko </h4> 
      ...
 
      <!-- Sisäkkäinen mediaobjekti -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

Wells

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

Katso, olen kaivossa!

<div class = "hyvin" > 
  ...
</div>

Valinnaiset luokat

Ohjauspehmusteet ja pyöristetyt kulmat kahdella valinnaisella muokkausluokalla.

Katso, olen kaivossa!

<div class = "hyvin hyvin suuri" > 
  ...
</div>

Katso, olen kaivossa!

<div class = "hyvin hyvin pieni" > 
  ...
</div>

Sulje kuvake

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

<button class = "sulje" > × </button>

iOS-laitteet vaativat href="#"klikkaustapahtuman, jos haluat mieluummin käyttää ankkuria.

<a class = "sulje" href = "#" > × </a>

Apukurssit

Yksinkertaisia, kohdennettuja kursseja pienille näyttö- tai käyttäytymismuokkauksille.

.vedä vasemmalle

Kelluuta elementtiä vasemmalle

luokka = "vedä vasemmalle"

. vedä - vasen {
  kellua : vasen ;
}

.vedä oikealle

Kelluuta elementtiä oikealle

luokka = "vedä oikealle"

. vedä oikealle { _
  kellua : oikea ;
}

.mykistetty

Muuta elementin väriksi#999

luokka = "mykistetty"

. mykistetty {
  väri : #999; 
}

.clearfix

Tyhjennä mistä floattahansa elementistä

luokka = "selvitys"

. clearfix {
  * zoom : 1 ; 
  &: ennen ,
  &: jälkeen {
    näyttö : pöytä ;
    sisältö : "" ; 
  }
  &: jälkeen {
    selkeä : molemmat ;
  }
}

Pudotusvalikot

Esimerkki

Merkintä

Vaihtoehdot

Valikoiden kohdistaminen

Poistetut valikon vaihtoehdot

Alavalikot avattavissa valikoissa

Painikeryhmät

Esimerkkejä

Yksi painikeryhmä

Useita painikeryhmiä

Pystysuuntaiset painikeryhmät

Valintaruutu ja radio makuja

Avattavat valikot painikeryhmissä

Painikkeiden pudotusvalikot

Yleiskatsaus ja esimerkkejä

Toimii kaikkien painikkeiden kokojen kanssa

Edellyttää JavaScriptiä

Jakopainikkeen pudotusvalikot

Koot

Pudotusvalikot

Navigointi: välilehdet, pillerit ja luettelot

Kevyt oletusarvot Sama merkintä, eri luokat

Perusvälilehdet

Perus pillerit

Pois käytöstä

Komponenttien kohdistus

Pinottava

Pinotut välilehdet

Pinottu pillereitä

Pudotusvalikosta

Välilehdet avattavilla valikoilla

Pillerit pudotusvalikoilla

Nav-luettelot

Esimerkki navigointiluettelosta

Vaakasuuntaiset jakajat

Tabbable nav

Tabuloitu esimerkki

Häivyttää välilehdissä

Vaatii jQuery-laajennuksen

Tabletti mihin tahansa suuntaan

Pohjassa välilehdet

Välilehdet vasemmalla

Välilehdet oikealla

Navbar

Perusnavigointipalkki

Navbarin komponentit

Brändi

Nav linkit

Lomakkeet

Hakulomake

Komponenttien kohdistus

Pudotusvalikoiden käyttäminen

Teksti

Valinnaiset näyttömuunnelmat

Kiinnitetty yläosaan

Kiinnitetty pohjaan

Staattinen ylänavigointipalkki

Responsiivinen navigointipalkki

Käänteinen variaatio

korppujauhoja

Esimerkkejä

Sivutus Kaksi vaihtoehtoa sisällön selaamiseen

Normaali sivutus

Vaihtoehdot

Pois käytöstä ja aktiiviset tilat

Koot

Tasaus

Hakulaite

Oletusesimerkki

Tasaiset linkit

Valinnainen pois käytöstä tila

Tarrat ja merkit

Tarrat

Tunnusmerkit

Helposti kokoontaitettava

Typografiset komponentit

Sankariyksikkö

Hei maailma!

Sivun otsikko