A 'tòiseachadh
Sealladh farsaing air Bootstrap, mar a luchdaich thu sìos agus a chleachdas tu, teamplaidean bunaiteach agus eisimpleirean, agus barrachd.
Sealladh farsaing air Bootstrap, mar a luchdaich thu sìos agus a chleachdas tu, teamplaidean bunaiteach agus eisimpleirean, agus barrachd.
Tha grunn dhòighean furasta aig Bootstrap (v3.3.7 an-dràsta) tòiseachadh gu sgiobalta, gach fear tarraingeach gu ìre sgil eadar-dhealaichte agus cùis cleachdaidh. Leugh troimhe gus faicinn dè a fhreagras air na feumalachdan sònraichte agad.
CSS, JavaScript, agus clòidean air an cur ri chèile agus air an lughdachadh. Chan eil docaichean no faidhlichean tùsail air an toirt a-steach.
Stòr Nas lugha, JavaScript, agus faidhlichean cruth-clò, còmhla ris na docaichean againn. Tha feum air nas lugha de cho-chruinneachadh agus beagan rèiteachaidh.
Bootstrap air a ghluasad bho Nas lugha gu Sass airson a thoirt a-steach gu furasta ann am pròiseactan Rails, Compass, no Sass a-mhàin.
Bidh na daoine thall aig jsDelivr gu gràsmhor a’ toirt taic CDN airson CSS agus JavaScript aig Bootstrap. Dìreach cleachd na ceanglaichean CDN Bootstrap seo.
Faodaidh tu cuideachd Bootstrap's Less, CSS, JavaScript, agus clòidean a stàladh agus a riaghladh a’ cleachdadh Bower :
Faodaidh tu cuideachd Bootstrap a stàladh a’ cleachdadh npm :
require('bootstrap')
luchdaichidh e na plugins jQuery aig Bootstrap air an nì jQuery. Chan bootstrap
eil am modal fhèin às-mhalairt dad. Faodaidh tu plugins jQuery Bootstrap a luchdachadh le làimh le bhith a’ luchdachadh nam /js/*.js
faidhlichean fo eòlaire àrd-ìre a’ phacaid.
Tha meata-dàta a bharrachd ann am Bootstrap package.json
fo na h-iuchraichean a leanas:
less
- slighe gu prìomh fhaidhle stòr Bootstrap Lessstyle
- slighe gu CSS neo-mhìnichte Bootstrap a chaidh a chuir ri chèile ro-làimh a’ cleachdadh nan roghainnean bunaiteach (gun ghnàthachadh)Faodaidh tu cuideachd Bootstrap's Less, CSS, JavaScript, agus clòidean a stàladh agus a stiùireadh le bhith a’ cleachdadh Sgrìobhaiche -ciùil :
Bidh Bootstrap a’ cleachdadh Autoprefixer gus dèiligeadh ri ro-leasachain reiceadair CSS . Ma tha thu a’ cur ri chèile Bootstrap bhon stòr Less/Sass aige agus gun a bhith a’ cleachdadh ar Gruntfile, feumaidh tu Autoprefixer fhilleadh a-steach don phròiseas togail agad fhèin. Ma tha thu a’ cleachdadh Bootstrap ro-ullaichte no a’ cleachdadh ar Gruntfile, cha leig thu leas a bhith draghail mu dheidhinn seo oir tha Autoprefixer air fhilleadh a-steach don Gruntfile againn mu thràth.
Faodar Bootstrap a luchdachadh sìos ann an dà chruth, anns am faigh thu na clàran agus na faidhlichean a leanas, a’ cruinneachadh ghoireasan cumanta gu loidsigeach agus a’ toirt seachad an dà chuid atharrachaidhean cruinnichte agus mion-mhìnichte.
Thoir an aire gu feum a h- uile plugan JavaScript jQuery a thoirt a-steach, mar a chithear san teamplaid tòiseachaidh . Bruidhinn ris an fheadhainn againnbower.json
gus faicinn dè na dreachan de jQuery a tha a’ faighinn taic.
Aon uair ‘s gu bheil thu air a luchdachadh sìos, unzip am pasgan teannachaidh gus structar (an cruth) Bootstrap fhaicinn. Chì thu rudeigin mar seo:
Is e seo an seòrsa Bootstrap as bunaitiche: faidhlichean ro-ullaichte airson an cleachdadh gu sgiobalta ann an cha mhòr pròiseact lìn sam bith. Bidh sinn a’ toirt seachad CSS agus JS ( bootstrap.*
) cruinnichte , a bharrachd air CSS agus JS ( bootstrap.min.*
). Tha mapaichean stòr CSS ( bootstrap.*.map
) rim faighinn airson an cleachdadh le innealan leasaiche brobhsairean sònraichte. Tha clòthan bho Glyphicons air an toirt a-steach, mar a tha cuspair roghainneil Bootstrap.
Tha luchdachadh sìos còd stòr Bootstrap a’ toirt a-steach CSS, JavaScript, agus so-mhaoin cruth-clò ro-làimh, còmhla ri source Less, JavaScript, agus sgrìobhainnean. Gu sònraichte, tha e a’ toirt a-steach na leanas agus barrachd:
Is e an less/
, js/
, agus fonts/
an còd tùsail airson na clòidean CSS, JS agus ìomhaigh againn (fa leth). Tha am dist/
pasgan a’ toirt a-steach a h-uile dad a tha air a liostadh san roinn luchdaich sìos ro-ullaichte gu h-àrd. Tha am docs/
pasgan a’ toirt a-steach an còd stòr airson na sgrìobhainnean againn, agus examples/
cleachdadh Bootstrap. A bharrachd air an sin, tha faidhle sam bith eile a tha air a ghabhail a-steach a’ toirt taic do phasganan, fiosrachadh cead, agus leasachadh.
Bidh Bootstrap a’ cleachdadh Grunt airson an t-siostam togail aige, le dòighean goireasach airson obrachadh leis an fhrèam. Seo mar a bhios sinn a’ cur ri chèile ar còd, a’ ruith dheuchainnean, agus barrachd.
Gus Grunt a stàladh, feumaidh tu an toiseach luchdachadh sìos agus stàladh node.js (a tha a 'gabhail a-steach npm). Tha npm a’ seasamh airson modalan pacaichte nód agus tha e na dhòigh air eisimeileachd leasachaidh a riaghladh tro node.js.
An uairsin, bhon loidhne-àithne:grunt-cli
cruinne le npm install -g grunt-cli
./bootstrap/
eòlaire root, an uairsin ruith npm install
. seallaidh npm air an package.json
fhaidhle agus cuiridh e gu fèin-ghluasadach na h-eisimeileachd ionadail riatanach a tha air an liostadh an sin.Nuair a bhios tu deiseil, bidh e comasach dhut na diofar òrdughan Grunt a chaidh a thoirt seachad bhon loidhne-àithne a ruith.
grunt dist
(Dìreach cuir CSS agus JavaScript ri chèile)Ag ath-nuadhachadh an /dist/
eòlaire le faidhlichean CSS agus JavaScript air an cur ri chèile agus air an lughdachadh. Mar neach-cleachdaidh Bootstrap, mar as trice is e seo an àithne a tha thu ag iarraidh.
grunt watch
(Coimhead)A’ coimhead air na faidhlichean stòr nas lugha agus gan ath-chur gu CSS gu fèin-ghluasadach nuair a shàbhaileas tu atharrachadh.
grunt test
(Ruith deuchainnean)A’ ruith JSHint agus a’ ruith na deuchainnean QUnit gun cheann ann am PhantomJS .
grunt docs
(Tog & deuchainn maoin nan docs)A’ togail agus a’ dèanamh deuchainn air CSS, JavaScript, agus maoin eile a thathas a’ cleachdadh nuair a thathar a’ ruith nan sgrìobhainnean gu h-ionadail tro bundle exec jekyll serve
.
grunt
(Tog gu tur a h-uile càil agus ruith deuchainnean)A’ cur ri chèile agus a’ lughdachadh CSS agus JavaScript, a’ togail làrach-lìn nan sgrìobhainnean, a’ ruith an dearbhaidh HTML5 an aghaidh nan docaichean, ag ath-nuadhachadh maoin Customizer, agus barrachd. Jekyll a dhìth . Mar as trice chan eil feum air ach ma tha thu a’ slaodadh air Bootstrap fhèin.
Ma thachras tu air duilgheadasan le bhith a’ stàladh eisimeileachd no a’ ruith òrdughan Grunt, an toiseach cuir às don /node_modules/
eòlaire a ghineadh le npm. An uairsin, ath-ruith npm install
.
Tòisich leis an teamplaid HTML bunaiteach seo, no atharraich na h-eisimpleirean seo . Tha sinn an dòchas gun gnàthaich thu na teamplaidean agus na h-eisimpleirean againn, gan atharrachadh a rèir do fheumalachdan.
Dèan lethbhreac den HTML gu h-ìosal gus tòiseachadh ag obair le glè bheag de sgrìobhainn Bootstrap.
Tog air an teamplaid bunaiteach gu h-àrd le mòran phàirtean aig Bootstrap. Tha sinn gad bhrosnachadh gus Bootstrap a ghnàthachadh agus atharrachadh a rèir feumalachdan do phròiseact fa leth.
Faigh an còd tùsail airson gach eisimpleir gu h-ìosal le bhith a ’ luchdachadh sìos an stòr Bootstrap . Gheibhear eisimpleirean anns an docs/examples/
eòlaire.
Chan eil dad ach na rudan bunaiteach: CSS agus JavaScript air an cur ri chèile còmhla ri soitheach.
Teamplaid fìor bhunasach a tha a’ toirt a-steach am bàr seòlaidh còmhla ri beagan susbaint a bharrachd.
Structar bunaiteach airson deas-bhòrd rianachd le bàr-taobh stèidhichte agus bàr seòlaidh.
Cruth cruth gnàthaichte agus dealbhadh airson soidhne sìmplidh ann an cruth.
Cruthaich bàr seòlaidh àbhaisteach le ceanglaichean reusanta. Cinn suas! Chan eil e ro chàirdeil do Safari.
Cuir dheth gu furasta freagairteachd Bootstrap a rèir na docaichean againn .
Is e Bootlint an inneal lìn oifigeil Bootstrap HTML. Bidh e gu fèin-obrachail a’ sgrùdadh grunn mhearachdan HTML cumanta ann an duilleagan-lìn a tha a’ cleachdadh Bootstrap ann an dòigh gu math “vanilla”. Tha co-phàirtean/widgets Vanilla Bootstrap ag iarraidh gum bi na pàirtean aca den DOM a’ cumail ri structaran sònraichte. Bidh Bootlint a’ dèanamh cinnteach gu bheil eisimpleirean de cho-phàirtean Bootstrap air HTML le structar ceart. Beachdaich air Bootlint a chur ris an inneal leasachaidh lìn Bootstrap agad gus nach bi gin de na mearachdan cumanta a’ cur maill air leasachadh a’ phròiseict agad.
Cum suas ris an fhiosrachadh as ùire mu leasachadh Bootstrap agus ruig a-mach don choimhearsnachd leis na goireasan feumail sin.
irc.freenode.net
seirbheisiche, anns an t-sianal ##bootstrap .twitter-bootstrap-3
.bootstrap
air pacaidean a bhios ag atharrachadh no a’ cur ri gnìomhachd Bootstrap nuair a bhios iad a’ cuairteachadh tro npm no dòighean lìbhrigidh coltach ris airson an lorg as motha.Faodaidh tu cuideachd @getbootstrap a leantainn air Twitter airson na gossip as ùire agus bhideothan ciùil sgoinneil.
Bidh Bootstrap ag atharrachadh do dhuilleagan gu fèin-ghluasadach airson diofar mheudan sgrion. Seo mar a chuireas tu am feart seo à comas gus am bi an duilleag agad ag obair mar an eisimpleir neo-fhreagairt seo .
<meta>
air a bheil iomradh anns na docaichean CSSwidth
air an .container
airson gach sreath clèithe le aon leud, mar eisimpleir width: 970px !important;
Dèan cinnteach gu bheil seo a’ tighinn às deidh an CSS àbhaisteach Bootstrap. Faodaidh tu roghainn a sheachnadh !important
le ceistean meadhanan no cuid de roghnaichear-fu..col-xs-*
clasaichean a bharrachd air, no an àite, feadhainn meadhanach/mòr. Na gabh dragh, bidh a’ ghriod inneal beag a bharrachd a ’dol gu gach rùn.Bidh feum agad fhathast air Respond.js airson IE8 (leis gu bheil na ceistean meadhanan againn fhathast ann agus feumar an làimhseachadh). Cuiridh seo à comas taobhan “làrach gluasadach” Bootstrap.
Tha sinn air na ceumannan seo a chuir an sàs mar eisimpleir. Leugh a chòd stòr gus na h-atharrachaidhean sònraichte a chaidh a chuir an gnìomh fhaicinn.
A 'coimhead ri imrich bho dhreach nas sine de Bootstrap gu v3.x? Thoir sùil air an stiùireadh imrich againn .
Tha Bootstrap air a thogail gus a bhith ag obair as fheàrr anns na brobhsairean deasg is gluasadach as ùire, a’ ciallachadh gum faodadh brobhsairean nas sine a bhith a’ taisbeanadh dealbhan de phàirtean sònraichte le stoidhle eadar-dhealaichte, ged a tha iad làn-ghnìomhach.
Gu sònraichte, tha sinn a’ toirt taic do na dreachan as ùire de na brobhsairean agus àrd-ùrlaran a leanas.
Chan eil brobhsairean eile a chleachdas an dreach as ùire de WebKit, Blink, no Gecko, ge bith an ann gu dìreach no tro API sealladh lìn an àrd-ùrlar, a’ faighinn taic shònraichte. Ach, bu chòir dha Bootstrap (sa mhòr-chuid de chùisean) taisbeanadh agus obrachadh gu ceart anns na brobhsairean sin cuideachd. Tha fiosrachadh taic nas sònraichte air a thoirt seachad gu h-ìosal.
San fharsaingeachd, tha Bootstrap a’ toirt taic do na dreachan as ùire de bhrobhsairean bunaiteach gach àrd-ùrlar. Thoir an aire nach eil taic ri brobhsairean progsaidh (leithid Opera Mini, modh Turbo Opera Mobile, UC Browser Mini, Amazon Silk).
Chrome | Firefox | Safari | |
---|---|---|---|
Android | Le taic | Le taic | Chan eil |
iOS | Le taic | Le taic | Le taic |
San aon dòigh, tha na dreachan as ùire den mhòr-chuid de bhrobhsairean deasg a’ faighinn taic.
Chrome | Firefox | Internet Explorer | Opera | Safari | |
---|---|---|---|---|---|
Mac | Le taic | Le taic | Chan eil | Le taic | Le taic |
Windows | Le taic | Le taic | Le taic | Le taic | Gun taic |
Air Windows, tha sinn a’ toirt taic do Internet Explorer 8-11 .
Airson Firefox, a bharrachd air an sgaoileadh stàbaill àbhaisteach as ùire, tha sinn cuideachd a’ toirt taic don dreach as ùire den Sgaoileadh Taic Leudaichte (ESR) de Firefox.
Gu neo-oifigeil, bu chòir do Bootstrap coimhead agus giùlan math gu leòr ann an Chromium agus Chrome airson Linux, Firefox airson Linux, agus Internet Explorer 7, a bharrachd air Microsoft Edge, ged nach eil iad a’ faighinn taic oifigeil.
Airson liosta de chuid de na mialan brobhsair a dh’ fheumas Bootstrap a dhol an sàs, faic ar Balla de bhiteagan brabhsair .
Tha Internet Explorer 8 agus 9 cuideachd a’ faighinn taic, ge-tà, thoir an aire nach eil cuid de fheartan CSS3 agus eileamaidean HTML5 a’ faighinn làn thaic bho na brobhsairean sin. A bharrachd air an sin, feumaidh Internet Explorer 8 Respond.js a chleachdadh gus taic a thoirt do cheist mheadhanan.
Feart | Internet Explorer 8 | Internet Explorer 9 |
---|---|---|
border-radius |
Gun taic | Le taic |
box-shadow |
Gun taic | Le taic |
transform |
Gun taic | Taic, le -ms ro -leasachan |
transition |
Gun taic | |
placeholder |
Gun taic |
Tadhail Am faod mi cleachdadh... airson mion-fhiosrachadh mu thaic bhrobhsair airson feartan CSS3 agus HTML5.
Bi faiceallach mu na h-uamhasan a leanas nuair a bhios tu a’ cleachdadh Respond.js anns na h-àrainneachdan leasachaidh is cinneasachaidh agad airson Internet Explorer 8.
Le bhith a’ cleachdadh Respond.js le CSS air aoigheachd air raon (fo) eadar-dhealaichte (mar eisimpleir, air CDN) feumar beagan rèiteachaidh a bharrachd. Faic na docaichean Respond.js airson mion-fhiosrachadh.
file://
Air sgàth riaghailtean tèarainteachd brabhsair, chan obraich Respond.js le duilleagan air am faicinn tron file://
phròtacal (mar nuair a dh’ fhosglas tu faidhle HTML ionadail). Gus feartan freagairteach ann an IE8 a dhearbhadh, thoir sùil air na duilleagan agad thairis air HTTP(S). Faic na docaichean Respond.js airson mion-fhiosrachadh.
@import
Chan eil Respond.js ag obair le CSS air a bheil iomradh tro @import
. Gu sònraichte, tha fios gu bheil cuid de rèiteachaidhean Drupal a’ cleachdadh @import
. Faic na docaichean Respond.js airson mion-fhiosrachadh.
Chan eil IE8 a’ toirt làn thaic box-sizing: border-box;
nuair a thèid a chur còmhla ri min-width
, max-width
, min-height
, no max-height
. Air an adhbhar sin, mar v3.0.1, chan eil sinn a’ cleachdadh tuilleadh max-width
air .container
s.
Tha cuid de dhuilgheadasan aig IE8 @font-face
nuair a thèid iad còmhla ri :before
. Bidh Bootstrap a’ cleachdadh a’ chothlamadh sin leis na Glyphicons aige. Ma tha duilleag air a thasgadh, agus air a luchdachadh às aonais na luchaige thairis air an uinneig (ie buail am putan ùrachaidh no luchdaich rudeigin ann an iframe) thèid an duilleag a thoirt seachad mus luchdaich an cruth-clò. Le bhith a’ dol thairis air an duilleag (corp) seallaidh e cuid de na h-ìomhaighean agus le bhith a’ gluasad thairis air na h-ìomhaighean a tha air fhàgail seallaidh sin iad sin cuideachd. Faic iris #13863 airson mion-fhiosrachadh.
Chan eil taic ri Bootstrap anns na seann mhodhan co-chòrdalachd Internet Explorer. Gus a bhith cinnteach gu bheil thu a’ cleachdadh am modh tairgse as ùire airson IE, smaoinich air an <meta>
taga iomchaidh a thoirt a-steach do na duilleagan agad:
Dearbhaich am modh sgrìobhainn le bhith a’ fosgladh na h-innealan deasbaid: brùth F12is thoir sùil air an “Modh Sgrìobhainn”.
Tha an taga seo air a ghabhail a-steach anns a h-uile sgrìobhainn agus eisimpleirean aig Bootstrap gus dèanamh cinnteach gum bi an tairgse as fheàrr anns gach dreach le taic de Internet Explorer.
Faic a’ cheist seo StackOverflow airson tuilleadh fiosrachaidh.
Chan eil Internet Explorer 10 ag eadar-dhealachadh leud inneal bho leud viewport , agus mar sin chan eil e a’ cur an sàs gu ceart na ceistean meadhanan ann an CSS Bootstrap. Mar as trice bhiodh tu dìreach air criomag sgiobalta de CSS a chuir ris gus seo a chàradh:
Ach, chan obraich seo airson innealan a tha a’ ruith dreachan Windows Phone 8 nas sine na Update 3 (aka GDR3) , leis gu bheil e ag adhbhrachadh gum bi innealan mar sin a’ sealltainn sealladh deasg sa mhòr-chuid an àite sealladh cumhang “fòn”. Gus dèiligeadh ri seo, feumaidh tu na CSS agus JavaScript a leanas a chur a-steach gus obrachadh timcheall a’ bhiast .
Airson tuilleadh fiosrachaidh agus stiùireadh cleachdaidh, leugh Windows Phone 8 agus Device-Width .
Mar cheann shuas, bidh sinn a’ toirt a-steach seo anns a h-uile sgrìobhainn agus eisimpleirean aig Bootstrap mar thaisbeanadh.
Bha beagan trioblaid aig an einnsean tairgse de dhreachan de Safari ro v7.1 airson OS X agus Safari airson iOS v8.0 leis an àireamh de dh'àiteachan deicheach a chaidh a chleachdadh anns na .col-*-1
clasaichean clèithe againn. Mar sin nam biodh 12 colbhan clèithe fa leth agad, bhiodh tu a’ mothachadh gun tàinig iad suas goirid an taca ri sreathan eile de cholbhan. A bharrachd air ùrachadh Safari / iOS, tha cuid de roghainnean agad airson dòighean-obrach:
.pull-right
ris a’ cholbh clèithe mu dheireadh agad gus an co-thaobhadh cruaidh-dheis fhaighinnTha taic airson overflow: hidden
an <body>
eileamaid gu math cuingealaichte ann an iOS agus Android. Chun na crìche sin, nuair a sgrolaicheas tu seachad air mullach no bonn modal ann an aon de na brobhsairean sin, <body>
tòisichidh an susbaint a’ gluasad. Faic bug Chrome #175502 (stèidhichte ann an Chrome v40) agus bug WebKit #153852 .
Mar iOS 9.3, fhad ‘s a tha modal fosgailte, ma tha suathadh tùsail gluasad-bodhaig taobh a-staigh crìoch teacsa <input>
no a <textarea>
, thèid an <body>
susbaint fon mhodal a sgrùdadh an àite a’ mhodal fhèin. Faic bug WebKit #153856 .
Cuideachd, thoir an aire ma tha thu a’ cleachdadh bàr seòlaidh stèidhichte no a’ cleachdadh cuir a-steach taobh a-staigh modal, tha buga tairgse aig iOS nach ùraich suidheachadh nan eileamaidean stèidhichte nuair a thèid am meur-chlàr brìgheil a phiobrachadh. Tha beagan dhòighean-obrach airson seo a’ toirt a-steach a bhith ag atharrachadh na h-eileamaidean agad gu position: absolute
no a’ toirt a-steach timer air fòcas gus feuchainn ris an t-suidheachadh a cheartachadh le làimh. Chan eil seo air a làimhseachadh le Bootstrap, agus mar sin tha e an urra riutsa co-dhùnadh dè am fuasgladh as fheàrr airson an tagradh agad.
Chan eil an .dropdown-backdrop
eileamaid air a chleachdadh air iOS anns an nav air sgàth cho iom-fhillte 'sa tha clàr-amais z. Mar sin, gus dropdowns a dhùnadh ann an navbars, feumaidh tu briogadh gu dìreach air an eileamaid a tha a’ tuiteam sìos (no eileamaid sam bith eile a loisgeas tachartas cliog ann an iOS ).
Tha gluasad dhuilleagan gu do-sheachanta a’ toirt seachad stuthan tairgse ann an cuid de cho-phàirtean, an dà chuid ann am Bootstrap agus an còrr den lìon. A rèir na cùise, is dòcha gum bi e comasach dhuinn a chàradh (lorg an toiseach agus an uairsin fosgail cùis ma tha feum air). Ach, tha sinn buailteach a bhith a’ seachnadh iad sin oir gu tric chan eil fuasgladh dìreach aca ach a-mhàin dòighean obrach meallta.
:hover
/ :focus
air fòn-làimheEadhon ged nach eil e comasach gluasad fìor air a ’mhòr-chuid de scrionaichean suathaidh, bidh a’ mhòr-chuid de bhrobhsairean gluasadach ag atharrais air taic gluasad agus a ’dèanamh :hover
“ steigeach ”. Ann am faclan eile, bidh :hover
stoidhlichean a ’tòiseachadh a’ cur a-steach às deidh dhaibh a bhith a ’cnagadh air eileamaid agus dìreach a’ stad a chuir a-steach às deidh don neach-cleachdaidh tapadh air eileamaid eile. Faodaidh seo toirt air stàitean Bootstrap :hover
a bhith “glic” gu neo-mhiannach air na brobhsairean sin. Bidh cuid de bhrobhsairean gluasadach cuideachd a’ dèanamh :focus
an aon rud steigeach. Aig an àm seo chan eil fuasgladh sìmplidh ann airson na cùisean sin ach a bhith a’ toirt air falbh stoidhlichean mar sin gu tur.
Eadhon ann an cuid de bhrobhsairean an latha an-diugh, faodaidh clò-bhualadh a bhith neo-àbhaisteach.
Gu sònraichte, a thaobh Chrome v32 agus ge bith dè na roghainnean iomaill, bidh Chrome a’ cleachdadh leud sealladh gu math nas cumhainge na meud pàipear corporra nuair a bhios e a’ fuasgladh cheistean meadhanan fhad ‘s a tha e a’ clò-bhualadh duilleag-lìn. Faodaidh seo leantainn gu griod beag a bharrachd Bootstrap a chuir an gnìomh gun dùil nuair a bhios e a’ clò-bhualadh. Faic cùis #12078 agus bug Chrome #273306 airson beagan fiosrachaidh. Ceumannan obrach a thathar a’ moladh:
@screen-*
caochladairean nas lugha gus am bi am pàipear clò-bhualadair agad air a mheas nas motha na cus beag.Cuideachd, mar Safari v8.0, .container
faodaidh leud-leud s toirt air Safari meud cruth-clò neo-àbhaisteach beag a chleachdadh nuair a thathar a’ clò-bhualadh. Faic #14868 agus bug WebKit #138192 airson tuilleadh fiosrachaidh. Is e aon fhuasgladh a dh’ fhaodadh a bhith ann airson seo an CSS a leanas a chur ris:
A-mach às a’ bhogsa, bidh Android 4.1 (agus eadhon fiosan nas ùire a rèir choltais) a’ dol leis an aplacaid Browser mar am brabhsair lìn àbhaisteach as fheàrr leotha (an taca ri Chrome). Gu mì-fhortanach, tha tòrr bhiteagan agus neo-chunbhalachd aig an aplacaid Browser le CSS san fharsaingeachd.
Air <select>
eileamaidean, cha sheall brabhsair stoc Android na smachdan taobh ma tha border-radius
agus / no border
air a chuir an sàs. (Faic a’ cheist StackOverflow seo airson mion-fhiosrachadh.) Cleachd a’ chriomag de chòd gu h-ìosal gus an CSS oilbheumach a thoirt air falbh agus thoir seachad e <select>
mar eileamaid gun stoidhle air brobhsair stoc Android. Bidh sniffing an neach-cleachdaidh a’ seachnadh eadar-theachd le brobhsairean Chrome, Safari agus Mozilla.
A bheil thu airson eisimpleir fhaicinn? Thoir sùil air an demo JS Bin seo.
Gus an t-eòlas as fheàrr a thoirt do sheann bhrobhsairean agus buggy, bidh Bootstrap a’ cleachdadh hacks brabhsair CSS ann an grunn àiteachan gus CSS sònraichte a chuimseachadh air dreachan brobhsair sònraichte gus obrachadh timcheall air bugaichean anns na brobhsairean fhèin. Tha e tuigseach gu bheil na hacks sin ag adhbhrachadh do luchd-dearbhaidh CSS gearan gu bheil iad neo-dhligheach. Ann an àite no dhà, bidh sinn cuideachd a’ cleachdadh feartan CSS sèididh nach eil fhathast làn àbhaisteach, ach tha iad sin air an cleachdadh dìreach airson àrdachadh adhartach.
Chan eil na rabhaidhean dearbhaidh sin gu diofar ann an cleachdadh leis gu bheil am pàirt neo-hacky den CSS againn a’ dearbhadh gu h-iomlan agus nach eil na cuibhreannan meallta a’ cur bacadh air obrachadh ceart a’ chuibhreann neo-hacky, agus mar sin carson a tha sinn a’ seachnadh nan rabhaidhean sònraichte sin a dh’aona ghnothach.
Tha rabhaidhean dearbhaidh HTML beag is neo-chinnteach aig na docaichean HTML againn mar an ceudna air sgàth ’s gu bheil sinn a’ toirt a-steach dòigh-obrach airson bug Firefox sònraichte .
Ged nach eil sinn gu h-oifigeil a’ toirt taic do plugins no tuilleadan treas-phàrtaidh sam bith, bidh sinn a’ tabhann beagan comhairle fheumail gus duilgheadasan a sheachnadh nad phròiseactan.
Tha cuid de bhathar-bog treas-phàrtaidh, a’ gabhail a-steach Google Maps agus Google Custom Search Engine, a’ strì ri Bootstrap air sgàth * { box-sizing: border-box; }
, riaghailt a tha ga fhàgail mar sin padding
nach toir buaidh air leud àireamhaichte deireannach eileamaid. Ionnsaich tuilleadh mu mhodail bogsa agus meud aig CSS Tricks .
A rèir a’ cho-theacsa, faodaidh tu a dhol thairis air mar a dh’ fheumar (Roghainn 1) no meud a’ bhogsa ath-shuidheachadh airson roinnean gu lèir (Roghainn 2).
Tha Bootstrap a’ leantainn inbhean lìn cumanta agus – le glè bheag de dh’ oidhirp a bharrachd – faodar a chleachdadh gus làraich a chruthachadh a bhios ruigsinneach dhaibhsan a tha a’ cleachdadh AT .
Ma tha mòran cheanglaichean anns an t-seòladh agad agus ma thig e ron phrìomh shusbaint san DOM, cuir Skip to main content
ceangal ris ron t-seòladh (airson mìneachadh sìmplidh, faic an artaigil Pròiseact A11Y seo air sgiobadh ceanglaichean seòlaidh ). Le bhith a’ cleachdadh a’ .sr-only
chlas cuiridh e am falach an ceangal sgip gu lèir, agus nì an .sr-only-focusable
clas cinnteach gum bi an ceangal ri fhaicinn aon uair ‘s gu bheil fòcas aige (airson luchd-cleachdaidh meur-chlàr le sealladh).
Air sgàth easbhaidhean / mialan ann an Chrome o chionn fhada (faic iris 262171 anns an rianadair bug Chromium ) agus Internet Explorer (faic an artaigil seo air ceanglaichean taobh a-staigh agus òrdugh fòcas ), feumaidh tu dèanamh cinnteach gu bheil targaid do cheangal sgiobadh tha e co-dhiù fòcas prògramaichte le bhith a’ cur tabindex="-1"
.
A bharrachd air an sin, is dòcha gum bi thu airson comharra fòcas follaiseach a chumail air an targaid (gu sònraichte leis gu bheil Chrome an-dràsta cuideachd a’ suidheachadh fòcas air eileamaidean le tabindex="-1"
nuair a thèid am briogadh leis an luchag) le #content:focus { outline: none; }
.
Thoir an aire gun toir am biast seo buaidh cuideachd air ceanglaichean in-duilleag sam bith eile a dh’ fhaodadh an làrach agad a bhith a’ cleachdadh, gan dèanamh gun fheum airson luchd-cleachdaidh meur-chlàr. Is dòcha gu bheil thu a’ beachdachadh air fuasgladh beàrn-stad coltach ris a chur ris a h-uile acair / aithnichear criomag ainmichte eile a bhios nan targaidean ceangail.
Nuair a bhios tu a’ neadachadh cinn ( <h1>
- <h6>
), bu chòir do phrìomh cheann-cinn na sgrìobhainn a bhith na <h1>
. Bu chòir do chinn às deidh sin feum loidsigeach a dhèanamh de <h2>
- <h6>
gus an urrainn do leughadairean sgrion clàr-innse a chruthachadh airson do dhuilleagan.
Ionnsaich tuilleadh aig HTML CodeSniffer agus Penn State's AccessAbility .
An-dràsta, tha cuid de na cothlamadh dath bunaiteach a tha rim faighinn ann am Bootstrap (leithid na diofar chlasaichean putan styled , cuid den chòd a’ soilleireachadh dathan a thathas a’ cleachdadh airson blocaichean còd bunaiteach , an clas neach-cuideachaidh .bg-primary
cùl-fhiosrachaidh co-theacsa , agus an dath ceangail bunaiteach nuair a thèid a chleachdadh air cùl geal) tha co-mheas eadar-dhealaichte ìosal (fon cho-mheas a thathar a’ moladh de 4.5: 1 ). Faodaidh seo duilgheadasan adhbhrachadh do luchd-cleachdaidh le lèirsinn ìosal no le dath dall. Is dòcha gu feumar na dathan bunaiteach sin atharrachadh gus an eadar-dhealachadh agus an leughadh a mheudachadh.
Tha Bootstrap air a leigeil ma sgaoil fo chead MIT agus tha e fo dhlighe-sgrìobhaidh 2016 Twitter. Air a ghoil sìos gu pìosan nas lugha, faodar a mhìneachadh leis na cumhaichean a leanas.
Tha an làn chead Bootstrap suidhichte ann an stòr a’ phròiseict airson tuilleadh fiosrachaidh.
Tha buill coimhearsnachd air sgrìobhainnean Bootstrap eadar-theangachadh gu diofar chànanan. Chan eil gin a’ faighinn taic oifigeil agus is dòcha nach bi iad an-còmhnaidh ùraichte.
Cha bhi sinn a' cuideachadh le bhith ag eagrachadh no a' cumail eadar-theangachaidhean, tha sinn dìreach a' ceangal riutha.
An do chrìochnaich thu eadar-theangachadh ùr no nas fheàrr? Fosgail iarrtas tarraing gus a chur ris an liosta againn.