Íhlutir

Tugir endurnýtanlegra íhluta eru innbyggðir í Bootstrap til að veita leiðsögn, viðvaranir, popovers og margt fleira.

Hnappahópar

Notaðu hnappahópa til að tengja marga hnappa saman sem einn samsettan íhlut. Byggðu þau með röð af <a>eða <button>þáttum.

Bestu starfsvenjur

Við mælum með eftirfarandi leiðbeiningum um notkun hnappahópa og tækjastikur:

  • Notaðu alltaf sama þáttinn í einum hnappahópi, <a>eða <button>.
  • Ekki blanda saman hnöppum af mismunandi litum í sama hnappahópnum.
  • Notaðu tákn til viðbótar við eða í staðinn fyrir texta, en vertu viss um að innihalda alt og titiltexta þar sem við á.

Tengda hnappahópa með fellivalmyndum (sjá hér að neðan) ættu að vera kallaðir út sérstaklega og innihalda alltaf fellilista til að gefa til kynna fyrirhugaða hegðun.

Sjálfgefið dæmi

Svona lítur HTML út fyrir venjulegan hnappahóp sem byggður er með akkerismerkjahnöppum:

  1. <div class = "btn-group" >
  2. <button class = "btn" > 1 </button>
  3. <button class = "btn" > 2 </button>
  4. <button class = "btn" > 3 </button>
  5. </div>

Tækjastiku dæmi

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

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </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ð.

Fáðu javascriptið »

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.

Fellilistar fyrir hnappa

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.

Dæmi um álagningu

Líkt og hnappahópur notar merkingin okkar venjulega hnappamerkingu, en með handfylli af viðbótum til að betrumbæta stílinn og styðja jQuery viðbót Bootstrap fellivalmyndarinnar.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Aðgerð
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "fellivalmynd" >
  7. <!-- tenglar í fellivalmyndinni -->
  8. </ul>
  9. </div>

Virkar með öllum hnappastærðum

Hnappavalmyndir virka í hvaða stærð sem er. hnappastærðirnar þínar til .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

Yfirlit og dæmi

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.

Stærðir

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

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "fellivalmynd draga-hægri" >
  4. <!-- tenglar í fellivalmyndinni -->
  5. </ul>
  6. </div>

Dæmi um álagningu

Við víkkum út á venjulegum fellivalmyndum fyrir hnappa til að bjóða upp á aðra hnappaaðgerð sem virkar sem sérstakur fellivalmynd.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Aðgerð </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </hnappur>
  6. <ul class = "fellivalmynd" >
  7. <!-- tenglar í fellivalmyndinni -->
  8. </ul>
  9. </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.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Dropup </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </hnappur>
  6. <ul class = "fellivalmynd" >
  7. <!-- tenglar í fellivalmyndinni -->
  8. </ul>
  9. </div>

Fjölkónasíðuskipun

Hvenær á að nota

Ofur einfölduð og lítillega stíluð blaðsíðugerð innblásin af Rdio, frábært fyrir forrit 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.

Staðhæfir síðutenglar

Tenglar eru sérhannaðar og virka við ýmsar aðstæður með réttum flokki. .disabledfyrir ósmellanlega tengla og .activefyrir núverandi síðu.

Sveigjanleg röðun

Bættu við öðrum hvorum tveggja valkvæðra flokka til að breyta röðun blaðsíðutengla: .pagination-centeredog .pagination-right.

Dæmi

Sjálfgefinn blaðsíðuhluti er sveigjanlegur og virkar í mörgum afbrigðum.

Markup

Vafið inn í <div>, blaðsíðugerð er bara <ul>.

  1. <div class = "pagetion" >
  2. <ul>
  3. <li><a href = "#" > Fyrri </a></li>
  4. <li class = "virkur" >
  5. <a href = "#"> 1 </a> _
  6. </li>
  7. <li > <a href = "#"> 2 </a></li>
  8. <li > <a href = "#"> 3 </a></li>
  9. <li > <a href = "#"> 4 </a></li>
  10. <li><a href = "#" > Næst </a></li>
  11. </ul>
  12. </div>

Símboð Fyrir fljótlega fyrri og næstu tengla

Um símann

Símboðshlutinn er sett af tenglum fyrir einfaldar útfærslur á síðusniði með léttri álagningu og jafnvel léttari stílum. Það er frábært fyrir einfaldar síður eins og blogg eða tímarit.

Valfrjálst óvirkt ástand

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

Sjálfgefið dæmi

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

  1. <ul class = "pager" >
  2. <li>
  3. <a href = "#" > Fyrri </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Næst </a>
  7. </li>
  8. </ul>

Samræmdir tenglar

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

  1. <ul class = "pager" >
  2. <li class = "fyrri" >
  3. <a href = "#" > Eldri </a>
  4. </li>
  5. <li class = "næsta" >
  6. <a href = "#" > Nýrri → </a>
  7. </li>
  8. </ul>
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>

Um

Merki eru litlir, einfaldir hlutir til að sýna vísir eða talningu af einhverju tagi. Þeir eru almennt að finna í tölvupóstforritum eins og Mail.app eða í farsímaforritum fyrir tilkynningar.

Námskeið í boði

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

Bootstrap býður upp á léttan, sveigjanlegan íhlut sem kallast hetjueining til að sýna efni á síðunni þinni. Það virkar vel á markaðs- og efnisþungum síðum.

Markup

Vefjið efnið inn í divsvona:

  1. <div class = "hetja-eining" >
  2. <h1> Fyrirsögn </h1>
  3. <p> Merkiorð </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large" >
  6. Læra meira
  7. </a>
  8. </p>
  9. </div>

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

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

  1. <div class = "síðuhaus" >
  2. <h1> Dæmi fyrir síðuhaus </h1>
  3. </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ð

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.

Álagningin

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 :

  1. <ul class = "smámyndir" >
  2. <li class = "span3" >
  3. <a href = "#" class = "smámynd" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </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ð:

  1. <ul class = "smámyndir" >
  2. <li class = "span3" >
  3. <div class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Smámyndamerki </h5>
  6. <p> Yfirskrift smámynda hér... </p>
  7. </div>
  8. </li>
  9. ...
  10. </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.

Léttar sjálfgefnar stillingar

Endurskrifaður grunnflokkur

Með Bootstrap 2 höfum við einfaldað grunnflokkinn: .alertí stað .alert-message. Við höfum líka minnkað lágmarksálagningu sem krafist er - nei <p>er sjálfgefið áskilið, bara ytra<div> .

Stök viðvörunarskilaboð

Fyrir endingarbetri íhlut með minni kóða, höfum við fjarlægt aðgreiningarútlitið fyrir blokkaviðvaranir, skilaboð sem koma með meiri fyllingu og venjulega meiri texta. Bekkurinn hefur líka breyst í .alert-block.


Passar vel með javascript

Bootstrap kemur með frábært jQuery viðbót sem styður viðvörunarskilaboð, sem gerir það fljótt og auðvelt að vísa þeim frá.

Fáðu viðbótina »

Dæmi um viðvaranir

Settu skilaboðin þín og valfrjálst lokunartákn í div með einföldum flokki.

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

Höfuð upp! iOS tæki krefjast href="#"til að vísa frá tilkynningum. Vertu viss um að láta það fylgja með og gagnaeigininni fyrir tákn fyrir lokun akkeris. 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.

Útvíkkaðu auðveldlega staðlaða viðvörunarskilaboðin með tveimur valfrjálsum flokkum: .alert-blockfyrir meiri fyllingu og textastýringar og .alert-headingfyrir samsvarandi fyrirsögn.

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.

  1. <div class = "alert alert-block" >
  2. <a class = "close" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 class = "alert-heading" > Viðvörun! </h4>
  4. Best að athuga sjálfan þig, þú ert ekki...
  5. </div>

Samhengisvalkostir 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.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

Árangur

Vel gert! Þú lest þessi mikilvægu viðvörunarskilaboð.
  1. <div class = "alert alert-success" >
  2. ...
  3. </div>

Upplýsingar

Höfuð upp! Þessi viðvörun þarfnast athygli þinnar, en hún er ekki mjög mikilvæg.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

Dæmi og álagning

Basic

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

  1. <div class = "framfarir" >
  2. <div class = "bar"
  3. style = " breidd : 60 %; " ></div>
  4. </div>

Röndótt

Notar halla til að búa til röndótt áhrif (engin IE).

  1. <div class = "framvinda framfarir-röndótt" >
  2. <div class = "bar"
  3. style = " breidd : 20 %; " ></div>
  4. </div>

Hreyfimyndir

Tekur röndótta dæmið og lífgar það (engin IE).

  1. <div class = "framvinda framfarir-röndótt
  2. virkur" >
  3. <div class = "bar"
  4. style = " breidd : 40 %; " ></div>
  5. </div>

Valkostir og vafrastuðningur

Fleiri litir

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

Röndóttar stangir

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

Hegðun

Framvindustikur nota CSS3 umbreytingar, þannig að ef þú stillir breiddina á virkan hátt með javascript mun hún breyta stærðinni vel.

Ef þú notar .activebekkinn munu .progress-stripedframvindustikurnar þínar lífga rendurnar frá vinstri til hægri.

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.

Opera og IE styðja ekki hreyfimyndir eins og er.

Wells

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

Sjáðu, ég er í brunni!
  1. <div class = "jæja" >
  2. ...
  3. </div>

Loka táknið

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

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

iOS tæki þurfa href="#" fyrir smelliviðburði ef þú notar frekar akkeri.

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