Ka baara daminɛ
Bootstrap lajɛba, a telesarseli ni a baaracogo, a misali jɔnjɔnw ani misaliw, ani fɛn wɛrɛw.
Bootstrap lajɛba, a telesarseli ni a baaracogo, a misali jɔnjɔnw ani misaliw, ani fɛn wɛrɛw.
Bootstrap (sisan v3.4.1) bɛ ni fɛɛrɛ nɔgɔman damadɔ ye walasa ka daminɛ joona, u kelen-kelen bɛɛ bɛ mɔgɔ ɲɛnajɛ ni seko ni dɔnko hakɛ ni baarakɛcogo wɛrɛ ye. Aw ye kalan kɛ ka tɛmɛ walasa k’a dɔn fɛn min bɛ bɛn aw mago kɛrɛnkɛrɛnnenw ma.
CSS, JavaScript ani sɛbɛnnibolow lajɛlenw ani u fitininw. Docs walima source file fɔlɔ si tɛ don a kɔnɔ.
Source Less, JavaScript, ani font files, ka fara an ka docs kan. A bɛ Less compiler ani setup dɔw de wajibiya.
Bootstrap wulila ka bɔ Less la ka taa Sass la walasa ka don nɔgɔya la Rails, Compass, walima Sass-only porozɛw kɔnɔ.
Mɔgɔ minnu bɛ jsDelivr kan, olu bɛ CDN dɛmɛ ni nɛɛma ye Bootstrap ka CSS ni JavaScript kan. Baara kɛ ni nin jsDelivr jɛgɛnw ye dɔrɔn.
Aw bɛ se fana ka Bootstrap ka Less, CSS, JavaScript ani sɛbɛnnibolow sigi sen kan ani k’u ɲɛnabɔ ni Bower ye :
Aw bɛ se fana ka Bootstrap in sigi sen kan ni npm ye :
require('bootstrap')
bɛna Bootstrap ka jQuery fɛnw bɛɛ doni jQuery fɛn kan. Module bootstrap
yɛrɛ tɛ foyi bɔ kɛnɛ kan. Aw bɛ se ka Bootstrap ka jQuery plugins kelen-kelen bɛɛ doni bolo la ni aw ye /js/*.js
filenw doni pake ka sanfɛla ɲɛbila jukɔrɔ.
Bootstrap's package.json
kɔnɔ, metadata wɛrɛw bɛ yen minnu bɛ nin kilisi ninnu jukɔrɔ:
less
- sira min bɛ taa Bootstrap ka Less source fileba lastyle
- sira min bɛ taa Bootstrap ka CSS la min ma dɔgɔya min labɛnna ka kɔn ni sigicogo kɔrɔw ye (labɛnni tɛ kɛ) .Aw bɛ se fana ka Bootstrap ka Less, CSS, JavaScript ani sɛbɛnnibolow sigi sen kan ani k’u ɲɛnabɔ ni Composer ye :
Bootstrap bɛ baara kɛ ni Autoprefixer ye walasa ka CSS feerekɛlaw ka ɲɛfɔlisenw ɲɛnabɔ . N'i bɛ Bootstrap Dabɔ a ka Less/Sass bɔyɔrɔ la ani n'i tɛ baara Kɛ n'an ka Gruntfile ye, i yɛrɛ ka kan ka Autoprefixer Dòn i ka jɔli taabolo la. N'i bɛ baara Kɛ ni Bootstrap ye min labɛnna kaban walima n'i bɛ baara Kɛ n'an ka Gruntfile ye, i man kan ka hami o la bari Autoprefixer Dònna an ka Gruntfile kɔnɔ kaban.
Bootstrap bɛ se ka telesarse cogo fila la, i bɛ nin ɲɛbilasɛbɛnw ni dosiye ninnu sɔrɔ minnu kɔnɔ, ka nafolo jɛlenw fara ɲɔgɔn kan cogo la min bɛ bɛn hakili ma ani ka fɛn caman ɲɔgɔnnaw di minnu dalajɛlen don ani minnu dɔgɔyalen don.
Aw k’a dɔn ko JavaScript sɛgɛsɛgɛlikɛlanw bɛɛ bɛ jQuery de wajibiya ka don a kɔnɔ, i n’a fɔ a jiralen bɛ cogo min na daminɛcogo la . Aw ye anw lajɛbower.json
walasa k’a dɔn jQuery bɔko minnu bɛ dɛmɛ.
Ni i ye a telesarse, i ka foli min sɛgɛsɛgɛlen don, i ka o zipu bɔ walasa ka Bootstrap (min lajɛlen) jɔcogo ye. I bɛna fɛn dɔ ye min bɛ i n’a fɔ nin:
Nin ye Bootstrap suguya jɔnjɔnba ye: dosiye minnu labɛnna ka kɔn walasa ka baara kɛ ni u ye teliya la ɛntɛrinɛti porozɛ suguya bɛɛ la. An bɛ CSS ni JS ( bootstrap.*
) lajɛlenw di, ka fara CSS ni JS ( ) lajɛlenw kan ani minnu bɛ dɔgɔya bootstrap.min.*
. CSS source maps ( bootstrap.*.map
) bɛ sɔrɔ ka baara kɛ ni navigatɛri dɔw ka baarakɛminɛnw ye minnu bɛ baara kɛ ni u ye. Glyphicons ka sɛbɛnnibolow bɛ sɔrɔ a kɔnɔ, i n’a fɔ Bootstrap barokun min bɛ se ka sugandi.
Bootstrap source code telesarseli kɔnɔ, CSS, JavaScript ani font nafolo minnu labɛnna ka kɔn, olu bɛ sɔrɔ, ka fara source Less, JavaScript ani sɛbɛnw kan. Kɛrɛnkɛrɛnnenya la, ninnu ni fɛn wɛrɛw bɛ a kɔnɔ:
, less/
, js/
ani fonts/
ye an ka CSS, JS ani ikomi sɛbɛnnibolow bɔyɔrɔ ye (u kelen-kelen bɛɛ). Fɛn dist/
o fɛn bɛ sɔrɔ telesarseli yɔrɔ la min sɛbɛnna ka kɔn sanfɛ, o bɛɛ bɛ sɔrɔ o foli kɔnɔ. Foli in docs/
kɔnɔ, an ka sɛbɛnniw ka source code bɛ yen, ani examples/
Bootstrap baarakɛcogo. O tɛmɛnen kɔ, dosiye wɛrɛ o dosiye min bɛ a kɔnɔ, o bɛ dɛmɛ di pakew, lase kunnafoniw, ani yiriwali ma.
Bootstrap bɛ baara Kɛ ni Grunt ye a ka jɔli siratigɛ la, ni fɛɛrɛ nɔgɔmanw ye baara la ni karamɔgɔya ye. O ye an bɛ an ka kode lajɛ cogo min na, ka sɛgɛsɛgɛliw kɛ, ani fɛn wɛrɛw.
Walasa ka Grunt in sigi sen kan, i ka kan ka fɔlɔ ka node.js (npm bɛ min kɔnɔ) telesarse k’a sigi sen kan. npm kɔrɔ ye node packaged modules ye wa a ye yiriwali dantigɛliw ɲɛnabɔcogo ye node.js fɛ.
O kɔfɛ, ka bɔ cikan yɔrɔ la:grunt-cli
diɲɛ kɔnɔ ni npm install -g grunt-cli
./bootstrap/
directory la, o kɔ aw bɛ boli npm install
. npm bɛna package.json
dosiye lajɛ ani ka sigida dantigɛli wajibiyalenw sigi a yɛrɛma minnu kofɔlen bɛ yen.Ni a dafara, i bɛ se ka Grunt cikan suguya minnu di ka bɔ cikan yɔrɔ la, i bɛ se ka olu baara.
grunt dist
(CSS ni JavaScript lajɛ dɔrɔn)A bɛ /dist/
ɲɛbilasɛbɛn in labɛn kokura ni CSS ni JavaScript filenw ye minnu lajɛlen don ani minnu dɔgɔyara. I n’a fɔ Bootstrap baarakɛla, a ka c’a la, nin ye cikan ye i b’a fɛ min na.
grunt watch
(Mɔnturu)A bɛ Less source files lajɛ ani k’u labɛn kokura a yɛrɛma CSS kɔnɔ tuma o tuma n’i ye fɛn dɔ Changer.
grunt test
(Boli sɛgɛsɛgɛliw)JSHint bɛ baara kɛ ani ka QUnit sɛgɛsɛgɛliw kɛ navigatɔrɔ lakikaw kɔnɔ k' a sababu kɛ Karma ye .
grunt docs
(Ka docs nafolomafɛnw jɔ & ka kɔrɔbɔ)A bɛ CSS, JavaScript ani nafolo wɛrɛw jɔ ani k’u kɔrɔbɔ minnu bɛ kɛ ni sɛbɛnw bɛ baara kɛ sigida la bundle exec jekyll serve
.
grunt
(Aw bɛ fɛn bɛɛ jɔ tigitigi ani ka sɛgɛsɛgɛliw kɛ)A bɛ CSS ni JavaScript Lajɛ ani k’a Dɔgɔya, ka sɛbɛnniw ka siti in jɔ, ka HTML5 sɛgɛsɛgɛlikɛlan baara ka Kɛɲɛ ni docs ye, ka Customizer nafolo Labɛn kokura, ani fɛn wɛrɛw. A bɛ Jekyll de wajibiya . A ka c'a la, a ka kan dɔrɔn n'i bɛ hack Kɛ Bootstrap yɛrɛ kan.
Ni aw ye gɛlɛyaw sɔrɔ dependencies (daɲɛw) sigili la walima Grunt cikanw baara la, aw bɛ fɔlɔ /node_modules/
ka npm ka directory (daɲɛgafe) bɔ yen. O kɔfɛ, i ka segin ka npm install
baara kɛ .
A daminɛ ni nin HTML misali jɔnjɔn in ye, walima ka nin misaliw sɛmɛntiya . An jigi b’a kan ko aw bɛna an ka jatebɔlanw ni misaliw labɛn ka kɛɲɛ ni aw magow ye.
HTML min bɛ duguma, o kopi kɛ walasa ka baara daminɛ ni Bootstrap sɛbɛn fitinin ye.
Aw bɛ jɔ ni jatebɔlan jɔnjɔn ye sanfɛ ni Bootstrap ka yɔrɔ caman ye. An b’aw jija aw ka Bootstrap kɛ ka kɛɲɛ ni aw ka porozɛ kelen-kelen bɛɛ magow ye.
misali bɛɛ lajɛlen sɔrɔyɔrɔ sɔrɔ jukɔrɔ ni Bootstrap marayɔrɔ telesarseli ye . Misaliw bɛ se ka sɔrɔ docs/examples/
gafe ɲɛbilasɛbɛn kɔnɔ.
Aw bɛ navbar ni carousel kɛ ka kɛɲɛ ni aw yɛrɛ sago ye, o kɔ aw bɛ yɔrɔ kura dɔw fara a kan.
Bulɔgu labɛncogo nɔgɔman min bɛ kɛ ni kulu fila ye ni taamasiyɛnw ye minnu bɛ kɛ ka kɛɲɛ ni mɔgɔw sago ye, a kuncɛcogo ani a suguya.
Navbar ladamulen dɔ dabɔ ni jɛgɛnsira jolenw ye. Kungolow bɛ wuli! A tɛ Safari terikɛ kojugu.
Bootlint ye Bootstrap HTML linter baarakɛminɛn ofisiyali ye. A bɛ HTML fili caman Sɛgɛsɛgɛ a yɛrɛma ɛntɛrinɛti yɔrɔw la minnu bɛ baara Kɛ ni Bootstrap ye "vanilla" cogo la min bɛ Se ka Kɛ. Vanilla Bootstrap ka yɔrɔw/widgetw b’a ɲini u ka DOM yɔrɔw fɛ u ka bɛn ni sigicogo dɔw ye. Bootlint bɛ a lajɛ ni Bootstrap yɔrɔw misaliw ye HTML labɛn ka ɲɛ. Aw ye jateminɛ kɛ ka Bootlint fara aw ka Bootstrap ɛntɛrinɛti yiriwali baarakɛminɛnw kan walasa fili minnu bɛ kɛ tuma caman na, olu si kana aw ka porozɛ yiriwali sumaya.
Aw ka to kunnafoni na Bootstrap yiriwali kan ani ka se sigidamɔgɔw ma ni nin dɛmɛnanw ye.
irc.freenode.net
sèrwɛri kɔnɔ, ##bootstrap kanal kɔnɔ .twitter-bootstrap-3
ye .bootstrap
ye pakew kan minnu bɛ Bootstrap baarakɛcogo Lakodɔn walima k’a Fàra a kan n’u bɛ tila-tila npm fɛ walima o ɲɔgɔnna fɛnw lasecogo fɛ walasa ka se ka Sɔrɔ kosɛbɛ.Aw bɛ se fana ka tugu @getbootstrap kɔ Twitter kan walasa ka kumakan labanw ni dɔnkilida videyo kabakomaw sɔrɔ.
Bootstrap bɛ i ka ɲɛw bɛrɛbɛn a yɛrɛma ka kɛɲɛ ni ɛkran hakɛ suguya caman ye. Nin ye nin baarakɛcogo in balicogo ye walasa i ka ɲɛ ka baara kɛ i n'a fɔ nin misali min tɛ jaabi di .
<meta>
min kofɔlen bɛ CSS docs kɔnɔ, o bɔ yenwidth
on the .container
for each grid tier ni bonya kelen ye, misali la width: 970px !important;
Aw ye aw jija nin na Bootstrap CSS default kɔfɛ. Aw bɛ se ka aw yɛrɛ tanga !important
ni media ɲininkaliw ye walima selector-fu dɔw..col-xs-*
kalanw ye ka fara, walima u nɔ na, cɛmancɛ/kɔrɔbaw kan. Aw kana aw hakili ɲagami, extra-small device grid bɛ sɛgɛsɛgɛli kɛ ka se resolutions bɛɛ ma.I mago bɛ Respond.js la hali bi IE8 kama (k’a masɔrɔ an ka kunnafonidilanw ɲininkaliw bɛ yen hali bi wa u ka kan ka baara kɛ). O bɛ Bootstrap "mobile site" fanw bali.
An ye nin wale ninnu waleya misali dɔ kan. A ka source code kalan walasa ka fɛn kɛrɛnkɛrɛnnenw ye minnu bɛ waleya.
Aw b’a fɛ ka wuli ka bɔ Bootstrap kɔrɔ dɔ la ka taa v3.x la wa? Aw ye an ka mɔgɔw ka bɔnɔgɔla gafe lajɛ .
Bootstrap jɔra walasa a ka baara kɛ ka ɲɛ tabali ni mobili navigatɔrɔ labanw na, o kɔrɔ ye ko navigatɛri kɔrɔw bɛ se ka yɔrɔ dɔw jiracogo jira cogo wɛrɛ la, hali ni u bɛ baara kɛ kosɛbɛ.
Kɛrɛnkɛrɛnnenya la, an bɛ dɛmɛ don nin navigatɛriw ni plateformes nataw la minnu bɛ bɔ kura la .
Navigatɛri wɛrɛ minnu bɛ baara kɛ ni WebKit, Blink, walima Gecko kura ye, a kɛra k’a ɲɛsin u yɛrɛ ma walima a kɛra plateforme ka web view API fɛ, olu tɛ dɛmɛ k’a jɛya. Nka, Bootstrap ka kan (a ka c’a la) ka jira ani ka baara kɛ ka ɲɛ o navigatɛriw fana na. Dɛmɛ kunnafoni kɛrɛnkɛrɛnnen wɛrɛw bɛ sɔrɔ jukɔrɔ.
A ka c’a la, Bootstrap bɛ dɛmɛ don plateforme belebele kelen-kelen bɛɛ ka navigatɔrɔ defaults (navigatɛriw) labanw na. A kɔlɔsi ko proxy navigatɔrɔw (i n’a fɔ Opera Mini, Opera Mobile ka Turbo mode, UC Browser Mini, Amazon Silk) tɛ se ka baara kɛ.
Chrome ye | Firefox ye | Safari ye | |
---|---|---|---|
Android kan | A bɛ dɛmɛ sɔrɔ | A bɛ dɛmɛ sɔrɔ | N/A ye |
iOS ye | A bɛ dɛmɛ sɔrɔ | A bɛ dɛmɛ sɔrɔ | A bɛ dɛmɛ sɔrɔ |
O cogo kelen na, tabali-navigatɛri fanba ka bɔko labanw bɛ dɛmɛ.
Chrome ye | Firefox ye | Ɛntɛrinɛti Explorer | Opera ye | Safari ye | |
---|---|---|---|---|---|
Mac ye | A bɛ dɛmɛ sɔrɔ | A bɛ dɛmɛ sɔrɔ | N/A ye | A bɛ dɛmɛ sɔrɔ | A bɛ dɛmɛ sɔrɔ |
Fenɛtiriw | A bɛ dɛmɛ sɔrɔ | A bɛ dɛmɛ sɔrɔ | A bɛ dɛmɛ sɔrɔ | A bɛ dɛmɛ sɔrɔ | A tɛ dɛmɛ sɔrɔ |
Windows kan, an bɛ Internet Explorer 8-11 dɛmɛ .
Firefox ta fan fɛ, ka fara normal stable bɔko laban kan, an bɛ Firefox ka Extended Support Release (ESR) bɔko laban fana dɛmɛ.
O cogo la, Bootstrap ka kan ka ɲɛ ani k’a yɛrɛ Kɛ koɲuman Chromium ni Chrome la Linux kama, Firefox la Linux kama, ani Internet Explorer 7 la, ani Microsoft Edge fana na, hali n’u ma Dɛmɛ foroba la.
Walasa ka Bootstrap ka kan ka sɛgɛsɛgɛli kɛ ni navigatɔrɔn ka bug dɔw ye, aw ye an ka Wall of browser bugs lajɛ .
Internet Explorer 8 ani 9 fana bɛ dɛmɛ, nka, aw k’a dɔn ko CSS3 nafama dɔw ani HTML5 fɛn dɔw tɛ dɛmɛ bɛrɛbɛrɛ o navigatɔrɔw fɛ. Ka fara o kan, Internet Explorer 8 bɛ Respond.js baara wajibiya walasa ka kunnafonidilanw ɲinini dɛmɛni kɛ.
Suguya | Ɛntɛrinɛti Explorer 8 | Ɛntɛrinɛti Explorer 9. Bamako, Mali |
---|---|---|
border-radius |
A tɛ dɛmɛ sɔrɔ | A bɛ dɛmɛ sɔrɔ |
box-shadow |
A tɛ dɛmɛ sɔrɔ | A bɛ dɛmɛ sɔrɔ |
transform |
A tɛ dɛmɛ sɔrɔ | Dɛmɛn, ni -ms daɲɛ fɔlɔ ye |
transition |
A tɛ dɛmɛ sɔrɔ | |
placeholder |
A tɛ dɛmɛ sɔrɔ |
Aw ye taa Can I use... la walasa ka kunnafoni wɛrɛw sɔrɔ CSS3 ni HTML5 baarakɛcogo kan navigatɛri dɛmɛni kan.
Aw ye aw janto nin lasɔmini ninnu na ni aw bɛ baara kɛ ni Respond.js ye aw ka yiriwali ni a dilanni sigidaw la Internet Explorer 8 kama.
Baara kɛli ni Respond.js ye ni CSS ye min bɛ jatigila (sub)domain wɛrɛ kan (misali la, CDN kan) o bɛ sigicogo wɛrɛw de wajibiya. Aw ye Respond.js sɛbɛnw lajɛ walasa ka kunnafoni wɛrɛw sɔrɔ.
file://
K’a sababu Kɛ navigatɔrɔn lakanani sariyaw ye, Respond.js tɛ baara Kɛ ni ɲɛw ye minnu bɛ Lajɛ file://
protocol fɛ (i n’a fɔ ni i bɛ sigida HTML file dɔ da Yɛlɛ). Walasa ka jaabiw kɛcogo kɔrɔbɔ IE8 kɔnɔ, i ka i ka ɲɛw lajɛ HTTP(S) kan. Aw ye Respond.js sɛbɛnw lajɛ walasa ka kunnafoni wɛrɛw sɔrɔ.
@import
Respond.js tɛ baara kɛ ni CSS ye min bɛ tali kɛ @import
. Kɛrɛnkɛrɛnnenya la, Drupal labɛncogo dɔw dɔnna ka baara kɛ ni @import
. Aw ye Respond.js sɛbɛnw lajɛ walasa ka kunnafoni wɛrɛw sɔrɔ.
IE8 tɛ dɛmɛ bɛrɛbɛrɛ box-sizing: border-box;
ni a farala ɲɔgɔn kan ni min-width
, max-width
, min-height
, walima max-height
. O de kama, kabini v3.0.1, an tɛ baara Kɛ tugun max-width
s kan .container
.
IE8 bɛ ni ko dɔw ye ni @font-face
ni a farala ɲɔgɔn kan ni :before
. Bootstrap bɛ baara Kɛ n'o faralen ye ɲɔgɔn kan n'a ka Glyphicons ye. Ni ɲɛ dɔ bɛ cakɛda la, ka doni ni sosɛti tɛ finɛtiri kan (o kɔrɔ ye ko i bɛ butɔni kura digi walima ka fɛn dɔ doni iframe kɔnɔ) o tuma na ɲɛ bɛ jira ka sɔrɔ sɛbɛnnibolo ka doni. Ni i ye i bolo digi ɲɛ (farikolo) kan, i bɛna taamasiyɛn dɔw jira ani ka i bolo digi taamasiyɛn tɔw kan, o bɛna o fana jira. Aw ye sɛbɛn ɲɛ #13863 lajɛ walasa ka kunnafoni wɛrɛw sɔrɔ .
Bootstrap tɛ dɛmɛn Internet Explorer baarakɛcogo kɔrɔw la. Walasa ka da a la ko i bɛ baara kɛ ni IE ka baarakɛcogo kura ye, i ka jateminɛ kɛ ka <meta>
taamasiyɛn bɛnnen don i ka ɲɛw kɔnɔ:
Sɛbɛn cogoya Sɛgɛsɛgɛ ni debugging baarakɛminɛnw dabɔli ye: F12i ka "Document Mode" digi k'a lajɛ.
Nin taamasiyɛn in bɛ Bootstrap ka sɛbɛnw ni misaliw bɛɛ kɔnɔ walasa ka ɲɛfɔli kɛcogo ɲuman sɔrɔ Internet Explorer dɛmɛnan kelen-kelen bɛɛ la.
Aw ye nin StackOverflow ɲininkali in lajɛ walasa ka kunnafoni wɛrɛw sɔrɔ.
Internet Explorer 10 tɛ minɛnw bonya ni filɛlikɛyɔrɔ bonya danfara Bɔ , wa o cogo la a tɛ kunnafonidilanw ɲininkaliw Kɛ ka ɲɛ Bootstrap ka CSS kɔnɔ. A ka c’a la, i tun bɛna CSS yɔrɔ teliya dɔ dɔrɔn de fara a kan walasa ka nin ko in ɲɛnabɔ:
Nka o tɛ baara Kɛ ni minɛnw ye minnu bɛ Windows Phone 8 'sèn Bɔ u kɔrɔ ka Tɛmɛ 'kùnnafoni 3 kan (aka GDR3) , bari a bɛ Kɛ sababu ye o minɛn suguw ka 'yɔrɔ jira min ka ca ni tabali ye "telefɔni" yecogo surun nɔ na. Walasa k’o ɲɛnabɔ, i ka kan ka nin CSS ni JavaScript ninnu don a kɔnɔ walasa ka baara kɛ ni bug in ye .
Walasa ka kunnafoni wɛrɛw sɔrɔ ani baarakɛcogo ɲɛfɔlenw, aw ye Windows Phone 8 ani Device-Width kalan .
I n’a fɔ kungolodimi, an bɛ nin don Bootstrap ka sɛbɛnw bɛɛ kɔnɔ ani misaliw la i n’a fɔ jirali.
Safari minnu bɛ Kɛ ka Kɔn v7.1 ɲɛ OS X kama ani Safari for iOS v8.0 'sènfɛ-sɛbɛnni-minɛnw 'sènfɛ-sɛbɛnni-minɛn ye gɛlɛya dɔw Sɔrɔ ni desimali-yɔrɔ hakɛ ye min bɛ Kɛ an ka .col-*-1
jatebɔ-kalansow la. O la ni jatebɔlan kelen-kelen 12 tùn b’i fɛ, i b’a Kɔlɔsi k’u Nàna surunya n’i y’a Jira ko jatebɔsen wɛrɛw. Ka fara Safari/iOS sɛgɛsɛgɛli kan, i bɛ sugandi dɔw sɔrɔ baarakɛcogo la:
.pull-right
aw ka jatebɔ sɛbɛn laban kan walasa ka ɲɔgɔndan gɛlɛn sɔrɔDɛmɛn min bɛ Kɛ overflow: hidden
on the <body>
element ye o dan ye kosɛbɛ iOS ani Android la. Walasa k’o kɛ, n’i ye modal dɔ sanfɛla walima duguma tɛmɛ o minɛnw ka navigatɛriw dɔ la kelen na, a <body>
kɔnɔkow bɛna daminɛ ka wuli. Aw ye Chrome bug #175502 ( a labɛnna Chrome v40 kɔnɔ ) ani WebKit bug #153852 lajɛ .
Kabini iOS 9.3 la, k’a sɔrɔ modɛli dɔ dabɔlen don, ni sɛrɛkili taamasiyɛn dɔ magali fɔlɔ bɛ sɛbɛnni <input>
walima a dancɛ kɔnɔ <textarea>
, <body>
modali jukɔrɔ kɔnɔkow bɛ sɛrɛkili modali yɛrɛ nɔ na. Aw ye WebKit buguri #153856 lajɛ .
Ani fana, i k’a kɔlɔsi ko n’i bɛ baara Kɛ ni navbar jɔlen ye walima n’i bɛ baara Kɛ ni dontaw ye modal kɔnɔ, iOS bɛ ni rendering bug ye min tɛ fɛn jɔlenw jɔyɔrɔ Lakurayali ni klaviyeti virtuel (klaviyeti virtuel) bɛ Daminɛ. O kɛcogo damadɔ dɔw ye i ka fɛnw caman tigɛli ye position: absolute
walima ka waati jatebɔlan dɔ wele fosi kan walasa k’a ɲini ka jɔyɔrɔko latilen ni bolo ye. O tɛ ɲɛnabɔ Bootstrap fɛ, o la, a bɛ i yɛrɛ de bolo k’a latigɛ fura jumɛn ka fisa i ka application (application) ma.
Eleman .dropdown-backdrop
in tɛ baara kɛ iOS kan nav kɔnɔ k’a sababu kɛ z-indexing ka gɛlɛya ye. O cogo la, walasa ka 'dakunw Dabɔ navbarw kɔnɔ, i ka kan ka 'yɔrɔ digi k'a ɲɛsin 'yɔrɔ ma (walima fɛn wɛrɛ min bɛna 'kɔnɔnafiliko Kɛ iOS kɔnɔ ).
Page zooming bɛ rendering artifacts jira cogo la min tɛ Se ka Lajɔ yɔrɔ dɔw la, Bootstrap ni web tɔ bɛɛ la. Ka kɛɲɛ ni ko ye, an bɛ se k’a labɛn (a ɲini fɔlɔ ka sɔrɔ ka ko dɔ da wuli ni mago bɛ o la). Nka, an ka teli ka ninnu ɲɛmajɔ bawo a ka c’a la, u tɛ ni furakɛli tilennen ye ni hacky workarounds tɛ.
:hover
/ :focus
ka mobili kanHali ni hovering lakika tɛ se ka kɛ touchscreen fanba kan, mobile browser fanba bɛ hovering dɛmɛ ladege ani ka :hover
"sticky" kɛ. O kɔrɔ ye ko :hover
cogoyaw bɛ daminɛ ka waleya fɛn dɔ digilen kɔfɛ ani ka baara dabila dɔrɔn baarakɛla ye fɛn wɛrɛ dɔ digilen kɔfɛ. O bɛ Se ka Kɛ sababu ye Bootstrap ka :hover
cogoyaw ka Kɛ "sɔrɔ" ye min man ɲi o ɲɔgɔnna navigatɔrɔw kan. Mobili navigatɔrɔ dɔw fana bɛ :focus
o ɲɔgɔnna nɔrɔli Kɛ. Sisan, fɛɛrɛ nɔgɔman tɛ yen nin ko ninnu na n’o tɛ o cogoya suguw bɔli ye pewu.
Hali bi navigatɛri dɔw la, sɛbɛnni bɛ se ka kɛ fɛn ye min bɛ mɔgɔ kabakoya.
Kɛrɛnkɛrɛnnenya la, kabini Chrome v32 ani margin settings (dakunw sigicogo) mana kɛ min o min ye, Chrome bɛ baara kɛ ni filɛlikɛyɔrɔ bonya ye min ka dɔgɔ kosɛbɛ ka tɛmɛ papiye farikoloma hakɛ kan ni a bɛ kunnafonidilanw ɲininkaliw ɲɛnabɔ ni a bɛ ɛntɛrinɛti yɔrɔ dɔ sɛbɛn. O bɛ se ka kɛ sababu ye Bootstrap ka grid extra-small ka baara kɛ cogo la min ma labɛn ni a bɛ sɛbɛnni kɛ. aw ye bɔko #12078 ani Chrome bug #273306 lajɛ walasa ka kunnafoni dɔw sɔrɔ . Baarakɛcogo minnu fɔra:
@screen-*
walasa aw ka sɛbɛnnikɛlan papiye ka jate ko a ka bon ka tɛmɛ extra-small kan.Ani fana, kabini Safari v8.0, fixed-width .container
s bɛ se ka kɛ sababu ye Safari ka baara kɛ ni sɛbɛnnibolo hakɛ fitinin ye min tɛ deli ka kɛ ni a bɛ sɛbɛnni kɛ. aw ye #14868 ani WebKit bug #138192 lajɛ walasa ka kunnafoni wɛrɛw sɔrɔ . O fɛɛrɛ dɔ min bɛ se ka kɛ, o ye ka nin CSS in fara a kan:
Ka bɔ o kɛsu kɔnɔ, Android 4.1 (ani hali bɔko kura dɔw bɛ i n’a fɔ) bɛ ci ni Browser app ye i n’a fɔ ɛntɛrinɛti navigatɔrɔn sugandilen fɔlɔ (a ni Chrome tɛ kelen ye). A fɔ man di nka, Browser app bɛ ni bugu caman ye ani bɛnbaliya ni CSS ye caman na.
Elemanw kan <select>
, Android stock browser tɛna kɛrɛfɛ controles jira ni a bɛ yen border-radius
ani/walima border
a bɛ baara kɛ. (Aw ye nin ɲininkali StackOverflow lajɛ walasa ka kunnafoni wɛrɛw sɔrɔ.) Baara kɛ ni kode yɔrɔ dɔ ye min bɛ duguma walasa ka CSS min bɛ mɔgɔ tɔɔrɔ, o bɔ yen ani ka the <select>
jira iko fɛn min ma kɛ cogo la Android stock browser kan. Baarakɛla ka lasigiden ka fiyɛli bɛ Chrome, Safari ani Mozilla navigatɔrɔw bali.
Aw b’a fɛ ka misali dɔ ye wa? Aw ye nin JS Bin demo in lajɛ.
Walasa ka dɔnniya ɲuman Di navigatɔrɔ kɔrɔw ni buggy (navigatɛriw) ma, Bootstrap bɛ baara Kɛ ni CSS navigatɔrɔw hakɛw ye yɔrɔ caman na walasa ka CSS kɛrɛnkɛrɛnnenw Laɲini navigatɔrɔ dɔw la walasa ka baara Kɛ ni bugw ye navigatɔrɔw yɛrɛ kɔnɔ. O hakɛw bɛ faamuya cogo min na, o bɛ kɛ sababu ye ka CSS sɛgɛsɛgɛlikɛlaw ka ŋunankan fɔ k’u tɛ tiɲɛ ye. Yɔrɔ fila-fila la, an bɛ baara Kɛ fana ni Bleeding-edge CSS fɛɛrɛw ye minnu ma Kɛ fɔlɔ ka dafa, nka ninnu bɛ Kɛ dɔrɔn ka ɲɛtaa Kɛ ɲɛtaa kama.
O dantigɛli lasɔminiw tɛ fosi ye waleyali la bawo an ka CSS yɔrɔ min tɛ haki ye, o bɛ tiɲɛni dafalen Kɛ wa haki yɔrɔ minnu tɛ haki ye, o tɛ haki yɔrɔ in baarakɛcogo ɲuman bali, o de y’a To an bɛ nin lasɔmini kɛrɛnkɛrɛnnen ninnu jatebla Kɛ k’a da Minɛ.
an ka HTML sɛbɛnw fana bɛ ni HTML tiɲɛni lasɔmini dɔw ye minnu tɛ fosi ye ani minnu tɛ foyi ɲɛ k' a sababu kɛ an ye Firefox bugu dɔ ɲɛnabɔcogo dɔ don a kɔnɔ .
Hali n’an tɛ dɛmɛn foroba la mɔgɔ wɛrɛw ka fɛn wɛrɛw ma walima ka farankanw kan, an bɛ laadilikan nafama dɔw di walasa ka dɛmɛ don ka i yɛrɛ tanga gɛlɛyaw ma minnu bɛ se ka kɛ i ka porozɛw kɔnɔ.
Mɔgɔ sabanan dɔw ka porogaramu dɔw, i n’a fɔ Google Maps ani Google Custom Search Engine, olu bɛ sɔsɔli kɛ ni Bootstrap ye k’a sababu kɛ * { box-sizing: border-box; }
, sariya min b’a kɛ ten padding
, o tɛ nɔ bila fɛn dɔ janya jatebɔlen laban na. Aw ye kunnafoni wɛrɛw sɔrɔ kɛsu modɛli ni a bonya kan CSS Tricks kan .
Ka kɛɲɛ ni ko kɛlenw ye, i bɛ se ka fɛn dɔ bɔ a nɔ na i n’a fɔ i mago bɛ cogo min na (Sugandili 1) walima ka kɛsu hakɛ sigicogo lasegin mara bɛɛ kama (Sugandili 2nan).
Bootstrap bɛ tugu ɛntɛrinɛti sariyaw kɔ minnu bɛ fɔ tuma bɛɛ ani—ni cɛsiri caman wɛrɛ kɛra—a bɛ se ka kɛ ka sitiw dilan minnu bɛ se ka sɔrɔ mɔgɔ minnu bɛ baara kɛ ni AT ye .
Ni i ka navigatiɔn bɛ ni ladɛrɛsi caman ye ani ni a bɛ na ka kɔn DOM kɔnɔko kunbabaw ɲɛ, i ka Skip to main content
ladɛrɛsi dɔ fara a kan ka kɔn navigatiɔn ɲɛ (walasa ka ɲɛfɔli nɔgɔman sɔrɔ, aw ye nin A11Y Porozɛ barokun lajɛ min bɛ kuma skip navigation links kan ). Baara kɛli ni .sr-only
kalan ye, o bɛna tɛmɛsira dogo ni ɲɛ ye, wa .sr-only-focusable
kalan bɛna a jira ko jɛgɛnsira bɛ ye ni a sinsinnen don siɲɛ kelen (klaviyeti baarakɛlaw fɛ minnu bɛ ye).
K’a sababu kɛ dɛsɛ/buguw ye minnu bɛ Chrome kɔnɔ kabini tuma jan (aw ye bɔko 262171 lajɛ Chromium bug tracker kɔnɔ ) ani Internet Explorer kɔnɔ (aw ye nin barokun lajɛ ɲɛ kɔnɔ jɛgɛnw kan ani sinsincogo sigicogo kan ), aw bɛna a ɲini k’a lajɛ ko aw ka jɛgɛnsira min bɛ tɛmɛ yɔrɔ kan, o laɲini ye bɛ se ka sinsin porogaramu siratigɛ la a dɔgɔyalenba la ni farali tabindex="-1"
ye .
O tɛmɛnen 'kɔ, i bɛ Se k'a Fɔ k'a jɛya ko ɲɛfɔli yelen dɔ Dabɔ laɲini kan (kɛrɛnkɛrɛnnenya la Chrome fana bɛ sinsin sisan fɛnw kan ni tabindex="-1"
n'u bɛ digi ni sosɛti ye) #content:focus { outline: none; }
ni
A kɔlɔsi ko nin buguri in bɛna nɔ bila ɲɛ kɔnɔ jɛgɛnsira wɛrɛw fana na i ka yɔrɔ bɛ se ka baara kɛ ni minnu ye, o bɛna kɛ sababu ye k’u kɛ nafa tɛ minnu na klaviyeti baarakɛlaw fɛ. Aw bɛ se ka jateminɛ kɛ ka o ɲɔgɔnna stop-gap fix dɔ fara anchors / fragment identifiers tɔgɔla tɔw bɛɛ kan minnu bɛ baara kɛ i n’a fɔ link targets.
ni kunkankow ( <h1>
- <h6>
) bɛ sigi sen kan , i ka sɛbɛn fɔlɔ kuncɛ ka kan ka kɛ <h1>
. Kumakun nataw ka kan ka baara Kɛ ni hakilina ye <h2>
- <h6>
cogo min na ekran kalanbagaw bɛ Se ka kɔnɔkow tabali dɔ Dabɔ i ka ɲɛw kama.
Aw ye kunnafoni wɛrɛw sɔrɔ HTML CodeSniffer ani Penn State ka AccessAbility kan .
Sisan, kulɛriw faralen ɲɔgɔn kan minnu bɛ sɔrɔ Bootstrap kɔnɔ (i n’a fɔ butɔni kalasi suguya caman, kode ɲɛfɔli kulɛri dɔw minnu bɛ kɛ kode blokiw jɔnjɔnw na , .bg-primary
contextual background dɛmɛnan kalasi, ani jɛgɛnsira kulɛri fɔlɔ ni baara kɛra ni kɔkanna finman ye) ka danfara hakɛ dɔgɔman sɔrɔ (a bɛ 4,5:1 hakɛ fɔlen jukɔrɔ ). O bɛ se ka gɛlɛya lase baarakɛlaw ma minnu ɲɛ tɛ ye kosɛbɛ walima minnu ɲɛ tɛ ɲɛ. O kulɛri fɔlɔw bɛ se ka ladilan walasa ka dɔ fara u danfara kan ani u kalanni kan.
Bootstrap bɔra MIT ka lase kɔnɔ ani a ye 2019 Twitter sɛbɛnnikɛlaw ka josariyaw ye. Ni a tobilen don fo ka se a yɔrɔ fitininw ma, a bɛ se ka ɲɛfɔ ni nin cogoya ninnu ye.
Bootstrap ka lase dafalen bɛ sɔrɔ porozɛ marayɔrɔ la walasa ka kunnafoni wɛrɛw sɔrɔ.
Sigida mɔgɔw ye Bootstrap ka sɛbɛnw baara kan caman na. U si tɛ dɛmɛn foroba la wa a bɛ se ka kɛ u tɛ waati la tuma bɛɛ.
An tɛ dɛmɛ don ka bamanankan baarakɛcogo labɛn walima k’a ladon, an bɛ ɲɔgɔn cɛsiri dɔrɔn u ni ɲɔgɔn cɛ.
I ye bamanankan baarakɛcogo kura walima baarakɛcogo ɲuman dɔ ban wa? Sama ɲinini dɔ da wuli walasa k’a fara an ka lisi kan.