Source

Awọn aṣàwákiri ati awọn ẹrọ

Kọ ẹkọ nipa awọn aṣawakiri ati awọn ẹrọ, lati igbalode si atijọ, ti o ni atilẹyin nipasẹ Bootstrap, 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 ṣe 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 awọn ẹrọ aṣawakiri ti o ni atilẹyin ati awọn ẹya wọn ninu wapackage.json :

"browserslist": [
  "last 1 major version",
  ">= 1%",
  "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 N/A 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. O jẹ ẹya iduroṣinṣin julọ ti koodu wa ati pe ẹgbẹ wa tun ṣe atilẹyin fun awọn bugfixes pataki ati awọn iyipada iwe. Sibẹsibẹ, ko si awọn ẹya tuntun ti yoo ṣafikun si.

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 .

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 .