Glyfikonit

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.

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

Pudotusvalikosta

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

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>

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.

Saattaa vaatia lisäasemointia

Pudotusvalikot sijoitetaan automaattisesti CSS:n kautta asiakirjan normaaliin kulkuun. Tämä tarkoittaa, että vanhemmat voivat rajata avattavia valikoita, joilla on tiettyjä overflowominaisuuksia, tai ne voivat näkyä näkymän rajojen ulkopuolella. Käsittele nämä ongelmat itse, kun niitä ilmenee.

Vanhentunut .pull-righttasaus

Vuodesta 3.1.0 lähtien olemme poistaneet käytöstä .pull-rightavattavat 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ää .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>

Painikeryhmät

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

Painiketyökalupalkki

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 ulottuu ylätason koko leveydelle. 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.

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

Painikkeiden pudotusvalikot

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>

Syöteryhmät

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

@

@example.com

$ .00

https://example.com/käyttäjät/
<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>

Navit

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ä role="navigation"loogisimman ylätason säilöön <ul>tai kääri <nav>elementti koko navigoinnin ympärille. Älä lisää roolia <ul>itseensä, koska se estäisi sen ilmoittamisen todelliseksi luetteloksi aputekniikoiden avulla.

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>

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>

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>

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

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>

Navbar

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:

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

Vaatii JavaScript-laajennuksen

Jos JavaScript on poistettu käytöstä ja näkymä on tarpeeksi kapea, jotta navigointipalkki kutistuu, on mahdotonta laajentaa navigointipalkkia ja tarkastella sisältöä .navbar-collapse.

Responsiivinen navigointipalkki edellyttää, että Bootstrap-versiossasi on tiivistyslaajennus .

Tiivistetyn mobiilinavigointipalkin keskeytyskohdan muuttaminen

Navigointipalkki kutistuu pystysuuntaiseen mobiilinäkymäänsä, kun näkymä on kapeampi kuin @grid-float-breakpoint, ja laajenee vaakasuuntaiseen ei-mobiilinäkymään, kun näkymä on vähintään @grid-float-breakpointleveä. Säädä tätä muuttujaa Vähemmän lähteessä hallitaksesi, milloin navigointipalkki kutistuu/laajentuu. Oletusarvo on 768px(pienin "pieni" tai "tabletti"-näyttö).

Tee navigointipalkeista saavutettavia

Muista käyttää <nav>elementtiä tai, jos käytät yleisempää elementtiä, kuten <div>, lisää role="navigation"jokaiseen navigointipalkkiin, jotta se tunnistetaan selkeästi maamerkkialueeksi aputekniikoiden käyttäjille.

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

Mobiililaitteiden varoitukset

Mobiililaitteiden kiinteiden elementtien lomakesäätimien käyttöön liittyy joitain varoituksia. Katso lisätietoja selaimen tukidokumenteistamme .

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>

Kontekstikohtainen käyttö

Kuten tavallisia painikeluokkia , .navbar-btnvoidaan käyttää <a>ja <input>elementeissä. Kumpaakaan .navbar-btntai tavallisia painikeluokkia ei kuitenkaan tule käyttää <a>elementeissä sisällä .navbar-nav.

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

Useiden komponenttien oikea kohdistus

Navigointipalkkeja on tällä hetkellä rajoitettu useille .navbar-rightluokille. Käytämme viimeisessä .navbar-rightelementissä negatiivista marginaalia, jotta sisältö välitetään oikein. Kun kyseistä luokkaa käyttää useita elementtejä, nämä marginaalit eivät toimi tarkoitetulla tavalla.

Palaamme tähän, kun voimme kirjoittaa kyseisen komponentin uudelleen v4:ssä.

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>

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>

Tarrat

Esimerkki

Esimerkkiotsikko Uusi

Esimerkkiotsikko Uusi

Esimerkkiotsikko Uusi

Esimerkkiotsikko Uusi

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

Tunnusmerkit

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>

Jumbotron

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>

Sivun otsikko

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>

Pikkukuvat

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.

100 % x 200

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

100 % x 200

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

100 % x 200

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>

Hälytykset

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.

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

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

Käytä .alert-linkhyö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>

Edistymispalkit

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.

60 % valmis
<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.

40 % valmis (onnistui)
20 % valmiina
60 % valmis (varoitus)
80 % valmis (vaara)
<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.

40 % valmis (onnistui)
20 % valmiina
60 % valmis (varoitus)
80 % valmis (vaara)
<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.

45 % valmis
<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.

35 % valmis (onnistui)
20 % valmis (varoitus)
10 % valmis (vaara)
<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>

Mediaobjekti

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>

Listaa ryhmä

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.

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

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

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

Paneelit

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>

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

Responsiivinen upotus

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>

Wells

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