Osakatula ndi zida
Phunzirani za asakatuli ndi zida, kuyambira zamakono mpaka zakale, zomwe zimathandizidwa ndi Bootstrap, kuphatikiza zodziwika bwino ndi nsikidzi pa chilichonse.
Bootstrap imathandizira kutulutsa kwaposachedwa, kokhazikika kwa asakatuli onse akuluakulu ndi nsanja. Pa Windows, timathandizira Internet Explorer 10-11 / Microsoft Edge .
Asakatuli ena omwe amagwiritsa ntchito mtundu waposachedwa kwambiri wa WebKit, Blink, kapena Gecko, kaya mwachindunji kapena kudzera pawebusayiti ya API, samathandizidwa. Komabe, Bootstrap iyenera (nthawi zambiri) kuwonetsa ndikugwira ntchito moyenera msakatuliwanso. Zambiri zothandizira zikuperekedwa pansipa.
Mutha kupeza asakatuli athu osiyanasiyana omwe amathandizidwa ndi mitundu yawo mupackage.json :
"browserslist": [
"last 1 major version",
">= 1%",
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
Timagwiritsa ntchito Autoprefixer kuti tithandizire pa msakatuli womwe tikufuna kudzera pa CSS prefixes, yomwe imagwiritsa ntchito Browserslist kuyang'anira mitundu iyi. Onani zolembedwa zawo zamomwe mungaphatikizire zida izi m'mapulojekiti anu.
Nthawi zambiri, Bootstrap imathandizira mitundu yaposachedwa ya asakatuli amtundu uliwonse. Dziwani kuti asakatuli a proxy (monga Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) sagwiritsidwa ntchito.
| Chrome | Firefox | Safari | Android Browser & WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Zothandizidwa | Zothandizidwa | N / A | Android v5.0+ imathandizidwa | Zothandizidwa |
| iOS | Zothandizidwa | Zothandizidwa | Zothandizidwa | N / A | Zothandizidwa |
| Windows 10 Mobile | N / A | N / A | N / A | N / A | Zothandizidwa |
Mofananamo, mitundu yaposachedwa ya asakatuli ambiri apakompyuta imathandizidwa.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Zothandizidwa | Zothandizidwa | N / A | N / A | Zothandizidwa | Zothandizidwa |
| Mawindo | Zothandizidwa | Zothandizidwa | Imathandizidwa, IE10+ | Zothandizidwa | Zothandizidwa | Osathandizidwa |
Kwa Firefox, kuwonjezera pa kumasulidwa kokhazikika kwaposachedwa, timathandiziranso mtundu waposachedwa wa Extended Support Release (ESR) wa Firefox.
Mosavomerezeka, Bootstrap iyenera kuyang'ana ndikuchita bwino mu Chromium ndi Chrome ya Linux, Firefox ya Linux, ndi Internet Explorer 9, ngakhale sizimathandizidwa.
Kuti mupeze mndandanda wazovuta zina za msakatuli zomwe Bootstrap ikuyenera kulimbana nazo, onani Wall of browser bugs .
Internet Explorer 10+ imathandizidwa; IE9 ndi pansi si. Chonde dziwani kuti zinthu zina za CSS3 ndi HTML5 sizimagwiritsidwa ntchito mokwanira mu IE10, kapena zimafuna ma prefix kuti zigwire ntchito zonse. Pitani Kodi ndingagwiritse ntchito… kuti mumve zambiri za chithandizo cha msakatuli cha CSS3 ndi mawonekedwe a HTML5.
Ngati mukufuna thandizo la IE8-9, gwiritsani ntchito Bootstrap 3. Ndilo mtundu wokhazikika wa code yathu ndipo imathandizidwabe ndi gulu lathu pakukonza zolakwika ndikusintha zolemba. Komabe, palibe zatsopano zomwe zidzawonjezedwe kwa izo.
Thandizo overflow: hidden;pa <body>chinthucho ndi chochepa mu iOS ndi Android. Kuti izi zitheke, mukamadutsa pamwamba kapena pansi pa modal mu msakatuli uliwonse wa zidazo, zomwe <body>zili mkatimo zimayamba kusuntha. Onani Chrome bug #175502 (yokhazikika mu Chrome v40) ndi WebKit bug #153852 .
Pofika pa iOS 9.2, pomwe modal imatsegulidwa, ngati kukhudza koyambirira kwa mpukutu kumakhala m'malire a malemba <input>kapena a <textarea>, zomwe <body>zili pansi pa modal zidzasunthidwa m'malo mwa modal yokha. Onani cholakwika cha WebKit #153856 .
Chinthucho .dropdown-backdropsichimagwiritsidwa ntchito pa iOS mu nav chifukwa cha zovuta za z-indexing. Chifukwa chake, kuti mutseke zotsikira mu navbars, muyenera kudina mwachindunji chinthucho (kapena china chilichonse chomwe chingatsegule chochitika mu iOS ).
Kuyang'ana masamba mosalephera kumapereka zinthu zakale muzinthu zina, mu Bootstrap ndi intaneti yonse. Kutengera ndi vuto, titha kukonza (fufuzani kaye kenako ndikutsegulanso ngati pakufunika kutero). Komabe, timakonda kunyalanyaza izi chifukwa nthawi zambiri alibe yankho lachindunji kupatula ma workaround achinyengo.
Ngakhale :hoverkuti sizingatheke pazida zambiri zogwira, iOS imatengera izi, zomwe zimapangitsa kuti pakhale masitayelo "omata" omwe amapitilira mukangodina chinthu chimodzi. Mitundu ya hover iyi imachotsedwa pokhapokha ogwiritsa ntchito agogoda chinthu china. Khalidweli limawonedwa ngati losayenera ndipo likuwoneka kuti silili vuto pazida za Android kapena Windows.
Pakutulutsa kwathu konse kwa v4 alpha ndi beta, tidaphatikiza nambala yosakwanira komanso yopereka ndemanga kuti mulowe mufunso lazankhani zomwe zingalepheretse masitayelo a hover pakusakatula zida zomwe zimatengera kuyendayenda. Ntchitoyi sinamalizidwe kapena kuthandizidwa, koma kuti tipewe kusweka kwathunthu, tasankha kusiya shim iyi ndikusunga zosakaniza ngati njira zazifupi zamakalasi abodza.
Ngakhale m'masakatuli ena amakono, kusindikiza kungakhale kosokoneza.
Monga Safari v8.0, kugwiritsa ntchito kalasi yokhazikika-width .containerkungayambitse Safari kugwiritsa ntchito font yaying'ono posindikiza. Onani nkhani #14868 ndi WebKit bug #138192 kuti mumve zambiri. Chimodzi mwazomwe mungachite ndi CSS iyi:
@media print {
.container {
width: auto;
}
}Kuchokera m'bokosilo, Android 4.1 (ndiponso zotulutsa zatsopano) zimatumiza ndi pulogalamu ya Msakatuli ngati msakatuli wosankha (mosiyana ndi Chrome). Tsoka ilo, pulogalamu ya Msakatuli ili ndi zolakwika zambiri komanso zosagwirizana ndi CSS yonse.
Pazinthu <select>, msakatuli wa stock wa Android sawonetsa zowongolera zam'mbali ngati pali ndi border-radius/ kapena borderkugwiritsidwa ntchito. (Onani funso ili la StackOverflow kuti mumve zambiri.) Gwiritsani ntchito kaduka kakang'ono ka khodi ili m'munsimu kuti muchotse CSS yolakwayo ndikupereka <select>ngati chinthu chosasinthidwa pa msakatuli wa stock wa Android. Wogwiritsa ntchito akununkhiza amapewa kusokoneza asakatuli a Chrome, Safari, ndi Mozilla.
<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>Mukufuna kuwona chitsanzo? Onani chiwonetsero cha JS Bin ichi.
Kuti apereke chidziwitso chabwino kwambiri kwa asakatuli akale ndi ngolo, Bootstrap imagwiritsa ntchito ma hacks a CSS m'malo angapo kulunjika CSS yapadera kumitundu ina ya asakatuli kuti azitha kuthana ndi nsikidzi mu osatsegula okha. Ma hacks awa momveka amapangitsa ovomerezeka a CSS kudandaula kuti ndiwosavomerezeka. M'malo angapo, timagwiritsanso ntchito zida za CSS zotuluka magazi zomwe sizinakhazikike bwino, koma zimagwiritsidwa ntchito pongowonjezera pang'onopang'ono.
Machenjezo ovomerezekawa alibe ntchito chifukwa gawo la CSS lathu lopanda chinyengo limatsimikizira bwino ndipo magawo omwe amasokoneza samasokoneza kugwira ntchito moyenera kwa gawo lopanda chinyengo, chifukwa chake timanyalanyaza dala machenjezo awa.
Zolemba zathu za HTML zilinso ndi machenjezo ang'onoang'ono komanso osafunikira a HTML chifukwa chophatikizira njira yothetsera vuto linalake la Firefox .