Alþjóðlegar CSS stillingar, grundvallar HTML þættir stílaðir og endurbættir með stækkanlegum flokkum og háþróað ristkerfi.
Yfirlit
Kynntu þér lykilatriðin í innviðum Bootstrap, þar á meðal nálgun okkar að betri, hraðari og sterkari vefþróun.
HTML5 doctype
Bootstrap notar ákveðna HTML þætti og CSS eiginleika sem krefjast notkunar á HTML5 doctype. Láttu það fylgja með í upphafi allra verkefna þinna.
Farsími fyrst
Með Bootstrap 2 bættum við við valkvæðum farsímavænum stílum fyrir lykilþætti rammans. Með Bootstrap 3 höfum við endurskrifað verkefnið til að vera farsímavænt frá upphafi. Í stað þess að bæta við valfrjálsum farsímastílum eru þeir bakaðir beint inn í kjarnann. Reyndar er Bootstrap fyrst fyrir farsíma . Mobile first stíll er að finna um allt bókasafnið í stað þess að vera í aðskildum skrám.
Til að tryggja rétta birtingu og snertiaðdrátt skaltu bæta metamerkinu útsýnisglugga við <head>.
Þú getur slökkt á aðdráttargetu í fartækjum með því að bæta user-scalable=novið metamerkið útsýnisglugga. Þetta gerir aðdrætti óvirkt, sem þýðir að notendur geta aðeins flett, og leiðir til þess að vefsvæðið þitt líður aðeins meira eins og innfædd forrit. Á heildina litið mælum við ekki með þessu á hverri síðu, svo farðu varlega!
Leturfræði og tenglar
Bootstrap setur helstu alþjóðlega skjámynd, leturfræði og tenglastíla. Nánar tiltekið, við:
Sett background-color: #fff;ábody
Notaðu eiginleikana @font-family-base, @font-size-base, og @line-height-basesem leturfræðigrunn okkar
Stilltu alþjóðlega tengilitinn í gegnum @link-colorog notaðu aðeins undirstrikun tengla á:hover
Bootstrap krefst innihaldsefnis til að vefja innihald vefsvæðisins og hýsa netkerfið okkar. Þú getur valið einn af tveimur ílátum til að nota í verkefnum þínum. Athugaðu að vegna paddingog fleira er hvorugt ílátið varpanlegt.
Notað .containerfyrir móttækilegan ílát með fastri breidd.
Notaðu .container-fluidfyrir ílát í fullri breidd, sem spannar alla breidd útsýnisgáttarinnar.
Gridkerfi eru notuð til að búa til blaðsíðuútlit í gegnum röð af línum og dálkum sem hýsa efnið þitt. Svona virkar Bootstrap grid kerfið:
Raðir verða að vera í .container(fastri breidd) eða .container-fluid(fullri breidd) fyrir rétta röðun og fyllingu.
Notaðu raðir til að búa til lárétta hópa af dálkum.
Efni ætti að vera sett innan dálka og aðeins dálkar mega vera strax börn raða.
Forskilgreindir töfluflokkar eins .rowog og .col-xs-4eru fáanlegir til að gera töfluuppsetningar fljótt. Einnig er hægt að nota færri blöndun fyrir merkingarlegri uppsetningu.
Dálkar búa til þakrennur (bil á milli innihalds dálka) í gegnum padding. Sú fylling er á móti í röðum fyrir fyrsta og síðasta dálkinn með neikvæðri spássíu á .rows.
Neikvæð framlegð er ástæðan fyrir því að dæmin hér að neðan eru útdregin. Það er þannig að efni innan ristardálka er raðað upp með efni sem ekki er rist.
Grid dálkar eru búnir til með því að tilgreina fjölda tólf tiltækra dálka sem þú vilt spanna. Til dæmis myndu þrír jafnir dálkar nota þrjá .col-xs-4.
Ef fleiri en 12 dálkar eru settir í einni röð mun hver hópur aukadálka, sem ein eining, vefjast inn á nýja línu.
Taflaflokkar eiga við um tæki með skjábreidd stærri en eða jafna brotpunktastærðunum og hnekkja taflaflokkum sem miða að smærri tækjum. Því td að nota hvaða .col-md-*flokk sem er á frumefni mun ekki aðeins hafa áhrif á stíl hans á meðalstórum tækjum heldur einnig á stórum tækjum ef .col-lg-*flokkur er ekki til staðar.
Skoðaðu dæmin til að beita þessum meginreglum á kóðann þinn.
Fyrirspurnir fjölmiðla
Við notum eftirfarandi fjölmiðlafyrirspurnir í Less skránum okkar til að búa til helstu brotpunkta í kerfiskerfinu okkar.
Við útvíkkum stundum þessar fjölmiðlafyrirspurnir til að innihalda til max-widthað takmarka CSS við þrengra sett af tækjum.
Grid valkostir
Sjáðu hvernig þættir Bootstrap-netkerfisins virka á mörgum tækjum með handhægri töflu.
Extra lítil tæki Símar (<768px)
Lítil tæki Spjaldtölvur (≥768px)
Meðalstór tæki skjáborð (≥992px)
Stór tæki skjáborð (≥1200px)
Grid hegðun
Lárétt allan tímann
Dregið saman til að byrja, lárétt fyrir ofan brotpunkta
Gámabreidd
Engin (sjálfvirk)
750px
970px
1170px
Bekkjarforskeyti
.col-xs-
.col-sm-
.col-md-
.col-lg-
# af dálkum
12
Dálkbreidd
Sjálfvirk
~62px
~81px
~97px
Rennur breidd
30px (15px á hvorri hlið dálks)
Hreiðurhæfur
Já
Jöfnun
Já
Dálka röðun
Já
Dæmi: Staflað til lárétts
Með því að nota eitt sett af .col-md-*töfluflokkum geturðu búið til grunnnetkerfi sem byrjar staflað á farsímum og spjaldtölvum (extra lítið til lítið svið) áður en það verður lárétt á borðtölvum (miðlungs) tækjum. Settu ristardálka í hvaða .row.
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
Dæmi: Vökvaílát
Breyttu hvaða rist sem er með fastri breidd í skipulag í fullri breidd með því að breyta ystu töflunni þinni .containerí .container-fluid.
Dæmi: Farsími og skjáborð
Viltu ekki að dálkarnir þínir staflast einfaldlega í smærri tæki? Notaðu aukalega litla og meðalstóra tækjaflokka með því að bæta .col-xs-*.col-md-*við dálkana þína. Sjá dæmið hér að neðan til að fá betri hugmynd um hvernig þetta allt virkar.
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
Dæmi: Farsími, spjaldtölva, borðtölva
Byggðu á fyrra dæmi með því að búa til enn kraftmeiri og öflugri skipulag með spjaldtölvuflokkum .col-sm-*.
.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
Dæmi: Dálk umbúðir
Ef fleiri en 12 dálkar eru settir í einni röð mun hver hópur aukadálka, sem ein eining, vefjast inn á nýja línu.
.col-xs-9
.col-xs-4
Þar sem 9 + 4 = 13 > 12, verður þessari 4 dálka breiðu div vafinn inn á nýja línu sem ein samfelld eining.
.col-xs-6
Síðari dálkar halda áfram eftir nýju línunni.
Móttækilegur dálkur endurstilltur
Með fjórum stigum af ristum sem eru tiltækar muntu örugglega lenda í vandamálum þar sem dálkarnir þínir hreinsast ekki alveg rétt á ákveðnum tímapunktum þar sem einn er hærri en hinn. Til að laga það skaltu nota blöndu af a .clearfixog móttækilegum tólum okkar .
.col-xs-6 .col-sm-3 Breyttu
stærð útsýnisgluggans eða skoðaðu það í símanum þínum sem dæmi.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
Auk dálkahreinsunar á móttækilegum brotastöðum gætirðu þurft að endurstilla frávik, ýta eða draga . Sjáðu þetta í aðgerð í töfludæminu .
Fjarlægðu þakrennur
Fjarlægðu þakrennurnar úr röð og það eru dálkar með .row-no-guttersbekknum.
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
Á móti dálkum
Færðu dálka til hægri með því að nota .col-md-offset-*flokka. Þessir flokkar auka vinstri spássíu dálks með *dálkum. Til dæmis .col-md-offset-4færist .col-md-4yfir fjóra dálka.
.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
Þú getur líka hnekið frávikum frá lægri töfluþrepum með .col-*-offset-0flokkum.
Hreiður súlur
Til að hreiðra efnið þitt með sjálfgefna hnitanetinu skaltu bæta við nýjum .rowog setti .col-sm-*dálka innan núverandi .col-sm-*dálks. Hreiður línur ættu að innihalda sett af dálkum sem eru allt að 12 eða færri (það er ekki krafist að þú notir alla 12 tiltæka dálka).
Stig 1: .col-sm-9
Stig 2: .col-xs-8 .col-sm-6
Stig 2: .col-xs-4 .col-sm-6
Dálka röðun
Breyttu auðveldlega röðinni á innbyggðu ristardálkunum okkar með .col-md-push-*og .col-md-pull-*breytiflokkum.
.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
Minni blöndun og breytur
Til viðbótar við forbyggða grid flokka fyrir hröð skipulag, inniheldur Bootstrap færri breytur og blöndun til að búa til þína eigin einföldu merkingarlegu útliti fljótt.
Breytur
Breytur ákvarða fjölda dálka, breidd þakrennunnar og miðilsfyrirspurnarpunktinn þar sem fljótandi dálkar hefjast. Við notum þetta til að búa til fyrirfram skilgreinda töfluflokka sem eru skjalfestir hér að ofan, sem og fyrir sérsniðnu blöndurnar sem taldar eru upp hér að neðan.
Mixins
Mixin eru notuð í tengslum við grid breytur til að búa til merkingarlega CSS fyrir einstaka rist dálka.
Dæmi um notkun
Þú getur breytt breytunum í eigin sérsniðin gildi, eða bara notað mixin með sjálfgefnum gildum. Hér er dæmi um að nota sjálfgefnar stillingar til að búa til tveggja dálka skipulag með bili á milli.
Leturfræði
Fyrirsagnir
Allar HTML fyrirsagnir, <h1>í gegnum <h6>, eru fáanlegar. .h1gegnum .h6flokkar eru einnig fáanlegir, fyrir þegar þú vilt passa við leturgerð fyrirsagnar en vilt samt að textinn þinn sé birtur í línu.
h1. Bootstrap fyrirsögn
Hálfletur 36px
h2. Bootstrap fyrirsögn
Hálffjört 30px
h3. Bootstrap fyrirsögn
Hálffjört 24px
h4. Bootstrap fyrirsögn
Hálfletur 18px
h5. Bootstrap fyrirsögn
Hálfletur 14px
h6. Bootstrap fyrirsögn
Hálfletur 12px
Búðu til léttari aukatexta í hvaða fyrirsögn sem er með almennu <small>merki eða .smallbekknum.
h1. Bootstrap fyrirsögn Aukatexti
h2. Bootstrap fyrirsögn Aukatexti
h3. Bootstrap fyrirsögn Aukatexti
h4. Bootstrap fyrirsögn Aukatexti
h5. Bootstrap fyrirsögn Aukatexti
h6. Bootstrap fyrirsögn Aukatexti
Líkamsafrit
Alheims sjálfgefið sjálfgefið font-sizeer 14pxline-height , með 1.428 . Þetta á við um <body>og allar málsgreinar. Að auki <p>fá (málsgreinar) neðri spássíu sem nemur helmingi reiknaðrar línuhæðar (10px sjálfgefið).
Nullam quis risus eget urna mollis ornare vel eu leo. Þegar þú ert samfélagslegur og stórkostlegur í fæðingu, verður þú að hlakka til. Nullam id dolor id nibh ultricies vehicula.
Þegar þú ert samfélagslegur og stórkostlegur í fæðingu, verður þú að hlakka til. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Afrit af blýlíkam
Láttu málsgrein skera sig úr með því að bæta við .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor uppboðsmaður. Duis mollis, est non commodo luctus.
Byggt með minna
Leturfræðikvarðinn byggir á tveimur Minni breytum í variables.less : @font-size-baseog @line-height-base. Sú fyrri er grunnleturstærðin sem notuð er í gegn og sú seinni er grunnlínuhæðin. Við notum þessar breytur og einfalda stærðfræði til að búa til spássíur, fyllingar og línuhæðir af öllum gerðum okkar og fleira. Sérsníddu þá og Bootstrap aðlagar sig.
Innbyggðir textaþættir
Merktur texti
<mark>Notaðu merkið til að auðkenna run af texta vegna mikilvægis hans í öðru samhengi .
Þú getur notað merkið til aðhápunkturtexti.
Texti eytt
<del>Notaðu merkið til að gefa til kynna textablokkir sem hafa verið eytt .
Þessari textalínu er ætlað að meðhöndla sem eytt texta.
Yfirstrikaður texti
<s>Notaðu merkið til að gefa til kynna textablokkir sem eiga ekki lengur við .
Þessi textalína er ætlað að vera meðhöndluð sem ekki lengur nákvæm.
Texti settur inn
<ins>Notaðu merkið til að gefa til kynna viðbætur við skjalið .
Þessari textalínu er ætlað að meðhöndla sem viðbót við skjalið.
Undirstrikaður texti
Notaðu <u>merkið til að undirstrika texta.
Þessi textalína mun birtast eins og undirstrikuð
Notaðu sjálfgefna áherslumerki HTML með léttum stílum.
Lítill texti
Til að draga úr áherslu á innbyggða texta eða blokkir af texta, notaðu <small>merkið til að stilla texta á 85% stærð foreldris. Fyrirsagnareiningar fá sínar eigin font-sizefyrir hreiður <small>einingar.
Þú getur að öðrum kosti notað innbyggðan þátt með .smallí staðinn fyrir hvaða <small>.
Þessari textalínu er ætlað að meðhöndla sem smáa letur.
Djarft
Til að leggja áherslu á textabrot með þyngri leturþunga.
Eftirfarandi textabútur er birtur sem feitletraður texti .
Skáletrun
Til að leggja áherslu á textabrot með skáletri.
Eftirfarandi textabútur er sýndur sem skáletraður texti .
Varaþættir
Ekki hika við að nota <b>og <i>í HTML5. <b>er ætlað að varpa ljósi á orð eða orðasambönd án þess að koma á framfæri auknu mikilvægi en <i>er aðallega fyrir rödd, tæknileg hugtök o.s.frv.
Jöfnunarflokkar
Auðveldlega endurstilltu texta við hluti með textajöfnunarflokkum.
Vinstrijafnaður texti.
Miðjastilltur texti.
Hægrijafnaður texti.
Rökstuddur texti.
Enginn vefjatexti.
Umbreytingarnámskeið
Umbreyttu texta í íhluti með hástöfum í texta.
Lítill texti.
Hástafur texti.
Stórstafur texti.
Skammstafanir
Stílfærð útfærsla HTML <abbr>frumefnis fyrir skammstafanir og skammstafanir til að sýna stækkaða útgáfuna á sveimi. Skammstafanir með titleeigind eru með ljósum punktaðri neðri ramma og hjálparbendil þegar sveimur er til staðar, sem veitir viðbótarsamhengi við sveima og notendum hjálpartækja.
Grunn skammstöfun
Skammstöfun á orðinu eiginleiki er attr .
Frumhyggja
Bættu .initialismvið skammstöfun fyrir aðeins minni leturstærð.
HTML er það besta síðan sneið brauð.
Heimilisföng
Leggðu fram tengiliðaupplýsingar fyrir næsta forföður eða allt verkið. Halda sniðinu með því að enda allar línur með <br>.
Twitter, Inc. 1355 Market Street, Suite 900 San Francisco, CA 94103 P: (123) 456-7890
Fullt nafn [email protected]
Tilvitnanir í blokk
Til að vitna í blokkir af efni frá öðrum uppruna í skjalinu þínu.
Sjálfgefin blokkatilvitnun
Vefðu <blockquote>um hvaða HTML sem er sem tilvitnun. Fyrir beinar tilvitnanir mælum við með <p>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heiltala posuere ert a ante.
Valmöguleikar með blokkatilvitnun
Stíl- og innihaldsbreytingar fyrir einföld afbrigði af staðli <blockquote>.
Að nefna heimild
Bættu við a <footer>til að bera kennsl á upprunann. Vefjið nafn frumverksins inn í <cite>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heiltala posuere ert a ante.
Aðrar skjáir
Bættu við .blockquote-reversefyrir tilvitnun með hægri stilltu efni.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heiltala posuere ert a ante.
Listar
Óraðað
Listi yfir atriði þar sem röðin skiptir ekki beinlínis máli.
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Heiltala molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Phasellus iaculis neque
Purus sodales ultricies
Vestibulum laoreet porttitor sem
Ac tristique libero volutpat kl
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem
Pantaði
Listi yfir atriði þar sem röðin skiptir beinlínis máli.
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Heiltala molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem
Óstíll
Fjarlægðu sjálfgefna list-styleog vinstri spássíu á listaatriðum (aðeins börn). Þetta á aðeins við um atriði á listanum fyrir næstu börn , sem þýðir að þú þarft líka að bæta við bekknum fyrir hreiðraða lista.
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Heiltala molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Phasellus iaculis neque
Purus sodales ultricies
Vestibulum laoreet porttitor sem
Ac tristique libero volutpat kl
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem
Í línu
Settu öll listaatriði á eina línu með display: inline-block;og smá bólstrun.
Lorem ipsum
Phasellus iaculis
Nulla volutpat
Lýsing
Listi yfir hugtök með tilheyrandi lýsingum.
Lýsingarlistar
Lýsingarlisti er fullkominn til að skilgreina hugtök.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Lárétt lýsing
Gerðu skilmála og lýsingar í <dl>röð hlið við hlið. Byrjar staflað eins og sjálfgefna <dl>s, en þegar siglingastikan stækkar, þá gerirðu þetta líka.
Lýsingarlistar
Lýsingarlisti er fullkominn til að skilgreina hugtök.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, Tortor mauris condimentum nibh, út fermentum massa justo sit amet risus.
Sjálfvirk stytting
Láréttir lýsingarlistar munu stytta hugtök sem eru of löng til að passa í vinstri dálkinn með text-overflow. Í þrengri útsýnisgluggum munu þær breytast í sjálfgefið staflað útlit.
Kóði
Í línu
Vefjið innbyggða kóðabúta með <code>.
Til dæmis
<section>ætti að pakka inn sem inline.
Inntak notanda
Notaðu til <kbd>að gefa til kynna inntak sem venjulega er slegið inn með lyklaborði.
Til að skipta um möppu, sláðu inn
cdfylgt eftir með nafni möppunnar.
Til að breyta stillingum, ýttu á
ctrl + ,
Grunnblokk
Notaðu <pre>fyrir margar línur af kóða. Vertu viss um að sleppa við allar hornklofa í kóðanum fyrir rétta flutning.
<p>Dæmi um texta hér...</p>
Þú getur valfrjálst bætt við .pre-scrollablebekknum, sem mun setja hámarkshæð 350px og bjóða upp á y-ás skrunstiku.
Breytur
<var>Notaðu merkið til að gefa til kynna breytur .
y = m x + b
Sýnishorn úttak
<samp>Notaðu merkið til að gefa til kynna sýnishorn úr kubba úr forriti .
Það er ætlað að meðhöndla þennan texta sem sýnishorn úr tölvuforriti.
Töflur
Grunndæmi
Fyrir grunnstíl - létta bólstrun og aðeins lárétt skilrúm - bættu grunnflokknum .tablevið hvaða <table>. Það kann að virðast mjög óþarfi, en í ljósi þess að töflur eru notaðar víða fyrir önnur viðbætur eins og dagatöl og dagsetningarval, höfum við valið að einangra sérsniðna borðstíla okkar.
Valfrjáls töflutexti.
#
Fyrsta nafn
Eftirnafn
Notendanafn
1
Mark
Ottó
@mdo
2
Jakob
Thornton
@feiti
3
Larry
fuglinn
@twitter
Röndóttar raðir
Notaðu .table-stripedtil að bæta sebra-rönd við hvaða töflulínu sem er innan <tbody>.
Samhæfni milli vafra
Röndóttar töflur eru stílaðar í gegnum :nth-childCSS veljarann, sem er ekki fáanlegur í Internet Explorer 8.
#
Fyrsta nafn
Eftirnafn
Notendanafn
1
Mark
Ottó
@mdo
2
Jakob
Thornton
@feiti
3
Larry
fuglinn
@twitter
Borðið borð
Bættu við .table-borderedfyrir ramma á öllum hliðum töflunnar og hólfa.
#
Fyrsta nafn
Eftirnafn
Notendanafn
1
Mark
Ottó
@mdo
2
Jakob
Thornton
@feiti
3
Larry
fuglinn
@twitter
Sveima raðir
Bæta við .table-hovertil að virkja sveimastöðu á töflulínum innan <tbody>.
#
Fyrsta nafn
Eftirnafn
Notendanafn
1
Mark
Ottó
@mdo
2
Jakob
Thornton
@feiti
3
Larry
fuglinn
@twitter
Þétt borð
Bættu við .table-condensedtil að gera borðin þéttari með því að klippa klefafyllingu í tvennt.
#
Fyrsta nafn
Eftirnafn
Notendanafn
1
Mark
Ottó
@mdo
2
Jakob
Thornton
@feiti
3
Larry fuglinn
@twitter
Samhengisnámskeið
Notaðu samhengisflokka til að lita töflulínur eða einstakar frumur.
bekk
Lýsing
.active
Notar sveimalitinn á tiltekna línu eða hólf
.success
Gefur til kynna árangursríka eða jákvæða aðgerð
.info
Gefur til kynna hlutlausa upplýsandi breytingu eða aðgerð
.warning
Gefur til kynna viðvörun sem gæti þurft athygli
.danger
Gefur til kynna hættulega eða hugsanlega neikvæða aðgerð
#
Dálkafyrirsögn
Dálkafyrirsögn
Dálkafyrirsögn
1
Innihald dálks
Innihald dálks
Innihald dálks
2
Innihald dálks
Innihald dálks
Innihald dálks
3
Innihald dálks
Innihald dálks
Innihald dálks
4
Innihald dálks
Innihald dálks
Innihald dálks
5
Innihald dálks
Innihald dálks
Innihald dálks
6
Innihald dálks
Innihald dálks
Innihald dálks
7
Innihald dálks
Innihald dálks
Innihald dálks
8
Innihald dálks
Innihald dálks
Innihald dálks
9
Innihald dálks
Innihald dálks
Innihald dálks
Að miðla merkingu til hjálpartækja
Með því að nota lit til að bæta merkingu við töfluröð eða einstaka reit gefur það aðeins sjónræna vísbendingu sem verður ekki miðlað til notenda hjálpartækni – eins og skjálesara. Gakktu úr skugga um að upplýsingar sem merktar eru með litnum séu annaðhvort augljósar úr innihaldinu sjálfu (sýnilegur texti í viðkomandi töflulínu/hólfi), eða sé innifalinn með öðrum hætti, svo sem viðbótartexta sem er falinn í .sr-onlybekknum.
Móttækilegar töflur
Búðu til móttækilegar töflur með því að pakka þeim .tableinn .table-responsivetil að láta þær fletta lárétt á litlum tækjum (undir 768px). Þegar þú skoðar eitthvað stærra en 768px á breidd muntu ekki sjá neinn mun á þessum töflum.
Lóðrétt klipping/stýnun
Móttækilegar töflur nota overflow-y: hidden, sem klippir af allt efni sem fer út fyrir neðri eða efstu brúnir töflunnar. Sérstaklega getur þetta klippt af fellivalmyndum og öðrum búnaði þriðja aðila.
Firefox og fieldsets
Firefox hefur einhvern óþægilegan sviðsetta stíl sem felur í sér widthsem truflar móttækilega töfluna. Ekki er hægt að hnekkja þessu án Firefox-sértæks hakks sem við bjóðum ekki upp á í Bootstrap:
Einstakar formstýringar fá sjálfkrafa alþjóðlega stíl. Öll textaleg <input>, <textarea>, og <select>þættir með .form-controleru width: 100%;sjálfgefið stilltir á. Vefjið inn merkimiða og stýringar .form-grouptil að ná sem bestum bili.
Ekki blanda formhópum saman við inntakshópa
Ekki blanda eyðublaðahópum beint saman við inntakshópa . Í staðinn skaltu hreiðra inntakshópinn inni í eyðublaðahópnum.
Innbyggt form
Bættu .form-inlinevið eyðublaðið þitt (sem þarf ekki að vera <form>) fyrir vinstrijafnaðar og innbyggðar einingar. Þetta á aðeins við um eyðublöð innan útsýnisgátta sem eru að minnsta kosti 768px á breidd.
Gæti þurft sérsniðna breidd
Inntak og val hefur width: 100%;sjálfgefið notað í Bootstrap. Innan innbyggðra eyðublaða endurstillum við það width: auto;þannig að margar stýringar geti verið á sömu línu. Það fer eftir skipulagi þínu, frekari sérsniðnar breiddir gætu verið nauðsynlegar.
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 ráðlagt að nota það í staðinn fyrir aðrar merkingaraðferðir.
Lárétt form
Notaðu fyrirfram skilgreinda hnitaflokka Bootstrap til að samræma merki og hópa af formstýringum í láréttu skipulagi með því að bæta .form-horizontalvið eyðublaðið (sem þarf ekki að vera <form>). Með því að gera það breytist .form-groups til að haga sér eins og töfluraðir, svo engin þörf á .row.
Stuðningsstýringar
Dæmi um staðlaðar eyðublaðastýringar sem studdar eru í eyðublaðsútliti.
Inntak
Algengustu formstýringin, textatengdir innsláttarreitir. Inniheldur stuðning fyrir allar HTML5 gerðir: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, telog color.
Gerðaryfirlýsing krafist
Inntak verður aðeins stílað að fullu ef þeirra typeer rétt lýst yfir.
Inntakshópar
Til að bæta við samþættum texta eða hnöppum fyrir og/eða á eftir hvaða texta sem byggir á <input>, skoðaðu innsláttarhópinn .
Textasvæði
Formstýring sem styður margar línur af texta. Breyttu rowseigindinni eftir þörfum.
Gátreitir og útvarp
Gátreitir eru til að velja einn eða fleiri valmöguleika á lista, en útvarp eru til að velja einn valmöguleika af mörgum.
Óvirkir gátreitir og útvarpstæki eru studd, en til að gefa „ekki leyfilegt“ bendil á foreldri <label>, þarftu að bæta .disabledbekknum við foreldri .radio, .radio-inline, .checkbox, eða .checkbox-inline.
Sjálfgefið (staflað)
Innbyggðir gátreitir og útvarp
Notaðu .checkbox-inlineeða .radio-inlineflokkana á röð gátreita eða útvarpstækja fyrir stýringar sem birtast á sömu línu.
Gátreitir og útvarp án merkitexta
Ef þú ert ekki með texta innan <label>, er inntakið staðsett eins og þú mátt búast við. Sem stendur virkar aðeins á gátreitum og útvörpum sem ekki eru innbyggðir. Mundu að gefa samt upp einhvers konar merki fyrir hjálpartækni (til dæmis með því að nota aria-label).
Velur
Athugaðu að margir innfæddir valmyndir - nefnilega í Safari og Chrome - eru með ávöl horn sem ekki er hægt að breyta með border-radiuseiginleikum.
Fyrir <select>stýringar með multipleeigindinni eru sjálfgefið margir valkostir sýndir.
Statísk stjórn
Þegar þú þarft að setja venjulegan texta við hlið eyðublaðsmerkis í eyðublaði skaltu nota .form-control-staticbekkinn á <p>.
Fókus ástand
Við fjarlægjum sjálfgefna outlinestíla á sumum formstýringum og notum a box-shadowí staðinn fyrir :focus.
Demo :focusástand
Dæmið hér að ofan notar sérsniðna stíla í skjölunum okkar til að sýna fram á :focusástandið á .form-control.
Óvirkt ástand
Bættu disabledboolean eigindinni við inntak til að koma í veg fyrir samskipti notenda. Óvirkt inntak virðast léttara og bæta við not-allowedbendili.
Óvirkt sviðssett
Bættu disabledeigindinni við a <fieldset>til að slökkva á öllum stjórntækjum <fieldset>í einu.
Fyrirvari um tengivirkni<a>
Sjálfgefið er að vafrar meðhöndla allar innbyggðar formstýringar ( <input>, <select>og <button>þættir) inni í a <fieldset disabled>sem óvirka, sem kemur í veg fyrir samskipti bæði með lyklaborði og mús á þeim. Hins vegar, ef eyðublaðið þitt inniheldur einnig <a ... class="btn btn-*">þætti, munu þessir aðeins fá stíllinn pointer-events: none. Eins og fram kemur í hlutanum um óvirkt ástand fyrir hnappa (og sérstaklega í undirkaflanum fyrir akkerisþætti), er þessi CSS eign ekki enn staðlað og er ekki að fullu studd í Opera 18 og nýrri, eða í Internet Explorer 11, og vann Ekki koma í veg fyrir að lyklaborðsnotendur geti einbeitt sér eða virkjað þessa tengla. Svo til öryggis skaltu nota sérsniðið JavaScript til að slökkva á slíkum hlekkjum.
Samhæfni milli vafra
Þó að Bootstrap muni beita þessum stílum í öllum vöfrum, styðja Internet Explorer 11 og neðar ekki að fullu disabledeiginleikann á <fieldset>. Notaðu sérsniðið JavaScript til að slökkva á reitsettinu í þessum vöfrum.
Skrifvarið ástand
Bættu readonlyboolean eigindinni við inntak til að koma í veg fyrir breytingar á gildi inntaksins. Lesinntak virðist léttari (alveg eins og óvirkt inntak), en heldur venjulegum bendili.
Hjálpartexti
Hjálpartexti blokkarstigs fyrir formstýringar.
Að tengja hjálpartexta við formstýringar
Hjálpartexti ætti að vera beinlínis tengdur við formstýringuna sem hann tengist með því að nota aria-describedbyeigindina. Þetta mun tryggja að hjálpartækni – eins og skjálesarar – tilkynni þennan hjálpartexta þegar notandinn einbeitir sér eða fer inn í stýringuna.
Löggilding segir
Bootstrap inniheldur löggildingarstíla fyrir villu-, viðvörunar- og árangursstöðu á eyðublaðastýringum. Til að nota skaltu bæta við .has-warning, .has-error, eða .has-successvið yfireininguna. Allir .control-label, .form-control, og .help-blockinnan þess þáttar munu fá staðfestingarstílana.
Sendir staðfestingarástand til hjálpartækja og litblinda notenda
Notkun þessara staðfestingarstíla til að tákna stöðu eyðublaðastýringar veitir aðeins sjónræna, litatengda vísbendingu, sem ekki verður miðlað til notenda hjálpartækni - eins og skjálesara - eða til litblinda notenda.
Gakktu úr skugga um að önnur vísbending um ástand sé einnig veitt. Til dæmis geturðu sett vísbendingu um ástand í <label>texta formstýringarinnar sjálfs (eins og er tilfellið í eftirfarandi kóðadæmi), sett inn Glyphicon (með viðeigandi valtexta með því að nota .sr-onlybekkinn - sjá Glyphicon dæmin ), eða með því að gefa upp viðbótar hjálpartextablokk . Sérstaklega fyrir hjálpartækni er einnig hægt að úthluta ógildum formstýringum aria-invalid="true"eigind.
Með valfrjálsum táknum
Þú getur líka bætt við valfrjálsum endurgjöfartáknum með því að bæta við .has-feedbackog hægri tákninu.
Ábendingartákn virka aðeins með textaþáttum <input class="form-control">.
Tákn, merki og inntakshópar
Handvirk staðsetning endurgjöfartákna er nauðsynleg fyrir inntak án merkimiða og fyrir inntakshópa með viðbót til hægri. Þú ert eindregið hvattur til að útvega merki fyrir öll inntak af aðgengisástæðum. Ef þú vilt koma í veg fyrir að merki séu birt skaltu fela þá hjá .sr-onlybekknum. Ef þú verður að vera án merkimiða skaltu stilla topgildi endurgjöfartáknisins. Fyrir inntakshópa skaltu stilla rightgildið að viðeigandi pixlagildi eftir breidd viðbótarinnar.
Að koma merkingu táknsins á framfæri við hjálpartækni
Til að tryggja að hjálpartækni – eins og skjálesarar – komi réttilega til skila merkingu tákns, ætti að fylgja með viðbótar falinn texta með .sr-onlybekknum og tengja sérstaklega við formstýringuna sem hann tengist með því að nota aria-describedby. Að öðrum kosti skaltu ganga úr skugga um að merkingin (td sú staðreynd að það er viðvörun fyrir tiltekinn textainnsláttarreit) komi fram á einhverju öðru formi, svo sem að breyta texta hins raunverulega <label>sem tengist formstýringunni.
Þrátt fyrir að eftirfarandi dæmi séu þegar minnst á staðfestingarstöðu viðkomandi formstýringa í <label>textanum sjálfum, hefur ofangreind tækni (með .sr-onlytexta og aria-describedby) verið innifalin til skýringar.
Valfrjálst tákn í láréttu og innbyggðu formi
Valfrjálst tákn með földum .sr-onlymerkimiðum
Ef þú notar .sr-onlybekkinn til að fela formstýringu <label>(frekar en að nota aðra merkingarvalkosti, svo sem aria-labeleigind), mun Bootstrap sjálfkrafa stilla staðsetningu táknsins þegar því hefur verið bætt við.
(árangur)
@
(árangur)
Stjórna stærð
Stilltu hæðir með því að nota flokka eins og .input-lg, og stilltu breidd með því að nota grid dálkaflokka eins og .col-lg-*.
Hæð stærð
Búðu til stýringar fyrir hærra eða styttri form sem passa við hnappastærðir.
Lárétt form hópastærðir
Stærðu merkimiða fljótt og myndstýringar innan .form-horizontalmeð því að bæta við .form-group-lgeða .form-group-sm.
Stærð súlu
Vefjið inntak inn í ristdálka, eða hvaða sérsniðna yfireiningu sem er, til að framfylgja breiddum sem óskað er eftir.
Hnappar
Hnapparmerki
Notaðu hnappaflokkana á <a>, <button>, eða <input>frumefni.
Samhengssértæk notkun
Þó að hægt sé að nota hnappaflokka á <a>og <button>þætti, eru aðeins <button>þættir studdir innan nav og navbar íhluta okkar.
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".
Flutningur í gegnum vafra
Sem besta starfsvenjan mælum við eindregið með því að nota <button>þáttinn þegar það er mögulegt til að tryggja samsvarandi flutning í gegnum vafra.
Meðal annars er galli í Firefox <30 sem kemur í veg fyrir að við getum stillt hnappa sem byggja á of, sem veldur því að þeir passa ekki nákvæmlega við hæð annarra hnappa á Firefox line-height.<input>
Valmöguleikar
Notaðu einhvern af tiltækum hnappaflokkum til að búa til stílaðan hnapp á fljótlegan hátt.
Að miðla merkingu til hjálpartækja
Að nota lit til að bæta merkingu við hnapp gefur aðeins sjónræna vísbendingu, sem verður ekki miðlað til notenda hjálpartækni - eins og skjálesara. Gakktu úr skugga um að upplýsingar sem merktar eru með litnum séu annað hvort augljósar úr innihaldinu sjálfu (sýnilegur texti hnappsins) eða að þær séu innifaldar með öðrum hætti, svo sem viðbótartexta sem er falinn í .sr-onlybekknum.
Stærðir
Langar þig í stærri eða minni hnappa? Bættu við .btn-lg, .btn-sm, eða .btn-xsfyrir fleiri stærðir.
Búðu til blokkarhnappa - þá sem spanna alla breidd foreldris - með því að bæta við .btn-block.
Virkt ástand
Þrýst er á hnappana (með dekkri bakgrunni, dekkri ramma og innfelldum skugga) þegar þeir eru virkir. Fyrir <button>þætti er þetta gert í gegnum :active. Fyrir <a>þætti er það gert með .active. Hins vegar geturðu notað .activeá <button>s (og látið aria-pressed="true"eigindina fylgja með) ef þú þarft að endurtaka virka ástandið forritunarlega.
Hnappur þáttur
Engin þörf á að bæta við :activeþar sem þetta er gerviflokkur, en ef þú þarft að þvinga fram sama útlit skaltu halda áfram og bæta við .active.
Við notum .disabledsem gagnaflokk hér, svipað og almenni .activeflokkurinn, þannig að ekki er krafist forskeyti.
Fyrirvari um tengivirkni
Þessi flokkur notar pointer-events: nonetil að reyna að slökkva á tengivirkni <a>s, en þessi CSS eign er ekki enn staðlað og er ekki að fullu studd í Opera 18 og nýrri, eða í Internet Explorer 11. Auk þess, jafnvel í vöfrum sem styðja pointer-events: none, lyklaborð flakk er óbreytt, sem þýðir að sjáandi lyklaborðsnotendur og notendur hjálpartækni munu enn geta virkjað þessa tengla. Svo til öryggis skaltu nota sérsniðið JavaScript til að slökkva á slíkum hlekkjum.
Myndir
Móttækilegar myndir
Hægt er að gera myndir í Bootstrap 3 móttækilegar með því að bæta við .img-responsivebekknum. Þetta á við max-width: 100%;, height: auto;og display: block;myndina þannig að hún mælist fallega að foreldri þættinum.
Til að miðja myndir sem nota .img-responsivebekkinn skaltu nota .center-blockí staðinn fyrir .text-center. Skoðaðu hjálparnámskeiðahlutann fyrir frekari upplýsingar um .center-blocknotkun.
SVG myndir og IE 8-10
Í Internet Explorer 8-10 eru SVG myndir með .img-responsiveóhóflega stórar. Til að laga þetta skaltu bæta við width: 100% \9;þar sem þörf krefur. Bootstrap beitir þessu ekki sjálfkrafa þar sem það veldur flækjum fyrir önnur myndsnið.
Myndform
Bættu flokkum við <img>frumefni til að stilla myndir auðveldlega í hvaða verkefni sem er.
Samhæfni milli vafra
Hafðu í huga að Internet Explorer 8 skortir stuðning fyrir ávöl horn.
Hjálparnámskeið
Samhengislitir
Komdu merkingu til skila í gegnum liti með handfylli af áherslukennslutímum. Þetta gæti líka verið notað á tengla og mun myrkvast þegar sveima er eins og sjálfgefinn tengistíll okkar.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Að takast á við sérhæfni
Stundum er ekki hægt að beita áhersluflokkum vegna sérstöðu annars veljara. Í flestum tilfellum er nægileg lausn að vefja textann þinn inn <span>með bekknum.
Að miðla merkingu til hjálpartækja
Notkun lita til að bæta merkingu gefur aðeins sjónræna vísbendingu sem verður ekki miðlað til notenda hjálpartækni - eins og skjálesara. Gakktu úr skugga um að upplýsingar sem liturinn táknar séu annaðhvort augljósar úr innihaldinu sjálfu (samhengislitirnir eru aðeins notaðir til að styrkja merkingu sem er þegar til staðar í textanum/merkingunni), eða eru innifalin með öðrum hætti, svo sem viðbótartexta falinn með .sr-onlybekknum .
Samhengislegur bakgrunnur
Svipað og í samhengistextalitaflokkum, stilltu bakgrunn frumefnis auðveldlega á hvaða samhengisflokka sem er. Akkerihlutir verða dökkir þegar þeir eru á sveimi, alveg eins og textaflokkarnir.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Að takast á við sérhæfni
Stundum er ekki hægt að nota samhengisbakgrunnsflokka vegna sérstöðu annars valmyndar. Í sumum tilfellum er nægileg lausn að vefja efni þáttarins inn í <div>með bekknum.
Að miðla merkingu til hjálpartækja
Eins og með samhengisliti , vertu viss um að öll merking sem miðlað er í gegnum lit sé einnig miðlað á sniði sem er ekki eingöngu kynningarlegt.
Loka táknið
Notaðu almenna lokunartáknið til að hafna efni eins og aðferðum og viðvörunum.
Carets
Notaðu merkingar til að gefa til kynna virkni og stefnu fellilistans. Athugaðu að sjálfgefna valmyndin snýr sjálfkrafa við í fellivalmyndum .
Fljótleg flot
Fleygðu frumefni til vinstri eða hægri með flokki. !importanter innifalið til að forðast sérhæfnivandamál. Einnig er hægt að nota flokka sem mixins.
Ekki til notkunar í navbars
Til að samræma hluti í navbars við tólaflokka, notaðu .navbar-lefteða .navbar-rightí staðinn. Sjá navbar skjölin fyrir frekari upplýsingar.
Innihaldsblokkir í miðju
Stilltu frumefni á display: blockog miðju í gegnum margin. Fáanlegt sem mixin og class.
Clearfix
Auðveldlega hreinsaðu floats með því að bæta .clearfixvið foreldraþáttinn . Notar micro clearfix eins og hann hefur verið vinsæll af Nicolas Gallagher. Einnig hægt að nota sem mixin.
Sýnir og felur efni
Þvingaðu til að sýna eða fela þátt ( þar á meðal fyrir skjálesara ) með því að nota .showog .hiddenflokka. Þessir flokkar nota !importanttil að forðast sérstöðuárekstra, rétt eins og fljótu flotarnir . Þeir eru aðeins fáanlegir til að skipta um blokkarstig. Þeir geta einnig verið notaðir sem blanda.
.hideer í boði, en það hefur ekki alltaf áhrif á skjálesara og er úrelt frá og með v3.0.1. Notaðu .hiddeneða .sr-onlyí staðinn.
Ennfremur er .invisiblehægt að nota aðeins til að skipta um sýnileika frumefnis, sem þýðir að því displayer ekki breytt og þátturinn getur samt haft áhrif á flæði skjalsins.
Innihald skjálesara og lyklaborðs
Fela þátt í öllum tækjum nema skjálesurum með .sr-only. Sameina .sr-onlymeð .sr-only-focusabletil að sýna þáttinn aftur þegar hann er með fókus (td af notanda sem eingöngu er á lyklaborði). Nauðsynlegt til að fylgja bestu starfsvenjum aðgengis . Einnig hægt að nota sem blanda.
Myndaskipti
Notaðu .text-hidebekkinn eða mixin til að hjálpa til við að skipta út textainnihaldi frumefnis fyrir bakgrunnsmynd.
Móttækileg tól
Til að fá hraðari farsímavænni þróun, notaðu þessa tólaflokka til að sýna og fela efni eftir tæki í gegnum fjölmiðlafyrirspurn. Einnig eru tólaflokkar til að skipta um efni þegar það er prentað.
Reyndu að nota þetta í takmörkuðum mæli og forðastu að búa til gjörólíkar útgáfur af sömu síðu. Notaðu þær í staðinn til að bæta við kynningu hvers tækis.
Námskeið í boði
Notaðu einn eða samsetningu af tiltækum flokkum til að skipta um efni á milli sjónarhorna.
Extra lítil tækiSímar (<768px)
Lítil tækiSpjaldtölvur (≥768px)
Meðalstór tækiSkrifborð (≥992px)
Stór tækiSkrifborð (≥1200px)
.visible-xs-*
Sýnilegt
Falið
Falið
Falið
.visible-sm-*
Falið
Sýnilegt
Falið
Falið
.visible-md-*
Falið
Falið
Sýnilegt
Falið
.visible-lg-*
Falið
Falið
Falið
Sýnilegt
.hidden-xs
Falið
Sýnilegt
Sýnilegt
Sýnilegt
.hidden-sm
Sýnilegt
Falið
Sýnilegt
Sýnilegt
.hidden-md
Sýnilegt
Sýnilegt
Falið
Sýnilegt
.hidden-lg
Sýnilegt
Sýnilegt
Sýnilegt
Falið
Frá og með v3.2.0 eru .visible-*-*flokkarnir fyrir hvern brotpunkt í þremur afbrigðum, eitt fyrir hvert CSS eignargildi sem displayskráð er hér að neðan.
Hópur flokka
CSSdisplay
.visible-*-block
display: block;
.visible-*-inline
display: inline;
.visible-*-inline-block
display: inline-block;
Svo, fyrir sérstaklega litla ( xs) skjái til dæmis, eru tiltækir .visible-*-*flokkar: .visible-xs-block, .visible-xs-inline, og .visible-xs-inline-block.
Klassarnir .visible-xs, .visible-sm, .visible-mdog .visible-lgeru líka til, en eru úreltir frá og með v3.2.0 . Þau eru um það bil jafngild .visible-*-block, nema með sérstökum tilfellum til viðbótar fyrir <table>skiptatengda þætti.
Prentnámskeið
Svipað og venjulegir móttækilegir flokkar, notaðu þá til að skipta um efni fyrir prentun.
Flokkurinn .visible-printer líka til en er úreltur frá og með v3.2.0. Það jafngildir um það bil .visible-print-block, nema með sérstökum tilfellum fyrir <table>-tengda þætti.
Próftilvik
Breyttu stærð vafrans þíns eða hlaðaðu á mismunandi tæki til að prófa móttækilega tólaflokkana.
Sýnist á...
Græn gátmerki gefa til kynna að þátturinn sé sýnilegur í núverandi útsýnisglugga.
Extra lítill✔ Sýnilegt á x-small
Lítil✔ Sjást á litlum
Miðlungs✔ Sýnilegt á miðli
Large✔ Sjáanlegt á stórum
Extra lítil og lítil✔ Visible on x-small and small
Medium and large✔ Sjáanlegt á meðalstórum og stórum
Extra lítil og meðalstór✔ Visible on x-small and medium
Small and large✔ Sjáanlegt á litlum og stórum
Extra small and large✔ Sjáanlegt á x-small og large
Lítil og meðalstór✔ Visible on small and medium
Falinn á...
Hér gefa grænir hakmerki einnig til kynna að þátturinn sé falinn í núverandi útsýnisglugga.
Extra lítill✔ Hidden on x-small
Lítil✔ Hidden on small
Miðlungs✔ Hidden on medium
Large✔ Falið á stórum
Extra lítil og lítil✔ Hidden on x-small and small
Medium and large✔ Falið á meðalstórum og stórum
Extra lítil og meðalstór✔ Hidden on x-small and medium
Small and large✔ Falið á litlum og stórum
Extra small and large✔ Falið á x-small og large
Lítil og meðalstór✔ Hidden on small and medium
Notar minna
CSS Bootstrap er byggt á Less, forgjörva með viðbótarvirkni eins og breytum, blöndun og aðgerðum til að setja saman CSS. Þeir sem vilja nota minni upprunaskrárnar í staðinn fyrir samansettar CSS skrár okkar geta nýtt sér þær fjölmörgu breytur og blöndur sem við notum í gegnum rammann.
Bootstrap er hægt að nota á að minnsta kosti tvo vegu: með samansettu CSS eða með upprunaminni skrám. Til að setja saman Less skrárnar skaltu skoða hlutann Byrjaðu til að sjá hvernig eigi að setja upp þróunarumhverfið þitt til að keyra nauðsynlegar skipanir.
Söfnunarverkfæri þriðja aðila gætu virkað með Bootstrap, en þau eru ekki studd af kjarnateymi okkar.
Breytur
Breytur eru notaðar í öllu verkefninu sem leið til að miðstýra og deila algengum gildum eins og litum, bili eða leturstöflum. Fyrir heildar sundurliðun, vinsamlegast skoðaðu Customizer .
Litir
Notaðu auðveldlega tvö litakerfi: grátóna og merkingartóna. Grátónalitir veita skjótan aðgang að algengum tónum af svörtu á meðan merkingartækni felur í sér ýmsa liti sem úthlutað er til þýðingarmikilla samhengisgilda.
Notaðu einhverjar af þessum litabreytum eins og þær eru eða endurskiptu þeim í þýðingarmeiri breytur fyrir verkefnið þitt.
Vinnupallar
Handfylli af breytum til að sérsníða lykilþætti í beinagrind síðunnar þinnar fljótt.
Tenglar
Stíllaðu tenglana þína auðveldlega með réttum lit með aðeins einu gildi.
Athugaðu að @link-hover-colornotar aðgerð, annað frábært tól frá Less, til að búa til rétta sveimalitinn á sjálfvirkan hátt. Þú getur notað darken, lighten, saturate, og desaturate.
Leturfræði
Stilltu leturgerð þína, textastærð, leiðandi og fleira auðveldlega með nokkrum snöggum breytum. Bootstrap notar þetta líka til að bjóða upp á auðveldar leturfræðilegar blöndur.
Táknmyndir
Tvær fljótlegar breytur til að sérsníða staðsetningu og skráarheiti táknanna þinna.
Íhlutir
Íhlutir í Bootstrap nota nokkrar sjálfgefnar breytur til að stilla algeng gildi. Hér eru þær sem oftast eru notaðar.
Seldarblöndur
Seljendablöndur eru blöndur til að hjálpa til við að styðja marga vafra með því að innihalda öll viðeigandi forskeyti söluaðila í samansettum CSS þínum.
Box-stærð
Endurstilltu kassalíkan íhluta þinna með einni blöndun. Fyrir samhengi, sjá þessa gagnlegu grein frá Mozilla .
Blandan er úrelt frá og með v3.2.0, með tilkomu Autoprefixer. Til að varðveita afturábak eindrægni mun Bootstrap halda áfram að nota mixin innbyrðis þar til Bootstrap v4.
Ávöl horn
Today all modern browsers support the non-prefixed border-radius property. As such, there is no .border-radius() mixin, but Bootstrap does include shortcuts for quickly rounding two corners on a particular side of an object.
Box (Drop) shadows
If your target audience is using the latest and greatest browsers and devices, be sure to just use the box-shadow property on its own. If you need support for older Android (pre-v4) and iOS devices (pre-iOS 5), use the deprecated mixin to pick up the required -webkit prefix.
The mixin is deprecated as of v3.1.0, since Bootstrap doesn't officially support the outdated platforms that don't support the standard property. To preserve backwards-compatibility, Bootstrap will continue to use the mixin internally until Bootstrap v4.
Be sure to use rgba() colors in your box shadows so they blend as seamlessly as possible with backgrounds.
Transitions
Multiple mixins for flexibility. Set all transition information with one, or specify a separate delay and duration as needed.
The mixins are deprecated as of v3.2.0, with the introduction of Autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.
Transformations
Rotate, scale, translate (move), or skew any object.
The mixins are deprecated as of v3.2.0, with the introduction of Autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.
Animations
A single mixin for using all of CSS3's animation properties in one declaration and other mixins for individual properties.
The mixins are deprecated as of v3.2.0, with the introduction of Autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.
Opacity
Set the opacity for all browsers and provide a filter fallback for IE8.
Placeholder text
Provide context for form controls within each field.
Columns
Generate columns via CSS within a single element.
Gradients
Easily turn any two colors into a background gradient. Get more advanced and set a direction, use three colors, or use a radial gradient. With a single mixin you get all the prefixed syntaxes you'll need.
You can also specify the angle of a standard two-color, linear gradient:
If you need a barber-stripe style gradient, that's easy, too. Just specify a single color and we'll overlay a translucent white stripe.
Up the ante and use three colors instead. Set the first color, the second color, the second color's color stop (a percentage value like 25%), and the third color with these mixins:
Heads up! Should you ever need to remove a gradient, be sure to remove any IE-specific filter you may have added. You can do that by using the .reset-filter() mixin alongside background-image: none;.
Utility mixins
Utility mixins are mixins that combine otherwise unrelated CSS properties to achieve a specific goal or task.
Clearfix
Forget adding class="clearfix" to any element and instead add the .clearfix() mixin where appropriate. Uses the micro clearfix from Nicolas Gallagher.
Horizontal centering
Quickly center any element within its parent. Requires width or max-width to be set.
Sizing helpers
Specify the dimensions of an object more easily.
Resizable textareas
Easily configure the resize options for any textarea, or any other element. Defaults to normal browser behavior (both).
Truncating text
Easily truncate text with an ellipsis with a single mixin. Requires element to be block or inline-block level.
Retina images
Specify two image paths and the @1x image dimensions, and Bootstrap will provide an @2x media query. If you have many images to serve, consider writing your retina image CSS manually in a single media query.
Using Sass
While Bootstrap is built on Less, it also has an official Sass port. We maintain it in a separate GitHub repository and handle updates with a conversion script.
What's included
Since the Sass port has a separate repo and serves a slightly different audience, the contents of the project differ greatly from the main Bootstrap project. This ensures the Sass port is as compatible with as many Sass-based systems as possible.
Path
Description
lib/
Ruby gem code (Sass configuration, Rails and Compass integrations)
For information on how to install and use Bootstrap for Sass, consult the GitHub repository readme. It's the most up to date source and includes information for use with Rails, Compass, and standard Sass projects.