Fáanlegir táknmyndir

Inniheldur yfir 250 táknmyndir í leturformi úr Glyphicon Halflings settinu. Glyphicons Halflings eru venjulega ekki fáanlegar ókeypis, en skapari þeirra hefur gert þær aðgengilegar fyrir Bootstrap án endurgjalds. Sem þakklæti biðjum við þig aðeins um að láta tengil til baka á Glyphicons þegar mögulegt er.

glyphicon glyphicon-stjörnu
glyphicon glyphicon-plús
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-mínus
glyphicon glyphicon-ský
glyphicon glyphicon-umslag
glyphicon glyphicon-blýantur
glyphicon glyphicon-gler
glyphicon glyphicon-tónlist
glyphicon glyphicon-leit
glyphicon glyphicon-hjarta
glyphicon glyphicon-stjarna
glyphicon glyphicon-stjörnu-tóm
glyphicon glyphicon-notandi
glyphicon glyphicon-filma
glyphicon glyphicon-þ-stór
glyphicon glyphicon-þ
glyphicon glyphicon-th-listi
glyphicon glyphicon-ok
glyphicon glyphicon-fjarlægja
glyphicon glyphicon-aðdráttur inn
glyphicon glyphicon-zoom-out
glyphicon glyphicon-slökkt
glyphicon glyphicon-merki
glyphicon glyphicon-cog
glyphicon glyphicon-rusl
glyphicon glyphicon-heimili
glyphicon glyphicon-skrá
glyphicon glyphicon-tími
glyphicon glyphicon-vegur
glyphicon glyphicon-download-alt
glyphicon glyphicon til að sækja
glyphicon glyphicon-upphleðsla
glyphicon glyphicon-innhólf
glyphicon glyphicon-leik-hringur
glyphicon glyphicon-endurtaka
glyphicon glyphicon-hressa
glyphicon glyphicon-list-alt
glyphicon glyphicon-lás
glyphicon glyphicon-fáni
glyphicon glyphicon-heyrnartól
glyphicon glyphicon-volume-off
glyphicon glyphicon-hljóðstyrkur niður
glyphicon glyphicon-hljóðstyrkur
glyphicon glyphicon-qrcode
glyphicon glyphicon-strikamerkja
glyphicon glyphicon-merki
glyphicon glyphicon-merki
glyphicon glyphicon-bók
glyphicon glyphicon-bókamerki
glyphicon glyphicon-prent
glyphicon glyphicon-myndavél
glyphicon glyphicon-leturgerð
glyphicon glyphicon-feitletrað
glyphicon glyphicon-skáletraður
glyphicon glyphicon-texta-hæð
glyphicon glyphicon-textabreidd
glyphicon glyphicon-align-vinstri
glyphicon glyphicon-align-center
glyphicon glyphicon-align-hægri
glyphicon glyphicon-align-justify
glyphicon glyphicon-listi
glyphicon glyphicon-indent-vinstri
glyphicon glyphicon-indent-hægri
glyphicon glyphicon-facetime-video
glyphicon glyphicon-mynd
glyphicon glyphicon-kortamerki
glyphicon glyphicon-stilla
glyphicon glyphicon-litur
glyphicon glyphicon-edit
glyphicon glyphicon-hluti
glyphicon glyphicon-athugun
glyphicon glyphicon-hreyfa
glyphicon glyphicon-skref-aftur
glyphicon glyphicon-hratt-aftur á bak
glyphicon glyphicon-aftur
glyphicon glyphicon-leikur
glyphicon glyphicon-hlé
glyphicon glyphicon-stopp
glyphicon glyphicon-fram
glyphicon glyphicon-fljótur áfram
glyphicon glyphicon-skref-áfram
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-vinstri
glyphicon glyphicon-chevron-hægri
glyphicon glyphicon-plús-merki
glyphicon glyphicon-mínus-merki
glyphicon glyphicon-fjarlægja-merki
glyphicon glyphicon-ok-merki
glyphicon glyphicon-spurningamerki
glyphicon glyphicon-upplýsingamerki
glyphicon glyphicon-skjáskot
glyphicon glyphicon-fjarlægja-hringur
glyphicon glyphicon-ok-hringur
glyphicon glyphicon-ban-hringur
glyphicon glyphicon-ör-vinstri
glyphicon glyphicon-ör-hægri
glyphicon glyphicon-arrow-up
glyphicon glyphicon-ör-niður
glyphicon glyphicon-share-alt
glyphicon glyphicon-breyta stærð-fullur
glyphicon glyphicon-breyta stærð-lítil
glyphicon glyphicon-upphrópunarmerki
glyphicon glyphicon-gjöf
glyphicon glyphicon-blaða
glyphicon glyphicon-eldur
glyphicon glyphicon-auga-opið
glyphicon glyphicon-auga-loka
glyphicon glyphicon-viðvörunarmerki
glyphicon glyphicon-plane
glyphicon glyphicon-dagatal
glyphicon glyphicon-random
glyphicon glyphicon-comment
glyphicon glyphicon-segul
glyphicon glyphicon-chevron-upp
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-innkaupakörfu
glyphicon glyphicon-möppu-loka
glyphicon glyphicon-mappa-opin
glyphicon glyphicon-breyta stærð-lóðrétt
glyphicon glyphicon-breyta stærð-lárétt
glyphicon glyphicon-hdd
glyphicon glyphicon-nauthorn
glyphicon glyphicon-bjalla
glyphicon glyphicon-vottorð
glyphicon glyphicon-thumbs-up
glyphicon glyphicon-thumbs-down
glyphicon glyphicon-hand-hægri
glyphicon glyphicon-hand-vinstri
glyphicon glyphicon-hand-upp
glyphicon glyphicon-hand-down
glyphicon glyphicon-hringur-ör-hægri
glyphicon glyphicon-hringur-ör-vinstri
glyphicon glyphicon-hring-ör-upp
glyphicon glyphicon-hringur-ör-niður
glyphicon glyphicon-globe
glyphicon glyphicon-lykil
glyphicon glyphicon-verkefni
glyphicon glyphicon-sía
glyphicon glyphicon-skjalataska
glyphicon glyphicon-fullur skjár
glyphicon glyphicon-mælaborð
glyphicon glyphicon-pappírsklemmi
glyphicon glyphicon-hjarta-tómt
glyphicon glyphicon-hlekkur
glyphicon glyphicon-sími
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-tegund
glyphicon glyphicon-flokkað eftir stafrófi
glyphicon glyphicon-flokka-eftir-stafrófinu-alt
glyphicon glyphicon-flokkað eftir röð
glyphicon glyphicon-flokka-eftir-röð-alt
glyphicon glyphicon-flokkað eftir eiginleikum
glyphicon glyphicon-flokka-eftir-eiginleikum-alt
glyphicon glyphicon-óhakað
glyphicon glyphicon-stækka
glyphicon glyphicon-hrun-niður
glyphicon glyphicon-hrun upp
glyphicon glyphicon-innskráning
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-nýr-gluggi
glyphicon glyphicon-skrá
glyphicon glyphicon-vista
glyphicon glyphicon-opinn
glyphicon glyphicon-vistað
glyphicon glyphicon-innflutningur
glyphicon glyphicon-útflutningur
glyphicon glyphicon-senda
glyphicon glyphicon-floppy-diskur
glyphicon glyphicon-floppy-vistað
glyphicon glyphicon-floppy-fjarlægja
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-opinn
glyphicon glyphicon-kreditkort
glyphicon glyphicon-flutningur
glyphicon glyphicon-hnífapör
glyphicon glyphicon-haus
glyphicon glyphicon-þjappað
glyphicon glyphicon-heyrnartól
glyphicon glyphicon-phone-alt
glyphicon glyphicon-turn
glyphicon glyphicon-tölfræði
glyphicon glyphicon-sd-myndband
glyphicon glyphicon-hd-myndband
glyphicon glyphicon-textar
glyphicon glyphicon-hljóð-stereo
glyphicon glyphicon-hljóð-dolby
glyphicon glyphicon-hljóð-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-höfundarréttarmerki
glyphicon glyphicon-skráningarmerki
glyphicon glyphicon-ský-niðurhal
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-tré-barrtré
glyphicon glyphicon-tré-lauft
glyphicon glyphicon-geisladiskur
glyphicon glyphicon-vista-skrá
glyphicon glyphicon-open-file
glyphicon glyphicon-stig upp
glyphicon glyphicon-afrit
glyphicon glyphicon-líma
glyphicon glyphicon-viðvörun
glyphicon glyphicon-jafnari
glyphicon glyphicon-konungur
glyphicon glyphicon-drottning
glyphicon glyphicon-peð
glyphicon glyphicon-biskup
glyphicon glyphicon-riddarinn
glyphicon glyphicon-baby-formúla
glyphicon glyphicon-tjald
glyphicon glyphicon-svartatöflu
glyphicon glyphicon-beð
glyphicon glyphicon-epli
glyphicon glyphicon-eyða
glyphicon glyphicon-stundaglas
glyphicon glyphicon-lampi
glyphicon glyphicon-duplicate
glyphicon glyphicon-grís-banki
glyphicon glyphicon-skæri
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-rúbla
glyphicon glyphicon-rub
glyphicon glyphicon-kvarða
glyphicon glyphicon-ice-lolly
glyphicon glyphicon-ís-sveifla-bragðað
glyphicon glyphicon-menntun
glyphicon glyphicon-valkostur-láréttur
glyphicon glyphicon-valkostur-lóðrétt
glyphicon glyphicon-menu-hamborgari
glyphicon glyphicon-modal-gluggi
glyphicon glyphicon-olía
glyphicon glyphicon-korn
glyphicon glyphicon-sólgleraugu
glyphicon glyphicon-textastærð
glyphicon glyphicon-texta-litur
glyphicon glyphicon-texti-bakgrunnur
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-object-align-horisontal
glyphicon glyphicon-object-align-left
glyphicon glyphicon-object-align-lóðrétt
glyphicon glyphicon-object-align-right
glyphicon glyphicon-þríhyrningur-hægri
glyphicon glyphicon-þríhyrningur-vinstri
glyphicon glyphicon-þríhyrningur-botn
glyphicon glyphicon-þríhyrningur-toppur
glyphicon glyphicon-console
glyphicon glyphicon-yfirskrift
glyphicon glyphicon-áskrift
glyphicon glyphicon-valmynd-vinstri
glyphicon glyphicon-valmynd-hægri
glyphicon glyphicon-valmynd-niður
glyphicon glyphicon-valmynd-upp

Hvernig skal nota

Af frammistöðuástæðum þurfa öll tákn grunnflokks og einstaks táknflokks. Til að nota skaltu setja eftirfarandi kóða nánast hvar sem er. Gakktu úr skugga um að skilja eftir bil á milli táknsins og textans fyrir rétta fyllingu.

Ekki blanda saman við aðra hluti

Ekki er hægt að sameina táknflokka beint við aðra hluti. Þeir ættu ekki að nota ásamt öðrum flokkum á sama frumefni. Í staðinn skaltu bæta við hreiðri <span>og nota táknflokkana á <span>.

Aðeins til notkunar á tómum hlutum

Táknflokkar ættu aðeins að nota á þætti sem innihalda ekkert textaefni og hafa enga undirþætti.

Breyting á leturgerð táknsins

Bootstrap gerir ráð fyrir að táknleturskrár verði staðsettar í ../fonts/möppunni, miðað við samansettar CSS skrár. Að færa eða endurnefna þessar leturgerðir þýðir að uppfæra CSS á einn af þremur vegu:

Breyttu @icon-font-pathog/eða @icon-font-namebreytunum í upprunanum Minni skrár.
Notaðu hlutfallslega vefslóða valkostinn sem Less þýðandinn býður upp á.
Breyttu url()slóðum í samsettum CSS.

Notaðu hvaða valkost sem hentar best þinni þróunaruppsetningu.

Aðgengileg tákn

Nútímaútgáfur af hjálpartækjum munu tilkynna CSS myndað efni, sem og sérstaka Unicode stafi. Til að forðast óviljandi og ruglingslegt úttak í skjálesurum (sérstaklega þegar tákn eru eingöngu notuð til skrauts), felum við þau með aria-hidden="true"eigindinni.

Ef þú ert að nota tákn til að koma merkingu á framfæri (frekar en aðeins sem skreytingarþátt), vertu viss um að þessi merking sé einnig miðlað til hjálpartækni – til dæmis skaltu innihalda viðbótarefni, sjónrænt falið með .sr-onlybekknum.

Ef þú ert að búa til stýringar án annarra texta (eins og <button>sem inniheldur aðeins tákn), ættirðu alltaf að gefa upp annað efni til að bera kennsl á tilgang stýringarinnar, svo að það sé skynsamlegt fyrir notendur hjálpartækni. Í þessu tilfelli gætirðu bætt við aria-labeleigind á stýringuna sjálfa.

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

Dæmi

Notaðu þá í hnöppum, hnappahópum fyrir tækjastiku, flakk eða innsláttarform.

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

Tákn sem notað er í viðvörun til að koma því á framfæri að um villuboð sé að ræða, með viðbótartexta .sr-onlytil að koma þessari vísbendingu á framfæri til notenda hjálpartækja.

Sláðu inn gilt netfang

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

Skiptanlegur samhengisvalmynd til að birta tenglalista. Gert gagnvirkt með fellivalmyndinni JavaScript viðbótinni .

Dæmi

Settu kveikjuna á fellilistanum og fellivalmyndinni innan .dropdown, eða annan þátt sem lýsir yfir position: relative;. Bættu síðan við HTML valmyndinni.

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

Hægt er að breyta fellivalmyndum til að stækka upp (í stað þess að niður) með því að bæta .dropupvið foreldri.

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

Jöfnun

Sjálfgefið er að fellivalmynd er sjálfkrafa staðsett 100% efst og meðfram vinstri hlið foreldris. Bættu .dropdown-menu-rightvið .dropdown-menutil hægri stilltu fellivalmyndina.

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

Hausar

Bættu við haus til að merkja hluta aðgerða í hvaða fellivalmynd sem er.

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

Skiptari

Bættu við skiptingu við aðskilda röð tengla í fellivalmynd.

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

Óvirkt valmyndaratriði

Bættu .disabledvið a <li>í fellilistanum til að slökkva á hlekknum.

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

Flokkaðu röð af hnöppum saman á einni línu með hnappahópnum. Bættu við valfrjálsu JavaScript útvarps- og gátreitastílhegðun með hnappaviðbótinni okkar .

Verkfæri og sprettigluggar í hnappahópum krefjast sérstakrar stillingar

Þegar þú notar verkfæraábendingar eða sprettiglugga á þætti innan .btn-group, þarftu að tilgreina möguleikann container: 'body'til að forðast óæskilegar aukaverkanir (svo sem að þátturinn stækkar og/eða tapar ávölum hornum sínum þegar verkfæraábendingin eða sprettigluggan er kveikt).

Gakktu úr skugga um rétt `role`og gefðu merkimiða

Til þess að hjálpartækni – eins og skjálesarar – geti gefið til kynna að röð af hnöppum sé flokkuð roleþarf að gefa upp viðeigandi eiginleika. Fyrir hnappahópa væri þetta role="group", en tækjastikur ættu að hafa role="toolbar".

Ein undantekning eru hópar sem innihalda aðeins eina stýringu (til dæmis réttláta hnappahópa með <button>þáttum) eða fellilista.

Að auki ættu hópar og tækjastikur að fá skýran merkimiða, þar sem flestar hjálpartæki munu annars ekki tilkynna þær, þrátt fyrir að réttur roleeiginleiki sé til staðar. Í dæmunum sem hér eru gefin notum við , en einnig er hægt að nota aria-labelaðra valkosti eins og .aria-labelledby

Grunndæmi

Vefjið röð af hnöppum með .btninn .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>

Sameina sett af <div class="btn-group">í a <div class="btn-toolbar">fyrir flóknari íhluti.

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

Stærð

Í stað þess að nota hnappastærðarflokka á hvern hnapp í hópi skaltu bara bæta .btn-group-*við hvern .btn-group, þar á meðal þegar þú hreiður marga hópa.

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

Hreiður

Settu inn .btn-groupí annað .btn-groupþegar þú vilt fellivalmyndir í bland við röð af hnöppum.

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

Lóðrétt afbrigði

Láttu hóp af hnöppum birtast lóðrétt staflað frekar en lárétt. Niðurfellingar fyrir skiptahnappa eru ekki studdar hér.

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

Réttlæddir hnappahópar

Láttu hóp af hnöppum teygja sig í jöfnum stærðum til að ná yfir alla breidd foreldris þess. Virkar einnig með fellivalmyndum hnappa innan hnappahópsins.

Meðhöndlun landamæra

Vegna sérstakrar HTML og CSS sem notuð eru til að réttlæta hnappa (þ.e. display: table-cell), eru mörkin á milli þeirra tvöfölduð. Í venjulegum hnappahópum margin-left: -1pxer notað til að stafla ramma í stað þess að fjarlægja þá. Virkar hins vegar marginekki með display: table-cell. Þar af leiðandi gætirðu viljað fjarlægja eða endurlita rammana, allt eftir aðlögunum þínum á Bootstrap.

IE8 og landamæri

Internet Explorer 8 sýnir ekki ramma á hnöppum í réttlættum hnappahópi, hvort sem það er kveikt <a>eða <button>þættir. Til að komast í kringum það skaltu vefja hvern hnapp inn í annan .btn-group.

Sjá #12476 fyrir frekari upplýsingar.

Með `<a>`þáttum

Settu bara röð af .btns inn í .btn-group.btn-group-justified.

Vinstri Miðja Rétt

Vinstri Miðja

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

Tenglar sem virka sem hnappar

Ef <a>þættirnir eru notaðir til að virka sem hnappar - sem kalla fram virkni á síðu, frekar en að fletta í annað skjal eða hluta á núverandi síðu - ættu þeir einnig að fá viðeigandi role="button".

Með `<button>`þáttum

Til að nota réttlætta hnappahópa með <button>þáttum verður þú að vefja hvern hnapp í hnappahóp . Flestir vafrar nota ekki CSS okkar til að rökstyðja <button>þætti sem skyldi, en þar sem við styðjum fellivalmyndahnappa getum við unnið í kringum það.

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

Notaðu hvaða hnapp sem er til að kveikja á fellivalmynd með því að setja hana í .btn-groupog setja upp rétta valmyndarmerkingu.

Viðbót háð

Í fellivalmyndum hnappa þarf að fellilistann sé innifalin í útgáfunni þinni af Bootstrap.

Fellilistar með einum hnappi

Breyttu hnappi í fellivalmynd með nokkrum grunnbreytingum á merkingum.

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

Dreifingarhnappar fellivalmyndir

Á sama hátt, búðu til fellivalmyndir fyrir skiptan hnapp með sömu merkingarbreytingum, aðeins með sérstökum hnappi.

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

Stærð

Hnappavalmyndir virka með hnöppum af öllum stærðum.

<!-- 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 afbrigði

Kveiktu á fellivalmyndum fyrir ofan þætti með því að bæta .dropupvið foreldri.

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

Stækkaðu formstýringar með því að bæta við texta eða hnöppum fyrir, eftir eða báðum megin við hvaða texta sem byggir á <input>. Notaðu .input-groupmeð .input-group-addoneða .input-group-btntil að setja frumefni fyrir eða bæta við staka .form-control.

`<input>`Aðeins texta

Forðastu að nota <select>þætti hér þar sem þeir geta ekki verið fullkomlega stílaðir í WebKit vöfrum.

Forðastu að nota <textarea>þætti hér þar sem rowseiginleiki þeirra verður ekki virtur í sumum tilfellum.

Verkfæri og sprettigluggar í inntakshópum krefjast sérstakrar stillingar

Þegar þú notar verkfæraábendingar eða sprettiglugga á þætti innan .input-group, þarftu að tilgreina möguleikann container: 'body'til að forðast óæskilegar aukaverkanir (svo sem að þátturinn stækkar og/eða tapar ávölum hornum sínum þegar verkfæraábendingin eða sprettigluggan er kveikt).

Ekki blanda saman við aðra hluti

Ekki blanda eyðublaðahópum eða töfludálkaflokkum beint saman við inntakshópa. Í staðinn skaltu hreiðra inntakshópinn inni í eyðublaðahópnum eða töflutengda einingunni.

Bættu alltaf við merkimiðum

Skjálesarar munu eiga í vandræðum með eyðublöðin þín ef þú hefur ekki merki fyrir hvert inntak. Fyrir þessa inntakshópa skaltu ganga úr skugga um að öll viðbótarmerki eða virkni sé send til hjálpartækni.

Nákvæm tækni sem á að nota (sýnilegir <label>þættir, <label>þættir falnir með því að nota .sr-onlybekkinn, eða notkun á aria-label, aria-labelledby, aria-describedby, titleeða placeholdereigindinni) og hvaða viðbótarupplýsingar þarf að koma á framfæri mun vera mismunandi eftir nákvæmri gerð viðmótsgræjunnar sem þú ert að innleiða. Dæmin í þessum hluta veita nokkrar tillögur, tilvikssértækar aðferðir.

Grunndæmi

Settu eina viðbót eða hnapp á hvorri hlið inntaks. Þú getur líka sett einn á báðum hliðum inntaks.

Við styðjum ekki margar viðbætur ( .input-group-addoneða .input-group-btn) á einni hlið.

Við styðjum ekki margar formstýringar í einum innsláttarhópi.

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

Stærð

Bættu hlutfallslegum formstærðarflokkum við .input-groupsjálfan sig og innihald innan mun sjálfkrafa breyta stærð - engin þörf á að endurtaka stærðarflokka formstýringar á hverjum þætti.

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

Gátreitir og útvarpsviðbætur

Settu hvaða gátreit sem er eða útvarpsvalkostur í viðbót inntakshóps í stað texta.

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

Hnappaviðbætur

Hnappar í innsláttarhópum eru svolítið öðruvísi og þurfa eitt aukastig af hreiður. Í staðinn fyrir .input-group-addon, þarftu að nota .input-group-btntil að vefja hnappana. Þetta er nauðsynlegt vegna sjálfgefna vafrastíla sem ekki er hægt að hnekkja.

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

Hnappar með fellilista

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

Skiptir hnappar

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

Margir hnappar

Þó að þú getir aðeins haft eina viðbót á hverri hlið geturðu haft marga hnappa inni í einum .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>

Navs sem eru fáanleg í Bootstrap hafa sameiginlega merkingu, byrjað með .navgrunnflokknum, sem og sameiginleg ríki. Skiptu um breytingaflokka til að skipta á milli hvers stíls.

Notkun navs fyrir flipaspjöld krefst JavaScript flipa viðbót

Fyrir flipa með flipasvæðum verður þú að nota JavaScript viðbótina fyrir flipa . Merkingin mun einnig krefjast viðbótar- roleog ARIA-eiginleika - sjá dæmi álagningar viðbótarinnar fyrir frekari upplýsingar.

Gerðu siglingar sem notaðar eru sem siglingar aðgengilegar

Ef þú ert að nota navs til að útvega leiðsögustiku, vertu viss um að bæta við a role="navigation"við rökréttasta yfirgeymi <ul>, eða vefja <nav>einingu um alla leiðsögnina. Ekki bæta hlutverkinu við <ul>sjálft sig, þar sem það myndi koma í veg fyrir að það væri tilkynnt sem raunverulegur listi af hjálpartækjum.

Flipar

Athugið að .nav-tabsflokkurinn krefst .navgrunnklasans.

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

Pilla

Taktu sama HTML, en notaðu .nav-pillsí staðinn:

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

Pilla er einnig hægt að stafla lóðrétt. Bættu bara við .nav-stacked.

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

Réttlæst

Gerðu flipa eða pillur auðveldlega jafn breidd af foreldri sínu á skjáum breiðari en 768px með .nav-justified. Á smærri skjám eru nav tenglar staflað.

Réttlæddir navbar tenglar eru ekki studdir eins og er.

Safari og móttækileg réttlætanleg siglingaleið

Frá og með v9.1.2 sýnir Safari villu þar sem stærð vafrans þíns lárétt veldur flutningsvillum í rökstuddu nav sem er hreinsað við endurnýjun. Þessi villa er einnig sýnd í réttlættu nav dæminu .

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

Óvirkir tenglar

Fyrir hvaða nav hluti sem er (flipar eða pillur), bættu við .disabledfyrir gráa tengla og engin sveimaáhrif .

Tengslvirkni hefur ekki áhrif

Þessi flokkur mun aðeins breyta <a>útliti þess, ekki virkni þess. Notaðu sérsniðið JavaScript til að slökkva á tenglum hér.

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

Notar fellilista

Bættu við fellivalmyndum með smá auka HTML og fellilistanum JavaScript viðbótinni .

Flipar með fellilista

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

Pilla með fellilista

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

Navbars eru móttækilegir metahlutir sem þjóna sem leiðsöguhausar fyrir forritið þitt eða síðuna. Þeir byrja að falla saman (og er hægt að skipta um) í farsímasýnum og verða lárétt eftir því sem breidd útsýnisgáttarinnar eykst.

Réttlæddir navbar tenglar eru ekki studdir eins og er.

Yfirfullt efni

Þar sem Bootstrap veit ekki hversu mikið pláss efnið á siglingastikunni þinni þarf, gætirðu lent í vandræðum með að pakka efni inn í aðra röð. Til að leysa þetta geturðu:

Dragðu úr magni eða breidd navbar atriða.
Fela ákveðna siglingastiku í ákveðnum skjástærðum með því að nota móttækilega tólaflokka .
Breyttu þeim stað þar sem siglingastikan þín skiptir á milli fallinnar og láréttrar stillingar. Sérsníddu @grid-float-breakpointbreytuna eða bættu við þinni eigin miðlunarfyrirspurn.

Breytir niðurbrotspunkti farsímasiglingastikunnar

Skipastikan hrynur saman í lóðrétta farsímasýn sína þegar útsýnisgáttin er mjórri en @grid-float-breakpoint, og stækkar í lárétta sýn sem ekki er færanleg þegar útsýnisgáttin er að minnsta kosti @grid-float-breakpointá breidd. Stilltu þessa breytu í Minni uppsprettu til að stjórna hvenær siglingastikan hrynur/stækkar. Sjálfgefið gildi er 768px(minnsti "lítill" eða "spjaldtölva" skjárinn).

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

Skiptu út vörumerkinu navbar fyrir þína eigin mynd með því að skipta út textanum fyrir <img>. Þar sem það .navbar-brandhefur sína eigin bólstrun og hæð gætirðu þurft að hnekkja einhverjum CSS eftir myndinni þinni.

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

Settu eyðublaðsefni inni .navbar-formfyrir rétta lóðrétta röðun og hrunna hegðun í þröngum útsýnisgluggum. Notaðu jöfnunarvalmöguleikana til að ákveða hvar það er í innihaldi navbarsins.

Sem ábending, .navbar-formdeilir miklu af kóða sínum með .form-inlineí gegnum mixin. Sumar eyðublaðastýringar, eins og inntakshópar, gætu krafist þess að fastar breiddir birtist á réttan hátt innan stýrisstikunnar.

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

Bættu alltaf við merkimiðum

Skjálesarar munu eiga í vandræðum með eyðublöðin þín ef þú hefur ekki merki fyrir hvert inntak. Fyrir þessi innbyggðu eyðublöð geturðu falið merkimiðana með því að nota .sr-onlybekkinn. Það eru aðrar aðrar aðferðir til að útvega merki fyrir hjálpartækni, svo sem aria-label, aria-labelledbyeða titleeigindina. Ef ekkert af þessu er til staðar geta skjálesarar gripið til þess að nota placeholdereiginleikann, ef hann er til staðar, en athugaðu að placeholderekki er mælt með því að nota það í staðinn fyrir aðrar merkingaraðferðir.

Bættu .navbar-btnbekknum við <button>þætti sem ekki eru í a <form>til að miðja þá lóðrétt í stýristikunni.

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

Vefjið textastrengi inn í þátt með .navbar-text, venjulega á <p>merki fyrir rétta leið og lit.

<p class="navbar-text">Signed in as Mark Otto</p>

Fyrir fólk sem notar staðlaða tengla sem eru ekki í venjulegu siglingastikunni, notaðu .navbar-linkflokkinn til að bæta við réttum litum fyrir sjálfgefna og öfuga navbar valkosti.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

Samræmdu nav tengla, eyðublöð, hnappa eða texta með því að nota .navbar-lefteða .navbar-righttólaflokkana. Báðir flokkar munu bæta við CSS floti í tilgreinda átt. Til dæmis, til að samræma nav tengla, settu þá í sérstakan <ul>með viðkomandi gagnaflokki notaður.

Þessir flokkar eru blandaðar útgáfur af .pull-leftog .pull-right, en þeim er snýrð að miðlunarfyrirspurnum til að auðvelda meðhöndlun á navbaríhlutum í tækjastærðum.

Bættu við .navbar-fixed-topog settu inn .containereða .container-fluidtil að miðja og púða siglingastiku.

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

Líkamsfóðrun nauðsynleg

Fasta siglingastikan mun leggja yfir annað efni þitt, nema þú bætir paddingvið efst á <body>. Prófaðu þín eigin gildi eða notaðu brotið okkar hér að neðan. Ábending: Sjálfgefið er stýristikan 50px há.

body { padding-top: 70px; }

Gakktu úr skugga um að hafa þetta eftir kjarna Bootstrap CSS.

Bættu við .navbar-fixed-bottomog settu inn .containereða .container-fluidtil að miðja og púða siglingastiku.

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

Líkamsfóðrun nauðsynleg

Fasta stýristikan mun leggja yfir annað efni þitt, nema þú bætir paddingvið neðst á <body>. Prófaðu þín eigin gildi eða notaðu brotið okkar hér að neðan. Ábending: Sjálfgefið er stýristikan 50px há.

body { padding-bottom: 70px; }

Gakktu úr skugga um að hafa þetta eftir kjarna Bootstrap CSS.

Búðu til flakkastiku í fullri breidd sem flettir í burtu með síðunni með því að bæta við .navbar-static-topog láta fylgja með .containereða .container-fluidtil að miðja og púða innihald flakkastikunnar.

Ólíkt .navbar-fixed-*flokkunum þarftu ekki að breyta neinni bólstrun á body.

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

Breyttu útliti siglingastikunnar með því að bæta við .navbar-inverse.

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

Brauðmylsna

Tilgreindu staðsetningu núverandi síðu innan leiðsagnarstigveldis.

Skiljumönnum er sjálfkrafa bætt við í CSS í gegnum :beforeog content.

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

Síðuskipting

Gefðu upp blaðsíðutengla fyrir síðuna þína eða forritið með margsíðna blaðsíðuþættinum, eða einfaldari blaðsíðuvalkostinum .

Sjálfgefin blaðsíðugerð

Einföld blaðsíðugerð innblásin af Rdio, frábært fyrir öpp og leitarniðurstöður. Erfitt er að missa af stóra kubbnum, hann er auðvelt að skala og býður upp á stór smellisvæði.

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

Merking blaðsíðuhlutans

Síðuhlutinn ætti að vera pakkaður inn í <nav>þátt til að auðkenna hann sem leiðsöguhluta fyrir skjálesara og aðra hjálpartækni. Þar að auki, þar sem líklegt er að síða sé nú þegar með fleiri en einn slíkan flakkhluta (svo sem aðalleiðsögn í hausnum eða hliðarstikuleiðsögn), er ráðlegt að gefa upp lýsingu aria-labelfyrir það <nav>sem endurspeglar tilgang hennar. Til dæmis, ef blaðsíðuhlutinn er notaður til að fletta á milli leitarniðurstaðna gæti viðeigandi merki verið aria-label="Search results pages".

Fötluð og virk ríki

Tenglar eru sérhannaðar fyrir mismunandi aðstæður. Notaðu .disabledfyrir ósmellanlega tengla og .activetil að gefa til kynna núverandi síðu.

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

Við mælum með því að þú skipti út virkum eða óvirkum akkerum fyrir <span>, eða sleppir akkerinu ef um er að ræða fyrri/næstu örvar, til að fjarlægja smellivirkni á meðan þú heldur fyrirhuguðum stílum.

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

Stærð

Langar þig í stærri eða minni blaðsíðu? Bæta við .pagination-lgeða .pagination-smfyrir fleiri stærðir.

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

Símboðari

Fljótlegir fyrri og næstu hlekkir fyrir einfaldar blaðsíðuútfærslur með léttri merkingu og stílum. Það er frábært fyrir einfaldar síður eins og blogg eða tímarit.

Sjálfgefið dæmi

Sjálfgefið er að síminn miðlar tengla.

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

Samræmdir tenglar

Að öðrum kosti geturðu stillt hvern hlekk við hliðarnar:

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

Valfrjálst óvirkt ástand

Símboðstenglar nota einnig almenna .disabledgagnsemisflokkinn úr síðuskipuninni.

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

Dæmi

Dæmi fyrirsögn Nýtt

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

Afbrigði í boði

Bættu við einhverjum af neðangreindum breytingaflokkum til að breyta útliti merkimiða.

Sjálfgefin aðalupplýsingar um árangur Viðvörun Hætta

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

Ertu með fullt af merkimiðum?

Vandamál geta komið upp þegar þú ert með tugi innbyggðra merkimiða í þröngum íláti, sem hver inniheldur sinn inline-blockþátt (eins og táknmynd). Leiðin í kringum þetta er að setja display: inline-block;. Fyrir samhengi og dæmi, sjá #13219 .

Auðveldlega auðkenndu ný eða ólesin atriði með því að bæta <span class="badge">við tengla, Bootstrap navs og fleira.

Innhólf42

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

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

Sjálfur að hrynja

Þegar það eru engir nýir eða ólesnir hlutir munu merkin einfaldlega hrynja (í gegnum :emptyveljara CSS) að því tilskildu að ekkert efni sé til innan.

Samhæfni í gegnum vafra

Merkin hrynja ekki sjálf í Internet Explorer 8 vegna þess að það skortir stuðning fyrir :emptyveljarann.

Aðlagast virkum siglingastöðu

Innbyggður stíll er innifalinn til að setja merkin í virkt ástand í pilluleiðsögn.

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

Léttur, sveigjanlegur hluti sem getur mögulega stækkað allt útsýnið til að sýna lykilefni á síðunni þinni.

Halló heimur!

Þetta er einföld hetjueining, einfaldur íhlutur í jumbotron-stíl til að vekja aukna athygli á efni eða upplýsingum.

Læra meira

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

Til að gera jumbotron í fullri breidd, og án ávöl horna, skaltu setja hann fyrir utan allar .containers og í staðinn bæta við .containerinnan.

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

Einföld skel til h1að rýma og skipta hluta efnis á síðu á viðeigandi hátt. Það getur notað h1sjálfgefna smallþáttinn, sem og flesta aðra hluti (með viðbótarstílum).

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

Stækkaðu ristkerfi Bootstrap með smámyndahlutanum til að sýna auðveldlega myndanet, myndbönd, texta og fleira.

Ef þú ert að leita að Pinterest-líkri framsetningu á smámyndum af mismunandi hæð og/eða breidd, þarftu að nota viðbót frá þriðja aðila eins og Masonry , Isotope eða Salvattore .

Sjálfgefið dæmi

Sjálfgefið er að smámyndir Bootstrap séu hannaðar til að sýna tengdar myndir með lágmarks nauðsynlegri merkingu.

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

Sérsniðið efni

Með smá auka álagningu er hægt að bæta hvers kyns HTML efni eins og fyrirsögnum, málsgreinum eða hnöppum í smámyndir.

Smámyndamerki

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.

Takki Takki

Smámyndamerki

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.

Takki Takki

Smámyndamerki

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.

Takki Takki

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

Gefðu samhengisskilaboðum fyrir dæmigerðar notendaaðgerðir með handfylli af tiltækum og sveigjanlegum viðvörunarskilaboðum.

Dæmi

Vefjið hvaða texta sem er og valfrjáls hafnahnappur inn í .alertog einn af fjórum samhengisflokkum (td .alert-success) fyrir grunnviðvörunarskilaboð.

Enginn sjálfgefinn flokkur

Viðvaranir hafa ekki sjálfgefna flokka, aðeins grunn- og breytingaflokka. Sjálfgefin grá viðvörun er ekki of mikið vit, svo þú þarft að tilgreina tegund í gegnum samhengisflokk. Veldu úr árangri, upplýsingum, viðvörun eða hættu.

Vel gert! Þú lest þessi mikilvægu viðvörunarskilaboð.

Höfuð upp! Þessi viðvörun þarfnast athygli þinnar, en hún er ekki mjög mikilvæg.

Viðvörun! Best að athuga sjálfan þig, þú lítur ekki of vel út.

Ó snappið! Breyttu nokkrum hlutum og reyndu að senda inn aftur.

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

Viðvaranir sem hægt er að hafna

Byggðu á hvaða viðvörun sem er með því að bæta við valfrjálsum .alert-dismissibleog lokahnappi.

Krefst JavaScript viðvörunarviðbót

Til að viðvaranir sem hægt er að hafna að fullu virkar, verður þú að nota JavaScript viðbótina fyrir viðvaranir .

Viðvörun! Best að athuga sjálfan þig, þú lítur ekki of vel út.

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

Tryggðu rétta hegðun í öllum tækjum

Vertu viss um að nota <button>þáttinn með data-dismiss="alert"gagnaeigindinni.

Tenglar í tilkynningum

Notaðu .alert-linkgagnsemisflokkinn til að gefa fljótt samsvarandi litaða tengla í hvaða viðvörun sem er.

Vel gert! Þú lest þessi mikilvægu viðvörunarskilaboð .

Höfuð upp! Þessi viðvörun þarfnast athygli þinnar , en hún er ekki mjög mikilvæg.

Viðvörun! Best að athuga sjálfan þig, þú lítur ekki of vel út .

Ó snappið! Breyttu nokkrum hlutum og reyndu að senda inn aftur.

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

Gefðu uppfærð endurgjöf um framvindu verkflæðis eða aðgerða með einföldum en sveigjanlegum framvindustikum.

Samhæfni í gegnum vafra

Framvindustikur nota CSS3 umbreytingar og hreyfimyndir til að ná fram sumum áhrifum þeirra. Þessir eiginleikar eru ekki studdir í Internet Explorer 9 og eldri eða eldri útgáfum af Firefox. Opera 12 styður ekki hreyfimyndir.

Samhæfni við efnisöryggisstefnu (CSP).

Ef vefsíðan þín er með innihaldsöryggisstefnu (CSP) sem leyfir ekki style-src 'unsafe-inline', þá muntu ekki geta notað innbyggða styleeiginleika til að stilla breidd framvindustikunnar eins og sýnt er í dæmunum okkar hér að neðan. Aðrar aðferðir til að stilla breiddirnar sem eru samhæfar ströngum CSPs eru að nota smá sérsniðið JavaScript (sem setur element.style.width) eða nota sérsniðna CSS flokka.

Grunndæmi

Sjálfgefin framvindustika.

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

Með merkimiða

Fjarlægðu <span>með .sr-onlybekknum úr framvindustikunni til að sýna sýnilega prósentu.

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>

Til að tryggja að merkimiðatextinn haldist læsilegur jafnvel fyrir lágar prósentur skaltu íhuga að bæta a min-widthvið framvindustikuna.

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>

Samhengislegir valkostir

Framvindustikur nota suma af sömu hnappa- og viðvörunarflokkunum fyrir samræmdan stíl.

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

Röndótt

Notar halla til að búa til röndótt áhrif. Ekki fáanlegt í IE9 og neðar.

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

Hreyfimyndir

Bættu .activevið til .progress-bar-stripedað lífga rendurnar frá hægri til vinstri. Ekki fáanlegt í IE9 og neðar.

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

Staflað

Settu margar stangir í sama .progresstil að stafla þeim.

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

Ágripsstíll fyrir hluti til að smíða ýmsar gerðir af íhlutum (eins og blogg athugasemdir, tíst, osfrv.) sem eru með vinstri eða hægri stilltri mynd við hlið textaefnis.

Sjálfgefin miðill

Sjálfgefinn miðill sýnir miðlunarhlut (myndir, myndskeið, hljóð) vinstra eða hægra megin við efnisreit.

Fyrirsögn fjölmiðla

Cras sit amet nibh libero, in 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 í faucibus.

Fyrirsögn fjölmiðla

Cras sit amet nibh libero, in 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 í faucibus.

Hreiður fjölmiðlafyrirsögn

Cras sit amet nibh libero, in 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 í faucibus.

Fyrirsögn fjölmiðla

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

Fyrirsögn fjölmiðla

Cras sit amet nibh libero, in 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>

Flokkarnir .pull-leftog .pull-righteru einnig til og voru áður notaðir sem hluti af miðlunarhlutanum, en eru úreltir fyrir þá notkun frá og með v3.3.0. Þau eru um það bil jafngild .media-leftog .media-right, nema það .media-rightætti að vera sett á eftir .media-bodyí html.

Miðlun fjölmiðla

Hægt er að stilla myndunum eða öðrum miðlum að ofan, miðju eða neðst. Sjálfgefið er toppjafnað.

Efstu miðlar

Cras sit amet nibh libero, in 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 í faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Þegar þú ert samfélagslegur og stórkostlegur í fæðingu, verður þú að hlakka til.

Miðjamiðlar

Cras sit amet nibh libero, in 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 í faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Þegar þú ert samfélagslegur og stórkostlegur í fæðingu, verður þú að hlakka til.

Botnjafnaður miðill

Cras sit amet nibh libero, in 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 í faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Þegar þú ert samfélagslegur og stórkostlegur í fæðingu, verður þú að hlakka til.

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

Fjölmiðlalisti

Með smá auka álagningu geturðu notað fjölmiðla inni í listanum (gagnlegt fyrir athugasemdaþræði eða greinalista).

Fyrirsögn fjölmiðla

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

Hreiður fjölmiðlafyrirsögn
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Hreiður fjölmiðlafyrirsögn
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Hreiður fjölmiðlafyrirsögn
Cras sit amet nibh libero, in 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>

Listahópar eru sveigjanlegur og öflugur hluti til að sýna ekki aðeins einfalda lista yfir þætti, heldur flókna með sérsniðnu efni.

Grunndæmi

Einfaldasti listahópurinn er einfaldlega óraðaður listi með listaatriðum og réttum flokkum. Byggðu á því með valkostunum sem fylgja, eða eigin CSS eftir þörfum.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at 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>

Merki

Bættu merkishlutanum við hvaða listahóp sem er og hann verður sjálfkrafa staðsettur hægra megin.

14Cras justo odio
2Dapibus ac facilisis in
1Morbi leo risus

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

Tengd atriði

Tengdu atriði listahóps með því að nota akkerismerki í stað listaliða (það þýðir líka foreldri <div>í stað <ul>). Engin þörf fyrir einstaka foreldra í kringum hvern þátt.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at 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>

Hnappar atriði

Listahópsatriði geta verið hnappar í stað listaliða (það þýðir líka foreldri <div>í stað <ul>). Engin þörf fyrir einstaka foreldra í kringum hvern þátt. Ekki nota staðlaða .btnflokkana hér.

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

Óvirk atriði

Bættu .disabledvið til .list-group-itemað gráa það til að birtast óvirkt.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at 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>

Samhengisnámskeið

Notaðu samhengisflokka til að stilla listaatriði, sjálfgefin eða tengd. Inniheldur einnig .activeríki.

Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulum at eros

Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulum at 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>

Sérsniðið efni

Bættu við næstum hvaða HTML sem er innan, jafnvel fyrir tengda listahópa eins og þann hér að neðan.

Fyrirsögn listahóps

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

Fyrirsögn listahóps

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

Fyrirsögn listahóps

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>

Þó það sé ekki alltaf nauðsynlegt, þá þarftu stundum að setja DOM þinn í kassa. Fyrir þessar aðstæður, prófaðu spjaldið.

Grunndæmi

Sjálfgefið er allt sem .panelþarf til að beita grunnramma og fyllingu til að innihalda eitthvað efni.

Dæmi um grunnspjald

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

Panel með fyrirsögn

Bættu fyrirsagnaríláti auðveldlega við spjaldið þitt með .panel-heading. Þú getur líka sett hvaða sem er <h1>- <h6>með .panel-titleflokki til að bæta við fyrirfram stílaðri fyrirsögn. Hins vegar er leturstærðum <h1>- <h6>hnekkt af .panel-heading.

Til að tenglalitun sé rétt, vertu viss um að setja tengla í fyrirsagnir innan .panel-title.

Pallborðsfyrirsögn án titils

Innihald pallborðs

Titill pallborðs

Innihald pallborðs

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

Panel með fæti

Vefjið hnappa eða aukatexta inn í .panel-footer. Athugaðu að spjaldafótur erfa ekki liti og ramma þegar samhengisafbrigði eru notuð þar sem þeim er ekki ætlað að vera í forgrunni.

Innihald pallborðs

Panelfótur

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

Samhengislegir valkostir

Eins og aðrir íhlutir, gerðu spjaldið auðveldlega merkingarbærara fyrir tiltekið samhengi með því að bæta við einhverjum af samhengisflokkunum.

Titill pallborðs

Innihald pallborðs

Titill pallborðs

Innihald pallborðs

Titill pallborðs

Innihald pallborðs

Titill pallborðs

Innihald pallborðs

Titill pallborðs

Innihald pallborðs

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

Með borðum

Bættu við hvaða sem er án landamæra .tableinnan spjalds fyrir óaðfinnanlega hönnun. Ef það er .panel-body, bætum við auka ramma efst á töfluna til að aðgreina.

Panel fyrirsögn

Sumt sjálfgefið spjaldsefni hér. Nulla vitae elit libero, a 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.

#	Fyrsta nafn	Eftirnafn	Notendanafn
1	Mark	Ottó	@mdo
2	Jakob	Thornton	@feiti
3	Larry	fuglinn	@twitter

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

Ef það er engin meginmál spjaldsins færist íhluturinn frá spjaldhaus yfir í töflu án truflana.

Panel fyrirsögn

#	Fyrsta nafn	Eftirnafn	Notendanafn
1	Mark	Ottó	@mdo
2	Jakob	Thornton	@feiti
3	Larry	fuglinn	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Með listahópum

Fáðu auðveldlega listahópa í fullri breidd innan hvaða spjalds sem er.

Panel fyrirsögn

Sumt sjálfgefið spjaldsefni hér. Nulla vitae elit libero, a 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 in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at 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>

Leyfðu vöfrum að ákvarða stærð myndskeiða eða skyggnusýningar út frá breidd innihaldsblokkar þeirra með því að búa til innra hlutfall sem mun skalast á réttan hátt á hvaða tæki sem er.

Reglum er beitt beint á <iframe>, <embed>, <video>, og <object>þætti; Notaðu valfrjálst skýran afkvæmaflokk .embed-responsive-itemþegar þú vilt passa við stíl fyrir aðra eiginleika.

Pro-Tip! Þú þarft ekki að hafa með frameborder="0"í símum þínum <iframe>þar sem við hnekkum því fyrir þig.

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

Sjálfgefið vel

Notaðu brunninn sem einföld áhrif á frumefni til að gefa honum innfellda áhrif.

Sjáðu, ég er í brunni!

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

Valfrjálsir flokkar

Stýrifylling og ávöl horn með tveimur valfrjálsum breytingaflokkum.

Sko, ég er í stórum brunni!

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

Sko, ég er í litlum brunni!

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

Íhlutir

Glyphicons

Fáanlegir táknmyndir

Hvernig skal nota

Ekki blanda saman við aðra hluti

Aðeins til notkunar á tómum hlutum

Breyting á leturgerð táknsins

Aðgengileg tákn

Dæmi

Dropdowns

Dæmi

Jöfnun

Gæti þurft viðbótarstaðsetningu

Úrelt .pull-rightjöfnun

Hausar

Skiptari

Óvirkt valmyndaratriði

Hnappahópar

Verkfæri og sprettigluggar í hnappahópum krefjast sérstakrar stillingar

Gakktu úr skugga um rétt roleog gefðu merkimiða

Grunndæmi

Tækjastika fyrir hnappa

Stærð

Hreiður

Lóðrétt afbrigði

Réttlæddir hnappahópar

Meðhöndlun landamæra

IE8 og landamæri

Með <a>þáttum

Tenglar sem virka sem hnappar

Með <button>þáttum

Fellilistar fyrir hnappa

Viðbót háð

Fellilistar með einum hnappi

Dreifingarhnappar fellivalmyndir

Stærð

Dropup afbrigði

Inntakshópar

<input>Aðeins texta

Verkfæri og sprettigluggar í inntakshópum krefjast sérstakrar stillingar

Ekki blanda saman við aðra hluti

Bættu alltaf við merkimiðum

Grunndæmi

Stærð

Gátreitir og útvarpsviðbætur

Hnappaviðbætur

Hnappar með fellilista

Skiptir hnappar

Margir hnappar

Navs

Notkun navs fyrir flipaspjöld krefst JavaScript flipa viðbót

Gerðu siglingar sem notaðar eru sem siglingar aðgengilegar

Flipar

Pilla

Réttlæst

Safari og móttækileg réttlætanleg siglingaleið

Óvirkir tenglar

Tengslvirkni hefur ekki áhrif

Notar fellilista

Flipar með fellilista

Pilla með fellilista

Navbar

Sjálfgefin siglingastika

Yfirfullt efni

Krefst JavaScript viðbót

Breytir niðurbrotspunkti farsímasiglingastikunnar

Gerðu navbars aðgengilegar

Vörumerkisímynd

Eyðublöð

Fyrirvarar fyrir farsíma

Bættu alltaf við merkimiðum

Hnappar

Samhengssértæk notkun

Texti

Tenglar sem ekki eru nav

Jöfnun íhluta

Hægri stilla marga íhluti

Fast að ofan

Líkamsfóðrun nauðsynleg

Fastur í botn

Úrelt `.pull-right`jöfnun

Gakktu úr skugga um rétt `role`og gefðu merkimiða

Með `<a>`þáttum

Með `<button>`þáttum

`<input>`Aðeins texta