Source

Mucukumbuzi n'ibikoresho

Wige ibijyanye na mushakisha n'ibikoresho, kuva kijyambere kugeza kera, bishyigikiwe na Bootstrap, harimo ibisobanuro bizwi na bugi kuri buri.

Mucukumbuzi

Bootstrap ishyigikira ibyasohotse vuba, bihamye bya mushakisha nini zose. Kuri Windows, dushyigikira Internet Explorer 10-11 / Microsoft Edge .

Ubundi mushakisha ukoresha verisiyo yanyuma ya WebKit, Blink, cyangwa Gecko, haba muburyo butaziguye cyangwa binyuze kumurongo wurubuga rwa API, ntabwo bashyigikiwe neza. Ariko, Bootstrap igomba (mubihe byinshi) kwerekana no gukora neza muriyi mushakisha. Ibisobanuro birambuye byingirakamaro byatanzwe hano hepfo.

Urashobora kubona urwego rushyigikiwe rwa mushakisha hamwe na verisiyo zabo muripackage.json :

"browserslist": [
  "last 1 major version",
  ">= 1%",
  "Chrome >= 45",
  "Firefox >= 38",
  "Edge >= 12",
  "Explorer >= 10",
  "iOS >= 9",
  "Safari >= 9",
  "Android >= 4.4",
  "Opera >= 30"
]

Dukoresha Autoprefixer kugirango dukemure inkunga igenewe mushakisha dukoresheje prefixes ya CSS, ikoresha Browserslist kugirango icunge verisiyo ya mushakisha. Reba inyandiko zabo zuburyo bwo kwinjiza ibyo bikoresho mumishinga yawe.

Ibikoresho bigendanwa

Mubisanzwe, Bootstrap ishyigikira verisiyo yanyuma ya buri platform nkuru idasanzwe. Menya ko mushakisha ya porokisi (nka Opera Mini, uburyo bwa Turbo bwa Opera Mobile, UC Browser Mini, Amazone Silk) idashyigikiwe.

Chrome Firefox Safari Mucukumbuzi ya Android & Urubuga Microsoft Edge
Android Gushyigikirwa Gushyigikirwa N / A. Android v5.0 + ishyigikiwe Gushyigikirwa
iOS Gushyigikirwa Gushyigikirwa Gushyigikirwa N / A. Gushyigikirwa
Windows 10 Igendanwa N / A. N / A. N / A. N / A. Gushyigikirwa

Mucukumbuzi ya desktop

Muri ubwo buryo ,, verisiyo yanyuma ya mushakisha ya desktop hafi ya yose irashyigikiwe.

Chrome Firefox Internet Explorer Microsoft Edge Opera Safari
Mac Gushyigikirwa Gushyigikirwa N / A. N / A. Gushyigikirwa Gushyigikirwa
Windows Gushyigikirwa Gushyigikirwa Bishyigikiwe, IE10 + Gushyigikirwa Gushyigikirwa Ntabwo ashyigikiwe

Kuri Firefox, hiyongereyeho gusohora bisanzwe bisanzwe bihamye, dushyigikire kandi verisiyo yanyuma yagutse (ESR) verisiyo ya Firefox.

Mu buryo butemewe, Bootstrap igomba kureba no kwitwara neza bihagije muri Chromium na Chrome kuri Linux, Firefox ya Linux, na Internet Explorer 9, nubwo bidashyigikiwe kumugaragaro.

Kurutonde rwa bimwe mubikoresho bya mushakisha Bootstrap igomba guhangana nabyo, reba Urukuta rwacu rwa mushakisha .

Internet Explorer

Internet Explorer 10+ irashyigikiwe; IE9 no hasi ntabwo. Nyamuneka umenye ko ibintu bimwe na bimwe bya CSS3 nibintu bya HTML5 bidashyigikiwe byuzuye muri IE10, cyangwa bisaba imitungo yabanjirije gukora neza. Sura Nshobora gukoresha… kubisobanuro birambuye kubufasha bwa mushakisha ya CSS3 na HTML5.

Niba ukeneye inkunga ya IE8-9, koresha Bootstrap 3. Ni verisiyo ihamye ya code yacu kandi iracyashyigikiwe nitsinda ryacu kubibazo bikomeye kandi bihindura inyandiko. Ariko, ntakintu gishya kizongerwaho.

Uburyo no kumanuka kuri mobile

Kurengerwa no kuzunguruka

Inkunga overflow: hidden;kuri <body>element ni ntarengwa muri iOS na Android. Kugirango bigerweho, mugihe uzengurutse hejuru cyangwa hepfo ya modal muri kimwe muri ibyo bikoresho bya mushakisha, <body>ibirimo bizatangira kuzunguruka. Reba amakosa ya Chrome # 175502 (yakosowe muri Chrome v40) na WebKit bug # 153852 .

iOS inyandiko yumurima hamwe no kuzunguruka

Nko kuri iOS 9.2, mugihe modal ifunguye, niba gukoraho kwambere ibimenyetso byerekana umuzingo biri mumupaka winyandiko <input>cyangwa a <textarea>, <body>ibirimo munsi yuburyo bizunguruka aho kuba modal ubwayo. Reba WebKit bug # 153856 .

Ikintu .dropdown-backdropntabwo gikoreshwa kuri iOS muri nav kubera ubunini bwa z-indangagaciro. Rero, kugirango ufunge ibitonyanga muri navbars, ugomba guhita ukanda ibintu byamanutse (cyangwa ikindi kintu icyo aricyo cyose kizarasa ibyabaye muri iOS ).

Mucukumbuzi

Page zooming byanze bikunze yerekana ibihangano mubice bimwe, haba muri Bootstrap hamwe nizindi mbuga. Ukurikije ikibazo, dushobora gushobora kugikemura (shakisha mbere hanyuma ufungure ikibazo nibiba ngombwa). Ariko, dukunze kwirengagiza ibi kuko akenshi nta gisubizo kiboneye usibye akazi keza.

Kwizirika :hover/ :focuskuri iOS

Mugihe :hoverbidashoboka kubikoresho byinshi byo gukoraho, iOS yigana iyi myitwarire, bikavamo uburyo bwa "sticky" hover ikomeza nyuma yo gukanda ikintu kimwe. Imiterere ya hover ikurwaho gusa mugihe abakoresha bakanze ikindi kintu. Iyi myitwarire ifatwa ahanini itifuzwa kandi bigaragara ko atari ikibazo kubikoresho bya Android cyangwa Windows.

Mubisohoka v4 alpha na beta twasohoye, twashyizemo kode ituzuye kandi itanga ibisobanuro kode yo guhitamo mubitangazamakuru byabajijwe shim byahagarika uburyo bwa hover muburyo bwo gukoraho ibikoresho byigana kwigana. Uyu murimo ntiwigeze urangira neza cyangwa ngo ushoboke, ariko kugirango twirinde kumeneka burundu, twahisemo gutesha agaciro iyi shim no gukomeza kuvanga nka shortcuts kumasomo ya pseudo.

Gucapa

Ndetse no muri mushakisha zimwe zigezweho, icapiro rirashobora kuba ikibazo.

Nko kuri Safari v8.0, gukoresha ikoreshwa ryubugari bwagutse .containerbirashobora gutuma Safari ikoresha ingano yimyandikire idasanzwe mugihe icapa. Reba ikibazo # 14868 na WebKit bug # 138192 kugirango ubone ibisobanuro birambuye. Ikintu kimwe gishoboka ni CSS ikurikira:

@media print {
  .container {
    width: auto;
  }
}

Mucukumbuzi ya Android

Hanze y'agasanduku, Android 4.1 (ndetse na bimwe bishya bisohoka bigaragara) yoherejwe na porogaramu ya Browser nka mushakisha y'urubuga isanzwe ihitamo (bitandukanye na Chrome). Kubwamahirwe, porogaramu ya Browser ifite amakosa menshi kandi idahuye na CSS muri rusange.

Hitamo menu

Kubintu <select>, mushakisha yimigabane ya Android ntizerekana kugenzura kuruhande niba hari border-radiusna / cyangwa borderbyashyizwe mubikorwa. . _ _ <select>_ Umukoresha ukoresha kunuka yirinda kwivanga muri mushakisha ya Chrome, Safari, na 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>

Urashaka kubona urugero? Reba kuri iyi JS Bin demo.

Abemeza

Kugirango utange uburambe bwiza bushoboka kuri mushakisha zishaje na buggy, Bootstrap ikoresha amashanyarazi ya CSS ahantu henshi kugirango yereke CSS idasanzwe kuri verisiyo zimwe na zimwe za mushakisha kugirango ikore hafi yamakosa muri mushakisha ubwabo. Izi hack birumvikana ko abemeza CSS binubira ko bitemewe. Ahantu habiri, dukoresha kandi kuva amaraso-CSS ibiranga bitaruzuzwa neza, ariko bikoreshwa gusa mukuzamura iterambere.

Iyi miburo yo kwemeza ntacyo itwaye mubikorwa kuva igice kitari hacki cya CSS yacu cyemeza neza kandi ibice bya hacky ntibibangamira imikorere myiza yigice kitari hacky, niyo mpamvu twirengagiza nkana iyi miburo yihariye.

Inyandiko zacu za HTML nazo zifite imburizi zidafite akamaro kandi zidafite ishingiro zo kwemeza HTML kubera ko dushyiramo akazi kubikorwa bya Firefox runaka .