Käytettävissä olevat glyfit

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.

glyphicon glyphicon-tähti
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-miinus
glyphicon glyphicon-pilvi
glyphicon glyphicon-kirjekuori
glyphicon glyphicon-kynä
glyphicon glyphicon-lasi
glyphicon glyphicon-musiikki
glyphicon glyphicon-haku
glyphicon glyphicon-sydän
glyphicon glyphicon-tähti
glyphicon glyphicon-tähti-tyhjä
glyphicon glyphicon-käyttäjä
glyphicon glyphicon-film
glyphicon glyphicon-th-large
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-remove
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-signal
glyphicon glyphicon-cog
glyphicon glyphicon-trash
glyphicon glyphicon-home
glyphicon glyphicon-tiedosto
glyphicon glyphicon-aika
glyphicon glyphicon-tie
glyphicon glyphicon-lataus-alt
glyphicon glyphicon-lataus
glyphicon glyphicon-lataus
glyphicon glyphicon-inbox
glyphicon glyphicon-play-circle
glyphicon glyphicon-toisto
glyphicon glyphicon-refresh
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
glyphicon glyphicon-lippu
glyphicon glyphicon-kuulokkeet
glyphicon glyphicon-volume-off
glyphicon glyphicon-volume-down
glyphicon glyphicon-volume-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-viivakoodi
glyphicon glyphicon-tag
glyphicon glyphicon-tunnisteet
glyphicon glyphicon-kirja
glyphicon glyphicon-kirjanmerkki
glyphicon glyphicon-print
glyphicon glyphicon-kamera
glyphicon glyphicon-font
glyphicon glyphicon-bold
glyphicon glyphicon-kursivointi
glyphicon glyphicon-text-height
glyphicon glyphicon-text-width
glyphicon glyphicon-align-left
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
glyphicon glyphicon-list
glyphicon glyphicon-indent-left
glyphicon glyphicon-indent-right
glyphicon glyphicon-facetime-video
glyphicon glyphicon-kuva
glyphicon glyphicon-map-marker
glyphicon glyphicon-adjust
glyphicon glyphicon-tint
glyphicon glyphicon-edit
glyphicon glyphicon-osake
glyphicon glyphicon-check
glyphicon glyphicon-move
glyphicon glyphicon-askel taaksepäin
glyphicon glyphicon-nopeasti taaksepäin
glyphicon glyphicon-taaksepäin
glyphicon glyphicon-play
glyphicon glyphicon-tauko
glyphicon glyphicon-stop
glyphicon glyphicon-eteenpäin
glyphicon glyphicon-kelaus eteenpäin
glyphicon glyphicon-askel eteenpäin
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-vasen
glyphicon glyphicon-chevron-right
glyphicon glyphicon-plus-merkki
glyphicon glyphicon-miinus-merkki
glyphicon glyphicon-poista-merkki
glyphicon glyphicon-ok-sign
glyphicon glyphicon-kysymys-merkki
glyphicon glyphicon-info-sign
glyphicon glyphicon-kuvakaappaus
glyphicon glyphicon-remove-circle
glyphicon glyphicon-ok-circle
glyphicon glyphicon-ban-circle
glyphicon glyphicon-nuoli-vasen
glyphicon glyphicon-nuoli oikealle
glyphicon glyphicon-nuoli ylös
glyphicon glyphicon-nuoli alas
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
glyphicon glyphicon-resize-small
glyphicon glyphicon-huutomerkki
glyphicon glyphicon-lahja
glyphicon glyphicon-lehti
glyphicon glyphicon-fire
glyphicon glyphicon-eye-open
glyphicon glyphicon-eye-close
glyphicon glyphicon-warning-sign
glyphicon glyphicon-taso
glyphicon glyphicon-kalenteri
glyphicon glyphicon-random
glyphicon glyphicon-kommentti
glyphicon glyphicon-magneetti
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-ostoskori
glyphicon glyphicon-folder-close
glyphicon glyphicon-kansio auki
glyphicon glyphicon-resize-vertical
glyphicon glyphicon-resize-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-bell
glyphicon glyphicon-sertifikaatti
glyphicon glyphicon-peukalo ylös
glyphicon glyphicon-thumbs-down
glyphicon glyphicon-hand-right
glyphicon glyphicon-hand-left
glyphicon glyphicon-käsi ylös
glyphicon glyphicon-hand-down
glyphicon glyphicon-ympyrä-nuoli oikealle
glyphicon glyphicon-ympyrä-nuoli-vasen
glyphicon glyphicon-ympyrä-nuoli ylös
glyphicon glyphicon-ympyrä-nuoli-alas
glyphicon glyphicon-globe
glyphicon glyphicon-jakoavain
glyphicon glyphicon-tehtävät
glyphicon glyphicon-suodatin
glyphicon glyphicon-salkku
glyphicon glyphicon-fullscreen
glyphicon glyphicon-dashboard
glyphicon glyphicon-paperiliitin
glyphicon glyphicon-heart-tyhjä
glyphicon glyphicon-link
glyphicon glyphicon-puhelin
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sort
glyphicon glyphicon-sort-by-aakkoset
glyphicon glyphicon-sort-by-aakkosen-alt
glyphicon glyphicon-sort-by-order
glyphicon glyphicon-sort-by-order-alt
glyphicon glyphicon-sort-by-attribuutit
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-tarkistamaton
glyphicon glyphicon-expand
glyphicon glyphicon-collapse-down
glyphicon glyphicon-collapse-up
glyphicon glyphicon-log-in
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-uusi-ikkuna
glyphicon glyphicon-tietue
glyphicon glyphicon-save
glyphicon glyphicon-avoin
glyphicon glyphicon-tallennettu
glyphicon glyphicon-import
glyphicon glyphicon-export
glyphicon glyphicon-send
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-tallennettu
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glyphicon glyphicon-luottokortti
glyphicon glyphicon-siirto
glyphicon glyphicon-ruokailuvälineet
glyphicon glyphicon-header
glyphicon glyphicon-pakattu
glyphicon glyphicon-kuulokkeet
glyphicon glyphicon-phone-alt
glyphicon glyphicon-torni
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-tekstitykset
glyphicon glyphicon-ääni-stereo
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-rekisteröintimerkki
glyphicon glyphicon-pilvi-lataus
glyphicon glyphicon-pilvi-lataus
glyphicon glyphicon-puu-havupuu
glyphicon glyphicon-tree-lehtipuu
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-avaa-tiedosto
glyphicon glyphicon-tason nousu
glyphicon glyphicon-kopio
glyphicon glyphicon-pasta
glyphicon glyphicon-alert
glyphicon glyphicon-taajuuskorjain
glyphicon glyphicon-king
glyphicon glyphicon-kuningatar
glyphicon glyphicon-soturi
glyphicon glyphicon-piispa
glyphicon glyphicon-knight
glyphicon glyphicon-vauvan kaava
glyphicon glyphicon-teltta
glyphicon glyphicon-taulu
glyphicon glyphicon-sänky
glyphicon glyphicon-omena
glyphicon glyphicon-erase
glyphicon glyphicon-tiimalasi
glyphicon glyphicon-lamppu
glyphicon glyphicon-kaksoiskappale
glyphicon glyphicon-säästöpossu
glyphicon glyphicon-sakset
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-rupla
glyphicon glyphicon-rub
glyphicon glyphicon-asteikko
glyphicon glyphicon-ice-lolly
glyphicon glyphicon-ice-lolly-maistanut
glyphicon glyphicon-koulutus
glyphicon glyphicon-optio-horizontal
glyphicon glyphicon-optio-vertical
glyphicon glyphicon-menu-hampurilainen
glyphicon glyphicon-modal-window
glyphicon glyphicon-öljy
glyphicon glyphicon-grain
glyphicon glyphicon-aurinkolasit
glyphicon glyphicon-text-size
glyphicon glyphicon-text-color
glyphicon glyphicon-text-background
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-object-align-horizontal
glyphicon glyphicon-object-align-left
glyphicon glyphicon-object-align-vertical
glyphicon glyphicon-object-align-right
glyphicon glyphicon-triangle-right
glyphicon glyphicon-triangle-vasen
glyphicon glyphicon-triangle-bottom
glyphicon glyphicon-triangle-top
glyphicon glyphicon-konsoli
glyphicon glyphicon-superscript
glyphicon glyphicon-alaindeksi
glyphicon glyphicon-menu-left
glyphicon glyphicon-menu-right
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up

Kuinka käyttää

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.

Älä sekoita muiden komponenttien kanssa

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

Vain tyhjille elementeille

Ikoniluokkia tulee käyttää vain elementeissä, joissa ei ole tekstisisältöä eikä alaelementtejä.

Kuvakkeen fontin sijainnin muuttaminen

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:

Muuta @icon-font-pathja/tai @icon-font-namemuuttujia lähdekoodissa Vähemmän tiedostoja.
Käytä Less-kääntäjän tarjoamaa suhteelliset URL-osoitteet -vaihtoehtoa .
Muuta url()polut käännetyssä CSS:ssä.

Käytä mitä tahansa kehitysasetuksiisi parhaiten sopivaa vaihtoehtoa.

Helppokäyttöiset kuvakkeet

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-onlyluokkaan 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-labelattribuutin itse ohjausobjektiin.

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

Esimerkkejä

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-onlylisäteksti, joka välittää tämän vihjeen avustavien tekniikoiden käyttäjille.

syötä voimassa oleva sähköpostiosoite

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

Esimerkki

Kääri avattavan valikon liipaisin ja avattava valikko sisään .dropdowntai 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ä .dropupne 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>

Tasaus

Oletusarvoisesti avattava valikko sijoitetaan automaattisesti 100 %:sti ylätasonsa yläpuolelle ja vasemmalle puolelle. Lisää .dropdown-menu-righta .dropdown-menu-kohtaan oikealle tasaa avattava valikko.

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

Otsikot

Lisää otsikko minkä tahansa avattavan valikon toimintoosioille.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

Jakaja

Lisää jakaja erottaaksesi linkkien sarjat avattavassa valikossa.

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

Poistetut valikon kohdat

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

Painikeryhmien työkaluvihjeet ja ponnahdusikkunat vaativat erikoisasetuksia

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

Varmista, että se on oikein `role`ja anna tarra

Jotta aputekniikat – kuten näytönlukijat – osoittaisivat, että sarja painikkeita on ryhmitelty, on annettava asianmukainen roleattribuutti. 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 roleattribuutti on olemassa. Tässä esitetyissä esimerkeissä käytämme aria-label, mutta myös vaihtoehtoja, kuten aria-labelledbyvoidaan käyttää.

Perusesimerkki

Kääri useita painikkeita .btnsisää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>

Mitoitus

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>

Pesivä

Aseta a .btn-grouptoisen sisään, .btn-groupkun 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>

Pystysuuntainen vaihtelu

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>

Perusteltu painikeryhmät

Aseta painikkeiden ryhmä venymään yhtä suureksi niin, että se kattaa koko ylätason leveyden. Toimii myös painikeryhmän pudotusvalikoiden kanssa.

Reunojen käsittely

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: -1pxkäytetään reunusten pinoamiseen niiden poistamisen sijaan. Ei kuitenkaan margintoimi kanssa display: table-cell. Tämän seurauksena Bootstrap-muokkauksistasi riippuen saatat haluta poistaa reunat tai värittää ne uudelleen.

IE8 ja reunat

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 kanssa

Kääri vain sarja .btns:tä .btn-group.btn-group-justified.

Vasen Keski Oikein

Vasen Keski

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

Linkit toimivat painikkeina

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 kanssa

Jos 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-groupkohtaan ja antamalla oikeat valikkomerkinnät.

Liitännäisriippuvuus

Painikkeiden avattavat valikot edellyttävät, että Bootstrap-versiossasi on avattava laajennus .

Yhden painikkeen pudotusvalikot

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>

Jakopainikkeen pudotusvalikot

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>

Mitoitus

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>

Dropup-variaatio

Laukaise avattavat valikot elementtien yläpuolella lisäämällä .dropupne 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-groupkanssa lisätäksesi .input-group-addontai .input-group-btnliittääksesi elementtejä yksittäiseen .form-control.

`<input>`Vain tekstit

Vä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 rowsattribuutteja ei noudateta joissakin tapauksissa.

Työkaluvihjeet ja ponnahdusikkunat syöttöryhmissä vaativat erikoisasetuksen

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 muiden komponenttien kanssa

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

Lisää aina tarrat

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-onlyaria-labelaria-labelledbyaria-describedbytitleplaceholder

Perusesimerkki

Aseta yksi lisäosa tai painike tulon kummallekin puolelle. Voit myös sijoittaa yhden tulon molemmille puolille.

Emme tue useita lisäosia ( .input-group-addontai .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>

Mitoitus

Lisää suhteelliset lomakkeen kokoluokat .input-groupitseensä 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>

Valintaruudut ja radiolisäosat

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

Painikkeiden lisäosat

Syöttöryhmien painikkeet ovat hieman erilaisia ja vaativat yhden ylimääräisen sisäkkäisen tason. Sen sijaan .input-group-addonsinun on käytettävä .input-group-btnpainikkeiden 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 -->

Painikkeet pudotusvalikoilla

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

Segmentoidut painikkeet

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

Useita painikkeita

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 .navsekä jaetut tilat. Vaihda muokkausluokkia vaihtaaksesi kunkin tyylin välillä.

Navs-osien käyttäminen välilehtipaneeleissa vaatii JavaScript-välilehdet-laajennuksen

Välilehdillä, joissa on välilehtialueita, on käytettävä välilehdet JavaScript-laajennusta . Merkintä vaatii myös lisä- roleja ARIA-attribuutteja – katso lisätietoja laajennuksen esimerkkimerkinnöistä .

Tee navigointina käytettävät navit käytettävissä

Jos käytät navigointipalkin luomiseen navigointia, muista lisätä loogisimpaan pääsäilöön role="navigation"tai <ul>kierrä <nav>elementti koko navigointipalkin ympärille. Älä lisää roolia <ul>itseensä, koska se estäisi sen ilmoittamisen todelliseksi luetteloksi aputekniikoiden avulla.

Välilehdet

Huomaa, että .nav-tabsluokka vaatii .navperusluokan.

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

Pillerit

Ota sama HTML, mutta käytä .nav-pillssen 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>

Oikeutettu

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.

Safari ja reagoivat tasaiset navit

Vuodesta 9.1.2 alkaen Safarissa on virhe, jossa selaimen koon muuttaminen vaakasuunnassa aiheuttaa renderöintivirheitä perusteltuun navigointiin, jotka poistuvat päivityksen yhteydessä. Tämä virhe näkyy myös perustellussa navigointiesimerkissä .

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

Poistetut linkit

.disabledLisää mille tahansa nav-komponentille (välilehdille tai pillereille) harmaita linkkejä varten, eikä hover-tehosteita .

Ei vaikuta linkin toimivuuteen

Tämä luokka muuttaa vain <a>ulkonäköä, ei sen toimintoja. Käytä mukautettua JavaScriptiä poistaaksesi linkit täältä.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

Pudotusvalikoiden käyttäminen

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

Välilehdet avattavilla valikoilla

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

Pillerit pudotusvalikoilla

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

Ylimääräistä sisältöä

Koska Bootstrap ei tiedä, kuinka paljon tilaa navigointipalkin sisältö tarvitsee, saatat kohdata ongelmia sisällön rivittämisessä toiselle riville. Voit ratkaista tämän seuraavasti:

Pienennä navigointipalkin kohteiden määrää tai leveyttä.
Piilota tietyt navigointipalkin kohteet tietyissä näyttökokoissa käyttämällä reagoivia hyödyllisyysluokkia .
Muuta pistettä, jossa navigointipalkki vaihtaa tiivistetyn ja vaakatilan välillä. Muokkaa @grid-float-breakpointmuuttujaa tai lisää oma mediakyselysi.

<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-brandon 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-formoikeaan pystysuoraan kohdistukseen ja tiivistämiseen kapeissa kuvaporteissa. Käytä kohdistusvaihtoehtoja päättääksesi, missä se sijaitsee navigointipalkin sisällössä.

Kuten heads up, .navbar-formjakaa suuren osan koodistaan .form-inlinekautta 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>

Lisää aina tarrat

Näytönlukuohjelmilla on ongelmia lomakkeiden kanssa, jos et lisää tunnistetta jokaiselle syötteelle. Voit piilottaa näiden sisäisten lomakkeiden tarrat .sr-onlyluokan avulla. On olemassa muita vaihtoehtoisia menetelmiä, joilla voidaan antaa nimike aputekniikoille, kuten aria-label, aria-labelledbytai titleattribuutti. Jos mitään näistä ei ole, näytönlukuohjelmat voivat turvautua placeholderattribuutin käyttöön, jos se on olemassa, mutta huomaa, että attribuutin käyttäminen placeholdermuiden merkintämenetelmien korvikkeena ei ole suositeltavaa.

Keskitä ne pystysuoraan navigointipalkkiin lisäämällä luokka .navbar-btnelementteihin, <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-linklisää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-lefttai .navbar-rightapuohjelmaluokkia. 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-leftja .pull-right, mutta ne on rajattu mediakyselyihin navigointipalkin komponenttien käsittelyn helpottamiseksi eri laitekokojen välillä.

Lisää .navbar-fixed-topja sisällytä .containertai .container-fluidkeskittääksesi navigointipalkin sisällön.

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

Vartalon pehmuste vaaditaan

Kiinteä navigointipalkki peittää muun sisältösi, ellet lisää paddingsitä -sivun yläosaan <body>. Kokeile omia arvojasi tai käytä alla olevaa katkelmaamme. Vinkki: Navigointipalkki on oletusarvoisesti 50 kuvapistettä korkea.

body { padding-top: 70px; }

Varmista, että sisällytät tämän Bootstrap CSS -ytimen jälkeen .

Lisää .navbar-fixed-bottomja sisällytä .containertai .container-fluidkeskittääksesi navigointipalkin sisällön.

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

Vartalon pehmuste vaaditaan

Kiinteä navigointipalkki peittää muun sisältösi, ellet lisää paddingsitä -sivun alaosaan <body>. Kokeile omia arvojasi tai käytä alla olevaa katkelmaamme. Vinkki: Navigointipalkki on oletusarvoisesti 50 kuvapistettä korkea.

body { padding-bottom: 70px; }

Varmista, että sisällytät tämän Bootstrap CSS -ytimen jälkeen .

Luo täysleveä navigointipalkki, joka vierii pois sivulta lisäämällä .navbar-static-topja sisällyttämällä .containertai .container-fluidkeskittä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>

korppujauhoja

Ilmoita nykyisen sivun sijainti navigointihierarkiassa.

Erottimet lisätään automaattisesti CSS:ään kautta :beforeja content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

Sivunumerointi

Tarjoa sivutuslinkkejä sivustollesi tai sovelluksellesi monisivuisella sivutuskomponentilla tai yksinkertaisemmalla hakukonevaihtoehdolla .

Oletussivutus

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">&laquo;</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">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Sivutuskomponentin merkitseminen

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

Pois käytöstä ja aktiiviset tilat

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

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</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">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

Mitoitus

Haluatko suuremman vai pienemmän sivun? Lisää .pagination-lgtai .pagination-smlisä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>

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.

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

Tasaiset linkit

Vaihtoehtoisesti voit kohdistaa jokaisen linkin sivuille:

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Valinnainen pois käytöstä tila

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

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Esimerkki

Esimerkkiotsikko Uusi

<h3>Example heading <span class="label label-default">New</span></h3>

Saatavilla muunnelmia

Lisää mikä tahansa alla mainituista muokkausluokista muuttaaksesi tarran ulkoasua.

Oletusensisijainen onnistumistieto Varoitus Vaara _ _

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

Onko sinulla tonnia etikettejä?

Renderöintiongelmia voi ilmetä, kun kapeassa säiliössä on kymmeniä upotettuja tarroja, joista jokainen sisältää oman inline-blockelementin (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.

Saapuneet42

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

Itse romahtaa

Jos uusia tai lukemattomia kohteita ei ole, merkit yksinkertaisesti kutistuvat (CSS:n :emptyvalitsimen kautta), jos sisällä ei ole sisältöä.

Selainten välinen yhteensopivuus

Tunnusmerkit eivät kutistu itsestään Internet Explorer 8:ssa, koska se ei tue :emptyvalitsinta.

Mukautuu aktiivisiin navigointitiloihin

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

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="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 .containers:n ulkopuolelle ja lisää sen sijaan .containersisäpuoli.

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

Yksinkertainen komentotulkki h1sivun sisällön osioiden välittämistä ja segmentointia varten. Se voi käyttää oletuselementtiä h1sekä smalluseimpia 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 .

Oletusesimerkki

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>

Mukautettu sisältö

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.

Painike Painike

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.

Painike Painike

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.

Painike Painike

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

Esimerkkejä

Kääri mikä tahansa teksti ja valinnainen hylkäyspainike .alertjohonkin neljästä asiayhteyteen perustuvasta luokasta (esim. .alert-success) perusvaroitusviesteille.

Ei oletusluokkaa

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.

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

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

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

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

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

Hylättävät hälytykset

Rakenna mitä tahansa ilmoitusta lisäämällä valinnainen .alert-dismissibleja sulje-painike.

Vaatii JavaScript-hälytyslaajennuksen

Täysin toimivien, hylättävien ilmoitusten saamiseksi sinun on käytettävä hälytysten JavaScript-laajennusta .

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

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Varmista asianmukainen toiminta kaikissa laitteissa

Muista käyttää <button>elementtiä data-dismiss="alert"data-attribuutin kanssa.

Linkit hälytyksissä

Käytä .alert-linkhyödyllisyysluokkaa tarjotaksesi nopeasti vastaavia värillisiä linkkejä mihin tahansa hälytykseen.

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

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

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

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

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

Selainten välinen yhteensopivuus

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.

Sisällön suojauskäytännön (CSP) yhteensopivuus

Jos verkkosivustollasi on sisällön suojauskäytäntö (CSP) , joka ei salli style-src 'unsafe-inline', et voi käyttää upotettuja styleattribuutteja 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.

Perusesimerkki

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>

Etiketillä

Poista <span>kanssa - .sr-onlyluokka edistymispalkista näyttääksesi näkyvän prosenttiosuuden.

60 %

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

0 %

2 %

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

Kontekstuaaliset vaihtoehdot

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>

Raidallinen

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>

Animoitu

Lisää .active: .progress-bar-stripedanimoidaksesi 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>

Pinottu

Aseta useita tankoja samaan .progresspinoaksesi 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

Oletusmedia näyttää mediaobjektin (kuvat, video, ääni) sisältölohkon vasemmalla tai oikealla puolella.

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

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.

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. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

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.

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.

<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-leftja .pull-rightovat 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-leftja .media-right, paitsi että .media-rightne tulisi sijoittaa .media-bodyHTML-koodin perään.

Median kohdistus

Kuvat tai muut materiaalit voidaan kohdistaa ylös, keskelle tai alas. Oletusarvo on ylätasattu.

Ylös tasattu materiaali

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.

Keskikohdennettu media

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.

Alas tasattu materiaali

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>

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.

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

Perusesimerkki

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.

Cras justo odio
Dapibus ac facilisis sisään
Morbi leo risus
Porta ac consectetur ac
Vestibulum ja eros

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

Tunnusmerkit

Lisää merkkikomponentti mihin tahansa luetteloryhmän kohteeseen ja se sijoitetaan automaattisesti oikealle.

14Cras justo odio
2Dapibus ac facilisis sisään
1Morbi leo risus

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Linkitetyt kohteet

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.

Cras justo odio Dapibus ac facilisis sisään Morbi leo risus Porta ac consectetur ac Vestibulum ja eros

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

Painikkeiden kohteet

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

Käytöstä poistetut kohteet

Lisää .disableda .list-group-item-kohtaan harmaaksi näyttääksesi pois käytöstä.

Cras justo odio Dapibus ac facilisis sisään Morbi leo risus Porta ac consectetur ac Vestibulum ja eros

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

Kontekstuaaliset luokat

Käytä kontekstuaalisia luokkia tyylilistaaksesi luettelokohteita, oletusarvoisia tai linkitettyjä. Sisältää myös .activevaltion.

Dapibus ac facilisis sisään
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulum ja eros

Dapibus ac facilisis sisään Cras sit amet nibh libero Porta ac consectetur ac Vestibulum ja eros

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

Mukautettu sisältö

Lisää melkein mikä tahansa HTML-koodi, myös alla olevan kaltaisille linkitetyille luetteloryhmille.

Luetteloryhmän kohteen otsikko

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Luetteloryhmän kohteen otsikko

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Luetteloryhmän kohteen otsikko

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.

Perusesimerkki

Oletusarvoisesti kaikki .paneltehtävät on käyttää perusreunaa ja -täyttöä sisällön sisällyttämiseksi.

Esimerkki paneelista

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Paneeli otsikolla

Lisää otsikkosäilö helposti paneeliisi käyttämällä .panel-heading. Voit myös lisätä minkä tahansa <h1>- luokan <h6>kanssa .panel-titlelisätäksesi valmiiksi muotoillun otsikon. <h1>Kuitenkin - kirjasinkoot <h6>ohittavat .panel-heading.

Jotta linkkien väritys onnistuu, muista sijoittaa linkit otsikoihin .panel-title.

Paneelin otsikko ilman otsikkoa

Paneelin sisältö

Paneelin otsikko

Paneelin sisältö

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

Paneeli alatunnisteella

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.

Paneelin sisältö

Paneelin alatunniste

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

Kontekstuaaliset vaihtoehdot

Kuten muutkin komponentit, voit helposti tehdä paneelista merkityksellisemmän tietylle kontekstille lisäämällä minkä tahansa kontekstuaalisen tilaluokan.

Paneelin otsikko

Paneelin sisältö

Paneelin otsikko

Paneelin sisältö

Paneelin otsikko

Paneelin sisältö

Paneelin otsikko

Paneelin sisältö

Paneelin otsikko

Paneelin sisältö

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

Pöydillä

Lisää paneeliin kaikki reunuksettomat kohdat .tablesaumattoman suunnittelun saamiseksi. Jos on .panel-body, lisäämme ylimääräisen reunuksen taulukon yläosaan erottamista varten.

Paneelin otsikko

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

Paneelin otsikko

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

Listaryhmien kanssa

Sisällytä helposti täysleveät luetteloryhmät mihin tahansa paneeliin.

Paneelin otsikko

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.

Cras justo odio
Dapibus ac facilisis sisään
Morbi leo risus
Porta ac consectetur ac
Vestibulum ja eros

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

Oletusarvo hyvin

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

Katso, olen kaivossa!

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

Valinnaiset luokat

Ohjauspehmusteet ja pyöristetyt kulmat kahdella valinnaisella muokkausluokalla.

Katsokaa, olen suuressa kaivossa!

<div class="well well-lg">...</div>

Katsokaa, olen pienessä kaivossa!

<div class="well well-sm">...</div>

Komponentit

Glyfikonit

Käytettävissä olevat glyfit

Kuinka käyttää

Älä sekoita muiden komponenttien kanssa

Vain tyhjille elementeille

Kuvakkeen fontin sijainnin muuttaminen

Helppokäyttöiset kuvakkeet

Esimerkkejä

Pudotusvalikosta

Esimerkki

Tasaus

Saattaa vaatia lisäasemointia

Vanhentunut .pull-righttasaus

Otsikot

Jakaja

Poistetut valikon kohdat

Painikeryhmät

Painikeryhmien työkaluvihjeet ja ponnahdusikkunat vaativat erikoisasetuksia

Varmista, että se on oikein roleja anna tarra

Perusesimerkki

Painiketyökalupalkki

Mitoitus

Pesivä

Pystysuuntainen vaihtelu

Perusteltu painikeryhmät

Reunojen käsittely

IE8 ja reunat

<a>Elementtien kanssa

Linkit toimivat painikkeina

<button>Elementtien kanssa

Painikkeiden pudotusvalikot

Liitännäisriippuvuus

Yhden painikkeen pudotusvalikot

Jakopainikkeen pudotusvalikot

Mitoitus

Dropup-variaatio

Syöteryhmät

<input>Vain tekstit

Työkaluvihjeet ja ponnahdusikkunat syöttöryhmissä vaativat erikoisasetuksen

Älä sekoita muiden komponenttien kanssa

Lisää aina tarrat

Perusesimerkki

Mitoitus

Valintaruudut ja radiolisäosat

Painikkeiden lisäosat

Painikkeet pudotusvalikoilla

Segmentoidut painikkeet

Useita painikkeita

Navit

Navs-osien käyttäminen välilehtipaneeleissa vaatii JavaScript-välilehdet-laajennuksen

Tee navigointina käytettävät navit käytettävissä

Välilehdet

Pillerit

Oikeutettu

Safari ja reagoivat tasaiset navit

Poistetut linkit

Ei vaikuta linkin toimivuuteen

Pudotusvalikoiden käyttäminen

Välilehdet avattavilla valikoilla

Pillerit pudotusvalikoilla

Navbar

Oletusnavigointipalkki

Ylimääräistä sisältöä

Vaatii JavaScript-laajennuksen

Tiivistetyn mobiilinavigointipalkin keskeytyskohdan muuttaminen

Tee navigointipalkeista saavutettavia

Brändikuva

Lomakkeet

Mobiililaitteiden varoitukset

Lisää aina tarrat

Painikkeet

Kontekstikohtainen käyttö

Teksti

Ei-navigointilinkit

Komponenttien kohdistus

Useiden komponenttien oikea kohdistus

Kiinnitetty yläosaan

Vartalon pehmuste vaaditaan

Kiinnitetty pohjaan

Vanhentunut `.pull-right`tasaus

Varmista, että se on oikein `role`ja anna tarra

`<a>`Elementtien kanssa

`<button>`Elementtien kanssa

`<input>`Vain tekstit