Bibẹrẹ
Akopọ ti Bootstrap, bii o ṣe le ṣe igbasilẹ ati lo, awọn awoṣe ipilẹ ati awọn apẹẹrẹ, ati diẹ sii.
Akopọ ti Bootstrap, bii o ṣe le ṣe igbasilẹ ati lo, awọn awoṣe ipilẹ ati awọn apẹẹrẹ, ati diẹ sii.
Bootstrap (Lọwọlọwọ v3.3.7) ni awọn ọna ti o rọrun diẹ lati bẹrẹ ni kiakia, ọkọọkan n ṣafẹri si ipele ọgbọn ti o yatọ ati lilo ọran. Ka nipasẹ lati wo ohun ti o baamu awọn aini rẹ pato.
Akojọ ati minisisu CSS, JavaScript, ati awọn nkọwe. Ko si awọn iwe aṣẹ tabi awọn faili orisun atilẹba ti o wa ninu.
Orisun Kere, JavaScript, ati awọn faili fonti, pẹlu awọn iwe aṣẹ wa. Nilo alakojo Kere ati iṣeto diẹ.
Bootstrap ti gbejade lati Kere si Sass fun ifisi irọrun ni Awọn oju-irin, Kompasi, tabi awọn iṣẹ akanṣe Sass-nikan.
Awọn eniyan ti o wa ni jsDelivr pẹlu oore-ọfẹ pese atilẹyin CDN fun Bootstrap's CSS ati JavaScript. Kan lo awọn ọna asopọ CDN Bootstrap wọnyi .
O tun le fi sori ẹrọ ati ṣakoso Bootstrap's Kere, CSS, JavaScript, ati awọn nkọwe nipa lilo Bower :
O tun le fi Bootstrap sori ẹrọ ni lilo npm :
require('bootstrap')
yoo gbe gbogbo awọn afikun jQuery Bootstrap sori ohun jQuery. Awọn bootstrap
module ara ko ni okeere ohunkohun. O le fi ọwọ gbe awọn afikun jQuery Bootstrap lọkọọkan nipasẹ ikojọpọ awọn /js/*.js
faili labẹ itọsọna ipele oke ti package.
Bootstrap's package.json
ni diẹ ninu awọn afikun metadata labẹ awọn bọtini wọnyi:
less
- ọna si Bootstrap akọkọ Kere orisun failistyle
- ọna si Bootstrap ti kii ṣe minimini CSS ti o ti ṣajọ tẹlẹ nipa lilo awọn eto aiyipada (ko si isọdi)O tun le fi sori ẹrọ ati ṣakoso Bootstrap's Kere, CSS, JavaScript, ati awọn nkọwe nipa lilo Olupilẹṣẹ :
Bootstrap nlo Autoprefixer lati wo pẹlu awọn ami-iṣaaju ataja CSS . Ti o ba n ṣe akopọ Bootstrap lati orisun Kere/Sass ati pe ko lo Gruntfile wa, iwọ yoo nilo lati ṣepọ Autoprefixer sinu ilana kikọ rẹ funrararẹ. Ti o ba nlo Bootstrap iṣaaju tabi lilo Gruntfile wa, iwọ ko nilo lati ṣe aniyan nipa eyi nitori pe Autoprefixer ti wa tẹlẹ sinu Gruntfile wa.
Bootstrap jẹ igbasilẹ ni awọn fọọmu meji, laarin eyiti iwọ yoo rii awọn ilana atẹle ati awọn faili, ṣiṣe akojọpọ awọn orisun ti o wọpọ ati pese akojọpọ mejeeji ati awọn iyatọ kekere.
Jọwọ ṣe akiyesi pe gbogbo awọn afikun JavaScript nilo jQuery lati wa pẹlu, bi o ṣe han ninu awoṣe ibẹrẹ . Kan si wabower.json
lati rii iru awọn ẹya ti jQuery ni atilẹyin.
Ni kete ti o ba ti gbasilẹ, ṣii folda fisinuirindigbindigbin lati wo eto ti Bootstrap (akojọ). Iwọ yoo rii nkan bii eyi:
Eyi ni fọọmu ipilẹ julọ ti Bootstrap: awọn faili ti a ṣajọ tẹlẹ fun lilo sisọ-silẹ ni iyara ni fere eyikeyi iṣẹ akanṣe wẹẹbu. A pese CSS ti a kojọpọ ati JS ( bootstrap.*
), bakannaa ti a ṣajọpọ ati minifised CSS ati JS ( bootstrap.min.*
). Awọn maapu orisun CSS ( bootstrap.*.map
) wa fun lilo pẹlu awọn irinṣẹ idagbasoke awọn aṣawakiri kan. Awọn nkọwe lati Glyphicons wa pẹlu, gẹgẹ bi akori Bootstrap iyan.
Igbasilẹ koodu orisun Bootstrap pẹlu CSS ti a ṣajọ tẹlẹ, JavaScript, ati awọn ohun-ini fonti, pẹlu orisun Kere, JavaScript, ati iwe. Ni pataki diẹ sii, o pẹlu atẹle naa ati diẹ sii:
Awọn less/
, js/
, ati fonts/
pe o jẹ koodu orisun fun CSS, JS, ati awọn nkọwe aami (lẹsẹsẹ). Fọọmu dist/
naa pẹlu ohun gbogbo ti a ṣe akojọ si ni apakan igbasilẹ ti a ti ṣajọ tẹlẹ loke. Awọn docs/
folda pẹlu awọn koodu orisun fun wa iwe, ati examples/
ti Bootstrap lilo. Ni ikọja iyẹn, eyikeyi faili to wa pẹlu n pese atilẹyin fun awọn akojọpọ, alaye iwe-aṣẹ, ati idagbasoke.
Bootstrap nlo Grunt fun eto kikọ rẹ, pẹlu awọn ọna irọrun fun ṣiṣẹ pẹlu ilana naa. O jẹ bii a ṣe ṣajọ koodu wa, ṣiṣe awọn idanwo, ati diẹ sii.
Lati fi Grunt sori ẹrọ, o gbọdọ kọkọ ṣe igbasilẹ ati fi node.js sori ẹrọ (eyiti o pẹlu npm). npm duro fun awọn modulu idii node ati pe o jẹ ọna lati ṣakoso awọn igbẹkẹle idagbasoke nipasẹ node.js.
Lẹhinna, lati laini aṣẹ:grunt-cli
ni agbaye pẹlu npm install -g grunt-cli
./bootstrap/
, lẹhinna ṣiṣe npm install
. npm yoo wo package.json
faili naa ati fi sori ẹrọ laifọwọyi awọn igbẹkẹle agbegbe pataki ti a ṣe akojọ sibẹ.Nigbati o ba pari, iwọ yoo ni anfani lati ṣiṣe awọn oriṣiriṣi awọn aṣẹ Grunt ti a pese lati laini aṣẹ.
grunt dist
(O kan ṣajọ CSS ati JavaScript)Ṣe atunto /dist/
itọsọna naa pẹlu akopọ ati ti o dinku CSS ati awọn faili JavaScript. Gẹgẹbi olumulo Bootstrap, eyi jẹ deede aṣẹ ti o fẹ.
grunt watch
(Wo)Wiwo awọn faili orisun Kere ati ṣe atunko wọn laifọwọyi si CSS nigbakugba ti o ba fi iyipada pamọ.
grunt test
(Ṣiṣe awọn idanwo)Ṣiṣe JSHint ati ṣiṣe awọn idanwo QUnit lainidi ni PhantomJS .
grunt docs
(Kọ & idanwo awọn dukia docs)Kọ ati ṣe idanwo CSS, JavaScript, ati awọn ohun-ini miiran eyiti a lo nigbati o nṣiṣẹ awọn iwe ni agbegbe nipasẹ bundle exec jekyll serve
.
grunt
(Kọ Egba ohun gbogbo ati ṣiṣe awọn idanwo)Ṣe akopọ ati dinku CSS ati JavaScript, kọ oju opo wẹẹbu iwe, nṣiṣẹ olufọwọsi HTML5 lodi si awọn iwe aṣẹ, tun ṣe awọn ohun-ini Customizer, ati diẹ sii. Nilo Jekyll . Nigbagbogbo pataki nikan ti o ba n gige lori Bootstrap funrararẹ.
Ti o ba pade awọn iṣoro pẹlu fifi sori awọn igbẹkẹle tabi ṣiṣiṣẹ awọn aṣẹ Grunt, kọkọ paarẹ /node_modules/
ilana ti ipilẹṣẹ nipasẹ npm. Lẹhinna, tun ṣe npm install
.
Bẹrẹ pẹlu awoṣe HTML ipilẹ yii, tabi yi awọn apẹẹrẹ wọnyi pada . A nireti pe iwọ yoo ṣe akanṣe awọn awoṣe ati awọn apẹẹrẹ wa, ṣe imudara wọn lati baamu awọn iwulo rẹ.
Daakọ HTML ni isalẹ lati bẹrẹ ṣiṣẹ pẹlu iwe Bootstrap ti o kere ju.
Kọ sori awoṣe ipilẹ loke pẹlu ọpọlọpọ awọn paati Bootstrap. A gba ọ niyanju lati ṣe akanṣe ati mu Bootstrap mu lati ba awọn iwulo iṣẹ akanṣe kọọkan mu.
Gba koodu orisun fun gbogbo apẹẹrẹ ni isalẹ nipa gbigba ibi ipamọ Bootstrap silẹ . Apeere le ri ninu awọn docs/examples/
liana.
Bootlint jẹ ọpa irinṣẹ Bootstrap HTML osise . O ṣe ayẹwo laifọwọyi fun ọpọlọpọ awọn aṣiṣe HTML ti o wọpọ ni awọn oju opo wẹẹbu ti o nlo Bootstrap ni ọna “vanilla” titọ. Awọn paati/awọn ẹrọ ailorukọ Vanilla Bootstrap nilo awọn apakan wọn ti DOM lati ni ibamu si awọn ẹya kan. Bootlint sọwedowo pe awọn iṣẹlẹ ti awọn paati Bootstrap ni HTML ti a ṣeto ni deede. Gbiyanju fifi Bootlint kun si ohun elo irinṣẹ idagbasoke Bootstrap wẹẹbu rẹ ki ko si ọkan ninu awọn aṣiṣe ti o wọpọ fa fifalẹ idagbasoke iṣẹ akanṣe rẹ.
Duro titi di oni lori idagbasoke Bootstrap ki o de ọdọ agbegbe pẹlu awọn orisun iranlọwọ wọnyi.
irc.freenode.net
olupin, ni ikanni ##bootstrap .twitter-bootstrap-3
.bootstrap
lori awọn idii eyiti o yipada tabi ṣafikun si iṣẹ ṣiṣe ti Bootstrap nigbati o n pin kaakiri nipasẹ npm tabi awọn ọna ifijiṣẹ ti o jọra fun wiwa ti o pọju.O tun le tẹle @getbootstrap lori Twitter fun olofofo tuntun ati awọn fidio orin oniyi.
Bootstrap ṣe adaṣe awọn oju-iwe rẹ laifọwọyi fun ọpọlọpọ awọn iwọn iboju. Eyi ni bii o ṣe le mu ẹya ara ẹrọ yii jẹ ki oju-iwe rẹ ṣiṣẹ bii apẹẹrẹ ti kii ṣe idahun .
<meta>
a mẹnuba ninu awọn iwe aṣẹ CSSwidth
lori .container
fun ipele akoj kọọkan pẹlu iwọn kan, fun apẹẹrẹ width: 970px !important;
Rii daju pe eyi wa lẹhin Bootstrap aiyipada CSS. O le yago fun yiyan !important
pẹlu awọn ibeere media tabi diẹ ninu awọn selector-fu..col-xs-*
awọn kilasi ni afikun si, tabi ni aaye ti, awọn alabọde/awọn nla. Maṣe yọ ara rẹ lẹnu, awọn iwọn akoj ẹrọ kekere-kekere si gbogbo awọn ipinnu.Iwọ yoo tun nilo Respond.js fun IE8 (niwọn igba ti awọn ibeere media wa tun wa ati pe o nilo lati ni ilọsiwaju). Eyi mu awọn abala “ojula alagbeka” kuro ti Bootstrap.
A ti lo awọn igbesẹ wọnyi si apẹẹrẹ. Ka koodu orisun rẹ lati rii awọn iyipada kan pato ti a ṣe imuse.
Ṣe o n wa lati jade lati ẹya agbalagba Bootstrap si v3.x? Ṣayẹwo itọsọna migration wa .
Bootstrap jẹ itumọ lati ṣiṣẹ daradara julọ ni tabili tuntun ati awọn aṣawakiri alagbeka, afipamo pe awọn aṣawakiri agbalagba le ṣafihan aṣa ti o yatọ, botilẹjẹpe iṣẹ ṣiṣe ni kikun, awọn atunṣe ti awọn paati kan.
Ni pataki, a ṣe atilẹyin awọn ẹya tuntun ti awọn aṣawakiri atẹle ati awọn iru ẹrọ.
Awọn aṣawakiri omiiran ti o lo ẹya tuntun ti WebKit, Blink, tabi Gecko, boya taara tabi nipasẹ wiwo oju opo wẹẹbu ti Syeed, ko ni atilẹyin ni gbangba. Sibẹsibẹ, Bootstrap yẹ (ni ọpọlọpọ awọn ọran) ṣafihan ati ṣiṣẹ ni deede ni awọn aṣawakiri wọnyi daradara. Alaye atilẹyin pato diẹ sii ti pese ni isalẹ.
Ni gbogbogbo, Bootstrap ṣe atilẹyin awọn ẹya tuntun ti awọn aṣawakiri aiyipada ti iru ẹrọ kọọkan. Ṣe akiyesi pe awọn aṣawakiri aṣoju (bii Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) ko ni atilẹyin.
Chrome | Firefox | Safari | |
---|---|---|---|
Android | Atilẹyin | Atilẹyin | N/A |
iOS | Atilẹyin | Atilẹyin | Atilẹyin |
Bakanna, awọn ẹya tuntun ti ọpọlọpọ awọn aṣawakiri tabili tabili ni atilẹyin.
Chrome | Firefox | Internet Explorer | Opera | Safari | |
---|---|---|---|---|---|
Mac | Atilẹyin | Atilẹyin | N/A | Atilẹyin | Atilẹyin |
Windows | Atilẹyin | Atilẹyin | Atilẹyin | Atilẹyin | Ko ṣe atilẹyin |
Lori Windows, a ṣe atilẹyin Internet Explorer 8-11 .
Fun Firefox, ni afikun si itusilẹ iduroṣinṣin deede tuntun, a tun ṣe atilẹyin ẹya Itusilẹ Atilẹyin Afikun tuntun (ESR) ti Firefox.
Laigba aṣẹ, Bootstrap yẹ ki o wo ati huwa daradara ni Chromium ati Chrome fun Linux, Firefox fun Linux, ati Internet Explorer 7, ati Microsoft Edge, botilẹjẹpe wọn ko ṣe atilẹyin ni ifowosi.
Fun atokọ diẹ ninu awọn idun aṣawakiri ti Bootstrap ni lati koju, wo Odi wa ti awọn idun ẹrọ aṣawakiri .
Internet Explorer 8 ati 9 tun ni atilẹyin, sibẹsibẹ, jọwọ ṣe akiyesi pe diẹ ninu awọn ohun-ini CSS3 ati awọn eroja HTML5 ko ni atilẹyin ni kikun nipasẹ awọn aṣawakiri wọnyi. Ni afikun, Internet Explorer 8 nilo lilo Respond.js lati mu atilẹyin ibeere media ṣiṣẹ.
Ẹya ara ẹrọ | Internet Explorer 8 | Internet Explorer 9 |
---|---|---|
border-radius |
Ko ṣe atilẹyin | Atilẹyin |
box-shadow |
Ko ṣe atilẹyin | Atilẹyin |
transform |
Ko ṣe atilẹyin | Atilẹyin, pẹlu -ms ìpele |
transition |
Ko ṣe atilẹyin | |
placeholder |
Ko ṣe atilẹyin |
Ṣabẹwo Ṣe MO le lo... fun awọn alaye lori atilẹyin ẹrọ aṣawakiri ti CSS3 ati awọn ẹya HTML5.
Ṣọra fun awọn akiyesi wọnyi nigba lilo Respond.js ninu idagbasoke ati awọn agbegbe iṣelọpọ fun Internet Explorer 8.
Lilo Respond.js pẹlu CSS ti gbalejo lori oriṣiriṣi (iha) agbegbe (fun apẹẹrẹ, lori CDN) nilo iṣeto ni afikun. Wo Respond.js docs fun awọn alaye.
file://
Nitori awọn ofin aabo aṣawakiri, Respond.js ko ṣiṣẹ pẹlu awọn oju-iwe ti a wo nipasẹ file://
ilana naa (bii nigba ṣiṣi faili HTML agbegbe kan). Lati ṣe idanwo awọn ẹya idahun ni IE8, wo awọn oju-iwe rẹ lori HTTP(S). Wo Respond.js docs fun awọn alaye.
@import
Respond.js ko ṣiṣẹ pẹlu CSS ti o tọka nipasẹ @import
. Ni pataki, diẹ ninu awọn atunto Drupal ni a mọ lati lo @import
. Wo Respond.js docs fun awọn alaye.
IE8 ko ṣe atilẹyin ni kikun box-sizing: border-box;
nigbati o ba darapọ pẹlu min-width
, max-width
, min-height
, tabi max-height
. Fun idi naa, bi ti v3.0.1, a ko lo max-width
lori .container
s.
IE8 ni diẹ ninu awọn ọran pẹlu @font-face
nigba idapo pẹlu :before
. Bootstrap nlo apapo yẹn pẹlu awọn Glyphicons rẹ. Ti oju-iwe kan ba wa ni ipamọ, ti o kojọpọ laisi asin lori ferese (ie lu bọtini isọdọtun tabi gbe nkan kan sinu iframe) lẹhinna oju-iwe naa yoo ni jigbe ṣaaju ki awọn ẹru fonti naa. Lilọ kiri lori oju-iwe (ara) yoo ṣafihan diẹ ninu awọn aami ati gbigbe lori awọn aami ti o ku yoo ṣafihan awọn naa daradara. Wo atejade #13863 fun alaye.
Bootstrap ko ni atilẹyin ni awọn ipo ibaramu Internet Explorer atijọ. Lati rii daju pe o nlo ipo tuntun fun IE, ronu pẹlu aami ti o yẹ <meta>
ninu awọn oju-iwe rẹ:
Jẹrisi ipo iwe aṣẹ nipa ṣiṣi awọn irinṣẹ n ṣatunṣe aṣiṣe: tẹ F12ki o ṣayẹwo “Ipo iwe”.
Aami yii wa ninu gbogbo awọn iwe-ipamọ Bootstrap ati awọn apẹẹrẹ lati rii daju pe o ṣee ṣe atunṣe ti o dara julọ ni ẹya atilẹyin kọọkan ti Internet Explorer.
Wo ibeere StackOverflow yii fun alaye diẹ sii.
Internet Explorer 10 ko ṣe iyatọ iwọn ẹrọ lati iwọn wiwo , ati nitorinaa ko lo awọn ibeere media daradara ni Bootstrap's CSS. Ni deede iwọ yoo kan ṣafikun snippet iyara kan ti CSS lati ṣatunṣe eyi:
Sibẹsibẹ, eyi ko ṣiṣẹ fun awọn ẹrọ ti nṣiṣẹ awọn ẹya Windows Phone 8 ti o dagba ju Imudojuiwọn 3 (aka GDR3) , nitori pe o fa iru awọn ẹrọ lati ṣafihan wiwo tabili okeene dipo wiwo “foonu” dín. Lati koju eyi, iwọ yoo nilo lati ni CSS atẹle yii ati JavaScript lati ṣiṣẹ ni ayika kokoro naa .
Fun alaye diẹ ẹ sii ati awọn itọnisọna lilo, ka Windows Phone 8 ati Iwọn-ẹrọ .
Gẹgẹbi olori, a ṣafikun eyi ni gbogbo awọn iwe Bootstrap ati awọn apẹẹrẹ bi iṣafihan.
Ẹnjini Rendering ti awọn ẹya ti Safari ṣaaju si v7.1 fun OS X ati Safari fun iOS v8.0 ni diẹ ninu wahala pẹlu nọmba awọn aaye eleemewa ti a lo ninu awọn .col-*-1
kilasi akoj wa. Nitorina ti o ba ni awọn ọwọn akoj 12 kọọkan, iwọ yoo ṣe akiyesi pe wọn wa ni kukuru ni akawe si awọn ori ila ti awọn ọwọn miiran. Yato si igbegasoke Safari/iOS, o ni diẹ ninu awọn aṣayan fun workarounds:
.pull-right
si iwe akoj rẹ ti o kẹhin lati gba titete-ọtun lile lileAtilẹyin fun overflow: hidden
nkan <body>
naa jẹ opin ni iOS ati Android. Si ipari yẹn, nigba ti o ba yi lọ kọja oke tabi isalẹ ti modal ninu ọkan ninu awọn aṣawakiri ẹrọ wọnyẹn, <body>
akoonu yoo bẹrẹ lati yi lọ. Wo Bug Chrome #175502 (ti o wa titi ni Chrome v40) ati Bug WebKit #153852 .
Bi ti iOS 9.3, lakoko ti modal wa ni sisi, ti ifọwọkan ibẹrẹ ti idari lilọ kiri kan wa laarin aala ti ọrọ <input>
tabi a <textarea>
, <body>
akoonu ti o wa labẹ modal yoo yi lọ dipo modal funrararẹ. Wo Bug WebKit #153856 .
Paapaa, ṣe akiyesi pe ti o ba nlo navbar ti o wa titi tabi lilo awọn igbewọle laarin modal kan, iOS ni bug Rendering ti ko ṣe imudojuiwọn ipo awọn eroja ti o wa titi nigbati bọtini itẹwe foju ba nfa. Awọn adaṣe diẹ fun eyi pẹlu yiyi awọn eroja rẹ pada si position: absolute
tabi pipe aago kan lori idojukọ lati gbiyanju lati ṣatunṣe ipo pẹlu ọwọ. Eyi kii ṣe nipasẹ Bootstrap, nitorinaa o wa si ọ lati pinnu iru ojutu ti o dara julọ fun ohun elo rẹ.
Awọn .dropdown-backdrop
ano ti wa ni ko lo lori iOS ni nav nitori awọn complexity ti z-titọka. Nitorinaa, lati pa awọn isọ silẹ ni awọn navbars, o gbọdọ tẹ taara nkan isọ silẹ (tabi eyikeyi nkan miiran eyiti yoo tan iṣẹlẹ tẹ ni iOS ).
Sisun oju-iwe laiseaniani ṣe afihan awọn ohun-iṣere ni diẹ ninu awọn paati, mejeeji ni Bootstrap ati iyoku wẹẹbu. Da lori ọrọ naa, a le ni anfani lati ṣatunṣe (wa akọkọ ati lẹhinna ṣii ọrọ kan ti o ba nilo). Sibẹsibẹ, a ṣọ lati foju awọn wọnyi bi wọn ṣe nigbagbogbo ko ni ojutu taara miiran ju awọn ibi-iṣẹ ti hacky.
:hover
/ :focus
lori alagbekaPaapaa botilẹjẹpe fifin gidi ko ṣee ṣe lori ọpọlọpọ awọn iboju ifọwọkan, ọpọlọpọ awọn aṣawakiri alagbeka ṣe afarawe atilẹyin fifin ati ṣe :hover
“alalepo”. Ni awọn ọrọ miiran, :hover
awọn aza bẹrẹ lilo lẹhin titẹ nkan kan ati pe o da lilo nikan lẹhin ti olumulo tẹ nkan miiran. Eyi le fa ki awọn ipinlẹ Bootstrap :hover
di “di” lainifẹ lori iru awọn aṣawakiri bẹ. Diẹ ninu awọn aṣawakiri alagbeka tun ṣe :focus
alalepo bakanna. Lọwọlọwọ ko si adaṣe ti o rọrun fun awọn ọran wọnyi miiran ju yiyọ iru awọn aza kuro patapata.
Paapaa ni diẹ ninu awọn aṣawakiri ode oni, titẹ sita le jẹ ohun ti o wuyi.
Ni pataki, bi ti Chrome v32 ati laibikita awọn eto ala, Chrome nlo iwọn iwoye ni pataki dín ju iwọn iwe ti ara lọ nigba ti n ṣatunṣe awọn ibeere media lakoko titẹ oju opo wẹẹbu kan. Eyi le ja si ni afikun-kekere akoj Bootstrap ni muu ṣiṣẹ lairotẹlẹ nigbati titẹ sita. Wo atejade #12078 ati bug Chrome #273306 fun awọn alaye diẹ. Awọn adaṣe ti a daba:
@screen-*
Awọn oniyipada Kere ki a ka iwe itẹwe rẹ tobi ju afikun-kekere lọ.Paapaa, bi ti Safari v8.0, ti o wa titi-iwọn .container
le fa Safari lati lo iwọn fonti kekere ti kii ṣe deede nigba titẹ sita. Wo #14868 ati Bug WebKit #138192 fun alaye diẹ sii. Iṣatunṣe agbara kan fun eyi n ṣafikun CSS wọnyi:
Ninu apoti, Android 4.1 (ati paapaa diẹ ninu awọn idasilẹ tuntun ti o han gbangba) gbe ọkọ pẹlu ohun elo ẹrọ aṣawakiri bi aṣawakiri wẹẹbu aiyipada ti yiyan (ni idakeji si Chrome). Laanu, ohun elo aṣawakiri ni ọpọlọpọ awọn idun ati aiṣedeede pẹlu CSS ni gbogbogbo.
Lori <select>
awọn eroja, ẹrọ aṣawakiri ọja iṣura Android kii yoo ṣe afihan awọn idari ẹgbẹ ti o ba wa border-radius
ati/tabi border
lilo. (Wo ibeere StackOverflow yii fun awọn alaye.) Lo snippet ti koodu ni isalẹ lati yọ CSS ti o ṣẹ kuro ki o ṣe <select>
bi ohun ti ko ni aṣa lori ẹrọ aṣawakiri ọja Android. Aṣoju aṣàmúlò ti nmi ni yago fun kikọlu pẹlu Chrome, Safari, ati awọn aṣawakiri Mozilla.
Ṣe o fẹ lati ri apẹẹrẹ? Ṣayẹwo yi JS Bin demo.
Lati le pese iriri ti o dara julọ ti o ṣeeṣe si awọn aṣawakiri atijọ ati buggy, Bootstrap nlo awọn hakii ẹrọ aṣawakiri CSS ni awọn aaye pupọ lati fojusi CSS pataki si awọn ẹya aṣawakiri kan lati le ṣiṣẹ ni ayika awọn idun ninu awọn aṣawakiri funrararẹ. Awọn hakii wọnyi ni oye fa awọn olufọwọsi CSS lati kerora pe wọn ko wulo. Ni awọn aaye tọkọtaya kan, a tun lo awọn ẹya CSS eti-ẹjẹ ti ko tii diwọn ni kikun, ṣugbọn awọn wọnyi ni a lo fun imudara ilọsiwaju.
Awọn ikilọ afọwọsi wọnyi ko ṣe pataki ni iṣe nitori apakan ti kii ṣe hacky ti CSS wa ni ifọwọsi ni kikun ati awọn apakan hacky ko ni dabaru pẹlu iṣẹ ṣiṣe to dara ti apakan ti kii ṣe gige, nitorinaa kilode ti a mọọmọ foju foju kọ awọn ikilọ pato wọnyi.
Awọn iwe aṣẹ HTML wa bakanna ni diẹ ninu awọn ikilọ afọwọsi HTML ti ko ṣe pataki nitori ifisi wa ti ibi-iṣẹ fun kokoro Firefox kan .
Lakoko ti a ko ṣe atilẹyin ni ifowosi eyikeyi awọn afikun ẹnikẹta tabi awọn afikun, a funni ni imọran to wulo lati ṣe iranlọwọ yago fun awọn ọran ti o pọju ninu awọn iṣẹ akanṣe rẹ.
Diẹ ninu sọfitiwia ẹnikẹta, pẹlu Awọn maapu Google ati Ẹrọ Ṣiṣawari Aṣa Google, rogbodiyan pẹlu Bootstrap nitori * { box-sizing: border-box; }
, ofin kan ti o jẹ ki padding
ko ni ipa lori iwọn iṣiro ipari ti ohun kan. Kọ ẹkọ diẹ sii nipa awoṣe apoti ati iwọn ni Awọn ẹtan CSS .
Ti o da lori ọrọ-ọrọ, o le fagilee bi o ṣe nilo (Aṣayan 1) tabi tun iwọn apoti fun gbogbo awọn agbegbe (Aṣayan 2).
Bootstrap tẹle awọn iṣedede wẹẹbu ti o wọpọ ati-pẹlu ipadanu afikun diẹ — le ṣee lo lati ṣẹda awọn aaye ti o wa fun awọn ti nlo AT .
Ti lilọ kiri rẹ ba ni ọpọlọpọ awọn ọna asopọ ati pe o wa ṣaaju akoonu akọkọ ninu DOM, ṣafikun ọna Skip to main content
asopọ kan ṣaaju lilọ kiri (fun alaye ti o rọrun, wo nkan A11Y Project yii lori awọn ọna asopọ lilọ kiri ). Lilo .sr-only
kilasi naa yoo fi oju pamọ ọna asopọ fo, ati .sr-only-focusable
kilasi yoo rii daju pe ọna asopọ yoo han ni kete ti idojukọ (fun awọn olumulo keyboard ti o rii).
Nitori awọn ailagbara igba pipẹ / awọn idun ni Chrome (wo ọrọ 262171 ninu olutọpa bug Chromium ) ati Internet Explorer (wo nkan yii lori awọn ọna asopọ oju-iwe ati aṣẹ idojukọ ), iwọ yoo nilo lati rii daju pe ibi-afẹde ti ọna asopọ foo rẹ jẹ o kere ju ni idojukọ siseto nipa fifi kun tabindex="-1"
.
Ni afikun, o le fẹ lati fi han ni gedegbe ifihan itọkasi idojukọ ti o han lori ibi-afẹde (paapaa bi Chrome lọwọlọwọ ṣe ṣeto idojukọ lori awọn eroja pẹlu tabindex="-1"
nigba ti wọn tẹ pẹlu Asin) pẹlu #content:focus { outline: none; }
.
Ṣe akiyesi pe kokoro yii yoo tun kan eyikeyi awọn ọna asopọ oju-iwe miiran ti aaye rẹ le lo, ti o sọ wọn di asan fun awọn olumulo keyboard. O le ronu fifi iru iduro-aafo iduro kan kun si gbogbo awọn ìdákọró/awọn idamọ ajẹkù ti a npè ni ti o ṣe bi awọn ibi-afẹde ọna asopọ.
Nigbati awọn akọle itẹ-ẹiyẹ ( <h1>
- <h6>
), akọsori iwe akọkọ rẹ yẹ ki o jẹ <h1>
. Awọn akọle ti o tẹle yẹ ki o lo ọgbọn <h2>
- <h6>
iru bẹ awọn oluka iboju le kọ tabili awọn akoonu fun awọn oju-iwe rẹ.
Kọ ẹkọ diẹ sii ni HTML CodeSniffer ati Agbara Wiwọle ti Ipinle Penn .
Lọwọlọwọ, diẹ ninu awọn akojọpọ awọ aiyipada ti o wa ni Bootstrap (gẹgẹbi awọn oriṣiriṣi awọn kilasi bọtini ara, diẹ ninu awọn koodu ti n ṣe afihan awọn awọ ti a lo fun awọn bulọọki koodu ipilẹ , kilasi oluranlọwọ .bg-primary
ipilẹ ọrọ , ati awọ ọna asopọ aiyipada nigba lilo lori ipilẹ funfun) ni ipin itansan kekere (ni isalẹ ipin ti a ṣeduro ti 4.5: 1 ). Eyi le fa awọn iṣoro si awọn olumulo pẹlu iran kekere tabi ti o jẹ afọju awọ. Awọn awọ aiyipada wọnyi le nilo lati yipada lati mu iyatọ wọn pọ si ati legibility.
Bootstrap ti tu silẹ labẹ iwe-aṣẹ MIT ati pe o jẹ aṣẹ lori ara 2016 Twitter. Sise si isalẹ lati awọn ege kekere, o le ṣe apejuwe pẹlu awọn ipo wọnyi.
Iwe-aṣẹ Bootstrap ni kikun wa ni ibi ipamọ iṣẹ akanṣe fun alaye diẹ sii.
Awọn ọmọ ẹgbẹ agbegbe ti tumọ iwe Bootstrap si awọn ede oriṣiriṣi. Ko si ọkan ti o ni atilẹyin ni ifowosi ati pe wọn le ma jẹ imudojuiwọn nigbagbogbo.
A ko ṣe iranlọwọ lati ṣeto tabi gbalejo awọn itumọ, a kan sopọ mọ wọn.
Ti pari titun tabi itumọ to dara julọ? Ṣii ibeere fifa lati ṣafikun si atokọ wa.