Dæmi

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

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdown-menu">
  <li><a tabindex="-1" href="#">Aðgerð</a></li>
  <li><a tabindex="-1" href="#">Önnur aðgerð</a></li>
  <li><a tabindex="-1" href="#">Eitthvað annað hér</a></li>
  <li class="divider"></li>
  <li><a tabindex="-1" href="#">Aðskilinn hlekkur</a></li>
</ul>

Markup

Þegar þú horfir á fellivalmyndina, hér er nauðsynleg HTML. Þú þarft að vefja kveikjuna og fellivalmyndina innan .dropdown, eða annan þátt sem lýsir yfir position: relative;. Þá er bara að búa til valmyndina.

<div class="dropdown">
  <!-- Tengill eða hnappur til að skipta um fellivalmynd -->
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li><a tabindex="-1" href="#">Aðgerð</a></li>
    <li><a tabindex="-1" href="#">Önnur aðgerð</a></li>
    <li><a tabindex="-1" href="#">Eitthvað annað hér</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Aðskilinn hlekkur</a></li>
  </ul>
</div>

Valmöguleikar

Stilltu valmyndir til hægri og bættu við fleiri stigum af fellilistum.

Samræma valmyndirnar

Bættu .pull-rightvið .dropdown-menutil hægri stilltu fellivalmyndina.

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

Óvirkir valmyndarvalkostir

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

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdown-menu">
  <li><a tabindex="-1" href="#">Venjulegur tengill</a></li>
  <li class="disabled"><a tabindex="-1" href="#">Óvirkjaður hlekkur</a></li>
  <li><a tabindex="-1" href="#">Annar hlekkur</a></li>
</ul>

Undirvalmyndir á fellilistanum

Bættu við aukastigi af fellivalmyndum, sem birtast á sveimi eins og OS X, með nokkrum einföldum viðbótum. Bættu .dropdown-submenuvið hvaða lisem er í núverandi fellivalmynd fyrir sjálfvirka stíl.

<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  ...
  <li class="dropdown-submenu">
    <a tabindex="-1" href="#">Fleiri valkostir</a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>

Dæmi

Tveir grunnvalkostir ásamt tveimur sértækari afbrigðum.

Einn hnappahópur

Vefjið röð af hnöppum með .btninn .btn-group.

<div class="btn-group">
  <button class="btn">Vinstri</button>
  <button class="btn">Miðjan</button>
  <button class="btn">Hægri</button>
</div>

Margir hnappahópar

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

<div class="btn-toolbar">
  <div class="btn-group">
    ...
  </div>
</div>

Lóðréttir hnappahópar

Láttu hóp af hnöppum birtast lóðrétt staflað frekar en lárétt.

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

Gátbox og útvarpsbragð

Hnappahópar geta einnig virkað sem talstöðvar, þar sem aðeins einn hnappur getur verið virkur, eða gátreitir, þar sem einhver fjöldi hnappa getur verið virkur. Skoðaðu JavaScript skjölin fyrir það.

Fellilistar í hnappahópum

Höfuð upp! Hnappar með fellivalmyndum verða að vera hver fyrir sig umbúðir í sínum eigin .btn-groupinnan til að hægt sé .btn-toolbarað birta rétta.

Yfirlit og dæmi

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

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Aðgerð
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- tenglar í fellivalmyndinni -->
  </ul>
</div>

Virkar með öllum hnappastærðum

Hnappavalmyndir virka í hvaða stærð sem er: .btn-large, .btn-small, eða .btn-mini.

Krefst JavaScript

Fellivalmyndir fyrir hnappa krefjast þess að Bootstrap fellivalmyndin virki.

Í sumum tilfellum – eins og farsíma – munu fellivalmyndir ná út fyrir útsýnisgluggann. Þú þarft að leysa jöfnunina handvirkt eða með sérsniðnu JavaScript.

Dreifingarhnappar fellivalmyndir

Með því að byggja á hnappahópstílum og álagningu getum við auðveldlega búið til skiptan hnapp. Skiptunarhnappar eru með hefðbundinni aðgerð til vinstri og fellivalmynd til hægri með samhengistengingum.

<div class="btn-group">
  <button class="btn">Aðgerð</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </hnappur>
  <ul class="dropdown-menu">
    <!-- tenglar í fellivalmyndinni -->
  </ul>
</div>

Stærðir

Notaðu aukahnappaflokkana .btn-mini, .btn-small, eða .btn-largetil að stærð.

<div class="btn-group">
  <button class="btn btn-mini">Aðgerð</button>
  <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </hnappur>
  <ul class="dropdown-menu">
    <!-- tenglar í fellivalmyndinni -->
  </ul>
</div>

Fellivalmyndir

Einnig er hægt að skipta um fellivalmyndir frá botni og upp með því að bæta einum flokki við næsta foreldri .dropdown-menu. Það mun snúa stefnunni á .caretog breyta valmyndinni sjálfri til að færast frá botni og upp í stað þess að toppa niður.

<div class="btn-group dropup">
  <button class="btn">Dropup</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </hnappur>
  <ul class="dropdown-menu">
    <!-- tenglar í fellivalmyndinni -->
  </ul>
</div>

Létt sjálfgefið Sama álagning, mismunandi flokkar

Allir nav íhlutir hér - flipar, pillur og listar - deila sömu grunnmerkingu og stílum í gegnum .navbekkinn.

Grunnflipar

Taktu reglulega <ul>af hlekkjum og bættu við .nav-tabs:

<ul class="nav nav-tabs">
  <li class="active">
    <a href="#">Heima</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

Grunnpillur

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

<ul class="nav nav-pills">
  <li class="active">
    <a href="#">Heima</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

Óvirkt ástand

Fyrir hvaða nav hluti sem er (flipa, pillur eða listi), bættu við .disabledfyrir gráa tengla og engin sveimaáhrif . Tenglar verða áfram smellanlegir, nema þú fjarlægir hrefeiginleikann. Að öðrum kosti gætirðu innleitt sérsniðið JavaScript til að koma í veg fyrir þessa smelli.

<ul class="nav nav-pills">
  ...
  <li class="disabled"><a href="#">Heima</a></li>
  ...
</ul>

Jöfnun íhluta

Til að samræma nav-tengla skaltu nota .pull-lefteða .pull-rightgagnsemisflokkana. Báðir flokkar munu bæta við CSS floti í tilgreinda átt.

Staflanlegt

Þar sem flipar og töflur eru sjálfgefið láréttar, bætið bara við öðrum flokki, .nav-stacked, til að láta þær birtast lóðrétt staflað.

Staflaðir flipar

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

Staflaðar pillur

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

Dropdowns

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

Flipar með fellilista

<ul class="nav nav-tabs">
  <li class="dropdown">
    <a class="dropdown-toggle"
       data-toggle="dropdown"
       href="#">
        Fellilisti
        <b class="caret"></b>
      </a>
    <ul class="dropdown-menu">
      <!-- tenglar -->
    </ul>
  </li>
</ul>

Pilla með fellilista

<ul class="nav nav-pills">
  <li class="dropdown">
    <a class="dropdown-toggle"
       data-toggle="dropdown"
       href="#">
        Fellilisti
        <b class="caret"></b>
      </a>
    <ul class="dropdown-menu">
      <!-- tenglar -->
    </ul>
  </li>
</ul>

Nav listar

Einföld og auðveld leið til að búa til hópa af navtengla með valfrjálsum hausum. Þau eru best notuð í hliðarstikum eins og Finder í OS X.

Dæmi um siglingalista

Taktu lista yfir tengla og bættu við class="nav nav-list":

<ul class="nav nav-list">
  <li class="nav-header">Listahaus</li>
  <li class="active"><a href="#">Heima</a></li>
  <li><a href="#">Safn</a></li>
  ...
</ul>

Athugasemd Til að hreiðra innan siglingalista skaltu taka með class="nav nav-list"á hvaða hreiðra <ul>.

Lárétt skilrúm

Bættu við láréttum deili með því að búa til tóman listahlut með bekknum .divider, eins og svo:

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

Tabbable nav

Lífgaðu flipana þína lífi með einfaldri viðbót til að skipta á milli efnis í gegnum flipa. Bootstrap samþættir flipa sem hægt er að nota í fjórum stílum: efst (sjálfgefið), hægri, neðst og til vinstri.

Tabbable dæmi

Til að gera flipa flipahæfa skaltu búa til .tab-paneeinstakt auðkenni fyrir hvern flipa og pakka þeim inn í .tab-content.

<div class="tabbable"> <!-- Aðeins krafist fyrir vinstri/hægri flipa -->
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">1. hluti</a></li>
    <li><a href="#tab2" data-toggle="tab">2. hluti</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>Ég er í hluta 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Sæll, ég er í kafla 2.</p>
    </div>
  </div>
</div>

Farðu í flipa

Til að láta flipa hverfa inn skaltu bæta .fadevið hvern .tab-pane.

Krefst jQuery viðbót

Allir flipar sem hægt er að nota með flipa eru knúnir af léttu jQuery viðbótinni okkar. Lestu meira um hvernig á að lífga upp á flipa sem hægt er að nota á JavaScript skjalasíðunni .

Töffandi í hvaða átt sem er

Flipar neðst

Snúðu röð HTML og bættu við flokki til að setja flipa neðst.

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

Flipar til vinstri

Skiptu um bekkinn til að setja flipa til vinstri.

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

Flipar til hægri

Skiptu um bekkinn til að setja flipa til hægri.

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

Grunnleitarstika

Til að byrja, eru stýristikur kyrrstæðar (ekki fastar að ofan) og innihalda stuðning við verkefnisheiti og grunnleiðsögn. Settu einn hvar sem er innan .container, sem stillir breidd síðunnar þinnar og innihalds.

<div class="navbar">
  <div class="navbar-inner">
    <a class="brand" href="#">Titill</a>
    <ul class="nav">
      <li class="active"><a href="#">Heima</a></li>
      <li><a href="#">Tengill</a></li>
      <li><a href="#">Tengill</a></li>
    </ul>
  </div>
</div>

Navbar hluti

Merki

Einfaldur hlekkur til að sýna vörumerkið þitt eða verkefnisheiti þarf aðeins akkerismerki.

<a class="brand" href="#">Nafn verkefnis</a>

Nav tenglar

Auðvelt er að bæta við siglingaatriðum í gegnum óraðaða lista.

<ul class="nav">
  <li class="active">
    <a href="#">Heima</a>
  </li>
  <li><a href="#">Tengill</a></li>
  <li><a href="#">Tengill</a></li>
</ul>

Þú getur auðveldlega bætt skiptingum við nav tenglana þína með tómu listaatriði og einföldum flokki. Bættu þessu bara við á milli tengla:

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

Eyðublöð

Til að stilla og staðsetja eyðublað á réttan hátt í stýristikunni skaltu bæta við viðeigandi flokkum eins og sýnt er hér að neðan. Fyrir sjálfgefið eyðublað skaltu innihalda .navbar-formog annað hvort .pull-lefteða .pull-righttil að samræma það rétt.

<form class="navbar-form pull-left">
  <input type="text" class="span2">
  <button type="submit" class="btn">Senda</button>
</form>

Leitarform

Til að fá sérsniðnara leitarform skaltu bæta .navbar-searchvið formog .search-queryvið inntakið fyrir sérhæfða stíla í stýristikunni.

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

Jöfnun íhluta

Samræmdu nav tengla, leitarform eða texta, notaðu .pull-lefteða .pull-rightgagnsemisflokkana. Báðir flokkar munu bæta við CSS floti í tilgreinda átt.

Notar fellilista

Bættu fellivalmyndum og fellivalmyndum við nav með smá merkingu og JavaScript viðbótinni fyrir fellilistann .

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

Skoðaðu JavaScript fellilistann til að fá frekari álagningu og upplýsingar um fellivalmyndir fyrir símtöl.

Texti

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

Valfrjáls skjáafbrigði

Festu stýristikuna efst eða neðst á útsýnisglugganum með viðbótarflokki á ystu deild, .navbar.

Fast að ofan

Bættu við .navbar-fixed-topog mundu að gera grein fyrir falda svæðinu undir því með því að bæta að minnsta kosti 40px paddingvið <body>. Vertu viss um að bæta þessu við eftir kjarna Bootstrap CSS og fyrir valfrjálsa móttækilega CSS.

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

Fastur í botn

Bættu við .navbar-fixed-bottomí staðinn.

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

Statísk toppstika

Búðu til flakkastiku í fullri breidd sem flettir í burtu með síðunni með því að bæta við .navbar-static-top. Ólíkt .navbar-fixed-topbekknum þarftu ekki að breyta neinni fyllingu á body.

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

Móttækilegur navbar

Til að innleiða hrynjandi móttækilega siglingastiku skaltu pakka innihaldi stýrisstikunnar inn í div, .nav-collapse.collapse, og bæta við stýrihnappinum, .btn-navbar.

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">

      <!-- .btn-navbar er notað sem skipting fyrir hrunið efni navbar -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <!-- Vertu viss um að skilja vörumerkið eftir þarna úti ef þú vilt hafa það sýnt -->
      <a class="brand" href="#">Nafn verkefnis</a>

      <!-- Allt sem þú vilt falið í 940px eða minna, settu hér inni -->
      <div class="nav-collapse collapse">
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>

    </div>
  </div>
</div>

Öfugt tilbrigði

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

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

Dæmi

Eitt dæmi sýnt þar sem það gæti birst á mörgum síðum.

<ul class="breadcrumb">
  <li><a href="#">Heima</a> <span class="divider">/</span></li>
  <li><a href="#">Safn</a> <span class="divider">/</span></li>
  <li class="active">Gögn</li>
</ul>

Hefðbundin 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.

<div class="pagination">
  <ul>
    <li><a href="#">Fyrri</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="#">Næst</a></li>
  </ul>
</div>

Valmöguleikar

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.

<div class="pagination">
  <ul>
    <li class="disabled"><a href="#">«</a></li>
    <li class="active"><a href="#">1</a></li>
    ...
  </ul>
</div>

Þú getur valfrjálst skipt út virkum eða óvirkum akkerum fyrir span til að fjarlægja smellivirkni á meðan þú heldur fyrirhuguðum stílum.

<div class="pagination">
  <ul>
    <li class="disabled"><span>«</span></li>
    <li class="active"></span>1</span></li>
    ...
  </ul>
</div>

Stærðir

Langar þig í stærri eða minni blaðsíðu? Bættu við .pagination-large, .pagination-small, eða .pagination-minifyrir fleiri stærðir.

<div class="pagination pagination-large">
  <ul>
    ...
  </ul>
</div>
<div class="pagination">
  <ul>
    ...
  </ul>
</div>
<div class="pagination pagination-small">
  <ul>
    ...
  </ul>
</div>
<div class="pagination pagination-mini">
  <ul>
    ...
  </ul>
</div>

Jöfnun

Bættu við einum af tveimur valkvæðum flokkum til að breyta röðun blaðsíðutengla: .pagination-centeredog .pagination-right.

<div class="pagination pagination-centered">
  ...
</div>

<div class="pagination pagination-right">
  ...
</div>

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.

<ul class="pager">
  <li><a href="#">Fyrri</a></li>
  <li><a href="#">Næst</a></li>
</ul>

Samræmdir tenglar

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

<ul class="pager">
  <li class="previous">
    <a href="#">← Eldri</a>
  </li>
  <li class="next">
    <a href="#">Nýrari →</a>
  </li>
</ul>

Valfrjálst óvirkt ástand

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

<ul class="pager">
  <li class="previous disabled">
    <a href="#">← Eldri</a>
  </li>
  ...
</ul>

Merki

Merki

Auðvelt að fella saman

Til að auðvelda útfærslu munu merkimiðar og merki einfaldlega hrynja (í gegnum :emptyveljara CSS) þegar ekkert efni er til innan.

Hetjueining

Léttur, sveigjanlegur hluti til að sýna lykilefni á síðunni þinni. Það virkar vel á markaðs- og efnisþungum síðum.

<div class="hero-unit">
  <h1>Fyrirsögn</h1>
  <p>Tilorð</p>
  <p>
    <a class="btn btn-primary btn-large">
      Læra meira
    </a>
  </p>
</div>

Síðuhaus

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

<div class="page-header">
  <h1>Dæmi fyrir síðuhaus <small>Undirtexti fyrir haus</small></h1>
</div>

Sjálfgefnar smámyndir

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

Mjög sérhannaðar

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.

Af hverju að nota smámyndir

Smámyndir (áður .media-gridfram að v1.4) eru frábærar fyrir töflur af myndum eða myndböndum, myndaleitarniðurstöður, smásöluvörur, eignasöfn og margt fleira. Þeir geta verið tenglar eða kyrrstætt efni.

Einföld, sveigjanleg álagning

Smámyndamerking er einföld - ulmeð hvaða fjölda liþátta sem er er allt sem þarf. Það er líka frábær sveigjanlegt, gerir ráð fyrir hvers kyns efni með aðeins meiri álagningu til að pakka innihaldinu þínu.

Notar ristastærðir dálka

Að lokum notar smámyndahlutinn núverandi kerfisflokka – eins og .span2eða .span3– til að stjórna smámyndavíddum.

Markup

Eins og áður hefur komið fram er nauðsynleg álagning fyrir smámyndir létt og einföld. Hér er að líta á sjálfgefna uppsetningu fyrir tengdar myndir :

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

Fyrir sérsniðið HTML efni í smámyndum breytist merkingin lítillega. Til að leyfa efni á blokkarstigi hvar sem er, skiptum við út <a>fyrir <div>svipað:

<ul class="thumbnails">
  <li class="span4">
    <div class="thumbnail">
      <img data-src="holder.js/300x200" alt="">
      <h3>Smámyndamerki</h3>
      <p>Smámyndatexti...</p>
    </div>
  </li>
  ...
</ul>

Fleiri dæmi

Kannaðu alla valkosti þína með hinum ýmsu töfluflokkum sem þér standa til boða. Þú getur líka blandað saman mismunandi stærðum.

Sjálfgefin viðvörun

Vefjið hvaða texta sem er og valfrjáls hafnahnappur inn .alertfyrir grunnviðvörunarskilaboð.

<div class="alert">
  <button type="button" class="close" data-dismiss="alert">×</button>
  <strong>Viðvörun!</strong> Best að athuga sjálfan þig, þú lítur ekki of vel út.
</div>

Hunsa hnappa

Mobile Safari og Mobile Opera vafrar, auk data-dismiss="alert"eigindarinnar, krefjast href="#"þess að viðvörunum sé vísað frá þegar <a>merki er notað.

<a href="#" class="close" data-dismiss="alert">×</a>

Að öðrum kosti geturðu notað <button>þátt með gagnaeigindinni, sem við höfum valið að gera fyrir skjölin okkar. Þegar þú notar <button>verður þú að láta fylgja með type="button"eða eyðublöðin þín kunna ekki að skila inn.

<button type="button" class="close" data-dismiss="alert">×</button>

Hunsa tilkynningar með JavaScript

Notaðu viðvaranir jQuery viðbótina til að sleppa tilkynningum á fljótlegan og auðveldan hátt.

Valmöguleikar

Fyrir lengri skilaboð skaltu auka fyllinguna efst og neðst á viðvörunarumbúðirnar með því að bæta við .alert-block.

<div class="alert alert-block">
  <button type="button" class="close" data-dismiss="alert">×</button>
  <h4>Viðvörun!</h4>
  Best að athuga sjálfan þig, þú ert ekki...
</div>

Samhengislegir valkostir

Bættu við valkvæðum flokkum til að breyta merkingu viðvörunar.

Villa eða hætta

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

Árangur

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

Upplýsingar

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

Dæmi og álagning

Basic

Sjálfgefin framvindustika með lóðréttum halla.

<div class="framvindu">
  <div class="bar" style="width: 60%;"></div>
</div>

Röndótt

Notar halla til að búa til röndótt áhrif. Ekki fáanlegt í IE7-8.

<div class="progress progress-striped">
  <div class="bar" style="width: 20%;"></div>
</div>

Hreyfimyndir

Bættu .activevið til .progress-stripedað lífga rendurnar frá hægri til vinstri. Ekki í boði í öllum útgáfum af IE.

<div class="progress progress-striped active">
  <div class="bar" style="width: 40%;"></div>
</div>

Staflað

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

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

Valmöguleikar

Fleiri litir

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

<div class="progress progress-info">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger">
  <div class="bar" style="width: 80%"></div>
</div>

Röndóttar stangir

Svipað og í föstu litunum höfum við fjölbreyttar röndóttar framvindustikur.

<div class="progress progress-info progress-striped">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success progress-striped">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning progress-striped">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger progress-striped">
  <div class="bar" style="width: 80%"></div>
</div>

Stuðningur við vafra

Framvindustikur nota CSS3 halla, umbreytingar og hreyfimyndir til að ná fram öllum áhrifum þeirra. Þessir eiginleikar eru ekki studdir í IE7-9 eða eldri útgáfum af Firefox.

Fyrri útgáfur en Internet Explorer 10 og Opera 12 styðja ekki hreyfimyndir.

Á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álfgefið dæmi

Sjálfgefin miðill gerir kleift að láta miðlunarhlut (myndir, myndband, hljóð) fljóta til vinstri eða hægri 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.

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.

<div class="media">
  <a class="pull-left" href="#">
    <img class="media-object" data-src="holder.js/64x64">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Fjölmiðlafyrirsögn</h4>
    ...

    <!-- Hreiður miðlunarhlutur -->
    <div class="media">
      ...
    </div>
  </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).

<ul class="media-list">
  <li class="media">
    <a class="pull-left" href="#">
      <img class="media-object" data-src="holder.js/64x64">
    </a>
    <div class="media-body">
      <h4 class="media-heading">Fjölmiðlafyrirsögn</h4>
      ...

      <!-- Hreiður miðlunarhlutur -->
      <div class="media">
        ...
     </div>
    </div>
  </li>
</ul>

Wells

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

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

Valfrjálsir flokkar

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

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

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

Loka táknið

Notaðu almenna lokunartáknið til að hafna efni eins og aðferðum og viðvörunum.

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

iOS tæki krefjast href="#"fyrir smella atburði ef þú vilt frekar nota akkeri.

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

Hjálparnámskeið

Einföld, einbeitt námskeið fyrir litlar breytingar á skjá eða hegðun.

.draga-vinstri

Fleygðu frumefni til vinstri

class="pull-vinstri"

.pull-left {
  fljóta: vinstri;
}

.draga til hægri

Fljóta frumefni til hægri

class="draga-hægri"

.pull-hægri {
  fljóta: rétt;
}

.þaggað

Breyttu lit frumefnis í#999

class="þaggað"

.þaggað {
  litur: # 999;
}

.hreinsun

Hreinsaðu floatá hvaða þætti sem er

class="clearfix"

.clearfix {
  *aðdráttur: 1;
  &:áður,
  &:eftir {
    sýna: borð;
    innihald: "";
  }
  &:eftir {
    ljóst: bæði;
  }
}