Komponentit
Yli tusina uudelleenkäytettävää komponenttia, jotka on suunniteltu tarjoamaan ikonografiaa, avattavia valikoita, syöttöryhmiä, navigointia, hälytyksiä ja paljon muuta.
Yli tusina uudelleenkäytettävää komponenttia, jotka on suunniteltu tarjoamaan ikonografiaa, avattavia valikoita, syöttöryhmiä, navigointia, hälytyksiä ja paljon muuta.
Sisältää yli 250 glyfiä kirjasinmuodossa Glyphicon Halflings -sarjasta. Glyphicons Halflingit eivät yleensä ole saatavilla ilmaiseksi, mutta niiden luoja on antanut ne Bootstrapille ilmaiseksi. Kiitoksena pyydämme vain, että liität mukaan linkin takaisin Glyphiconsiin aina kun mahdollista.
Suorituskykysyistä kaikki kuvakkeet vaativat perusluokan ja yksittäisen kuvakeluokan. Käytä seuraavaa koodia sijoittamalla melkein minne tahansa. Muista jättää välilyönti kuvakkeen ja tekstin väliin, jotta se täytetään.
Ikoniluokkia ei voi suoraan yhdistää muihin komponentteihin. Niitä ei tule käyttää yhdessä muiden saman elementin luokkien kanssa. Lisää sen sijaan sisäkkäinen <span>
ja käytä kuvakeluokkia <span>
.
Ikoniluokkia tulee käyttää vain elementeissä, joissa ei ole tekstisisältöä eikä alaelementtejä.
Bootstrap olettaa, että kuvakekirjasintiedostot sijaitsevat ../fonts/
hakemistossa suhteessa käännettyihin CSS-tiedostoihin. Näiden kirjasintiedostojen siirtäminen tai uudelleennimeäminen tarkoittaa CSS:n päivittämistä jollakin kolmesta tavasta:
@icon-font-path
ja/tai @icon-font-name
muuttujia lähdekoodissa Vähemmän tiedostoja.url()
polut käännetyssä CSS:ssä.Käytä mitä tahansa kehitysasetuksiisi parhaiten sopivaa vaihtoehtoa.
Aputekniikoiden nykyaikaiset versiot ilmoittavat CSS:n luomasta sisällöstä sekä tietyistä Unicode-merkeistä. Jotta vältetään tahattomat ja hämmentävät tulosteet näytönlukuohjelmissa (varsinkin kun kuvakkeita käytetään pelkästään koristeluun), piilotamme ne aria-hidden="true"
attribuutilla.
Jos käytät kuvaketta merkityksen välittämiseen (eikä vain koriste-elementtinä), varmista, että tämä merkitys välitetään myös aputekniikoille – esimerkiksi sisällytä .sr-only
luokkaan visuaalisesti piilotettua lisäsisältöä.
Jos luot säätimiä ilman muuta tekstiä (kuten <button>
joka sisältää vain kuvakkeen), sinun tulee aina tarjota vaihtoehtoista sisältöä ohjausobjektin tarkoituksen tunnistamiseksi, jotta se on järkevä aputekniikoiden käyttäjille. Tässä tapauksessa voit lisätä aria-label
attribuutin itse ohjausobjektiin.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Käytä niitä painikkeissa, painikeryhmissä työkalupalkissa, navigoinnissa tai lisättyjen lomakkeiden syötteissä.
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
Hälytyksessä käytetty kuvake ilmaisemaan, että kyseessä on virheilmoitus, ja .sr-only
lisäteksti, joka välittää tämän vihjeen avustavien tekniikoiden käyttäjille.
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>
Vaihteleva kontekstivalikko linkkiluetteloiden näyttämistä varten. Tehty interaktiiviseksi avattavalla JavaScript-laajennuksella .
Kääri avattavan valikon liipaisin ja avattava valikko sisään .dropdown
tai muuhun elementtiin, joka ilmoittaa position: relative;
. Lisää sitten valikon HTML-koodi.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Pudotusvalikot voidaan muuttaa laajenemaan ylöspäin (ei alaspäin) lisäämällä .dropup
ne ylätason valikkoon.
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Oletusarvoisesti avattava valikko sijoitetaan automaattisesti 100 %:sti ylätasonsa yläpuolelle ja vasemmalle puolelle. Lisää .dropdown-menu-right
a .dropdown-menu
-kohtaan oikealle tasaa avattava valikko.
Pudotusvalikot sijoitetaan automaattisesti CSS:n kautta asiakirjan normaaliin kulkuun. Tämä tarkoittaa, että vanhemmat voivat rajata avattavia valikoita, joilla on tiettyjä overflow
ominaisuuksia, tai ne voivat näkyä näkymän rajojen ulkopuolella. Käsittele nämä ongelmat itse, kun niitä ilmenee.
.pull-right
tasausVuodesta 3.1.0 lähtien olemme poistaneet käytöstä .pull-right
avattavat valikot. Tasaa valikko oikealle käyttämällä .dropdown-menu-right
. Navigointipalkin oikealle kohdistetut navigointikomponentit käyttävät tämän luokan mixin-versiota valikon automaattiseen tasaamiseen. Voit ohittaa sen käyttämällä .dropdown-menu-left
.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
Lisää otsikko minkä tahansa avattavan valikon toimintoosioille.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>
Lisää jakaja erottaaksesi linkkien sarjat avattavassa valikossa.
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>
Lisää .disabled
a <li>
alasvetovalikosta poistaaksesi linkin käytöstä.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="#">Regular link</a></li>
<li class="disabled"><a href="#">Disabled link</a></li>
<li><a href="#">Another link</a></li>
</ul>
Ryhmittele sarja painikkeita yhdelle riville painikeryhmän kanssa. Lisää valinnainen JavaScript-radio ja valintaruututyylikäyttäytyminen painikelaajennuksellamme .
Kun käytät työkaluvihjeitä tai ponnahdusikkunoita elementtien sisällä .btn-group
, sinun on määritettävä vaihtoehto container: 'body'
ei-toivottujen sivuvaikutusten välttämiseksi (kuten elementin leveneminen ja/tai pyöristetyn kulman menettäminen, kun työkaluvihje tai ponnahdusikkuna laukeaa).
role
ja anna tarraJotta aputekniikat – kuten näytönlukijat – osoittaisivat, että sarja painikkeita on ryhmitelty, on annettava asianmukainen role
attribuutti. Painikeryhmille tämä olisi role="group"
, kun taas työkaluriveissä pitäisi olla role="toolbar"
.
Yksi poikkeus ovat ryhmät, jotka sisältävät vain yhden ohjausobjektin (esimerkiksi tasatut painikeryhmät elementteineen <button>
) tai avattavan valikon.
Lisäksi ryhmille ja työkaluriveille tulisi antaa selkeä tunniste, koska useimmat avustavat tekniikat eivät muutoin ilmoita niitä, vaikka oikea role
attribuutti on olemassa. Tässä esitetyissä esimerkeissä käytämme aria-label
, mutta myös vaihtoehtoja, kuten aria-labelledby
voidaan käyttää.
Kääri useita painikkeita .btn
sisään -merkillä .btn-group
.
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
Yhdistä sarjat <div class="btn-group">
osaksi <div class="btn-toolbar">
monimutkaisempia komponentteja.
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
</div>
Sen sijaan, että käyttäisit painikkeiden kokoluokkia jokaiseen ryhmän painikkeeseen, lisää .btn-group-*
vain jokaiseen .btn-group
, myös silloin, kun sisäkkäiset ryhmät.
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>
Aseta a .btn-group
toisen sisään, .btn-group
kun haluat avata valikot, joissa on useita painikkeita.
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
Saa painikkeet näyttämään pystysuorassa pinossa vaakasuoran sijaan. Jakopainikkeen avattavia valikoita ei tueta tässä.
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>
Aseta painikkeiden ryhmä venymään yhtä suureksi niin, että se ulottuu ylätason koko leveydelle. Toimii myös painikeryhmän pudotusvalikoiden kanssa.
Painikkeiden tasaamiseen käytetyn erityisen HTML:n ja CSS:n vuoksi (nimittäin display: table-cell
), niiden väliset rajat kaksinkertaistuvat. Tavallisissa painikeryhmissä margin-left: -1px
käytetään reunusten pinoamiseen niiden poistamisen sijaan. Ei kuitenkaan margin
toimi kanssa display: table-cell
. Tämän seurauksena Bootstrap-muokkauksistasi riippuen saatat haluta poistaa reunat tai värittää ne uudelleen.
Internet Explorer 8 ei piirrä reunuksia tasatun painikeryhmän painikkeille, olivatpa ne päällä <a>
tai <button>
elementtejä. Voit kiertää sen käärimällä jokaisen painikkeen toiseen .btn-group
.
Katso #12476 lisätietoja varten.
<a>
Elementtien kanssaKääri vain sarja .btn
s:tä .btn-group.btn-group-justified
.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
Jos <a>
elementtejä käytetään painikkeina – käynnistämään sivun sisäisiä toimintoja sen sijaan, että navigoisivat toiseen asiakirjaan tai osioon nykyisellä sivulla – niille tulee myös antaa asianmukainen role="button"
.
<button>
Elementtien kanssaJos haluat käyttää tasattuja painikeryhmiä <button>
elementtien kanssa, sinun on käärittävä jokainen painike painikeryhmään . Useimmat selaimet eivät käytä CSS:ää oikein <button>
elementtien perusteluihin, mutta koska tuemme painikkeiden avattavia valikoita, voimme kiertää sen.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
Käytä mitä tahansa painiketta avataksesi pudotusvalikon sijoittamalla sen a- .btn-group
kohtaan ja antamalla oikeat valikkomerkinnät.
Painikkeiden avattavat valikot edellyttävät, että Bootstrap-versiossasi on avattava laajennus .
Muuta painike pudotusvalikon vaihtokytkimeksi muutamilla perusmerkintöillä.
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Samoin voit luoda jaetun painikkeen avattavia valikoita samoilla merkintämuutoksilla, vain erillisellä painikkeella.
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Painikkeiden pudotusvalikot toimivat kaikenkokoisten painikkeiden kanssa.
<!-- Large button group -->
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Small button group -->
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Extra small button group -->
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
Laukaise avattavat valikot elementtien yläpuolella lisäämällä .dropup
ne ylätasoon.
<div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
Laajenna lomakehallintaa lisäämällä tekstiä tai painikkeita minkä tahansa tekstipohjaisen tiedoston eteen, jälkeen tai molemmille puolille <input>
. Käytä merkin tai .input-group
kanssa lisätäksesi .input-group-addon
tai .input-group-btn
liittääksesi elementtejä yksittäiseen .form-control
.
<input>
Vain tekstitVältä <select>
elementtien käyttämistä tässä, koska niitä ei voida täysin muotoilla WebKit-selaimissa.
Vältä <textarea>
elementtien käyttöä tässä, koska niiden rows
attribuutteja ei noudateta joissakin tapauksissa.
Kun käytät työkaluvihjeitä tai ponnahdusikkunoita elementtien sisällä .input-group
, sinun on määritettävä vaihtoehto container: 'body'
ei-toivottujen sivuvaikutusten välttämiseksi (kuten elementin leveneminen ja/tai pyöristetyn kulman menettäminen, kun työkaluvihje tai ponnahdusikkuna laukeaa).
Älä sekoita lomakeryhmiä tai ruudukon sarakeluokkia suoraan syöttöryhmiin. Sisällytä sen sijaan syöttöryhmä lomakeryhmän tai ruudukkoon liittyvän elementin sisään.
Näytönlukuohjelmilla on ongelmia lomakkeiden kanssa, jos et lisää tunnistetta jokaiselle syötteelle. Varmista näissä syöttöryhmissä, että kaikki lisämerkit tai toiminnot välitetään aputekniikoille.
Tarkka käytettävä tekniikka (näkyvät <label>
elementit, luokan <label>
avulla piilotetut elementit tai attribuutin , , , tai attribuutin käyttö) ja välitettävät lisätiedot vaihtelevat toteuttamasi käyttöliittymäwidgetin tarkan tyypin mukaan. Tämän osan esimerkit tarjoavat muutamia ehdotettuja tapauskohtaisia lähestymistapoja..sr-only
aria-label
aria-labelledby
aria-describedby
title
placeholder
Aseta yksi lisäosa tai painike tulon kummallekin puolelle. Voit myös sijoittaa yhden tulon molemmille puolille.
Emme tue useita lisäosia ( .input-group-addon
tai .input-group-btn
) yhdellä puolella.
Emme tue useita lomakeohjausobjekteja yhdessä syöttöryhmässä.
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
<label for="basic-url">Your vanity URL</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
Lisää suhteelliset lomakkeen kokoluokat .input-group
itseensä ja sisällä olevan sisällön koko muuttuu automaattisesti – ei tarvitse toistaa lomakkeen ohjauskokoluokkia jokaisessa elementissä.
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon3">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>
Aseta mikä tahansa valintaruutu tai radiovaihtoehto syöttöryhmän lisäosaan tekstin sijaan.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
Syöttöryhmien painikkeet ovat hieman erilaisia ja vaativat yhden ylimääräisen sisäkkäisen tason. Sen sijaan .input-group-addon
sinun on käytettävä .input-group-btn
painikkeiden käärimiseen. Tämä on tarpeen oletusselaimen tyylien vuoksi, joita ei voi ohittaa.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="input-group">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
</div>
Vaikka sinulla voi olla vain yksi lisäosa kullekin puolelle, sinulla voi olla useita painikkeita yhdessä .input-group-btn
.
<div class="input-group">
<div class="input-group-btn">
<!-- Buttons -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Buttons -->
</div>
</div>
Bootstrapissa saatavilla olevilla naveilla on jaettu merkintä perusluokasta alkaen .nav
sekä jaetut tilat. Vaihda muokkausluokkia vaihtaaksesi kunkin tyylin välillä.
Huomaa, että .nav-tabs
luokka vaatii .nav
perusluokan.
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
Ota sama HTML, mutta käytä .nav-pills
sen sijaan:
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
Pillerit ovat myös pystysuoraan pinottavia. Lisää vain .nav-stacked
.
<ul class="nav nav-pills nav-stacked">
...
</ul>
Voit helposti tehdä välilehdistä tai pillereistä yhtä leveitä kuin ylätason näytöissä, jotka ovat leveämpiä kuin 768 kuvapistettä .nav-justified
. Pienemmillä näytöillä navigointilinkit on pinottu.
Tasaisia navigointipalkin navigointilinkkejä ei tällä hetkellä tueta.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
.disabled
Lisää mille tahansa nav-komponentille (välilehdille tai pillereille) harmaita linkkejä varten, eikä hover-tehosteita .
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>
Lisää avattavat valikot hieman ylimääräisellä HTML-koodilla ja avattavalla JavaScript-laajennuksella .
<ul class="nav nav-tabs">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
<ul class="nav nav-pills">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
Navigointipalkit ovat responsiivisia metakomponentteja, jotka toimivat sovelluksesi tai sivustosi navigointiotsikoina. Ne alkavat tiivistettyinä (ja ovat vaihdettavissa) mobiilinäkymissä ja muuttuvat vaakasuoriksi käytettävissä olevan näkymän leveyden kasvaessa.
Tasaisia navigointipalkin navigointilinkkejä ei tällä hetkellä tueta.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Korvaa navigointipalkin tuotemerkki omalla kuvallasi vaihtamalla teksti merkillä <img>
. Koska sillä .navbar-brand
on oma pehmuste ja korkeus, saatat joutua ohittamaan joitakin CSS-tiedostoja kuvastasi riippuen.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
Sijoita lomakkeen sisältö .navbar-form
oikeaan pystysuoraan kohdistukseen ja tiivistämiseen kapeissa kuvaporteissa. Käytä kohdistusvaihtoehtoja päättääksesi, missä se sijaitsee navigointipalkin sisällössä.
Kuten heads up, .navbar-form
jakaa suuren osan koodistaan .form-inline
kautta mixin. Jotkin lomakeohjaimet, kuten syöttöryhmät, saattavat vaatia kiinteitä leveyksiä, jotta ne näkyvät oikein navigointipalkissa.
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Keskitä ne pystysuoraan navigointipalkkiin lisäämällä luokka .navbar-btn
elementteihin, <button>
jotka eivät sijaitse a :ssa.<form>
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
Kääri tekstijonot elementtiin merkillä .navbar-text
, yleensä <p>
tunnisteeseen oikean johdon ja värin takaamiseksi.
<p class="navbar-text">Signed in as Mark Otto</p>
Ihmiset, jotka käyttävät vakiolinkkejä, jotka eivät ole tavallisen navigointipalkin navigointikomponentin sisällä, .navbar-link
lisäävät luokan avulla oikeat värit oletus- ja käänteisille navigointipalkin asetuksille.
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
Tasaa navigointilinkit, lomakkeet, painikkeet tai teksti käyttämällä .navbar-left
tai .navbar-right
apuohjelmaluokkia. Molemmat luokat lisäävät CSS-kellukkeen määritettyyn suuntaan. Esimerkiksi, jos haluat kohdistaa navigointilinkit, laita ne erilleen <ul>
käyttämällä vastaavaa hyödyllisyysluokkaa.
Nämä luokat ovat sekoitettuja versioita .pull-left
ja .pull-right
, mutta ne on rajattu mediakyselyihin navigointipalkin komponenttien käsittelyn helpottamiseksi eri laitekokojen välillä.
Lisää .navbar-fixed-top
ja sisällytä .container
tai .container-fluid
keskittääksesi navigointipalkin sisällön.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
Lisää .navbar-fixed-bottom
ja sisällytä .container
tai .container-fluid
keskittääksesi navigointipalkin sisällön.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
Luo täysleveä navigointipalkki, joka vierii pois sivulta lisäämällä .navbar-static-top
ja sisällyttämällä .container
tai .container-fluid
keskittämiseen ja navigointipalkin sisältöön.
Toisin kuin .navbar-fixed-*
luokissa, sinun ei tarvitse vaihtaa täyttöä body
.
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>
Muokkaa navigointipalkin ulkoasua lisäämällä .navbar-inverse
.
<nav class="navbar navbar-inverse">
...
</nav>
Ilmoita nykyisen sivun sijainti navigointihierarkiassa.
Erottimet lisätään automaattisesti CSS:ään kautta :before
ja content
.
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
Tarjoa sivutuslinkkejä sivustollesi tai sovelluksellesi monisivuisella sivutuskomponentilla tai yksinkertaisemmalla hakukonevaihtoehdolla .
Yksinkertainen Rdion inspiroima sivutus, joka sopii erinomaisesti sovelluksiin ja hakutuloksiin. Suuri lohko on vaikea ohittaa, helposti skaalautuva ja tarjoaa suuria napsautusalueita.
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</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="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
Sivutuskomponentti tulee kääriä <nav>
elementtiin, joka tunnistaa sen näytönlukuohjelmien ja muiden aputekniikoiden navigointiosiona. Lisäksi, koska sivulla on todennäköisesti jo useampi kuin yksi tällainen navigointiosio (kuten ensisijainen navigointi otsikossa tai sivupalkin navigointi), on suositeltavaa antaa sivulle kuvaus aria-label
, <nav>
joka kuvastaa sen tarkoitusta. Jos esimerkiksi sivutuskomponenttia käytetään navigointiin hakutulosjoukon välillä, sopiva tunniste voisi olla aria-label="Search results pages"
.
Linkit ovat muokattavissa erilaisiin olosuhteisiin. Käytä .disabled
linkkeihin, joita ei voi napsauttaa, ja .active
osoittamaan nykyisen sivun.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
...
</ul>
</nav>
Suosittelemme, että vaihdat aktiiviset tai käytöstä poistetut ankkurit tilalle <span>
, tai jätät ankkurin pois edellisten/seuraavien nuolten tapauksessa napsautustoiminnon poistamiseksi samalla, kun aiotut tyylit säilyvät.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled">
<span>
<span aria-hidden="true">«</span>
</span>
</li>
<li class="active">
<span>1 <span class="sr-only">(current)</span></span>
</li>
...
</ul>
</nav>
Haluatko suuremman vai pienemmän sivun? Lisää .pagination-lg
tai .pagination-sm
lisäkokoja varten.
<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>
Nopeat edelliset ja seuraavat linkit yksinkertaisiin sivutustoteutuksiin kevyellä merkinnällä ja tyyleillä. Se sopii erinomaisesti yksinkertaisille sivustoille, kuten blogeille tai aikakauslehdille.
Oletusarvoisesti hakulaite keskittää linkit.
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
Vaihtoehtoisesti voit kohdistaa jokaisen linkin sivuille:
<nav aria-label="...">
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
Hakulinkit käyttävät myös yleistä .disabled
hyödyllisyysluokkaa sivutuksesta.
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
<h3>Example heading <span class="label label-default">New</span></h3>
Lisää mikä tahansa alla mainituista muokkausluokista muuttaaksesi tarran ulkoasua.
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
Renderöintiongelmia voi ilmetä, kun kapeassa säiliössä on kymmeniä upotettuja tarroja, joista jokainen sisältää oman inline-block
elementin (kuten kuvakkeen). Tapa kiertää tämä on asetus display: inline-block;
. Katso konteksti ja esimerkki kohdasta #13219 .
Korosta helposti uusia tai lukemattomia kohteita lisäämällä <span class="badge">
linkkiin, Bootstrap-navigointiin ja muihin.
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
Jos uusia tai lukemattomia kohteita ei ole, merkit yksinkertaisesti kutistuvat (CSS:n :empty
valitsimen kautta), jos sisällä ei ole sisältöä.
Tunnusmerkit eivät kutistu itsestään Internet Explorer 8:ssa, koska se ei tue :empty
valitsinta.
Sisäänrakennetut tyylit sisältyvät merkkien asettamiseen aktiivisiin tiloihin pillerinavigaatioissa.
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
Kevyt, joustava komponentti, joka voi valinnaisesti laajentaa koko näkymää ja esitellä sivustosi avainsisältöä.
Tämä on yksinkertainen sankariyksikkö, yksinkertainen jumbotron-tyylinen komponentti, joka kiinnittää erityistä huomiota esillä olevaan sisältöön tai tietoon.
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
Jos haluat tehdä jumbotronista täysleveyden ja ilman pyöristettyjä kulmia, aseta se kaikkien .container
s:n ulkopuolelle ja lisää sen sijaan .container
sisäpuoli.
<div class="jumbotron">
<div class="container">
...
</div>
</div>
Yksinkertainen komentotulkki h1
sivun sisällön osioiden välittämistä ja segmentointia varten. Se voi käyttää oletuselementtiä h1
sekä small
useimpia muita komponentteja (lisätyyleillä).
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
Laajenna Bootstrapin ruudukkojärjestelmää pikkukuvakomponentilla, jotta voit helposti näyttää ruudukot kuvista, videoista, tekstistä ja muusta.
Jos etsit Pinterestin kaltaisia pikkukuvia, joiden korkeus ja/tai leveys vaihtelee, sinun on käytettävä kolmannen osapuolen laajennusta, kuten Masonry , Isotope tai Salvattore .
Oletuksena Bootstrapin pikkukuvat on suunniteltu esittelemään linkitettyjä kuvia minimaalisella vaaditulla merkinnällä.
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
Pienellä ylimääräisellä merkinnällä on mahdollista lisätä pikkukuviin kaikenlaista HTML-sisältöä, kuten otsikoita, kappaleita tai painikkeita.
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>
Tarjoa asiayhteyteen liittyviä palauteviestejä tyypillisistä käyttäjän toimista kourallisen saatavilla olevien ja joustavien hälytysviestien avulla.
Kääri mikä tahansa teksti ja valinnainen hylkäyspainike .alert
johonkin neljästä asiayhteyteen perustuvasta luokasta (esim. .alert-success
) perusvaroitusviesteille.
Hälytyksillä ei ole oletusluokkia, vain perus- ja muokkausluokat. Harmaalla oletushälytyksellä ei ole liikaa järkeä, joten sinun on määritettävä tyyppi kontekstuaalisen luokan kautta. Valitse menestys, tieto, varoitus tai vaara.
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
Rakenna mitä tahansa ilmoitusta lisäämällä valinnainen .alert-dismissible
ja sulje-painike.
Täysin toimivien, hylättävien ilmoitusten saamiseksi sinun on käytettävä hälytysten JavaScript-laajennusta .
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
Muista käyttää <button>
elementtiä data-dismiss="alert"
data-attribuutin kanssa.
Käytä .alert-link
hyödyllisyysluokkaa tarjotaksesi nopeasti vastaavia värillisiä linkkejä mihin tahansa hälytykseen.
<div class="alert alert-success" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
<a href="#" class="alert-link">...</a>
</div>
Anna ajantasaista palautetta työnkulun tai toiminnon edistymisestä yksinkertaisten mutta joustavien edistymispalkkien avulla.
Edistymispalkit käyttävät CSS3-siirtymiä ja animaatioita joidenkin tehosteiden saavuttamiseksi. Näitä ominaisuuksia ei tueta Internet Explorer 9:ssä ja sitä vanhemmissa tai vanhemmissa Firefox-versioissa. Opera 12 ei tue animaatioita.
Jos verkkosivustollasi on sisällön suojauskäytäntö (CSP) , joka ei salli style-src 'unsafe-inline'
, et voi käyttää upotettuja style
attribuutteja edistymispalkin leveyden asettamiseen alla olevissa esimerkeissämme esitetyllä tavalla. Vaihtoehtoisia tapoja asettaa leveydet, jotka ovat yhteensopivia tiukkojen CSP:iden kanssa, ovat pienen mukautetun JavaScriptin käyttäminen (joka asettaa element.style.width
) tai mukautettuja CSS-luokkia.
Oletus etenemispalkki.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
Poista <span>
kanssa - .sr-only
luokka edistymispalkista näyttääksesi näkyvän prosenttiosuuden.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
Varmistaaksesi, että tarran teksti pysyy luettavana myös pienillä prosenttiosuuksilla, harkitse merkin lisäämistä min-width
edistymispalkkiin.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
0%
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
2%
</div>
</div>
Edistymispalkit käyttävät joitain samoja painike- ja hälytysluokkia yhtenäisten tyylien aikaansaamiseksi.
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
Käyttää gradienttia luodakseen raidallisen tehosteen. Ei saatavilla IE9:ssä ja sitä vanhemmissa versioissa.
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
Lisää .active
: .progress-bar-striped
animoidaksesi raidat oikealta vasemmalle. Ei saatavilla IE9:ssä ja sitä vanhemmissa versioissa.
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
Aseta useita tankoja samaan .progress
pinoaksesi ne.
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
Abstrakteja objektityylejä erityyppisten komponenttien (kuten blogikommenttien, twiittien jne.) rakentamiseen, joissa on vasemmalle tai oikealle tasattu kuva tekstisisällön ohella.
Oletusmedia näyttää mediaobjektin (kuvat, video, ääni) sisältölohkon vasemmalla tai oikealla puolella.
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
Luokat .pull-left
ja .pull-right
ovat myös olemassa ja niitä käytettiin aiemmin osana mediakomponenttia, mutta ne ovat vanhentuneet kyseiseen käyttöön versiosta 3.3.0 alkaen. Ne vastaavat suunnilleen .media-left
ja .media-right
, paitsi että .media-right
ne tulisi sijoittaa .media-body
HTML-koodin perään.
Kuvat tai muut materiaalit voidaan kohdistaa ylös, keskelle tai alas. Oletusarvo on ylätasattu.
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.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
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.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
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.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</h4>
...
</div>
</div>
Pienellä ylimääräisellä merkinnällä voit käyttää median sisäistä luetteloa (hyödyllinen kommenttiketjuissa tai artikkeliluetteloissa).
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="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</li>
</ul>
Luetteloryhmät ovat joustava ja tehokas komponentti yksinkertaisten elementtiluetteloiden näyttämiseen, mutta myös monimutkaisten elementtiluetteloiden näyttämiseen mukautetun sisällön kanssa.
Kaikkein peruslistaryhmä on yksinkertaisesti järjestämätön lista, jossa on luettelokohteita ja oikeat luokat. Rakenna sitä seuraavilla vaihtoehdoilla tai tarvittaessa omalla CSS:lläsi.
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
Lisää merkkikomponentti mihin tahansa luetteloryhmän kohteeseen ja se sijoitetaan automaattisesti oikealle.
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
Linkitä luettelon kohteet käyttämällä ankkuritunnisteita luettelokohteiden sijasta (tämä tarkoittaa myös ylätasoa merkin <div>
sijaan <ul>
). Jokaisen elementin ympärille ei tarvita yksittäisiä vanhempia.
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
Luetteloryhmän kohteet voivat olla painikkeita luettelokohteiden sijaan (mikä tarkoittaa myös ylätasoa merkin <div>
sijaan <ul>
). Jokaisen elementin ympärille ei tarvita yksittäisiä vanhempia. Älä käytä vakioluokkia .btn
täällä.
<div class="list-group">
<button type="button" class="list-group-item">Cras justo odio</button>
<button type="button" class="list-group-item">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item">Morbi leo risus</button>
<button type="button" class="list-group-item">Porta ac consectetur ac</button>
<button type="button" class="list-group-item">Vestibulum at eros</button>
</div>
Lisää .disabled
a .list-group-item
-kohtaan harmaaksi näyttääksesi pois käytöstä.
<div class="list-group">
<a href="#" class="list-group-item disabled">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
Käytä kontekstuaalisia luokkia tyylilistaaksesi luettelokohteita, oletusarvoisia tai linkitettyjä. Sisältää myös .active
valtion.
<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>
Lisää melkein mikä tahansa HTML-koodi, myös alla olevan kaltaisille linkitetyille luetteloryhmille.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
</a>
</div>
Vaikka ei aina ole välttämätöntä, joskus sinun on laitettava DOM laatikkoon. Kokeile tällaisissa tilanteissa paneelikomponenttia.
Oletusarvoisesti kaikki .panel
tehtävät on käyttää perusreunaa ja -täyttöä sisällön sisällyttämiseksi.
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
Lisää otsikkosäilö helposti paneeliisi käyttämällä .panel-heading
. Voit myös lisätä minkä tahansa <h1>
- luokan <h6>
kanssa .panel-title
lisätäksesi valmiiksi muotoillun otsikon. <h1>
Kuitenkin - kirjasinkoot <h6>
ohittavat .panel-heading
.
Jotta linkkien väritys onnistuu, muista sijoittaa linkit otsikoihin .panel-title
.
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
Kääri painikkeet tai toissijainen teksti muotoon .panel-footer
. Huomaa, että paneelin alatunnisteet eivät peri värejä ja reunoja kontekstuaalisia muunnelmia käytettäessä, koska niiden ei ole tarkoitus olla etualalla.
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
Kuten muutkin komponentit, voit helposti tehdä paneelista merkityksellisemmän tietylle kontekstille lisäämällä minkä tahansa kontekstuaalisen tilaluokan.
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>
Lisää paneeliin kaikki reunuksettomat kohdat .table
saumattoman suunnittelun saamiseksi. Jos on .panel-body
, lisäämme ylimääräisen reunuksen taulukon yläosaan erottamista varten.
Jotain oletuspaneelin sisältöä täällä. Nulla vitae elit libero, pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
# | Etunimi | Sukunimi | Käyttäjätunnus |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @rasva |
3 | Larry | lintu | @viserrys |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
Jos paneelin runkoa ei ole, komponentti siirtyy paneelin otsikosta taulukkoon keskeytyksettä.
# | Etunimi | Sukunimi | Käyttäjätunnus |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @rasva |
3 | Larry | lintu | @viserrys |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
Sisällytä helposti täysleveät luetteloryhmät mihin tahansa paneeliin.
Jotain oletuspaneelin sisältöä täällä. Nulla vitae elit libero, pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
Salli selaimien määrittää videon tai diaesityksen mitat niiden sisältävän lohkon leveyden perusteella luomalla luontainen suhde, joka skaalautuu oikein millä tahansa laitteella.
Sääntöjä sovelletaan suoraan <iframe>
, <embed>
, <video>
, ja <object>
elementteihin; valinnaisesti käytä eksplisiittistä jälkeläisluokkaa .embed-responsive-item
, kun haluat sovittaa muiden attribuuttien tyylin.
Pro-Tip! Sinun ei tarvitse sisällyttää frameborder="0"
tietojasi <iframe>
, sillä ohitamme sen puolestasi.
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Käytä kaivoa yksinkertaisena tehosteena elementissä antaaksesi sille upotetun vaikutelman.
<div class="well">...</div>
Ohjauspehmusteet ja pyöristetyt kulmat kahdella valinnaisella muokkausluokalla.
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>