Mabhurawuza uye zvishandiso
Dzidza nezvemabhurawuza uye zvishandiso, kubva zvazvino kusvika zvekare, zvinotsigirwa neBootstrap, kusanganisira zvinozivikanwa quirks uye tsikidzi kune yega yega.
Bootstrap inotsigira ichangoburwa, yakagadzikana kuburitswa kwese makuru mabhurawuza uye mapuratifomu. PaWindows, tinotsigira Internet Explorer 10-11 / Microsoft Edge .
Mamwe mabhurawuza anoshandisa yazvino vhezheni yeWebKit, Blink, kana Gecko, ingave yakananga kana kuburikidza neyepuratifomu yewebhu yekuona API, haina kutsigirwa zvakajeka. Nekudaro, Bootstrap inofanirwa (munguva zhinji) kuratidza uye kushanda nemazvo mumabhurawuza aya zvakare. Ruzivo rwakawanda rwerutsigiro rwunopihwa pazasi.
Unogona kuwana mabhurawuza edu anotsigirwa neshanduro dzawo mune yedupackage.json :
"browserslist": [
"last 1 major version",
">= 1%",
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
Isu tinoshandisa Autoprefixer kubata inotarirwa bhurawuza rutsigiro kuburikidza neCSS prefixes, iyo inoshandisa Browserslist kubata idzi shanduro dzebrowser. Tarisa zvinyorwa zvavo kuti ungabatanidza sei maturusi aya mumapurojekiti ako.
Kazhinji kutaura, Bootstrap inotsigira ichangoburwa vhezheni yega yega hombe yepuratifomu mabhurawuza. Ziva kuti mabhurawuza (akadai seOpera Mini, Opera Mobile's Turbo modhi, UC Browser Mini, Amazon Silk) haatsigirwe.
| Chrome | Firefox | Safari | Android Browser & WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Inotsigirwa | Inotsigirwa | N/A | Android v5.0+ inotsigirwa | Inotsigirwa |
| iOS | Inotsigirwa | Inotsigirwa | Inotsigirwa | N/A | Inotsigirwa |
| Windows 10 Mobile | N/A | N/A | N/A | N/A | Inotsigirwa |
Saizvozvo, ichangoburwa vhezheni yeakawanda desktop browser anotsigirwa.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Inotsigirwa | Inotsigirwa | N/A | N/A | Inotsigirwa | Inotsigirwa |
| Windows | Inotsigirwa | Inotsigirwa | Inotsigirwa, IE10+ | Inotsigirwa | Inotsigirwa | Haisi kutsigirwa |
YeFirefox, mukuwedzera kune yazvino yakajairwa kuburitswa, isu tinotsigirawo yazvino Yakawedzerwa Rutsigiro Kuburitswa (ESR) vhezheni yeFirefox.
Zvisina pamutemo, Bootstrap inofanirwa kutarisa uye kuzvibata zvakanaka muChromium uye Chrome yeLinux, Firefox yeLinux, uye Internet Explorer 9, kunyangwe isingatsigirwe zviri pamutemo.
Kuti uwane runyoro rwemamwe mabhurawuza ebhurawuza ayo Bootstrap anofanirwa kugadzirisa nawo, ona yedu Wall yebrowser bugs .
Internet Explorer 10+ inotsigirwa; IE9 uye pasi haisi. Ndapota ziva kuti zvimwe zvivakwa zveCSS3 neHTML5 zvinhu hazvina kutsigirwa zvizere muIE10, kana kuti zvinoda prefixed zvivakwa kuti zvishande zvizere. Shanyira Ndinogona kushandisa… kune ruzivo nezverutsigiro rwebrowser yeCSS3 uye HTML5 maficha.
Kana uchida tsigiro yeIE8-9, shandisa Bootstrap 3. Ndiyo shanduro yakatsiga zvikuru yekodhi yedu uye ichiri kutsigirwa nechikwata chedu pakugadzirisa kwakakosha uye magwaro ekuchinja. Zvisinei, hapana zvitsva zvichawedzerwa kwairi.
Tsigiro yechinhu overflow: hidden;pane <body>inogumira muIOS uye Android. Kuti izvozvo zviitike, kana iwe ukapfuura nepamusoro kana pasi pe modal mune chero yeaya mabhurawuza emidziyo, <body>zvirimo zvinotanga kupururudza. Ona Chrome bug #175502 (yakagadziriswa muChrome v40) uye WebKit bug #153852 .
Kubva paIOS 9.2, nepo modal yakavhurika, kana kubata kwekutanga kwemupumburu gesture kuri mukati memuganho wechinyorwa <input>kana a <textarea>, <body>zviri pasi peiyo modal zvichapepetwa pachinzvimbo cheiyo modal pachayo. Ona WebKit bug #153856 .
Chinhu .dropdown-backdropchacho hachishandiswe paIOS mune nav nekuda kwekuoma kwez-indexing. Saka, kuvhara kudonhedza mumabhawa, iwe unofanirwa kudzvanya zvakananga chinhu chinodonha (kana chero chimwe chinhu chinopisa chiitiko chekudzvanya mu iOS ).
Kufembera kwepeji kunopa zvisingadzivisiki kupa zvigadzirwa mune zvimwe zvikamu, zvese muBootstrap uye newebhu yese. Zvichienderana nenyaya, tinogona kuzvigadzirisa (tsvaga kutanga uye wozovhura nyaya kana zvichidikanwa). Nekudaro, isu tinowanzo kufuratira izvi sezvo ivo kazhinji vasina mhinduro yakananga kunze kwehacky workaround.
Kunyange :hoverzvisingaite pamidziyo yakawanda yekubata, iOS inotevedzera maitiro aya, zvichikonzera "kunamira" hover masitaera anoenderera mushure mekudzvanya chinhu chimwe. Aya ma hover masitayipi anobviswa chete kana vashandisi vatora chimwe chinhu. Maitiro aya anoonekwa seasingafadzi uye anoita kunge isiri nyaya paAndroid kana Windows zvishandiso.
Munguva yedu yese v4 alpha uye beta kuburitswa, isu takasanganisira isina kukwana uye yakataura kunze kodhi yekusarudza kupinda mune midhiya yemubvunzo shim iyo inodzima hover masitaera mukubata mudziyo mabhurawuza anotevedzera hovering. Iri basa harina kumbopedzwa zvizere kana kugoneswa, asi kuti tidzivise kuputswa, takasarudza kusiya iyi shim uye kuchengeta mamisanganiswa semapfupi emakirasi emanyepo.
Kunyangwe mune mamwe mabhurawuza emazuva ano, kudhinda kunogona kuve kwakaoma.
NezveSafari v8.0, kushandiswa kwekirasi-yakafara .containerkirasi kunogona kukonzera Safari kushandisa saizi diki isina kujairika pakudhinda. Ona chinyorwa #14868 uye WebKit bug #138192 kuti uwane rumwe ruzivo. Imwe inogona kushanda ndiyo inotevera CSS:
@media print {
.container {
width: auto;
}
}Kunze kwebhokisi, Android 4.1 (uye kunyangwe zvimwe zvitsva zvinoburitswa sezviri pachena) ngarava ine Browser app seye default web browser yesarudzo (kusiyana neChrome). Nehurombo, iyo Browser app ine akawanda mabhugi uye kusawirirana neCSS zvakazara.
Pane <select>zvinhu, iyo Android stock browser haizoratidze iyo yedivi zvinodzora kana paine border-radiusuye / kana borderyakashandiswa. (Ona uyu mubvunzo weStackOverflow kuti uwane udzame.) Shandisa chidimbu chekodhi pazasi kuti ubvise CSS iri kugumbura uye ratidza <select>sechinhu chisina kunyorwa paAndroid stock browser. Mushandisi anofemba anodzivirira kukanganiswa neChrome, Safari, uye Mozilla browser.
<script>
$(function () {
var nua = navigator.userAgent
var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
if (isAndroid) {
$('select.form-control').removeClass('form-control').css('width', '100%')
}
})
</script>Unoda kuona muenzaniso? Tarisa uone iyi JS Bin demo.
Kuti ipe ruzivo rwepamusoro kune ekare uye mabhurawuza, Bootstrap inoshandisa CSS browser hacks munzvimbo dzinoverengeka kunanga yakakosha CSS kune dzimwe shanduro dzebrowser kuitira kuti ushande zvakatenderedza mabhugi mumabhurawuza pachawo. Aya hacks zvinonzwisisika anokonzera CSS validators kunyunyuta kuti haakodzeri. Munzvimbo dzakati wandei, isu tinoshandisawo kubuda ropa-kumucheto CSS maficha asati anyatso mira, asi aya anoshandiswa chete kufambira mberi.
Idzi yambiro dzekusimbisa hadzina basa mukuita sezvo iyo isiri-hacky chikamu cheCSS yedu ichinyatso simbisa uye zvikamu zvehacky hazvikanganise nekushanda kwakanaka kwechikamu chisiri chehacky, saka nei tichiregeredza nemaune yambiro idzi.
Mapepa edu eHTML anewo yambiro diki uye isingakoshesi yeHTML nekuda kwekubatanidzwa kwedu kwekugadzirisa kune imwe Firefox bug .