Tugir endurnýtanlegra íhluta eru innbyggðir í Bootstrap til að veita leiðsögn, viðvaranir, popovers og margt fleira.
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.
Tenglar eru sérhannaðar og virka við ýmsar aðstæður með réttum flokki. .disabled
fyrir ósmellanlega tengla og .active
fyrir núverandi síðu.
Bættu við öðrum hvorum tveggja valkvæðra flokka til að breyta röðun blaðsíðutengla: .pagination-centered
og .pagination-right
.
Sjálfgefinn blaðsíðuhluti er sveigjanlegur og virkar í mörgum afbrigðum.
Vafið inn í <div>
, blaðsíðugerð er bara <ul>
.
- <div class = "pagetion" >
- <ul>
- <li><a href = "#" > Fyrri </a></li>
- <li class = "virkur" >
- <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>
Símboðshlutinn er sett af tenglum fyrir einfaldar útfærslur á síðusniði með léttri merkingu og jafnvel léttari stílum. Það er frábært fyrir einfaldar síður eins og blogg eða tímarit.
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>
Merki | Markup |
---|---|
Sjálfgefið | <span class="label">Default</span> |
Nýtt | <span class="label label-success">New</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> |
Sjálfgefið er að smámyndir Bootstrap séu hannaðar til að sýna tengdar myndir með lágmarks nauðsynlegri merkingu.
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á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.
Smámyndamerking er einföld - ul
með 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.
Að lokum notar smámyndahlutinn núverandi kerfisflokka – eins og .span2
eða .span3
– til að stjórna smámyndavíddum.
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 = "span3" >
- <a href = "#" class = "smámynd" >
- <img src = "https://placehold.it/260x180" 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 = "span3" >
- <div class = "thumbnail" >
- <img src = "https://placehold.it/260x180" alt = "" >
- <h5> Smámyndamerki </h5>
- <p> Yfirskrift smámynda hér... </p>
- </div>
- </li>
- ...
- </ul>
Með Bootstrap 2 höfum við einfaldað grunnflokkinn: .alert
í stað .alert-message
. Við höfum líka dregið úr lágmarksálagningu sem krafist er - nei <p>
er sjálfgefið áskilið, bara ytra <div>
.
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
.
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á.
Settu skilaboðin þín og valfrjálst lokunartákn í div með einföldum flokki.
- <div class = "viðvörun" >
- <a class = "close" > × </a>
- <strong> Viðvörun! </strong> Best að athuga sjálfan þig, þú lítur ekki of vel út.
- </div>
Útvíkkaðu auðveldlega staðlaða viðvörunarskilaboðin með tveimur valfrjálsum flokkum: .alert-block
fyrir meiri fyllingu og textastýringar og .alert-heading
fyrir samsvarandi fyrirsögn.
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" >
- <a class = "close" > × </a>
- <h4 class = "alert-heading" > Viðvörun! </h4>
- Best að athuga sjálfan þig, þú ert ekki...
- </div>
- <div class = "alert alert-error" >
- ...
- </div>
- <div class = "alert alert-success" >
- ...
- </div>
- <div class = "alert alert-info" >
- ...
- </div>
Sjálfgefin framvindustika með lóðréttum halla.
- <div class = "framfarir" >
- <div class = "bar"
- style = " breidd : 60 %; " ></div>
- </div>
Notar halla til að búa til röndótt áhrif.
- <div class = "framvinduupplýsingar
- framfarabröndótt" >
- <div class = "bar"
- style = " breidd : 20 %; " ></div>
- </div>
Tekur röndótta dæmið og lífgar það.
- <div class = "framfarir framfarir-hætta
- framfarsröndótt virk" >
- <div class = "bar"
- style = " breidd : 40 %; " ></div>
- </div>
Framvindustikur nota sum af sömu flokksnöfnum og hnappar og viðvaranir fyrir svipaða stíl.
.progress-info
.progress-success
.progress-danger
Að öðrum kosti geturðu sérsniðið MÆRI skrárnar og rúllað þínum eigin litum og stærðum.
Framvindustikur nota CSS3 umbreytingar, þannig að ef þú stillir breiddina á virkan hátt með javascript mun hún breyta stærðinni vel.
Ef þú notar .active
bekkinn munu .progress-striped
framvindustikurnar þínar lífga rendurnar frá vinstri til hægri.
Framvindustikur nota CSS3 halla, umbreytingar og hreyfimyndir til að ná fram öllum áhrifum þeirra. Þessir eiginleikar eru ekki studdir í IE7-8 eða eldri útgáfum af Firefox.
Opera styður ekki hreyfimyndir eins og er.
Notaðu brunninn sem einföld áhrif á frumefni til að gefa honum innfellda áhrif.
- <div class = "jæja" >
- ...
- </div>
Notaðu almenna lokunartáknið til að hafna efni eins og aðferðum og viðvörunum.
- <a class = "loka" > × </a>