Awọn aṣàwákiri ati awọn ẹrọ
Kọ ẹkọ nipa awọn aṣawakiri ati awọn ẹrọ, lati igbalode si atijọ, eyiti Bootstrap ṣe atilẹyin, pẹlu awọn quirks ti a mọ ati awọn idun fun ọkọọkan.
Awọn aṣawakiri atilẹyin
Bootstrap ṣe atilẹyin titun, awọn idasilẹ iduroṣinṣin ti gbogbo awọn aṣawakiri pataki ati awọn iru ẹrọ. Lori Windows, a ṣe atilẹyin Internet Explorer 10-11 / Microsoft Edge .
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ẹ.
O le wa ọpọlọpọ atilẹyin ti awọn aṣawakiri ati awọn ẹya wọn ninu wa.browserslistrc file :
# https://github.com/browserslist/browserslist#readme
>= 1%
last 1 major version
not dead
Chrome >= 45
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 9
Safari >= 9
Android >= 4.4
Opera >= 30
A lo Autoprefixer lati mu atilẹyin aṣawakiri ti a pinnu nipasẹ awọn ami-iṣaaju CSS, eyiti o nlo Akojọ Awọn aṣawakiri lati ṣakoso awọn ẹya aṣawakiri wọnyi. Kan si awọn iwe aṣẹ wọn fun bi o ṣe le ṣepọ awọn irinṣẹ wọnyi sinu awọn iṣẹ akanṣe rẹ.
Awọn ẹrọ alagbeka
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 Browser & WebView | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Atilẹyin | Atilẹyin | N/A | Android v5.0+ ni atilẹyin | Atilẹyin |
| iOS | Atilẹyin | Atilẹyin | Atilẹyin | N/A | Atilẹyin |
| Windows 10 Alagbeka | N/A | N/A | N/A | N/A | Atilẹyin |
Awọn aṣawakiri tabili
Bakanna, awọn ẹya tuntun ti ọpọlọpọ awọn aṣawakiri tabili tabili ni atilẹyin.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Atilẹyin | Atilẹyin | N/A | Atilẹyin | Atilẹyin | Atilẹyin |
| Windows | Atilẹyin | Atilẹyin | Atilẹyin, IE10+ | Atilẹyin | Atilẹyin | Ko ṣe atilẹyin |
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.
Laisi aṣẹ, Bootstrap yẹ ki o wo ati huwa daradara to ni Chromium ati Chrome fun Linux, Firefox fun Linux, ati Internet Explorer 9, botilẹjẹpe wọn ko ni atilẹyin ni ifowosi.
Fun atokọ diẹ ninu awọn idun ẹrọ aṣawakiri ti Bootstrap ni lati koju, wo Odi wa ti awọn idun ẹrọ aṣawakiri .
Internet Explorer
Internet Explorer 10+ ni atilẹyin; IE9 ati isalẹ kii ṣe. Jọwọ ṣe akiyesi pe diẹ ninu awọn ohun-ini CSS3 ati awọn eroja HTML5 ko ni atilẹyin ni kikun ni IE10, tabi nilo awọn ohun-ini iṣaaju fun iṣẹ ṣiṣe ni kikun. Ṣabẹwo Ṣe MO le lo… fun awọn alaye lori atilẹyin ẹrọ aṣawakiri ti CSS3 ati awọn ẹya HTML5. Ti o ba nilo atilẹyin IE8-9, lo Bootstrap 3.
Modals ati dropdowns lori mobile
Aponsedanu ati yi lọ
Atilẹ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 .
Awọn aaye ọrọ iOS ati yiyi
Bi ti iOS 9.2, 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 .
Navbar Dropdowns
Awọn .dropdown-backdropano 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 ẹrọ aṣawakiri
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.
Alalepo :hover/ :focuslori iOS
Lakoko :hoverti ko ṣee ṣe lori awọn ẹrọ ifọwọkan pupọ julọ, iOS ṣe apẹẹrẹ ihuwasi yii, ti o yorisi awọn aṣa rababa “alalepo” ti o tẹsiwaju lẹhin titẹ nkan kan. Awọn ara rababa wọnyi ni a yọkuro nikan nigbati awọn olumulo ba tẹ nkan miiran ni kia kia. Ihuwasi yii ni a ka pe ko ṣe iwulo ati pe o han pe ko jẹ ọran lori Android tabi awọn ẹrọ Windows.
Jakejado v4 alpha ati awọn idasilẹ beta wa, a ṣafikun ti ko pe ati asọye koodu fun jijade sinu shim ibeere media kan ti yoo mu awọn aṣa rababa ni awọn aṣawakiri ẹrọ ifọwọkan ti o farawe gbigbe. Iṣẹ yii ko ti pari ni kikun tabi mu ṣiṣẹ, ṣugbọn lati yago fun fifọ ni pipe, a ti yọ kuro lati yọkuro shim yii ati tọju awọn apopọ bi awọn ọna abuja fun awọn kilasi afarape.
Titẹ sita
Paapaa ni diẹ ninu awọn aṣawakiri ode oni, titẹ sita le jẹ ohun ti o wuyi.
Gẹgẹ bi ti Safari v8.0, lilo kilaasi iwọn ti o wa titi .containerle fa ki Safari lo iwọn fonti kekere ti kii ṣe deede nigba titẹ sita. Wo atejade #14868 ati bug WebKit #138192 fun alaye diẹ sii. Iṣatunṣe agbara kan ni CSS atẹle:
@media print {
.container {
width: auto;
}
}
Android iṣura kiri
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.
Yan akojọ aṣayan
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-radiusati/tabi borderlilo. (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.
<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>
Ṣe o fẹ lati ri apẹẹrẹ? Ṣayẹwo yi JS Bin demo .
Awọn olufọwọsi
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 .