Gɔmedzedze
Bootstrap ƒe wɔwɔfia, alesi woawɔ kɔpi ahazãe, mɔfiame veviwo kple kpɔɖeŋuwo, kple bubuwo.
Bootstrap ƒe wɔwɔfia, alesi woawɔ kɔpi ahazãe, mɔfiame veviwo kple kpɔɖeŋuwo, kple bubuwo.
Mɔ bɔbɔe ʋee aɖewo le Bootstrap (fifia v3.4.1) si dzi woato adze egɔme kaba, wo dometɔ ɖesiaɖe doa dzidzɔ na aɖaŋu ƒe ɖoƒe kple zazã ƒe nɔnɔme vovovo. Xlẽ nu tso eŋu nàkpɔ nusiwo sɔ na wò nuhiahiã tɔxɛwo.
Woƒo CSS, JavaScript, kple nuŋɔŋlɔdzesiwo nu ƒu heɖe wo dzi kpɔtɔ. Wometsɔ docs alo dzɔtsoƒe faɛl gbãtɔ aɖeke kpe ɖe eŋu o.
Source Less, JavaScript, kple font files, kpakple míaƒe docs. Ebia Less compiler kple ɖoɖo aɖewo.
Bootstrap trɔ tso Less yi Sass be woatsɔe ade Rails, Compass, alo Sass-ko ƒe dɔwo me bɔbɔe.
Folks le jsDelivr dɔmenyotɔe na CDN kpekpeɖeŋu na Bootstrap ƒe CSS kple JavaScript. Ðeko nàzã jsDelivr ƒe kadodo siawo.
Àte ŋu aɖo Bootstrap ƒe Less, CSS, JavaScript, kple ŋɔŋlɔdzesiwo hã ɖe wò kɔmpiuta dzi ahakpɔ wo dzi to Bower zazã me :
Àteŋu aɖo Bootstrap hã to npm zazã me :
require('bootstrap')
atsɔ Bootstrap ƒe jQuery ƒe kpeɖeŋutɔwo katã ade jQuery nu la dzi. Module bootstrap
la ŋutɔ meɖoa naneke ɖe duta o. Àteŋu atsɔ asi akɔ Bootstrap ƒe jQuery ƒe kpeɖeŋutɔawo ɖekaɖeka to /js/*.js
faɛl siwo le akpaa ƒe nyatakakadzraɖoƒe si le ɖoƒe kɔkɔtɔ te la dede me.
Bootstrap ƒe package.json
metadata bubu aɖewo le safui siwo gbɔna te:
less
- mɔ si yi Bootstrap ƒe Less dzɔtsoƒe faɛl vevitɔ gbɔstyle
- mɔ si yi Bootstrap ƒe CSS si womeɖe ɖe vovo o si woƒo ƒu do ŋgɔ to ɖoɖo gbãtɔwo zazã me (womewɔ tɔtrɔ aɖeke le eŋu o)Àte ŋu aɖo Bootstrap ƒe Less, CSS, JavaScript, kple ŋɔŋlɔdzesiwo hã ɖe wò kɔmpiuta dzi ahakpɔ wo dzi to Composer zazã me :
Bootstrap zãa Autoprefixer tsɔ wɔa dɔ kple CSS dzralawo ƒe ŋgɔdonyawo . Ne èle Bootstrap ƒom tso eƒe Less/Sass dzɔtsoƒe eye mèle míaƒe Gruntfile zãm o la, ahiã be wò ŋutɔ nàtsɔ Autoprefixer ade wò xɔtutu ƒe ɖoɖoa me. Ne èle Bootstrap si woƒo ƒu do ŋgɔ zãm alo le míaƒe Gruntfile zãm la, mehiã be nàtsi dzi ɖe esia ŋu o elabena wotsɔ Autoprefixer de míaƒe Gruntfile la me xoxo.
Woateŋu awɔ Bootstrap ƒe kɔpi le nɔnɔme eve me, siwo me nàkpɔ agbalẽdzraɖoƒe kple faɛl siwo gbɔna le, aƒo nunɔamesi siwo bɔ la nu ƒu ɖekae le susu me eye wòana tɔtrɔ siwo woƒo ƒu kple esiwo woɖe ɖe vovo siaa.
Taflatse de dzesii be JavaScript ƒe kpeɖeŋutɔwo katã hiã be woatsɔ jQuery ade eme, abe alesi woɖee fia le gɔmedzedze ƒe nɔnɔmetata me ene . Kpɔ mía ŋkumebower.json
be nàkpɔ jQuery ƒe tɔtrɔ siwo wodo alɔe.
Ne ènya kɔpi ko la, ɖe agbalẽdzraɖoƒe si woƒo ƒu la ƒe zip be nàkpɔ Bootstrap (si woƒo ƒu) ƒe wɔwɔme. Àkpɔ nane si le abe esia ene:
Esia nye Bootstrap ƒe nɔnɔme vevitɔ kekeake: faɛl siwo woƒo ƒu do ŋgɔ hena zazã kabakaba le nyatakakadzraɖoƒe ƒe dɔ ɖesiaɖe kloe me. Míenaa CSS kple JS ( bootstrap.*
) siwo woƒo ƒu, kpakple CSS kple JS ( bootstrap.min.*
) siwo woƒo ƒu heɖe wo dzi kpɔtɔ. CSS dzɔtsoƒe ƒe anyigbatatawo ( bootstrap.*.map
) li woate ŋu azã kple web-browser aɖewo ƒe dɔwɔnu siwo wotsɔ wɔa dɔe. Ŋɔŋlɔdzesi siwo tso Glyphicons me le eme, abe alesi Bootstrap ƒe tanya si woate ŋu atia la hã le eme ene.
Bootstrap ƒe dzɔtsoƒe ƒe kɔpi ƒe kɔpi la lɔ CSS, JavaScript, kple nuŋɔŋlɔ ƒe nunɔamesi siwo woƒo ƒu do ŋgɔ la ɖe eme, kpakple dzɔtsoƒe Less, JavaScript, kple nuŋlɔɖiwo. Ne míagblɔe tututu la, nusiwo gbɔna kple bubuwo le eme:
, less/
, js/
kple fonts/
nye míaƒe CSS, JS, kple dzesi ŋɔŋlɔdzesiwo ƒe dzɔtsoƒe ƒe nuŋɔŋlɔ (le wo nɔewo yome). dist/
Nusianu si woŋlɔ ɖe akpa si nye kɔpi siwo woƒo ƒu do ŋgɔ le etame la le agbalẽdzraɖoƒea . Míaƒe docs/
nuŋlɔɖiwo ƒe dzɔtsoƒe ƒe nuŋɔŋlɔ, kple examples/
Bootstrap zazã ƒe nuŋlɔɖiwo le agbalẽdzraɖoƒea. Le ema godo la, faɛl bubu ɖesiaɖe si le eme la naa kpekpeɖeŋu na agbalẽviwo, mɔɖegbalẽ ŋuti nyatakakawo, kple ŋgɔyiyi.
Bootstrap zãa Grunt na eƒe xɔtuɖoɖo, kple mɔnu siwo sɔ na dɔwɔwɔ kple ɖoɖowɔɖia. Enye alesi míeƒoa míaƒe kɔdawo nu ƒu, wowɔa dodokpɔwo, kple bubuwo.
Be nàda Grunt ɖe wò kɔmpiuta dzi la, ele be nàwɔ node.js (si me npm hã le) ƒe kɔpi gbã eye nàdae ɖe wò kɔmpiuta dzi. npm tsi tre ɖi na node packaged modules eye wònye mɔnu si dzi woato akpɔ ŋgɔyiyi ƒe ŋuɖoɖowo dzi to node.js dzi.
Emegbe, tso sededea ƒe fli dzi la:grunt-cli
xexeame katã kple npm install -g grunt-cli
./bootstrap/
directory la me, emegbe nàƒu du npm install
. npm alé ŋku ɖe package.json
faɛl la ŋu eye wòaɖo teƒea ƒe nusiwo dzi woanɔ te ɖo siwo hiã siwo woŋlɔ ɖe afima la ɖe eme le eɖokui si.Ne èwu enu la, àteŋu awɔ Grunt sedede vovovo siwo wona tso sedede fli la dzi.
grunt dist
(Ðeko nàƒo CSS kple JavaScript nu ƒu)Gbugbɔ wɔ /dist/
agbalẽdzraɖoƒea kple CSS kple JavaScript faɛl siwo woƒo ƒu eye woɖe wo dzi kpɔtɔ. Abe Bootstrap zãla ene la, zi geɖe la, esiae nye sedede si nèdi.
grunt watch
(Kpɔ)Eléa ŋku ɖe Less dzɔtsoƒe faɛlwo ŋu eye wògaƒoa wo nu ƒu ɖe CSS me le eɖokui si ɣesiaɣi si nèdzra tɔtrɔ aɖe ɖo.
grunt test
(Du dodokpɔwo) .Ewɔa JSHint eye wòwɔa QUnit dodokpɔwo le web-kpɔkplɔ ŋutɔŋutɔwo me akpe na Karma .
grunt docs
(Tu & do docs ƒe nunɔamesiwo kpɔ)Tua CSS, JavaScript, kple nunɔamesi bubu siwo wozãna ne wole nuŋlɔɖiawo wɔm le teƒea to bundle exec jekyll serve
.
grunt
(Tu nusianu keŋkeŋ eye nàwɔ dodokpɔwo)Eƒoa CSS kple JavaScript nu ƒu heɖea wo dzi kpɔtɔna, etua nuŋlɔɖiwo ƒe nyatakakadzraɖoƒea, ewɔa HTML5 ƒe kpeɖodzinu la ɖe nuŋlɔɖiawo ŋu, egbugbɔa Customizer ƒe nunɔamesiwo wɔa, kple bubuwo. Ebia be Jekyll . Zi geɖe la, ne èle hacking le Bootstrap ŋutɔ dzi ko hafi wòhiã.
Ne èdo go kuxiwo le nusiwo dzi nànɔ te ɖo ɖoɖo alo Grunt sededewo zazã me la, gbã la, tutu /node_modules/
agbalẽdzraɖoƒe si npm wɔ. Emegbe, gbugbɔ wɔe npm install
.
Dze egɔme kple HTML ƒe nɔnɔmetata vevi sia, alo trɔ asi le kpɔɖeŋu siawo ŋu . Míele mɔ kpɔm be àtrɔ asi le míaƒe nɔnɔmetatawo kple kpɔɖeŋuwo ŋu, atrɔ asi le wo ŋu wòasɔ ɖe wò hiahiãwo nu.
Kpɔ HTML si le ete la ƒe kɔpi be nàdze dɔwɔwɔ gɔme kple Bootstrap nuŋlɔɖi suetɔ kekeake.
Tu ɖe gɔmedzedze ƒe nɔnɔmetata si le etame dzi kple Bootstrap ƒe akpa geɖewo. Míele dzi dem ƒo na wò be nàtrɔ asi le Bootstrap ŋu eye nàtrɔ asi le eŋu wòasɔ ɖe wò dɔ ɖekaɖeka ƒe nuhiahiãwo nu.
Na kpɔɖeŋu ɖesiaɖe si le ete ƒe dzɔtsoƒe ƒe nuŋɔŋlɔ to Bootstrap nudzraɖoƒea ƒe kɔpi wɔwɔ me . Woate ŋu akpɔ kpɔɖeŋuwo le docs/examples/
agbalẽdzraɖoƒea.
Naneke meli o negbe nu veviawo ko: woƒo CSS kple JavaScript nu ƒu kpe ɖe nugoe aɖe ŋu.
Agbalẽvi ƒe ɖoɖo si wowɔ ɖe ɖoɖo nu kple eƒe nɔnɔme na dzesi bɔbɔe aɖe le agbalẽvia me.
Wɔ navbar si wowɔ ɖe ɖoɖo nu kple kadodo siwo sɔ. Tawo yi dzi! Menye Safari xɔlɔ̃wɔwɔtɔe akpa o.
Bootlint nye Bootstrap HTML linter dɔwɔnu si wozãna le se nu. Ekpɔa HTML vodada geɖe siwo bɔ le nyatakakadzraɖoƒe siwo le Bootstrap zãm le "vanilla" mɔ si sɔ nu la me le eɖokui si. Vanilla Bootstrap ƒe akpawo/widgetwo bia be woƒe DOM ƒe akpawo nawɔ ɖeka kple xɔtuɖoɖo aɖewo. Bootlint léa ŋku ɖe eŋu be Bootstrap ƒe akpawo ƒe kpɔɖeŋuwo le HTML si woɖo nyuie. Bu Bootlint tsɔtsɔ kpe ɖe wò Bootstrap web development toolchain ŋu ale be vodada siwo bɔ dometɔ aɖeke nagaɖe wò dɔa ƒe ŋgɔyiyi dzi akpɔtɔ o.
Miyi edzi mianya nu tso Bootstrap ƒe ŋgɔyiyi ŋu eye miatsɔ dɔwɔnu siawo siwo akpe ɖe ame ŋu la aɖo nutoa me tɔwo gbɔ.
irc.freenode.net
server la me, le ##bootstrap channel .twitter-bootstrap-3
.bootstrap
le agbalẽvi siwo trɔa asi le Bootstrap ƒe dɔwɔwɔ ŋu alo kpena ɖe eŋu ne wole mamam to npm alo mɔ̃ siwo sɔ kplii dzi hena nusiwo ŋu woate ŋu ake ɖo wu.Àteŋu adze @getbootstrap hã yome le Twitter dzi hena nyatoƒoetoto yeyewo kple hadzidzi video dziŋɔwo.
Bootstrap trɔa asi le wò axawo ŋu le eɖokui si ɖe screen ƒe lolome vovovowo nu. Alesi nàwɔ nuwɔametɔe le nɔnɔme sia me ale be wò axaa nawɔ dɔ abe kpɔɖeŋu sia si mewɔa dɔ o ene enye si .
<meta>
woyɔ le CSS ƒe nuŋlɔɖiwo me la ɖawidth
on the .container
ŋu na grid tier ɖesiaɖe kple kekeme ɖeka, le kpɔɖeŋu me width: 970px !important;
Kpɔ egbɔ be esia va le Bootstrap CSS si woɖo ɖi la megbe. Àte ŋu aƒo asa na !important
kple media biabia alo selector-fu aɖewo..col-xs-*
klasswo tsɔ kpe ɖe, alo ɖe, titina/gãwo teƒe. Mègatsi dzi o, mɔ̃a ƒe grid si le sue wu la dzidzena ɖe tameɖoɖo kplikpaawo katã nu.Àhiã Respond.js kokoko na IE8 (esi míaƒe nyadzɔdzɔgblɔmɔnuwo ƒe nyabiasewo gakpɔtɔ li eye wòhiã be woawɔ dɔ tso wo ŋu). Esia na be Bootstrap ƒe "asitelefon nyatakakadzraɖoƒe" ƒe akpawo mewɔa dɔ o.
Míewɔ afɔɖeɖe siawo ŋudɔ le kpɔɖeŋu aɖe me. Xlẽ eƒe dzɔtsoƒe ƒe nuŋɔŋlɔa be nàkpɔ tɔtrɔ tɔxɛ siwo wowɔ.
Èle didim be yeaʋu tso Bootstrap ƒe tɔtrɔ xoxo aɖe me ayi v3.x mea? Kpɔ míaƒe ʋuʋu ŋuti mɔfiamegbalẽa ɖa .
Wotu Bootstrap be wòawɔ dɔ nyuie wu le kɔmpiuta kple asitelefon dzi nyatakakadzraɖoƒe yeyetɔwo me, si fia be nyatakakadzraɖoƒe xoxowo ate ŋu aɖe akpa aɖewo ƒe gɔmeɖeɖe siwo ƒe atsyã to vovo, togbɔ be wowɔa dɔ bliboe hã la afia.
Etɔxɛe la, míedoa alɔ web-browser kple mɔ̃ siwo gbɔna la ƒe tata yeyewo .
Womedoa alɔ web-browser bubu siwo zãa WebKit, Blink, alo Gecko ƒe tata yeyetɔ, eɖanye tẽ alo to mɔ̃a ƒe web view API dzi tẽ o. Gake ele be Bootstrap (le go geɖe me) naɖee afia eye wòawɔ dɔ nyuie le web-browser siawo hã me. Wona kpekpeɖeŋu ŋuti nyatakaka siwo ku ɖe eŋu koŋ le ete.
Le goawo katã me la, Bootstrap doa alɔ mɔ̃ gã ɖesiaɖe ƒe web-browser gbãtɔwo ƒe tata yeyewo. De dzesii be womewɔa dɔ le proxy browserwo (abe Opera Mini, Opera Mobile ƒe Turbo mode, UC Browser Mini, Amazon Silk ene) ŋu o.
Chrome | Firefox ƒe ƒuƒoƒo | Safari ƒe ƒuƒoƒo | |
---|---|---|---|
Android dzi | Wodo alɔe | Wodo alɔe | N/A |
iOS ƒe nyatakakawo | Wodo alɔe | Wodo alɔe | Wodo alɔe |
Nenema ke wodoa alɔ kɔmpiutadziɖoɖowo ƒe akpa gãtɔ ƒe tata yeyetɔwo hã.
Chrome | Firefox ƒe ƒuƒoƒo | Internet dzi Nyatakakadzraɖoƒe | Opera ƒe fefewɔƒe | Safari ƒe ƒuƒoƒo | |
---|---|---|---|---|---|
Mac | Wodo alɔe | Wodo alɔe | N/A | Wodo alɔe | Wodo alɔe |
Fesrewo ƒe fesrewo | Wodo alɔe | Wodo alɔe | Wodo alɔe | Wodo alɔe | Womedo alɔe o |
Le Windows dzi la, míewɔa dɔ le Internet Explorer 8-11 ŋu.
Le Firefox gome la, tsɔ kpe ɖe normal stable release yeyetɔ ŋu la, míedoa alɔ Firefox ƒe Extended Support Release (ESR) ƒe tata yeyetɔ hã.
Le mɔ si mele se nu o nu la, ele be Bootstrap nadze nyuie eye wòawɔ nu nyuie le Chromium kple Chrome na Linux, Firefox na Linux, kple Internet Explorer 7, kpakple Microsoft Edge me, togbɔ be womeda asi ɖe wo dzi le se nu o hã.
Ne èdi web-browser ƒe vodada aɖewo siwo wòle be Bootstrap nawɔ avu kplii la, kpɔ míaƒe Gli si ku ɖe browser ƒe vodadawo ŋu .
Internet Explorer 8 kple 9 hã doa alɔ, ke hã, taflatse nyae be CSS3 ƒe nɔnɔme aɖewo kple HTML5 ƒe akpa aɖewo mewɔa dɔ bliboe to web-browser siawo dzi o. Tsɔ kpe ɖe eŋu la, Internet Explorer 8 bia be woazã Respond.js be wòana media biabia ƒe kpekpeɖeŋu nawɔ dɔ.
Ŋutinu | Internet dzi Nyatakakadzraɖoƒe 8 | Internet dzi Nyatakakadzraɖoƒe 9 |
---|---|---|
border-radius |
Womedo alɔe o | Wodo alɔe |
box-shadow |
Womedo alɔe o | Wodo alɔe |
transform |
Womedo alɔe o | Wodo alɔe, kple -ms ŋgɔdonya |
transition |
Womedo alɔe o | |
placeholder |
Womedo alɔe o |
Yi Ðe mate ŋu azãe... hena numeɖeɖe tsitotsito tso browser ƒe kpekpeɖeŋunana CSS3 kple HTML5 ƒe nɔnɔmewo ŋu.
Kpɔ nyuie le nuxlɔ̃ame siwo gbɔna ŋu ne èle Respond.js zãm le wò Internet Explorer 8 ƒe ŋgɔyiyi kple ewɔwɔ ƒe nɔnɔmewo me.
Respond.js zazã kple CSS si woɖo ɖe (le kpɔɖeŋu me, le CDN dzi) bia ɖoɖo bubu aɖewo. Kpɔ Respond.js docs hena numeɖeɖe bubuwo.
file://
Le browser ƒe dedienɔnɔ ƒe sewo ta la, Respond.js mewɔa dɔ kple axa siwo wokpɔ to file://
ɖoɖowɔɖia dzi o (abe ne èle HTML faɛl si le mia gbɔ ʋum ene). Be nàdo dɔwɔwɔ ƒe nɔnɔmewo kpɔ le IE8 me la, kpɔ wò axawo to HTTP(S) dzi. Kpɔ Respond.js docs hena numeɖeɖe bubuwo.
@import
Respond.js mewɔa dɔ kple CSS si ŋu woƒo nu tsoe to @import
. Vevietɔ la, wonya be Drupal ƒe ɖoɖo aɖewo zãa @import
. Kpɔ Respond.js docs hena numeɖeɖe bubuwo.
IE8 mewɔa dɔ bliboe box-sizing: border-box;
ne wotsɔe kpe ɖe min-width
, max-width
, min-height
, alo max-height
. Le susu ma ta la, tso v3.0.1 dzi la, míegazãnɛ max-width
le .container
s.
IE8 le nya aɖewo me kple @font-face
ne wotsɔe kpe ɖe :before
. Bootstrap zãa ƒoƒo ɖekae ma kple eƒe Glyphicons. Ne wotsɔ axa aɖe de cache me, eye wotsɔe da ɖe fesrea dzi mouse manɔmee (si fia be zi refresh ƒe abɔta alo tsɔ nane de iframe me) ekema axa la axɔ hafi ŋɔŋlɔdzesi la adze. Ne ètsɔ asi ɖo axaa (ŋutilãa) dzi la, dzesiawo dometɔ aɖewo afia eye ne ètsɔ asi ɖo dzesi susɔeawo dzi la, esiawo hã afia. Kpɔ tata #13863 hena numeɖeɖe bubuwo.
Womewɔa dɔ le bootstrap ŋu le Internet Explorer ƒe dɔwɔwɔ ƒe nɔnɔme xoxoawo me o. Be nàka ɖe edzi be yele gɔmeɖeɖe ƒe mɔnu yeyetɔ zãm na IE la, bu eŋu kpɔ be <meta>
yeade dzesi si sɔ la wò axawo me:
Ðo kpe nuŋlɔɖi ƒe nɔnɔme dzi to dɔwɔnu siwo wotsɔ ɖɔa vodadawo ɖo ʋuʋu me: te F12eye nàlé ŋku ɖe "Nuŋlɔɖi ƒe Nɔnɔme" ŋu.
Wode dzesi sia Bootstrap ƒe nuŋlɔɖiwo kple kpɔɖeŋuwo katã me be woakpɔ egbɔ be woɖe egɔme nyuie wu le Internet Explorer ƒe tɔtrɔ ɖesiaɖe si wodo alɔe me.
Kpɔ StackOverflow biabia sia hena nyatakaka bubuwo.
Internet Explorer 10 medea vovototo mɔ̃ ƒe kekeme kple nukpɔkpɔ ƒe kekeme dome o , eye to esia me la, mewɔa nyadzɔdzɔgblɔmɔ̃ ƒe biabiawo ŋudɔ nyuie le Bootstrap ƒe CSS me o. Zi geɖe la, ɖeko nàtsɔ CSS ƒe akpa aɖe akpe ɖe eŋu kabakaba atsɔ aɖɔ esia ɖo:
Ke hã, esia mewɔa dɔ na mɔ̃ siwo zãa Windows Phone 8 ƒe tɔtrɔ siwo do xoxo wu Update 3 (si woyɔna be GDR3) , elabena enaa mɔ̃ mawo ɖea kɔmpiuta dzi nukpɔkpɔ si ƒe akpa gãtɔ fiana le esi teƒe be woaɖe "telefon" ƒe nukpɔkpɔ kpui aɖe afia. Be nàkpɔ esia gbɔ la, ahiã be nàde CSS kple JavaScript siwo gbɔna la eme be nàte ŋu akpɔ vodadaa gbɔ .
Ne èdi nyatakaka bubuwo kple mɔfiame siwo ku ɖe eŋudɔwɔwɔ ŋu la, xlẽ Windows Phone 8 kple Device-Width .
Abe tagbɔsesẽ ene la, míetsɔ esia de Bootstrap ƒe nuŋlɔɖiwo kple kpɔɖeŋuwo katã me abe wɔwɔfia ene.
Safari ƒe tɔtrɔ siwo do ŋgɔ na v7.1 na OS X kple Safari na iOS v8.0 ƒe gɔmeɖeɖe mɔ̃a kpɔ kuxi aɖewo le teƒe ewolia siwo wozã le míaƒe .col-*-1
grid klasswo me ƒe xexlẽme ŋu. Eyata ne grid sɔti ɖekaɖeka 12 le asiwò la, àde dzesii be wova kpuie ne wotsɔe sɔ kple sɔti ƒe fli bubuwo. Tsɔ kpe ɖe Safari/iOS ƒe tɔtrɔ ŋu la, tiatia aɖewo le asiwò hena dɔwɔwɔwo:
.pull-right
ɖe wò grid column mamlɛtɔ ŋu be nàkpɔ hard-right ƒe ɖoɖowɔwɔKpekpeɖeŋu na overflow: hidden
le <body>
element la dzi se ɖe afi aɖe ŋutɔ le iOS kple Android me. Be nàte ŋu awɔ esia la, ne èʋu modal aɖe ƒe tame alo ete le mɔ̃ mawo ƒe web-browserwo dometɔ aɖe me la, <body>
emenyawo adze ʋuʋu gɔme. Kpɔ Chrome ƒe vodada #175502 (woɖɔe ɖo le Chrome v40 me) kple WebKit ƒe vodada #153852 .
<input>
Tso iOS 9.3 dzi la, esime modal aɖe le ʋuʋu ɖi la, ne agbalẽxatsaxatsa ƒe dzesi ƒe asikaka gbãtɔ le nuŋɔŋlɔ alo a ƒe liƒo me la, woaʋu <textarea>
nya <body>
siwo le modal la te ɖe modal la ŋutɔ teƒe. Kpɔ WebKit ƒe vodada #153856 .
Azɔ hã, de dzesii be ne èle navbar si woɖo ɖi zãm alo nèle nyawo tsɔtsɔ de eme zãm le modal me la, gɔmeɖeɖe ƒe vodada aɖe le iOS ŋu si mewɔa asitɔtrɔ le nusiwo woɖo ɖi ƒe nɔƒe ŋu ne wodze virtual keyboard la gɔme o. Dɔwɔwɔ ʋee aɖewo na esia dometɔ aɖewoe nye wò akpawo ƒe tɔtrɔ ɖe position: absolute
alo yɔyɔ ɣeyiɣidzidzenu le susu dzi be nàdze agbagba aɖɔ teƒea ɖo kple asi. Esia mekpɔa Bootstrap gbɔ o, eyata wò ŋutɔ gbɔe wòtso be nàtso nya me le egbɔkpɔnu si nyo na wò dɔwɔɖoɖoa ŋu.
Womezãa .dropdown-backdrop
element la le iOS le nav me o le z-indexing ƒe sesẽ ta. Eyata, be nàtu nusiwo le navbars me la, ele be nàzi nusiwo le tsia dzi la dzi tẽ (alo nu bubu ɖesiaɖe si atɔ dzo nudzɔdzɔ si le iOS me ).
Axa ƒe lolome dzi ɖeɖe kpɔtɔ ɖea gɔmeɖeɖe ƒe asinudɔwɔwɔwo fiana godoo le akpa aɖewo me, le Bootstrap kple nyatakakadzraɖoƒea ƒe akpa mamlɛa siaa me. Le nyaa nu la, míate ŋu aɖɔe ɖo (di gbã eye emegbe nàʋu nya aɖe ne ehiã). Ke hã, míedina be míaŋe aɖaba aƒu esiawo dzi elabena zi geɖe la, egbɔkpɔnu aɖeke mele wo si tẽ o negbe hacky workarounds ko.
:hover
/ :focus
le asitelefon dziTogbɔ be hovering ŋutɔŋutɔ mateŋu adzɔ le touchscreen akpa gãtɔ dzi o hã la, asitelefon dzi browser akpa gãtɔ srɔ̃a hovering ƒe kpekpeɖeŋu eye wowɔa :hover
"sticky". Ne míagblɔe bubui la, :hover
atsyãwo dzea dɔwɔwɔ gɔme ne wozi element aɖe dzi vɔ eye ne zãla la ƒo nu bubu aɖe vɔ ko hafi wodzudzɔa dɔwɔwɔ. Esia ateŋu ana Bootstrap ƒe :hover
nɔnɔmewo nazu "atsi" le mɔ si medze o nu le web-browser mawo tɔgbe dzi. Asitelefon dzi web-browser aɖewo hã naa nu :focus
léna ɖe nu ŋu nenema ke. Fifia la, nya siawo gbɔ kpɔkpɔ bɔbɔe aɖeke meli o negbe atsyã mawo ɖeɖeɖa keŋkeŋ ko.
Le egbegbe web-browser aɖewo gɔ̃ hã me la, agbalẽtata ate ŋu anye nusi me susu mele o.
Vevietɔ, tso Chrome v32 dzi eye metsɔ le margin ƒe ɖoɖowo me o, Chrome zãa nukpɔkpɔ ƒe kekeme si le kpuie ŋutɔ wu pepa ŋutɔŋutɔ ƒe lolome ne ele nyadzɔdzɔgblɔmɔnuwo ƒe nyabiasewo gbɔ kpɔm esime wòle nyatakakadzraɖoƒe aɖe tam. Esia ate ŋu ana Bootstrap ƒe grid sue si sɔ gbɔ wu la nawɔ dɔ le vome ne ele agbalẽ tam. Kpɔ tata #12078 kple Chrome ƒe vodada #273306 hena numeɖeɖe aɖewo. Dɔwɔwɔ siwo wodo ɖa be woatsɔ akpɔ egbɔe:
@screen-*
Less ƒe tɔtrɔwo ƒe asixɔxɔwo ŋu ale be woabu wò agbalẽtamɔ̃ ƒe pepa be elolo wu sue ŋutɔ.Azɔ hã, tso Safari v8.0 dzi la, fixed-width .container
s ateŋu ana Safari nazã ŋɔŋlɔdzesi sue aɖe si mebɔ o ne ele agbalẽ tam. Kpɔ #14868 kple WebKit ƒe vodada #138192 hena numeɖeɖe bubuwo. Esia gbɔ kpɔnu ɖeka si woate ŋu azãe nye CSS si gbɔna la tsɔtsɔ kpee:
Le aɖaka la me la, Android 4.1 (kple edze abe nu yeye aɖewo gɔ̃ hã siwo woɖe ɖe go ene) ɖoa wo ɖe Browser dɔwɔnua abe nyatakakadzraɖoƒe si nètia ene (si to vovo na Chrome). Nublanuitɔe la, vodada geɖe le Browser dɔwɔnua ŋu eye mewɔ ɖeka kple CSS le goawo katã me o.
Le <select>
elements dzi la, Android stock browser la maɖe axadzidziɖuɖuwo afia nenye be a aɖe li border-radius
eye/alo border
wozãe. (Kpɔ StackOverflow biabia sia hena numeɖeɖe bubuwo.) Zã kɔda ƒe akpa aɖe si le ete nàtsɔ aɖe CSS si do dziku la ɖa eye nàɖee afia <select>
abe nusi womewɔ atsyã na o ene le Android stock browser la dzi. Zãla ƒe dɔwɔƒea ƒe ʋeʋẽ lilili ƒoa asa na Chrome, Safari, kple Mozilla ƒe nyatakakadzraɖoƒewo ƒe nudede eme.
Àdi be yeakpɔ kpɔɖeŋu aɖea? Kpɔ JS Bin ƒe wɔwɔfia sia ɖa.
Be woakpɔ nuteƒekpɔkpɔ nyuitɔ kekeake na web-browser xoxowo kple esiwo me vodada le la, Bootstrap zãa CSS browser hacks le teƒe geɖe tsɔ ɖoa taɖodzinu na CSS tɔxɛwo ɖe web-browser ƒe tɔtrɔ aɖewo ŋu be woate ŋu awɔ dɔ tso vodada siwo le web-browserawo ŋutɔ me ŋu. Gɔmesese le eŋu be hack siawo nana CSS validators toa nyatoƒoe be yewomele eteƒe o. Le teƒe eve aɖewo la, míezãa Bleeding-edge CSS features siwo womeɖo ɖe ɖoɖo nu bliboe haɖe o hã, gake wozãa esiawo hena ŋgɔyiyi vivivi ɖeɖeko.
Nuxlɔ̃ame siawo siwo wotsɔ ɖo kpe edzi la mehiã le nuwɔna me o elabena míaƒe CSS ƒe akpa si menye hacky o la ɖoa kpe edzi bliboe eye akpa siwo nye hacky la medoa kplamatse akpa si menye hacky o ƒe dɔwɔwɔ nyuie o, eyatae míeɖonɛ koŋ ŋea aɖaba ƒua nuxlɔ̃ame siawo koŋ dzi ɖo.
Míaƒe HTML nuŋlɔɖiwo hã le HTML ƒe kpeɖodzi ƒe nuxlɔ̃ame aɖewo siwo mele vevie o eye womehiã o la le esi míetsɔ Firefox ƒe vodada aɖe gbɔ kpɔnu aɖe de eme ta .
Togbɔ be míedoa alɔ ame etɔ̃lia ƒe kpeɖeŋutɔ alo kpeɖeŋutɔ aɖeke le se nu o hã la, míeɖoa aɖaŋu nyui aɖewo be wòakpe ɖe ŋuwò nàƒo asa na kuxi siwo ate ŋu ado mo ɖa le wò dɔwo me.
Ame etɔ̃lia ƒe kɔmpiuta dɔwɔɖoɖo aɖewo, siwo dometɔ aɖewoe nye Google Maps kple Google Custom Search Engine, tsi tre ɖe Bootstrap ŋu le * { box-sizing: border-box; }
, se aɖe si na wòle nenema padding
mekpɔa ŋusẽ ɖe akpa aɖe ƒe kekeme mamlɛtɔ si wobu akɔntae dzi o ta. Srɔ̃ nu geɖe tso aɖaka ƒe kpɔɖeŋu kple lolome ŋu le CSS Tricks .
Le nya siwo ƒo xlãe nu la, àte ŋu atrɔ asi le eŋu alesi nèhiãe (Tiatia 1) alo nàgbugbɔ aɖo aɖaka ƒe lolome na nuto blibowo (Tiatia 2).
Bootstrap zɔna ɖe nyatakakadzraɖoƒe ƒe dzidzenu siwo bɔ dzi eye—ne wodze agbagba boo aɖeke kpee o—woate ŋu azãe atsɔ awɔ nyatakakadzraɖoƒe siwo dzi amesiwo zãa AT ate ŋu akpɔ .
Ne kadodo geɖe le wò mɔfiamegbalẽa me eye wòdo ŋgɔ na nya vevi siwo le DOM la me la, ke tsɔ Skip to main content
kadodo aɖe kpee do ŋgɔ na mɔfiameawo (hena numeɖeɖe bɔbɔe la, kpɔ A11Y Project ƒe nyati sia si ku ɖe skip navigation links ŋu ). Klas la zazã .sr-only
aɣla skip kadodoa le nukpɔkpɔ me, eye .sr-only-focusable
klass la akpɔ egbɔ be kadodoa va dzena ne wonya ɖo ŋku edzi ko (na keyboard zãla siwo kpɔa nu).
Le gbɔdzɔgbɔdzɔ/nu gbegblẽ siwo li ɣeyiɣi didi aɖee nye sia le Chrome me (kpɔ tata 262171 le Chromium bug tracker ) kple Internet Explorer (kpɔ nyati sia le axaa me kadodowo kple ɖoɖo si dzi nàlé ŋku ɖo ŋu ), ahiã be nàkpɔ egbɔ be wò skip kadodoa ƒe taɖodzinue nye nye ɖoɖowɔɖi si dzi woate ŋu alé ŋku ɖo ya teti to tabindex="-1"
.
Tsɔ kpe ɖe eŋu la, àte ŋu atɔ te ŋkuléleɖenuŋu ƒe dzesi si wokpɔna ɖe taɖodzinua dzi tẽ (vevietɔ fifia esime Chrome hã ɖoa susu ɖe nuawo ŋu fifia kple tabindex="-1"
ne wotsɔ mouse ƒo wo dzi) kple #content:focus { outline: none; }
.
De dzesii be vodada sia akpɔ ŋusẽ ɖe axaa dzi kadodo bubu ɖesiaɖe si wò nyatakakadzraɖoƒea ate ŋu azã hã dzi, si ana viɖe aɖeke manɔ wo ŋu na keyboard zãlawo o. Àteŋu abu eŋu be yeatsɔ stop-gap fix ma tɔgbe akpe ɖe anchors / fragment identifiers bubu siwo katã ŋkɔ le ŋu siwo wɔa dɔ abe kadodo ƒe taɖodzinuwo ene.
Ne èle tanyawo ( <h1>
- <h6>
) ƒom la, ele be wò nuŋlɔɖi ƒe tanya vevitɔ nanye <h1>
. Ele be tanya siwo akplɔe ɖo nawɔ <h2>
- <h6>
ale be screen readers nate ŋu awɔ emenyawo ƒe kplɔ̃ na wò axawo.
Srɔ̃ nu geɖe le HTML CodeSniffer kple Penn State ƒe AccessAbility .
Fifia, amadede ƒokpli gbãtɔ aɖewo siwo li le Bootstrap me (abe atsyã vovovoawo ƒe abɔta ƒe hatsotsowo, kɔda ƒe amadede aɖewo siwo te gbe ɖe kɔda ƒe mɔxenu veviwo dzi , nya .bg-primary
siwo ƒo xlã megbe kpeɖeŋutɔ ƒe hatsotso, kple kadodo ƒe amadede si woɖo ɖi ne wozãe le megbe ɣi dzi) ƒe vovototo ƒe xexlẽme le sue (si le 4.5:1 ƒe xexlẽme si wokafu la te ). Esia ate ŋu ahe kuxiwo vɛ na ezãla siwo ƒe ŋkuwo mekpɔa nu nyuie o alo amesiwo ƒe amadede mekpɔa nu nyuie o. Ðewohĩ ahiã be woatrɔ asi le amadede siawo siwo woɖo ɖi ŋu be woƒe vovototo kple nuxexlẽ nadzi ɖe edzi.
Bootstrap do le MIT ƒe mɔɖegbalẽ te eye wònye nutata ƒe gomenɔamesi 2019 Twitter. Ne woɖae wòzu akpa suewo la, woate ŋu atsɔ nɔnɔme siwo gbɔna aɖɔe.
Bootstrap ƒe mɔɖegbalẽ bliboa le dɔa ƒe nudzraɖoƒe hena nyatakaka bubuwo.
Nutoa me tɔwo ɖe Bootstrap ƒe nuŋlɔɖiwo gɔme ɖe gbe vovovowo me. Womeda asi ɖe wo dometɔ aɖeke dzi le se nu o eye ɖewohĩ womanɔ ɣeyiɣi nyuitɔ dzi ɣesiaɣi o.
Míekpe asi ɖe ɖoɖowɔwɔ ɖe gbegɔmeɖeɖewo ŋu alo wo xɔxɔ ŋu o, ɖeko míedoa ka kpli wo.
Èwu gɔmeɖeɖe yeye alo esi nyo wu nua? Ʋu he biabia aɖe be nàtsɔe akpe ɖe míaƒe xexlẽdzesiwo ŋu.