CSS
Settings CSS globali, elementi HTML fundamentali stil u mtejba bi klassijiet estensibbli, u sistema ta 'grilja avvanzata.
Settings CSS globali, elementi HTML fundamentali stil u mtejba bi klassijiet estensibbli, u sistema ta 'grilja avvanzata.
Ikseb l-aktar dettalji dwar il-biċċiet ewlenin tal-infrastruttura ta' Bootstrap, inkluż l-approċċ tagħna għal żvilupp tal-web aħjar, aktar mgħaġġel u aktar b'saħħtu.
Bootstrap jagħmel użu minn ċerti elementi HTML u proprjetajiet CSS li jeħtieġu l-użu tad-doctype HTML5. Inkludiha fil-bidu tal-proġetti kollha tiegħek.
Bil-Bootstrap 2, żidna stili mhux obbligatorji favur il-mowbajl għal aspetti ewlenin tal-qafas. Bil-Bootstrap 3, ktibna mill-ġdid il-proġett biex ikun faċli għall-mowbajl mill-bidu. Minflok ma żżid stili mobbli fakultattivi, huma moħmija fil-qalba. Fil-fatt, Bootstrap huwa l-ewwel mobbli . L-ewwel stili mobbli jistgħu jinstabu fil-librerija kollha minflok f'fajls separati.
Biex tiżgura rendering xieraq u touch zooming, żid il-meta tag tal-viewport ma' <head>
.
Tista' tiddiżattiva l-kapaċitajiet ta' zooming fuq apparat mobbli billi żżid user-scalable=no
mal-meta tag tal-viewport. Dan iwaqqaf iż-żum, li jfisser li l-utenti jistgħu jiskrollaw biss, u jirriżulta fis-sit tiegħek iħossu daqsxejn aktar bħal applikazzjoni nattiva. B'mod ġenerali, aħna ma nirrakkomandawx dan fuq kull sit, għalhekk oqgħod attent!
Bootstrap jistabbilixxi stili ta' wiri, tipografija u link globali bażiċi. Speċifikament, aħna:
background-color: #fff;
fuq il-body
@font-family-base
, @font-size-base
, u l- @line-height-base
attributi bħala l-bażi tipografika tagħna@link-color
u applika s-sottolinja tal-link biss fuq:hover
Dawn l-istili jistgħu jinstabu fi ħdan scaffolding.less
.
Għal rendering imtejjeb bejn il-browser, nużaw Normalize.css , proġett minn Nicolas Gallagher u Jonathan Neal .
Bootstrap jeħtieġ element li jkun fih biex ikebbeb il-kontenut tas-sit u jospita s-sistema tal-grilja tagħna. Tista' tagħżel wieħed miż-żewġ kontenituri biex tużah fil-proġetti tiegħek. Innota li, minħabba padding
u aktar, l-ebda kontenitur ma huwa nestable.
Uża .container
għal kontenitur b'wisa' fiss li jirrispondu.
Uża .container-fluid
għal kontenitur wisa 'sħiħ, li jkopri l-wisa' kollu tal-vetrina tiegħek.
Bootstrap jinkludi sistema ta 'grilja tal-fluwidu tal-ewwel li tirreaġixxi u mobbli li tiskala sa 12-il kolonna kif jiżdied id-daqs tal-apparat jew tal-vetrina. Jinkludi klassijiet predefiniti għal għażliet ta 'tqassim faċli, kif ukoll mixins b'saħħithom għall-ġenerazzjoni ta' layouts aktar semantiċi .
Is-sistemi tal-grilja jintużaw għall-ħolqien ta’ layouts tal-paġni permezz ta’ serje ta’ ringieli u kolonni li fihom il-kontenut tiegħek. Hawn kif taħdem is-sistema tal-grilja Bootstrap:
.container
(wisa 'fiss) jew .container-fluid
(wisa' sħiħ) għal allinjament u ikkuttunar xierqa..row
u .col-xs-4
huma disponibbli biex isiru malajr layouts tal-grilja. Inqas mixins jistgħu jintużaw ukoll għal layouts aktar semantiċi.padding
. Dak il-kuttunar huwa kkumpensat f'ringieli għall-ewwel u l-aħħar kolonna permezz ta 'marġni negattiv fuq .row
s..col-xs-4
..col-md-*
klassi għal element mhux biss se taffettwa l-istil tiegħu fuq apparati medji iżda wkoll fuq apparati kbar jekk .col-lg-*
klassi ma tkunx preżenti.Ħares lejn l-eżempji biex tapplika dawn il-prinċipji għall-kodiċi tiegħek.
Aħna nużaw il-mistoqsijiet tal-midja li ġejjin fil-fajls Inqas tagħna biex noħolqu l-punti ta 'waqfien ewlenin fis-sistema tal-grilja tagħna.
Kultant nespandu fuq dawn il-mistoqsijiet tal-midja biex jinkludu max-width
tillimita CSS għal sett idjaq ta 'apparati.
Ara kif l-aspetti tas-sistema tal-grilja Bootstrap jaħdmu fuq diversi apparati b'tabella utli.
Apparati żgħar żejda Telefowns (<768px) | Tagħmir żgħir Pilloli (≥768px) | Apparat medju Desktops (≥992px) | Apparat kbir Desktops (≥1200px) | |
---|---|---|---|---|
Imġieba tal-grilja | Orizzontali f'kull ħin | Kollass biex tibda, orizzontali 'l fuq mill-punti ta' waqfien | ||
Wisa' tal-kontenitur | Xejn (awto) | 750px | 970px | 1170px |
Prefiss tal-klassi | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
# ta’ kolonni | 12 | |||
Wisa' tal-kolonna | Auto | ~62px | ~81px | ~97px |
Wisa' tal-kanal | 30px (15px fuq kull naħa ta' kolonna) | |||
Nestable | Iva | |||
Offsets | Iva | |||
L-ordni tal-kolonna | Iva |
Bl-użu ta 'sett wieħed ta' .col-md-*
klassijiet ta 'grilja, tista' toħloq sistema ta 'grilja bażika li tibda f'munzelli fuq apparat mobbli u tagħmir tat-tablet (il-medda żejjed żgħira għal żgħira) qabel ma ssir orizzontali fuq apparat tad-desktop (medju). Poġġi kolonni tal-grilja fi kwalunkwe .row
.
Dawwar kwalunkwe tqassim tal-grilja ta 'wisa' fissa f'tqassim ta 'wisa' sħiħ billi tbiddel l-aktar 'il barra tiegħek .container
għal .container-fluid
.
Ma tridx li l-kolonni tiegħek sempliċiment jinstammu f'apparat iżgħar? Uża l-klassijiet ta 'grilja ta' apparat żgħir u medju żejjed billi żżid .col-xs-*
.col-md-*
mal-kolonni tiegħek. Ara l-eżempju hawn taħt għal idea aħjar ta' kif jaħdem kollox.
Ibni fuq l-eżempju preċedenti billi toħloq layouts saħansitra aktar dinamiċi u qawwija bi .col-sm-*
klassijiet ta 'tablet.
Jekk aktar minn 12-il kolonna jitqiegħdu f'ringiela waħda, kull grupp ta' kolonni żejda se, bħala unità waħda, jgħaqqad fuq linja ġdida.
Bl-erba' saffi ta' grilji disponibbli int marbut li tiltaqa' ma' kwistjonijiet fejn, f'ċerti breakpoints, il-kolonni tiegħek ma jiċċarawx sewwa peress li wieħed huwa ogħla mill-ieħor. Biex tirranġa dan, uża kombinazzjoni ta 'a .clearfix
u l- klassijiet ta' utilità reattivi tagħna .
Minbarra l-ikklerjar tal-kolonna f'punti ta' waqfien li jirrispondu, jista' jkollok bżonn tirrisettja l-offsets, pushes, jew pulls . Ara dan fl-azzjoni fl -eżempju tal-grid .
Mexxi l-kolonni lejn il-lemin billi tuża .col-md-offset-*
klassijiet. Dawn il-klassijiet iżidu l-marġni tax-xellug ta’ kolonna *
b’kolonni. Per eżempju, .col-md-offset-4
jiċċaqlaq .col-md-4
fuq erba 'kolonni.
Tista' wkoll taqbeż l-offsets minn saffi tal-grilja aktar baxxi bi .col-*-offset-0
klassijiet.
Biex tbejta l-kontenut tiegħek mal-grilja default, żid kolonni ġodda .row
u sett ta .col-sm-*
' kolonna eżistenti .col-sm-*
. Ringieli mdaħħla għandhom jinkludu sett ta’ kolonni li jammontaw għal 12 jew inqas (mhux meħtieġ li tuża t-12-il kolonna kollha disponibbli).
Ibdel faċilment l-ordni tal-kolonni tal-grilja integrati tagħna bi klassijiet .col-md-push-*
u .col-md-pull-*
modifikaturi.
Minbarra l -klassijiet tal-grilja mibnija minn qabel għal layouts veloċi, Bootstrap jinkludi Inqas varjabbli u mixins biex tiġġenera malajr layouts sempliċi u semantiċi tiegħek.
Varjabbli jiddeterminaw in-numru ta 'kolonni, il-wisa' tal-kanal, u l-punt ta 'mistoqsija tal-midja li fih jibdew il-kolonni f'wiċċ l-ilma. Aħna nużaw dawn biex niġġeneraw il-klassijiet tal-grilja predefiniti dokumentati hawn fuq, kif ukoll għall-mixins personalizzati elenkati hawn taħt.
Mixins jintużaw flimkien mal-varjabbli tal-grilja biex jiġġeneraw CSS semantiċi għal kolonni tal-grilja individwali.
Tista 'timmodifika l-varjabbli għall-valuri tad-dwana tiegħek stess, jew sempliċement tuża l-mixins bil-valuri awtomatiċi tagħhom. Hawn eżempju ta 'użu tas-settings default biex jinħoloq tqassim ta' żewġ kolonni b'vojt bejniethom.
L-intestaturi HTML kollha, <h1>
sa <h6>
, huma disponibbli. .h1
permezz ta' .h6
klassijiet huma wkoll disponibbli, għal meta trid tqabbel l-istil tat-tipa ta' intestatura imma xorta trid li t-test tiegħek jintwera inline.
h1. Intestatura Bootstrap |
Semibold 36px |
h2. Intestatura Bootstrap |
Semibold 30px |
h3. Intestatura Bootstrap |
Semibold 24px |
h4. Intestatura Bootstrap |
Semibold 18px |
h5. Intestatura Bootstrap |
Semibold 14px |
h6. Intestatura Bootstrap |
Semibold 12px |
Oħloq test eħfef u sekondarju fi kwalunkwe intestatura <small>
b'tikketta ġenerika jew il- .small
klassi.
h1. Intestatura Bootstrap Test sekondarju |
h2. Intestatura Bootstrap Test sekondarju |
h3. Intestatura Bootstrap Test sekondarju |
h4. Intestatura Bootstrap Test sekondarju |
h5. Intestatura Bootstrap Test sekondarju |
h6. Intestatura Bootstrap Test sekondarju |
Id-default globali ta' Bootstrap font-size
huwa 14px , b'1.428 . Dan huwa applikat għall- u l-paragrafi kollha. Barra minn hekk, (il-paragrafi) jirċievu marġini t'isfel ta' nofs l-għoli tal-linja kkalkulat tagħhom (10px b'mod awtomatiku).line-height
<body>
<p>
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 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.
Agħmel paragrafu jispikkaw billi żżid .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
L-iskala tipografika hija bbażata fuq żewġ varjabbli Inqas f'varjabbli.less : @font-size-base
u @line-height-base
. L-ewwel hija d-daqs tat-tipa bażi użata u t-tieni hija l-għoli tal-linja bażi. Aħna nużaw dawk il-varjabbli u xi matematika sempliċi biex noħolqu l-marġini, paddings, u line-heights tat-tip kollu tagħna u aktar. Ippersonalizzahom u Bootstrap jadatta.
Biex tenfasizza ġirja ta' test minħabba r-rilevanza tagħha f'kuntest ieħor, uża t- <mark>
tikketta.
Tista' tuża t-tikketta tal-marka biexjenfasizzawtest.
Biex tindika blokok ta' test li tħassru uża t- <del>
tikketta.
Din il-linja tat-test hija maħsuba biex tiġi ttrattata bħala test imħassra.
Biex tindika blokok ta' test li m'għadhomx rilevanti uża t- <s>
tikketta.
Din il-linja tat-test hija maħsuba biex tiġi ttrattata bħala li m'għadhiex preċiża.
Biex tindika żidiet għad-dokument uża t- <ins>
tikketta.
Din il-linja tat-test hija maħsuba biex tiġi ttrattata bħala żieda mad-dokument.
Biex tissottolinja t-test uża t- <u>
tikketta.
Din il-linja tat-test se tirrendi kif issottolinjat
Agħmel użu mit-tags ta' enfasi default ta' HTML bi stili ħfief.
Biex tneħħi l-enfasi fuq inline jew blokki ta 'test, uża t- <small>
tikketta biex tissettja t-test għal 85% tad-daqs tal-ġenitur. L-elementi tal-intestatura jirċievu tagħhom stess font-size
għal elementi nested <small>
.
Tista' alternattivament tuża element inline ma .small
' minflok kwalunkwe <small>
.
Din il-linja tat-test hija maħsuba biex tiġi ttrattata bħala stampar fini.
Għall-enfasi ta' snippet ta' test b'tipa-piż itqal.
Is-snippet tat-test li ġej hija mogħtija bħala test b'tipa grassa .
Għall-enfasi ta' snippet ta' test bil-korsiv.
Is-snippet tat-test li ġej huwa mogħti bħala test korsiv .
Ħossok liberu li tuża <b>
u <i>
fl-HTML5. <b>
huwa maħsub biex jenfasizza kliem jew frażijiet mingħajr ma jwassal importanza addizzjonali filwaqt li <i>
huwa l-aktar għal vuċi, termini tekniċi, eċċ.
Allinja mill-ġdid it-test faċilment għal komponenti bi klassijiet ta 'allinjament tat-test.
Test allinjat max-xellug.
Test allinjat fiċ-ċentru.
Test allinjat mal-lemin.
Test ġustifikat.
Ebda wrap test.
Ittrasforma t-test f'komponenti bi klassijiet ta' kapitalizzazzjoni tat-test.
Test imnaqqas.
Test b'majju.
Test b'kapital.
Implimentazzjoni stilizzata tal- <abbr>
element tal-HTML għall-abbrevjazzjonijiet u l-akronimi biex turi l-verżjoni estiża fuq il-post. L-abbrevjazzjonijiet title
b'attribut għandhom bordura ta' isfel ħafifa bit-tikek u cursor ta' għajnuna fuq il-passaġġ, li jipprovdi kuntest addizzjonali meta jdur u lill-utenti ta' teknoloġiji ta' assistenza.
Abbrevjazzjoni tal-kelma attribut hija attr .
Żid .initialism
ma' abbrevjazzjoni għal font-size kemmxejn iżgħar.
HTML huwa l-aħjar ħaġa peress ħobż imqatta '.
Ippreżenta informazzjoni ta' kuntatt għall-eqreb antenat jew il-korp kollu tax-xogħol. Ippreserva l-ifformattjar billi tispiċċa l-linji kollha b' <br>
.
Biex tikkwota blokki ta' kontenut minn sors ieħor fid-dokument tiegħek.
Kebbeb <blockquote>
madwar kwalunkwe HTML bħala l-kwotazzjoni. Għal kwotazzjonijiet dritti, nirrakkomandaw <p>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Bidliet fl-istil u fil-kontenut għal varjazzjonijiet sempliċi fuq standard <blockquote>
.
Żid a <footer>
għall-identifikazzjoni tas-sors. Kebbeb l-isem tax-xogħol tas-sors fi <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Żid .blockquote-reverse
għal blockquote b'kontenut allinjat mal-lemin.
Lista ta' oġġetti li fihom l-ordni ma jimpurtax b'mod espliċitu.
Lista ta' oġġetti li fihom l-ordni espliċitament importanti.
Neħħi l-marġni default list-style
u tax-xellug fuq l-oġġetti tal-lista (tfal immedjati biss). Dan japplika biss għal oġġetti tal-lista tat-tfal immedjati , li jfisser li jkollok bżonn iżżid il-klassi għal kwalunkwe lista nested ukoll.
Poġġi l-oġġetti kollha tal-lista fuq linja waħda bi display: inline-block;
u ftit ikkuttunar ħafif.
Lista ta' termini bid-deskrizzjonijiet assoċjati tagħhom.
Agħmel termini u deskrizzjonijiet <dl>
f'linja maġenb xulxin. Jibda f'munzelli bħal default <dl>
s, iżda meta n-navbar tespandi, hekk jagħmlu dawn.
Listi ta' deskrizzjoni orizzontali se jaqtgħu termini li huma twal wisq biex jidħlu fil-kolonna tax-xellug b' text-overflow
. F'viewports idjaq, se jinbidlu għat-tqassim default stacked.
Kebbeb snippets inline tal-kodiċi b' <code>
.
<section>
għandu jkun imgeżwer bħala inline.
Uża l- <kbd>
biex tindika input li tipikament jiddaħħal permezz tat-tastiera.
Uża <pre>
għal linji multipli ta 'kodiċi. Kun żgur li taħrab kwalunkwe parentesi angolari fil-kodiċi għal rendering xieraq.
<p>Kampjun ta' test hawn...</p>
Tista' b'għażla żżid il- .pre-scrollable
klassi, li tistabbilixxi għoli massimu ta' 350px u tipprovdi scrollbar tal-assi y.
Biex tindika varjabbli uża t- <var>
tikketta.
y = m x + b
Biex tindika l-output tal-kampjun tal-blokki minn programm uża t- <samp>
tikketta.
Dan it-test huwa maħsub biex jiġi ttrattat bħala output ta' kampjun minn programm tal-kompjuter.
Għal stil bażiku—ikkuttunar ħafif u diviżuri orizzontali biss—żid il-klassi bażi .table
ma' kwalunkwe <table>
. Jista 'jidher super żejda, iżda minħabba l-użu mifrux ta' tabelli għal plugins oħra bħal kalendarji u pickers tad-data, għażilna li niżolaw l-istili ta 'tabelli tad-dwana tagħna.
# | Isem | Kunjom | Isem tal-utent |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Ġakobb | Thornton | @xaħam |
3 | Larry | l-ghasfur |
Uża .table-striped
biex iżżid zebra-striping ma' kwalunkwe ringiela tal-mejda fi ħdan il- <tbody>
.
It-tabelli b'istrixxi huma stilati permezz tas- :nth-child
selettur CSS, li mhuwiex disponibbli fl-Internet Explorer 8.
# | Isem | Kunjom | Isem tal-utent |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Ġakobb | Thornton | @xaħam |
3 | Larry | l-ghasfur |
Żid .table-bordered
għall-fruntieri fuq in-naħat kollha tat-tabella u ċ-ċelloli.
# | Isem | Kunjom | Isem tal-utent |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Ġakobb | Thornton | @xaħam |
3 | Larry | l-ghasfur |
Żid .table-hover
biex tippermetti stat ta' hover fuq ringieli tal-mejda fi ħdan <tbody>
.
# | Isem | Kunjom | Isem tal-utent |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Ġakobb | Thornton | @xaħam |
3 | Larry | l-ghasfur |
Żid .table-condensed
biex tagħmel it-tabelli aktar kompatti billi taqta' l-ikkuttunar taċ-ċelluli bin-nofs.
# | Isem | Kunjom | Isem tal-utent |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Ġakobb | Thornton | @xaħam |
3 | Larry l-Għasfur |
Uża klassijiet kuntestwali biex ikkulurit ringieli tat-tabella jew ċelloli individwali.
Klassi | Deskrizzjoni |
---|---|
.active |
Japplika l-kulur tal-hover għal ringiela jew ċellula partikolari |
.success |
Tindika azzjoni ta' suċċess jew pożittiva |
.info |
Jindika bidla jew azzjoni newtrali informattiva |
.warning |
Tindika twissija li tista' teħtieġ attenzjoni |
.danger |
Jindika azzjoni perikoluża jew potenzjalment negattiva |
# | Intestatura tal-kolonna | Intestatura tal-kolonna | Intestatura tal-kolonna |
---|---|---|---|
1 | Kontenut tal-kolonna | Kontenut tal-kolonna | Kontenut tal-kolonna |
2 | Kontenut tal-kolonna | Kontenut tal-kolonna | Kontenut tal-kolonna |
3 | Kontenut tal-kolonna | Kontenut tal-kolonna | Kontenut tal-kolonna |
4 | Kontenut tal-kolonna | Kontenut tal-kolonna | Kontenut tal-kolonna |
5 | Kontenut tal-kolonna | Kontenut tal-kolonna | Kontenut tal-kolonna |
6 | Kontenut tal-kolonna | Kontenut tal-kolonna | Kontenut tal-kolonna |
7 | Kontenut tal-kolonna | Kontenut tal-kolonna | Kontenut tal-kolonna |
8 | Kontenut tal-kolonna | Kontenut tal-kolonna | Kontenut tal-kolonna |
9 | Kontenut tal-kolonna | Kontenut tal-kolonna | Kontenut tal-kolonna |
L-użu tal-kulur biex iżżid it-tifsira għal ringiela ta' tabella jew ċellula individwali tipprovdi biss indikazzjoni viżwali, li mhux se tingħata lill-utenti ta' teknoloġiji ta' assistenza – bħal qarrejja tal-iskrin. Żgura li l-informazzjoni indikata bil-kulur hija jew ovvja mill-kontenut innifsu (it-test viżibbli fir-ringiela/ċellula rilevanti tat-tabella), jew tkun inkluża permezz ta' mezzi alternattivi, bħal test addizzjonali moħbi mal- .sr-only
klassi.
Oħloq tabelli li jirreaġixxu billi tgeżwer kwalunkwe .table
biex .table-responsive
tagħmilhom iscroll orizzontalment fuq apparati żgħar (taħt 768px). Meta tara fuq xi ħaġa akbar minn 768px wiesgħa, ma tara ebda differenza f'dawn it-tabelli.
It-tabelli li jirrispondu jagħmlu użu minn overflow-y: hidden
, li jaqta' kull kontenut li jmur lil hinn mit-truf ta' isfel jew ta' fuq tat-tabella. B'mod partikolari, dan jista' jaqtgħu menus dropdown u widgets oħra ta 'partijiet terzi.
Firefox għandu xi stil ta 'fieldset skomdi li jinvolvi width
li jinterferixxi mat-tabella li tirreaġixxi. Dan ma jistax jiġi megħlub mingħajr hack speċifiku għal Firefox li aħna ma nipprovdux f'Bootstrap:
Għal aktar informazzjoni, aqra din it-tweġiba Stack Overflow .
# | Intestatura tal-mejda | Intestatura tal-mejda | Intestatura tal-mejda | Intestatura tal-mejda | Intestatura tal-mejda | Intestatura tal-mejda |
---|---|---|---|---|---|---|
1 | Ċellula tal-mejda | Ċellula tal-mejda | Ċellula tal-mejda | Ċellula tal-mejda | Ċellula tal-mejda | Ċellula tal-mejda |
2 | Ċellula tal-mejda | Ċellula tal-mejda | Ċellula tal-mejda | Ċellula tal-mejda | Ċellula tal-mejda | Ċellula tal-mejda |
3 | Ċellula tal-mejda | Ċellula tal-mejda | Ċellula tal-mejda | Ċellula tal-mejda | Ċellula tal-mejda | Ċellula tal-mejda |
# | Intestatura tal-mejda | Intestatura tal-mejda | Intestatura tal-mejda | Intestatura tal-mejda | Intestatura tal-mejda | Intestatura tal-mejda |
---|---|---|---|---|---|---|
1 | Ċellula tal-mejda | Ċellula tal-mejda | Ċellula tal-mejda | Ċellula tal-mejda | Ċellula tal-mejda | Ċellula tal-mejda |
2 | Ċellula tal-mejda | Ċellula tal-mejda | Ċellula tal-mejda | Ċellula tal-mejda | Ċellula tal-mejda | Ċellula tal-mejda |
3 | Ċellula tal-mejda | Ċellula tal-mejda | Ċellula tal-mejda | Ċellula tal-mejda | Ċellula tal-mejda | Ċellula tal-mejda |
Kontrolli tal-forma individwali awtomatikament jirċievu xi stil globali. L-elementi kollha testwali <input>
, <textarea>
, u <select>
bi .form-control
huma ssettjati bħala width: 100%;
awtomatikament. Kebbeb it-tikketti u l-kontrolli .form-group
għall-ispazjar ottimali.
Tħallatx gruppi ta' forma direttament ma ' gruppi ta' input . Minflok, bejta l-grupp tad-dħul ġewwa l-grupp tal-formola.
Żid .form-inline
mal-formola tiegħek (li m'għandhiex għalfejn tkun a <form>
) għal kontrolli allinjati max-xellug u inline-block. Dan japplika biss għall-formoli fi ħdan viewports li huma wiesgħa mill-inqas 768px.
Inputs u selezzjonijiet width: 100%;
applikaw awtomatikament f'Bootstrap. Fi ħdan il-formoli inline, aħna reset li width: auto;
sabiex kontrolli multipli jistgħu jirrisjedu fuq l-istess linja. Skont it-tqassim tiegħek, jistgħu jkunu meħtieġa wisgħat tad-dwana addizzjonali.
Screen readers se jkollhom problemi bil-formoli tiegħek jekk ma tinkludix tikketta għal kull input. Għal dawn il-formoli inline, tista 'taħbi t-tikketti billi tuża l- .sr-only
klassi. Hemm metodi alternattivi oħra biex tiġi pprovduta tikketta għal teknoloġiji ta' assistenza, bħall- aria-label
, aria-labelledby
jew l- title
attribut. Jekk l-ebda wieħed minn dawn ma jkun preżenti, il-qarrejja tal-iskrin jistgħu jirrikorru għall-użu tal- placeholder
attribut, jekk ikun preżenti, iżda innota li l-użu ta’ placeholder
bħala sostitut għal metodi oħra ta’ tikkettjar mhuwiex rakkomandat.
Uża l-klassijiet tal-grilja predefiniti ta' Bootstrap biex tallinja tikketti u gruppi ta' kontrolli tal-formoli f'tqassim orizzontali billi żżid .form-horizontal
mal-formola (li m'għandhiex għalfejn tkun <form>
). Jekk tagħmel hekk tibdel .form-group
s biex iġib ruħu bħala ringieli tal-grilja, għalhekk l-ebda ħtieġa għal .row
.
Eżempji ta' kontrolli ta' formola standard appoġġjati f'format ta' formola eżempju.
Il-kontroll tal-forma l-aktar komuni, oqsma ta' input ibbażati fuq it-test. Jinkludi appoġġ għat-tipi kollha HTML5: text
, password
, datetime
, datetime-local
, date
, month
, time
, week
, number
, email
, url
, search
, tel
, u color
.
L-inputs jiġu stiljati bis-sħiħ biss jekk type
ikunu ddikjarati kif suppost.
Biex iżżid test integrat jew buttuni qabel u/jew wara kwalunkwe test ibbażat fuq <input>
, iċċekkja l-komponent tal-grupp ta' input .
Kontroll tal-formola li jappoġġja linji multipli ta 'test. Ibdel l- rows
attribut kif meħtieġ.
Il-kaxxi ta' kontroll huma biex tagħżel għażla waħda jew diversi f'lista, filwaqt li r-radjijiet huma biex tagħżel għażla waħda minn ħafna.
Il-kaxxi ta' kontroll u r-radjijiet b'diżabbiltà huma appoġġjati, iżda biex tipprovdi cursor "mhux permess" fuq il-passaġġ tal-ġenitur <label>
, ikollok bżonn iżżid il- .disabled
klassi mal-ġenitur .radio
, .radio-inline
, .checkbox
, jew .checkbox-inline
.
Uża l- klassijiet .checkbox-inline
jew .radio-inline
fuq serje ta' kaxxi ta' kontroll jew radjijiet għal kontrolli li jidhru fuq l-istess linja.
Jekk ma jkollokx test fi ħdan il- <label>
, l-input jitqiegħed kif tistenna. Bħalissa jaħdem biss fuq checkboxes u radjijiet mhux inline. Ftakar li xorta tipprovdi xi forma ta' tikketta għal teknoloġiji ta' assistenza (pereżempju, billi tuża aria-label
).
Innota li ħafna menus tal-għażla indiġeni—jiġifieri f'Safari u Chrome—għandhom kantunieri fit-tond li ma jistgħux jiġu modifikati permezz ta' border-radius
proprjetajiet.
Għal <select>
kontrolli bl- multiple
attribut, jintwerew għażliet multipli awtomatikament.
Meta jkollok bżonn tpoġġi test sempliċi ħdejn tikketta tal-formola fi ħdan formola, uża l- .form-control-static
klassi fuq <p>
.
outline
Aħna nneħħu l- istili default fuq xi kontrolli tal-formola u napplikaw a box-shadow
minfloku għal :focus
.
:focus
Stat DemoL-input eżempju ta 'hawn fuq juża stili tad-dwana fid-dokumentazzjoni tagħna biex juri l- :focus
istat fuq .form-control
.
Żid l- disabled
attribut boolean fuq input biex tevita l-interazzjonijiet tal-utent. Inputs b'diżabilità jidhru eħfef u żid not-allowed
cursor.
Żid l- disabled
attribut ma 'a <fieldset>
biex tiddiżattiva l-kontrolli kollha fi ħdan il <fieldset>
f'daqqa.
<a>
B'mod awtomatiku, il-browsers se jittrattaw il-kontrolli tal-forma nattiva kollha ( <input>
, <select>
u l- <button>
elementi) ġewwa <fieldset disabled>
bħala diżattivati, u jipprevjenu kemm it-tastiera kif ukoll l-interazzjonijiet tal-maws fuqhom. Madankollu, jekk il-formola tiegħek tinkludi wkoll <a ... class="btn btn-*">
elementi, dawn jingħataw biss stil ta' pointer-events: none
. Kif innutat fit-taqsima dwar l-istat diżabbli għall-buttuni (u speċifikament fis-subsezzjoni għall-elementi tal-ankra), din il-proprjetà CSS għadha mhix standardizzata u mhix appoġġjata bis-sħiħ f'Opera 18 u taħt, jew f'Internet Explorer 11, u rebħet ma tipprevjenix lill-utenti tat-tastiera milli jkunu jistgħu jiffokaw jew jattivaw dawn il-links. Allura biex tkun sigura, uża JavaScript personalizzat biex tiddiżattiva links bħal dawn.
Filwaqt li Bootstrap se japplika dawn l-istili fil-brawżers kollha, l-Internet Explorer 11 u inqas ma jappoġġjawx bis-sħiħ l- disabled
attribut fuq <fieldset>
. Uża JavaScript personalizzat biex tiddiżattiva l-fieldset f'dawn il-browsers.
Żid l- readonly
attribut boolean fuq input biex tevita l-modifika tal-valur tal-input. Inputs li jinqraw biss jidhru eħfef (bħal inputs b'diżabilità), iżda jżommu l-cursor standard.
Test ta' għajnuna fil-livell tal-blokk għall-kontrolli tal-formoli.
It-test ta' għajnuna għandu jkun assoċjat b'mod espliċitu mal-kontroll tal-forma li jirrelata mal-użu tal- aria-describedby
attribut. Dan se jiżgura li t-teknoloġiji ta’ assistenza – bħal qarrejja tal-iskrin – se jħabbru dan it-test ta’ għajnuna meta l-utent jiffoka jew jidħol fil-kontroll.
Bootstrap jinkludi stili ta' validazzjoni għal stati ta' żball, twissija u suċċess fuq il-kontrolli tal-formoli. Biex tuża, żid .has-warning
, .has-error
, jew .has-success
mal-element ġenitur. Kwalunkwe .control-label
, .form-control
, u .help-block
fi ħdan dak l-element se jirċievu l-istili ta 'validazzjoni.
L-użu ta' dawn l-istili ta' validazzjoni biex jindika l-istat ta' kontroll ta' formola jipprovdi biss indikazzjoni viżwali, ibbażata fuq il-kulur, li mhux se tintbagħat lill-utenti ta' teknoloġiji ta' assistenza - bħal screen readers - jew lill-utenti colorblind.
Żgura li tiġi pprovduta wkoll indikazzjoni alternattiva tal-istat. Pereżempju, tista' tinkludi ħjiel dwar l-istat fit- <label>
test tal-kontroll tal-forma innifsu (kif huwa l-każ fl-eżempju tal-kodiċi li ġej), tinkludi Glyphicon (b'test alternattiv xieraq bl-użu tal- .sr-only
klassi - ara l- eżempji Glyphicon ), jew billi tipprovdi blokk ta' test ta' għajnuna addizzjonali . Speċifikament għal teknoloġiji ta' assistenza, kontrolli ta' formoli invalidi jistgħu wkoll jiġu assenjati aria-invalid="true"
attribut.
Tista 'wkoll iżżid ikoni ta' feedback fakultattivi biż-żieda ta ' .has-feedback
u l-ikona t-tajba.
Ikoni ta 'feedback jaħdmu biss b'elementi testwali <input class="form-control">
.
Pożizzjonament manwali ta 'ikoni ta' feedback huwa meħtieġ għal inputs mingħajr tikketta u għal gruppi ta 'input b'add-on fuq il-lemin. Inti mħeġġa ħafna li tipprovdi tikketti għall-inputs kollha għal raġunijiet ta' aċċessibbiltà. Jekk tixtieq tevita li jintwerew it-tikketti, aħbihom mal- .sr-only
klassi. Jekk trid tagħmel mingħajr tikketti, aġġusta l- top
valur tal-ikona tal-feedback. Għal gruppi ta 'input, aġġusta l- right
valur għal valur tal-pixel xieraq skont il-wisa' tal-addon tiegħek.
Biex jiġi żgurat li t-teknoloġiji ta' assistenza – bħall-qarrejja tal-iskrin – iwasslu b'mod korrett it-tifsira ta' ikona, test moħbi addizzjonali għandu jiġi inkluż mal- .sr-only
klassi u assoċjat b'mod espliċitu mal-kontroll tal-forma li jirrelata mal-użu aria-describedby
. Alternattivament, kun żgur li t-tifsira (pereżempju, il-fatt li hemm twissija għal qasam partikolari ta' dħul ta' test) titwassal f'xi forma oħra, bħall-bidla tat-test tat-test attwali <label>
assoċjat mal-kontroll tal-formola.
Għalkemm l-eżempji li ġejjin diġà jsemmu l-istat tal-validazzjoni tal-kontrolli tal-forma rispettivi tagħhom fit- <label>
test innifsu, it-teknika ta’ hawn fuq (bl -użu .sr-only
tat-test u aria-describedby
) ġiet inkluża għal skopijiet illustrattivi.
.sr-only
Ikoni fakultattivi b'tikketti moħbijaJekk tuża l- .sr-only
klassi biex taħbi kontroll tal-formola <label>
(minflok tuża għażliet oħra ta 'tikkettar, bħall- aria-label
attribut), Bootstrap jaġġusta awtomatikament il-pożizzjoni tal-ikona ladarba din tkun ġiet miżjuda.
Issettja l-għoli billi tuża klassijiet bħal .input-lg
, u ssettja l-wisa 'bl-użu ta' klassijiet tal-kolonna tal-grilja bħal .col-lg-*
.
Oħloq kontrolli tal-forma ogħla jew iqsar li jaqblu mad-daqsijiet tal-buttuni.
Daqs malajr it-tikketti u l-kontrolli tal-forma fi ħdan .form-horizontal
billi żżid .form-group-lg
jew .form-group-sm
.
Kebbeb inputs f'kolonni tal-grilja, jew kwalunkwe element ġenitur tad-dwana, biex jinforza faċilment il-wisgħat mixtieqa.
Uża l-klassijiet tal-buttuni fuq element <a>
, <button>
, jew <input>
.
Filwaqt li l-klassijiet tal-buttuni jistgħu jintużaw fuq <a>
u <button>
elementi, l- <button>
elementi biss huma appoġġjati fi ħdan il-komponenti tan-nav u navbar tagħna.
Jekk l- <a>
elementi jintużaw biex jaġixxu bħala buttuni – li jqanqlu l-funzjonalità fil-paġna, aktar milli jinnavigaw għal dokument jew sezzjoni oħra fil-paġna kurrenti – għandhom jingħataw ukoll role="button"
.
Bħala l-aħjar prattika, nirrakkomandaw ħafna li tuża l- <button>
element kull meta jkun possibbli biex tiżgura t-tqabbil tar-rendi cross-browser.
Fost affarijiet oħra, hemm bug fil-Firefox <30 li ma jħalliniex nissettjaw il- buttuni bbażati fuq l- line-height
of <input>
, li ġġiegħelhom ma jaqblux eżattament mal-għoli ta 'buttuni oħra fuq Firefox.
Uża kwalunkwe waħda mill-klassijiet tal-buttuni disponibbli biex toħloq malajr buttuna stil.
L-użu tal-kulur biex iżżid it-tifsira ta' buttuna jipprovdi biss indikazzjoni viżwali, li mhux se tingħata lill-utenti ta' teknoloġiji ta' assistenza – bħal screen readers. Kun żgur li l-informazzjoni indikata bil-kulur hija jew ovvja mill-kontenut innifsu (it-test viżibbli tal-buttuna), jew tkun inkluża permezz ta' mezzi alternattivi, bħal test addizzjonali moħbi mal- .sr-only
klassi.
Fancy buttuni akbar jew iżgħar? Żid .btn-lg
, .btn-sm
, jew .btn-xs
għal daqsijiet addizzjonali.
Oħloq buttuni tal-livell tal-blokki—dawk li jkopru l-wisa’ sħiħa ta’ ġenitur— billi żżid .btn-block
.
Il-buttuni jidhru ppressati (bi sfond aktar skur, fruntiera aktar skura, u dell inset) meta jkunu attivi. Għall <button>
-elementi, dan isir permezz ta' :active
. Għall <a>
-elementi, dan isir bi .active
. Madankollu, tista 'tuża .active
fuq <button>
s (u tinkludi l- aria-pressed="true"
attribut) jekk ikollok bżonn tirreplika l-istat attiv b'mod programmatiku.
M'hemmx għalfejn iżżid :active
peress li hija psewdo-klassi, imma jekk għandek bżonn tisforza l-istess dehra, kompli u żid .active
.
Żid il- .active
klassi mal- <a>
buttuni.
Agħmel il-buttuni jidhru li ma jistgħux jiġu kklikkjati billi sfumahom lura b' opacity
.
Żid l- disabled
attribut mal - <button>
buttuni.
Jekk iżżid l- disabled
attribut ma' <button>
, Internet Explorer 9 u hawn taħt se jirrendi t-test griż b'dell diżgustanti li ma nistgħux nirranġaw.
Żid il- .disabled
klassi mal- <a>
buttuni.
Aħna nużaw .disabled
bħala klassi ta 'utilità hawn, simili għall- .active
klassi komuni, għalhekk l-ebda prefiss mhu meħtieġ.
Din il-klassi tuża pointer-events: none
biex tipprova tiddiżattiva l-funzjonalità tal-link ta ' <a>
s, iżda dik il-proprjetà CSS għadha mhix standardizzata u mhix appoġġjata bis-sħiħ f'Opera 18 u taħt, jew fl-Internet Explorer 11. Barra minn hekk, anke fil-browsers li jappoġġjaw pointer-events: none
it-tastiera in-navigazzjoni tibqa' mhux affettwata, li jfisser li l-utenti tat-tastiera b'vista u l-utenti ta' teknoloġiji ta' assistenza xorta jkunu jistgħu jattivaw dawn il-links. Allura biex tkun sigura, uża JavaScript personalizzat biex tiddiżattiva links bħal dawn.
Immaġini f'Bootstrap 3 jistgħu jsiru responsive-friendly permezz taż-żieda tal- .img-responsive
klassi. Dan japplika max-width: 100%;
, height: auto;
u display: block;
għall-immaġni sabiex tiskala tajjeb għall-element ġenitur.
Biex tiċċentra immaġini li jużaw il- .img-responsive
klassi, uża .center-block
minflok .text-center
. Ara t-taqsima tal-klassijiet tal-helper għal aktar dettalji dwar .center-block
l-użu.
Fl-Internet Explorer 8-10, l-immaġini SVG .img-responsive
għandhom daqs sproporzjonat. Biex tirranġa dan, żid width: 100% \9;
fejn meħtieġ. Bootstrap ma japplikax dan awtomatikament peress li jikkawża kumplikazzjonijiet għal formati oħra tal-immaġni.
Żid klassijiet ma ' <img>
element biex faċilment stil immaġini fi kwalunkwe proġett.
Żomm f'moħħok li l-Internet Explorer 8 m'għandux appoġġ għall-kantunieri fit-tond.
Iwassal tifsira permezz tal-kulur b'numru żgħir ta 'klassijiet ta' utilità ta 'enfasi. Dawn jistgħu wkoll jiġu applikati għall-links u jiskuraw meta jdur l-istess bħall-istili tal-link default tagħna.
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.
Kultant klassijiet ta 'enfasi ma jistgħux jiġu applikati minħabba l-ispeċifiċità ta' selettur ieħor. Fil-biċċa l-kbira tal-każijiet, soluzzjoni suffiċjenti hija li tkebbeb it-test tiegħek fi <span>
mal-klassi.
L-użu tal-kulur biex iżżid it-tifsira jipprovdi biss indikazzjoni viżwali, li mhux se tiġi mgħoddija lill-utenti ta 'teknoloġiji ta' assistenza - bħal screen readers. Żgura li l-informazzjoni indikata bil-kulur hija jew ovvja mill-kontenut innifsu (il-kuluri kuntestwali jintużaw biss biex isaħħu t-tifsira li diġà hija preżenti fit-test/markup), jew tkun inkluża permezz ta’ mezzi alternattivi, bħal test addizzjonali moħbi mal- .sr-only
klassi .
Simili għall-klassijiet tal-kulur tat-test kuntestwali, issettja faċilment l-isfond ta 'element għal kwalunkwe klassi kuntestwali. Il-komponenti tal-ankra se jiskuraw meta jdur, bħall-klassijiet tat-test.
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.
Xi drabi klassijiet ta' sfond kuntestwali ma jistgħux jiġu applikati minħabba l-ispeċifiċità ta' selettur ieħor. F'xi każijiet, soluzzjoni suffiċjenti hija li wrap il-kontenut ta ' <div>
l-element tiegħek fil-klassi.
Bħal fil-każ tal -kuluri kuntestwali , kun żgur li kwalunkwe tifsira mogħtija permezz tal-kulur hija wkoll imwassla f'format li mhuwiex purament preżentazzjoni.
Uża l-ikona ġenerika tal-qrib biex tiċħad kontenut bħal modals u twissijiet.
Uża carets biex tindika l-funzjonalità u d-direzzjoni dropdown. Innota li l-caret default ser ireġġa 'lura awtomatikament fil -menus dropup .
Float element lejn ix-xellug jew il-lemin bi klassi. !important
hija inkluża biex jiġu evitati kwistjonijiet ta' speċifiċità. Il-klassijiet jistgħu jintużaw ukoll bħala mixins.
Issettja element għal display: block
u center permezz margin
. Disponibbli bħala mixin u klassi.
Faċilment ċara float
s billi żżid .clearfix
mal-element ġenitur . Jutilizza l-mikro clearfix kif popolarizzat minn Nicolas Gallagher. Jista 'jintuża wkoll bħala mixin.
Ġiegħel element li jintwera jew moħbi ( inkluż għal screen readers ) bl-użu ta ' .show
u .hidden
klassijiet. Dawn il-klassijiet jużaw !important
biex jevitaw kunflitti ta 'speċifiċità, bħad- sufruni ta' malajr . Huma disponibbli biss għal toggling fil-livell tal-blokk. Jistgħu jintużaw ukoll bħala mixins.
.hide
hija disponibbli, iżda mhux dejjem taffettwa lill-qarrejja tal-iskrin u hija deprecata minn v3.0.1. Uża .hidden
jew .sr-only
minflok.
Barra minn hekk, .invisible
jista 'jintuża biex taqleb biss il-viżibilità ta' element, li jfisser display
li mhuwiex modifikat u l-element xorta jista 'jaffettwa l-fluss tad-dokument.
Aħbi element għall-apparati kollha ħlief screen readers b' .sr-only
. Għaqqad .sr-only
ma .sr-only-focusable
' biex turi l-element mill-ġdid meta jkun iffukat (eż. minn utent tat-tastiera biss). Meħtieġa biex isegwu l- aħjar prattiki ta' aċċessibbiltà . Jista 'jintuża wkoll bħala mixins.
Uża l- .text-hide
klassi jew mixin biex tgħin tissostitwixxi l-kontenut tat-test ta 'element b'immaġni fl-isfond.
Għal żvilupp aktar mgħaġġel li jiffavorixxi l-mowbajl, uża dawn il-klassijiet ta’ utilità biex turi u taħbi l-kontenut skont l-apparat permezz ta’ query tal-midja. Inklużi wkoll klassijiet ta' utilità għat-toggling tal-kontenut meta jiġi stampat.
Ipprova uża dawn fuq bażi limitata u evita li toħloq verżjonijiet kompletament differenti tal-istess sit. Minflok, użahom biex tikkumplimenta l-preżentazzjoni ta 'kull apparat.
Uża klassi waħda jew kombinazzjoni tal-klassijiet disponibbli biex taqleb il-kontenut bejn punti ta' waqfien tal-vista.
Apparati żgħar żejdaTelefowns (<768px) | Apparat żgħirPilloli (≥768px) | Apparat medjuDesktops (≥992px) | Apparati kbarDesktops (≥1200px) | |
---|---|---|---|---|
.visible-xs-* |
Viżibbli | Moħbija | Moħbija | Moħbija |
.visible-sm-* |
Moħbija | Viżibbli | Moħbija | Moħbija |
.visible-md-* |
Moħbija | Moħbija | Viżibbli | Moħbija |
.visible-lg-* |
Moħbija | Moħbija | Moħbija | Viżibbli |
.hidden-xs |
Moħbija | Viżibbli | Viżibbli | Viżibbli |
.hidden-sm |
Viżibbli | Moħbija | Viżibbli | Viżibbli |
.hidden-md |
Viżibbli | Viżibbli | Moħbija | Viżibbli |
.hidden-lg |
Viżibbli | Viżibbli | Viżibbli | Moħbija |
Minn v3.2.0, il- .visible-*-*
klassijiet għal kull breakpoint jiġu fi tliet varjazzjonijiet, waħda għal kull display
valur tal-proprjetà CSS elenkat hawn taħt.
Grupp ta' klassijiet | CSSdisplay |
---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
Allura, għal skrins żgħar żejda ( xs
) pereżempju, il- .visible-*-*
klassijiet disponibbli huma: .visible-xs-block
, .visible-xs-inline
, u .visible-xs-inline-block
.
Il-klassijiet .visible-xs
, .visible-sm
, .visible-md
, u .visible-lg
jeżistu wkoll, iżda huma deprecati minn v3.2.0 . Huma bejn wieħed u ieħor ekwivalenti għal .visible-*-block
, ħlief b'każijiet speċjali addizzjonali għal <table>
elementi relatati mat-toggling.
Simili għall-klassijiet responsivi regolari, uża dawn biex taqleb il-kontenut għall-istampar.
Klassijiet | Browser | Stampa |
---|---|---|
.visible-print-block .visible-print-inline .visible-print-inline-block |
Moħbija | Viżibbli |
.hidden-print |
Viżibbli | Moħbija |
Il-klassi .visible-print
teżisti wkoll iżda hija deprecata minn v3.2.0. Huwa bejn wieħed u ieħor ekwivalenti għal .visible-print-block
, ħlief b'każijiet speċjali addizzjonali għal <table>
elementi relatati.
Id-daqs tal-brawżer tiegħek jew tagħbija fuq apparati differenti biex tittestja l-klassijiet ta 'utilità li jirrispondu.
Marki ta' kontroll ħodor jindikaw li l-element huwa viżibbli fil-vetrina attwali tiegħek.
Hawnhekk, marki ħodor jindikaw ukoll li l-element huwa moħbi fil-vetrina attwali tiegħek.
Is-CSS ta' Bootstrap huwa mibni fuq Less, preproċessur b'funzjonalità addizzjonali bħal varjabbli, mixins, u funzjonijiet għall-kumpilazzjoni tas-CSS. Dawk li qed ifittxu li jużaw is-sors Inqas fajls minflok il-fajls CSS ikkumpilati tagħna jistgħu jagħmlu użu mill-varjabbli numerużi u mixins li nużaw fil-qafas kollu.
Il-varjabbli tal-grilja u l-mixins huma koperti fit-taqsima tas-sistema tal-Grid .
Bootstrap jista' jintuża f'mill-inqas żewġ modi: bis-CSS ikkumpilat jew bis-sors Less files. Biex tikkompila l-Inqas fajls, ikkonsulta t-taqsima Nibdew għal kif issettja l-ambjent tal-iżvilupp tiegħek biex tmexxi l-kmandi meħtieġa.
Għodod ta' kumpilazzjoni ta' partijiet terzi jistgħu jaħdmu ma' Bootstrap, iżda mhumiex appoġġjati mit-tim ewlieni tagħna.
Il-varjabbli jintużaw matul il-proġett kollu bħala mod biex jiġu ċentralizzati u jaqsmu l-valuri użati b'mod komuni bħall-kuluri, l-ispazjar jew il-munzell tat-tipa. Għal tqassim sħiħ, jekk jogħġbok ara l-Customizer .
Faċilment tagħmel użu minn żewġ skemi ta 'kuluri: skala griża u semantika. Kuluri fuq skala griża jipprovdu aċċess rapidu għal sfumaturi ta' iswed użati b'mod komuni filwaqt li s-semantiċi jinkludu diversi kuluri assenjati għal valuri kuntestwali sinifikanti.
Uża xi waħda minn dawn il-varjabbli tal-kulur kif inhuma jew assenjahom mill-ġdid għal varjabbli aktar sinifikanti għall-proġett tiegħek.
Ftit ta' varjabbli biex jippersonalizzaw malajr elementi ewlenin tal-iskeletru tas-sit tiegħek.
Faċilment stili r-rabtiet tiegħek bil-kulur it-tajjeb b'valur wieħed biss.
Innota li l- @link-hover-color
użi funzjoni, għodda oħra tal-biża 'minn Inqas, biex awtomaġikament toħloq il-kulur id-dritt hover. Tista' tuża darken
, lighten
, saturate
, u desaturate
.
Issettja faċilment it-tipa tiegħek, id-daqs tat-test, it-tmexxija, u aktar bi ftit varjabbli malajr. Bootstrap jagħmel użu minn dawn ukoll biex jipprovdi mixins tipografiċi faċli.
Żewġ varjabbli ta' malajr biex tippersonalizza l-post u l-isem tal-fajl tal-ikoni tiegħek.
Komponenti matul Bootstrap jagħmlu użu minn xi varjabbli default għall-iffissar ta 'valuri komuni. Hawn huma l-aktar użati komunement.
Il-mixins tal-bejjiegħ huma mixins biex jgħinu jappoġġaw browsers multipli billi jinkludu l-prefissi kollha rilevanti tal-bejjiegħ fis-CSS ikkumpilat tiegħek.
Irrisettja l-mudell tal-kaxxa tal-komponenti tiegħek b'mixin wieħed. Għall-kuntest, ara dan l- artikolu utli minn Mozilla .
Il-mixin huwa deprecated minn v3.2.0, bl-introduzzjoni ta 'Autoprefixer. Biex tippreserva l-kompatibilità b'lura, Bootstrap se jkompli juża l-mixin internament sakemm Bootstrap v4.
Illum il-browsers moderni kollha jappoġġjaw il- border-radius
proprjetà mhux prefissata. Bħala tali, m'hemm l-ebda .border-radius()
mixin, iżda Bootstrap jinkludi shortcuts biex jiġu arrotondati malajr żewġ kantunieri fuq naħa partikolari ta 'oġġett.
Jekk l-udjenza fil-mira tiegħek qed tuża l-aħħar u l-aqwa browsers u apparati, kun żgur li tuża biss il- box-shadow
proprjetà waħedha. Jekk għandek bżonn appoġġ għal apparati anzjani Android (pre-v4) u iOS (pre-iOS 5), uża l- mixin deprecated biex aqbad il- -webkit
prefiss meħtieġ.
Il-mixin huwa deprecated minn v3.1.0, peress li Bootstrap ma jappoġġjax uffiċjalment il-pjattaformi skaduti li ma jappoġġjawx il-proprjetà standard. Biex tippreserva l-kompatibilità b'lura, Bootstrap se jkompli juża l-mixin internament sakemm Bootstrap v4.
Kun żgur li tuża rgba()
kuluri fid-dellijiet tal-kaxxa tiegħek sabiex jitħalltu kemm jista 'jkun bla xkiel mal-isfond.
Mixins multipli għall-flessibilità. Issettja l-informazzjoni kollha tat-tranżizzjoni b'waħda, jew speċifika dewmien u tul separati kif meħtieġ.
Il-mixins huma deprecati minn v3.2.0, bl-introduzzjoni ta 'Autoprefixer. Biex tippreserva l-kompatibilità b'lura, Bootstrap se jkompli juża l-mixins internament sa Bootstrap v4.
Dawwar, iskala, ittraduċi (ċaqlaq), jew tgħawweġ kwalunkwe oġġett.
Il-mixins huma deprecati minn v3.2.0, bl-introduzzjoni ta 'Autoprefixer. Biex tippreserva l-kompatibilità b'lura, Bootstrap se jkompli juża l-mixins internament sa Bootstrap v4.
Mixin wieħed għall-użu tal-proprjetajiet kollha ta 'animazzjoni ta' CSS3 f'dikjarazzjoni waħda u mixins oħra għal proprjetajiet individwali.
Il-mixins huma deprecati minn v3.2.0, bl-introduzzjoni ta 'Autoprefixer. Biex tippreserva l-kompatibilità b'lura, Bootstrap se jkompli juża l-mixins internament sa Bootstrap v4.
Issettja l-opaċità għall-browsers kollha u ipprovdi filter
riżerva għal IE8.
Ipprovdi kuntest għall-kontrolli tal-formoli f'kull qasam.
Iġġenera kolonni permezz tas-CSS fi ħdan element wieħed.
Faċilment dawwar kwalunkwe żewġ kuluri fi gradjent fl-isfond. Ikseb aktar avvanzat u waqqaf direzzjoni, uża tliet kuluri, jew uża gradjent radjali. B'mixin wieħed ikollok is-sintassi kollha prefissati li jkollok bżonn.
Tista 'wkoll tispeċifika l-angolu ta' gradjent lineari standard b'żewġ kuluri:
Jekk għandek bżonn ta 'gradjent stil barber-stripe, li huwa faċli, wisq. Eżatt speċifika kulur wieħed u aħna ser overlay strixxa bajda trasluċida.
Up the ante u uża tliet kuluri minflok. Issettja l-ewwel kulur, it-tieni kulur, il-waqfien tal-kulur tat-tieni kulur (valur perċentwali bħal 25%), u t-tielet kulur b'dawn il-mixins:
Irjus up! Jekk qatt ikollok bżonn tneħħi gradjent, kun żgur li tneħħi kwalunkwe IE speċifiku filter
li jista 'jkollok żidt. Tista 'tagħmel dan billi tuża l- .reset-filter()
mixin flimkien background-image: none;
.
Mixins ta 'utilità huma mixins li jgħaqqdu proprjetajiet CSS li kieku ma jkunux relatati biex jiksbu għan jew kompitu speċifiku.
Tinsa li żżid class="clearfix"
ma 'kwalunkwe element u minflok żid il- .clearfix()
mixin fejn xieraq. Juża l- mikro clearfix minn Nicolas Gallagher .
Iċċentra malajr kwalunkwe element fil-ġenitur tiegħu. Jeħtieġ width
jew max-width
għandu jiġi stabbilit.
Speċifika d-dimensjonijiet ta 'oġġett aktar faċilment.
Ikkonfigura faċilment l-għażliet tad-daqs għal kwalunkwe textarea, jew kwalunkwe element ieħor. Defaults għall-imġieba normali tal-browser ( both
).
Aqta' t-test faċilment b'ellipsis b'mixin wieħed. Jeħtieġ li l-element ikun block
jew inline-block
livell.
Speċifika żewġ mogħdijiet tal-immaġni u d-dimensjonijiet tal-immaġni @1x, u Bootstrap jipprovdi mistoqsija tal-midja @2x. Jekk għandek ħafna immaġini x'tservi, ikkunsidra li tikteb is-CSS tal-immaġni tar-retina tiegħek manwalment f'mistoqsija waħda tal-midja.
Filwaqt li Bootstrap huwa mibni fuq Less, għandu wkoll port Sass uffiċjali . Aħna nżommuh f'repożitorju GitHub separat u nittrattaw l-aġġornamenti bi skript ta 'konverżjoni.
Peress li l-port Sass għandu repo separat u jservi udjenza kemmxejn differenti, il-kontenut tal-proġett ivarja ħafna mill-proġett prinċipali Bootstrap. Dan jiżgura li l-port Sass ikun kompatibbli ma' kemm jista' jkun sistemi bbażati fuq Sass.
Mogħdija | Deskrizzjoni |
---|---|
lib/ |
Kodiċi tal-ġemgħa Ruby (konfigurazzjoni Sass, Rails u Integrazzjonijiet tal-Compass) |
tasks/ |
Skripts tal-konvertitur (li jduru 'l fuq minn Less għal Sass) |
test/ |
Testijiet ta' kumpilazzjoni |
templates/ |
Manifest tal-pakkett tal-boxxla |
vendor/assets/ |
Sass, JavaScript, u fajls tat-tipa |
Rakefile |
Ħidmiet interni, bħal rake and convert |
Żur ir -repożitorju GitHub tal-port Sass biex tara dawn il-fajls fl-azzjoni.
Għal informazzjoni dwar kif tinstalla u tuża Bootstrap għal Sass, ikkonsulta l- readme tar- repożitorju GitHub . Huwa l-aktar sors aġġornat u jinkludi informazzjoni għall-użu mal-proġetti Rails, Compass, u Sass standard.