Dæmi

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

<ul class = "dropdown-menu" role = "valmynd" 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 = "valmynd" 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 = "valmynd" aria-labelledby = "dLabel" >   
  ...
</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 = "valmynd" aria-labelledby = "dLabel" >   
  ...
  <li class = "dropdown-undirvalmynd" > 
    <a tabindex = "-1" href = "#" > Fleiri valkostir </a>  
    <ul class = "fellivalmynd" > 
      ...
    </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" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </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 = "fellivalmynd" > 
    <!-- 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 = "fellivalmynd" > 
    <!-- 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 = "fellivalmynd" > 
    <!-- 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 = "fellivalmynd" > 
    <!-- 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 = "virkur" > 
    <a href = "#" > Heim </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-pillur" > 
  <li class = "virkur" > 
    <a href = "#" > Heim </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-pillur" > 
  ...
  <li class = "disabled" ><a href = "#" > Heim </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-flipa nav-staflað" > 
  ...
</ul>

Staflaðar pillur

<ul class = "nav nav-pillur nav-staflað" > 
  ...
</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-switch" 
       data-toggle = "fellilisti"
       href = "#" >
        Fellilisti
        <b class = "caret" ></b> 
      </a>
    <ul class = "fellivalmynd" > 
      <!-- tenglar -->
    </ul>
  </li>
</ul>

Pilla með fellilista

<ul class = "nav nav-pillur" > 
  <li class = "dropdown" > 
    <a class = "dropdown-switch" 
       data-toggle = "fellilisti"
       href = "#" >
        Fellilisti
        <b class = "caret" ></b> 
      </a>
    <ul class = "fellivalmynd" > 
      <!-- 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-listi" > 
  <li class = "nav-header" > Listahaus </li> 
  <li class = "active" ><a href = "#" > Heim </a></li>  
  <li><a href = "#" > Bókasafn </a></li> 
  ...
</ul>

Athugið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-listi" > 
  ...
  <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.

Ég er í kafla 1.

Hæ, ég er í kafla 2.

Hvað með stelpuna, þetta er kafli 3.

<div class = "tabbable" > <!-- Aðeins krafist fyrir vinstri/hægri flipa -->  
  <ul class = "nav nav-tabs" > 
    <li class = "virkur" ><a href =   "#tab1" data-toggle = "tab" > Hluti 1 </a></li> 
    <li><a href =  "#tab2" data-toggle = "tab" > Hluti 2 </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> Hæ, é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 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.

Ég er í A-deild.

Hæ, ég er í B-deild.

Hvað með stelpuna, þetta er hluti C.

<div class = "tabable 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.

Ég er í A-deild.

Hæ, ég er í B-deild.

Hvað með stelpuna, þetta er hluti C.

<div class = "tabable 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.

Ég er í A-deild.

Hæ, ég er í B-deild.

Hvað með stelpuna, þetta er hluti C.

<div class = "tabable 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 = "#" > Heim </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 = "#" > Heiti verkefnis </a>

Nav tenglar

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

<ul class = "nav" > 
  <li class = "virkur" > 
    <a href = "#" > Heim </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 = "deilir-lóðrétt" ></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-vinstri" > 
  <inntakstegund = "texti" 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-vinstri" > 
  <input type = "text" class = "search-query" staðgengill = "Leita" >   
</form>

Jöfnun íhluta

Samræmdu nav tengla, leitarform eða texta, notaðu .pull-lefteða.pull-right gagnsemisflokkana. 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-toggle" >   
      Reikningur
      <b class = "caret" ></b> 
    </a>
    <ul class = "fellivalmynd" > 
      ...
    </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 = "gámur" > 
 
      <!-- .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 = "#" > Heiti 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>

Höfuð upp! Móttækilega siglingastikan krefst samdráttarviðbótarinnar og móttækilegrar Bootstrap CSS skráar .

Ö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 = "brauðmola" > 
  <li><a href = "#" > Heim </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Bókasafn </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 = "pagetion" > 
  <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 = "#" > 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 = "pagetion" > 
  <ul>
    <li class = "disabled" ><a href = "#" > Fyrri </a></li>  
    <li class = "virkur" ><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 = "pagetion" > 
  <ul>
    <li class = "disabled" ><span> Fyrri </span></li> 
    <li class = "virkur" ><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 = "pagetion pagination-large" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagetion" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagetion pagination-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagetion 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 = "pagetion pagetion-centered" > 
  ...
</div>

<div class = "pagetion pagetion-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 = "fyrri" > 
    <a href = "#" > ← Eldri </a> 
  </li>
  <li class = "næsta" > 
    <a href = "#" > Nýrri → </a> 
  </li>
</ul>

Valfrjálst óvirkt ástand

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

<ul class = "pager" > 
  <li class = "fyrri óvirkur" > 
    <a href = "#" > ← Eldri </a> 
  </li>
  ...
</ul>

Merki

Merki	Markup
Sjálfgefið	`<span class="label">Default</span>`
Árangur	`<span class="label label-success">Success</span>`
Viðvörun	`<span class="label label-warning">Warning</span>`
Mikilvægt	`<span class="label label-important">Important</span>`
Upplýsingar	`<span class="label label-info">Info</span>`
Öfugt	`<span class="label label-inverse">Inverse</span>`

Merki

Nafn	Dæmi	Markup
Sjálfgefið	1	`<span class="badge">1</span>`
Árangur	2	`<span class="badge badge-success">2</span>`
Viðvörun	4	`<span class="badge badge-warning">4</span>`
Mikilvægt	6	`<span class="badge badge-important">6</span>`
Upplýsingar	8	`<span class="badge badge-info">8</span>`
Öfugt	10	`<span class="badge badge-inverse">10</span>`

Hetjueining

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

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 = "hetja-eining" > 
  <h1> Fyrirsögn </h1>
  <p> Merkiorð </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 = "síðuhaus" > 
  <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.

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.

Aðgerð Aðgerð
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.

Aðgerð Aðgerð
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.

Aðgerð Aðgerð

Af hverju að nota smámyndir

Smámyndir (áður.media-grid fram 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 sem erli þá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 = "smámyndir" > 
  <li class = "span4" > 
    <a href = "#" class = "smámynd" >  
      <img src = "https://placehold.it/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 = "smámyndir" > 
  <li class = "span4" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/300x200" alt = "" >  
      <h3> Smámyndamerki </h3>
      <p> Yfirskrift smámynda... </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ð.

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

<div class = "viðvörun" > 
  <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.

Viðvörun!

Best að athuga sjálfan þig, þú lítur ekki of vel út. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

<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

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

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

Árangur

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

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

Upplýsingar

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

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

Dæmi og álagning

Basic

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

<div class = "framfarir" > 
  <div class = "bar" style = " breidd : 60 %; " ></div>   
</div>

Röndótt

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

<div class = "framvinda framfarir-röndótt" > 
  <div class = "bar" style = " breidd : 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 = " breidd : 40 %; " ></div>   
</div>

Staflað

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

<div class = "framfarir" > 
  <div class = "bar bar-success" style = " breidd : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " breidd : 20 %; " ></div>   
  <div class = "bar bar-danger" style = " breidd : 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 = "framfaraupplýsingar" > 
  <div class = "bar" style = " breidd : 20 % " ></div>   
</div>
<div class = "framfarir-árangur" > 
  <div class = "bar" style = " breidd : 40 % " ></div>   
</div>
<div class = "framvindu-viðvörun" > 
  <div class = "bar" style = " breidd : 60 % " ></div>   
</div>
<div class = "framfarir framfarir-hætta" > 
  <div class = "bar" style = " breidd : 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 = " breidd : 20 % " ></div>   
</div>
<div class = "framfarir framfarir-árangur framfarir-röndóttar" > 
  <div class = "bar" style = " breidd : 40 % " ></div>   
</div>
<div class = "framvinda framvindu-viðvörun framfara-röndótt" > 
  <div class = "bar" style = " breidd : 60 % " ></div>   
</div>
<div class = "framfarir framfarir-hætta framfarir-röndóttar" > 
  <div class = "bar" style = " breidd : 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

<div class = "media" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" src = "https://placehold.it/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > Mið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).

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

<ul class = "media-list" > 
  <li class = "media" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" src = "https://placehold.it/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > Mið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.

Sjáðu, ég er í brunni!

<div class = "jæja" > 
  ...
</div>

Valfrjálsir flokkar

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

Sjáðu, ég er í brunni!

<div class = "vel vel stór" > 
  ...
</div>

Sjáðu, ég er í brunni!

<div class = "vel vel-lítill" > 
  ...
</div>

Loka táknið

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

<button class = "loka" > × </hnappur>

iOS tæki þurfa href="#" fyrir smelliviðburð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 = "draga-vinstri"

. draga - vinstri {
  fljóta : vinstri ;
}

.draga til hægri

Fljóta frumefni til hægri

class = "draga til hægri"

. draga - 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 ;
  }
}

Fellivalmyndir

Dæmi

Markup

Valmöguleikar

Samræma valmyndirnar

Undirvalmyndir á fellilistanum

Hnappahópar

Dæmi

Einn hnappahópur

Margir hnappahópar

Lóðréttir hnappahópar

Gátbox og útvarpsbragð

Fellilistar í hnappahópum

Hnappvalmyndir

Yfirlit og dæmi

Virkar með öllum hnappastærðum

Krefst JavaScript

Dreifingarhnappar fellivalmyndir

Stærðir

Fellivalmyndir

Nav: flipar, pillur og listar

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

Grunnflipar

Grunnpillur

Óvirkt ástand

Jöfnun íhluta

Staflanlegt

Staflaðir flipar

Staflaðar pillur

Dropdowns

Flipar með fellilista

Pilla með fellilista

Nav listar

Dæmi um siglingalista

Lárétt skilrúm

Tabbable nav

Tabbable dæmi

Farðu í flipa

Krefst jQuery viðbót

Töffandi í hvaða átt sem er

Flipar neðst

Flipar til vinstri

Flipar til hægri

Navbar

Grunnleitarstika

Navbar hluti

Merki

Nav tenglar

Eyðublöð

Leitarform

Jöfnun íhluta

Notar fellilista

Texti

Valfrjáls skjáafbrigði

Fast að ofan

Fastur í botn

Statísk toppstika

Móttækilegur navbar

Öfugt tilbrigði

Brauðmylsna

Dæmi

Síðuskipting Tveir valkostir til að fletta í gegnum efni

Hefðbundin blaðsíðugerð

Valmöguleikar

Fötluð og virk ríki

Stærðir

Jöfnun

Símboðari

Sjálfgefið dæmi

Samræmdir tenglar

Valfrjálst óvirkt ástand

Merki og merki

Merki

Merki

Leturfræðilegir hlutir

Hetjueining

Halló heimur!

Síðuhaus

Dæmi síðuhaus Undirtexti fyrir haus

Smámyndir Grind af myndum, myndböndum, texta og fleira