Source

Diphensele le disebediswa

Ithute ka diphensele le didirišwa, go tloga go tša sebjalebjale go ya go tša kgale, tšeo di thekgwago ke Bootstrap, go akaretša le di-quirk tše di tsebjago le diphošo bakeng sa e nngwe le e nngwe.

Diphensele tše di thekgwago

Bootstrap e thekga ditokollo tša moragorago, tše di tsepamego tša diphensele ka moka tše kgolo le diforamo. Go Windows, re thekga Internet Explorer 10-11 / Microsoft Edge .

Diphensele tše dingwe tšeo di šomišago phetolelo ya moragorago ya WebKit, Blink, goba Gecko, e ka ba ka go lebanya goba ka API ya pono ya wepe ya sefala, ga di thekgwe ka go lebanya. Le ge go le bjalo, Bootstrap e swanetše (mabakeng a mantši) go bontšha le go šoma gabotse go diphensele tše le tšona. Tshedimošo ye nngwe ye e itšego ya thekgo e filwe ka mo tlase.

O ka hwetša mohuta wa rena wo o thekgwago wa diphensele le diphetolelo tša tšona go renapackage.json :

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

Re šomiša Autoprefixer go swara thekgo ya sephephediši yeo e reretšwego ka dihlongwapele tša CSS, yeo e šomišago Lenaneo la Diphensele go laola diphetolelo tše tša sephephediši. Lekola ditokomane tša bona bakeng sa kamoo o ka kopanyago didirišwa tše ka gare ga diprotšeke tša gago.

Didirišwa tša sellathekeng

Ka kakaretšo, Bootstrap e thekga diphetolelo tša moragorago tša diphensele tša go se fetoge tša sefala se sengwe le se sengwe se segolo. Hlokomela gore diphensele tša moemedi (go swana le Opera Mini, mokgwa wa Turbo wa Opera Mobile, UC Browser Mini, Amazon Silk) ga di thekgwe.

Chrome Firefox ya go šoma Safari ya go sepela Sephephediši sa Android & Pono ya Wepesaete Microsoft Edge
Android E thekgwa E thekgwa N/A Android v5.0 + e tšehetsoa E thekgwa
iOS e le E thekgwa E thekgwa E thekgwa N/A E thekgwa
Windows 10 Sellathekeng N/A N/A N/A N/A E thekgwa

Diphensele tša komporong

Ka mo go swanago, diphetolelo tša moragorago tša bontši bja diphensele tša komporong di a thekgwa.

Chrome Firefox ya go šoma Mohlohlomiši wa Inthanete Microsoft Edge Opera Safari ya go sepela
Mac E thekgwa E thekgwa N/A N/A E thekgwa E thekgwa
Mafesetere E thekgwa E thekgwa E thekgilwe, IE10 + E thekgwa E thekgwa Ga e thekgwe

Bakeng sa Firefox, go tlaleletša go tokollo ya moragorago ya tlwaelo ye e tsepamego, re thekga gape phetolelo ya moragorago ya Tokollo ya Thekgo ye e Atološitšwego (ESR) ya Firefox.

Ka tsela yeo e sego ya semmušo, Bootstrap e swanetše go lebelela le go itshwara gabotse ka mo go lekanego go Chromium le Chrome bakeng sa Linux, Firefox bakeng sa Linux, le Internet Explorer 9, le ge e le gore ga di thekgwe semmušo.

Bakeng sa lenaneo la tše dingwe tša diphošo tša sephephediši tšeo Bootstrap e swanetšego go katana le tšona, bona Leboto la rena la diphošo tša sephephediši .

Mohlohlomiši wa Inthanete

Internet Explorer 10 + e a thekgwa; IE9 le tlase ga se. Hle ela hloko gore dithoto tše dingwe tša CSS3 le dielemente tša HTML5 ga di thekgwe ka botlalo go IE10, goba di nyaka dithoto tše di hlomilwego bakeng sa go šoma ka botlalo. Etela Na nka šomiša... go hwetša dintlha ka ga thekgo ya sephephediši sa dikarolo tša CSS3 le HTML5.

Ge o nyaka thekgo ya IE8-9, šomiša Bootstrap 3. Ke phetolelo ye e tsepamego kudu ya khoutu ya rena gomme e sa thekgwa ke sehlopha sa rena bakeng sa diphošollo tše bohlokwa le diphetogo tša ditokomane. Lega go le bjalo, ga go na dikarolo tše difsa tšeo di tlago go okeletšwa go yona.

Modals le dropdowns ka selefouno

Go tlala le go kgokološa

Support bakeng sa overflow: hidden;ka <body>elements e batla e lekanyelitsoeng ka iOS le Android. Go fihlelela seo, ge o sepela go feta godimo goba tlase ga modal go e nngwe ya diphensele tša didirišwa tšeo, <body>diteng di tla thoma go sepelasepela. Bona phošo ya Chrome #175502 (e lokišitšwe go Chrome v40) le phošo ya WebKit #153852 .

iOS mongolo masimo le ho phethola

Go tloga ka iOS 9.2, mola modal e bulegile, ge e ba go kgoma ga mathomo ga boitšhišinyo bja mmele bja go phuthwa go le ka gare ga mollwane wa sengwalwa <input>goba a <textarea>, <body>diteng tšeo di lego ka tlase ga modal di tla kgokološwa go e na le modal ka boyona. Bona phošo ya WebKit #153856 .

Elemente .dropdown-backdropga e šomišwe go iOS ka go nav ka lebaka la go raragana ga z-indexing. Ka go realo, go tswalela di-dropdown ka go di-navbar, o swanetše go kgotla ka go lebanya elemente ya go theoga (goba elemente efe goba efe ye nngwe yeo e tlago go thunya tiragalo ya go kgotla ka go iOS ).

Go godiša ga sephephediši

Go godiša letlakala ka mo go sa phemegego go tšweletša dilo tša kgale tša go fetolela dikarolong tše dingwe, ka bobedi go Bootstrap le wepe ka moka. Go ya ka taba, re ka kgona go e lokiša (nyaka pele gomme ka morago wa bula taba ge go nyakega). Le ge go le bjalo, re na le tshekamelo ya go hlokomologa tše ka ge gantši di se na tharollo ye e lebanyago ntle le diphetogo tša go thuba.

Kgomarela :hover/ :focuska iOS

Le ge :hovere sa kgonege go bontši bja didirišwa tša go kgoma, iOS e ekiša boitshwaro bjo, e lego seo se feleletšago ka mekgwa ya go hover yeo e “kgomaretšego” yeo e phegelelago ka morago ga go kgotla elemente e tee. Mekgwa ye ya go hover e tlošwa fela ge badiriši ba kgotla elemente ye nngwe. Boitshwaro bjo bo tšewa e le bjo bo sa rategego kudu gomme bo bonala e se taba go didirišwa tša Android goba Windows.

Go ralala le ditokollo tša rena tša v4 alpha le beta, re ile ra akaretša khoutu ye e sa felelago le ya go swaya diphošo bakeng sa go kgetha go shim ya potšišo ya methopo ya ditaba yeo e bego e tla šitiša mekgwa ya go hover ka go diphensele tša sedirišwa sa go kgoma tšeo di ekišago go hovering. Mošomo wo ga se wa ka wa phethwa ka botlalo goba wa kgontšhwa, eupša go efoga go robega ka botlalo, re kgethile go nyatša shim ye le go boloka di-mixin bjalo ka dikgaoletšo tša diklase tša maaka.

Go gatiša

Gaešita le go diphensele tše dingwe tša mehleng yeno, go gatiša e ka ba mo go makatšago.

Go tloga go Safari v8.0, tšhomišo ya sehlopha sa bophara bjo bo sa fetogego e .containerka dira gore Safari e diriše bogolo bja fonte bjo bonyenyane ka mo go sa tlwaelegago ge e gatiša. Bona taba #14868 le WebKit bug #138192 bakeng sa dintlha tše dingwe. E nngwe ya tharollo yeo e ka bago gona ke CSS ye e latelago:

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

Sephephediši sa setoko sa Android

Out of the box, Android 4.1 (esita le ba bang ba litokollo tse ncha ho bonahala) sekepe le Browser tiriso ye e le default web sebadi sa kgetho (ho fapana le Chrome). Ka bomadimabe, tirišo ya Browser e na le diphošo tše ntši le go se dumelelane le CSS ka kakaretšo.

Kgetha menu ya

Ka <select>dielemente, sephephediši sa setoko sa Android se ka se bontšhe ditaolo tša lehlakore ge e ba go na le border-radiusle/goba bordertšeo di dirišitšwego. (Bona potšišo ye ya StackOverflow bakeng sa dintlha.) Šomiša seripa sa khoutu ye e lego ka mo tlase go tloša CSS yeo e kgopišago gomme o tšweletše <select>e le elemente yeo e sa setaelego go sephephediši sa setoko sa Android. Go nkga ga moemedi wa mosediriši go efoga tšhitišo le diphensele tša Chrome, Safari le 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>

O nyaka go bona mohlala? Hlahloba demo ena ea JS Bin.

Batho bao ba tiišetšago

Gore e kgone go fa phihlelo ye kaone ye e kgonegago go diphensele tša kgale le tša diphošo, Bootstrap e šomiša di-hack tša sephephediši sa CSS mafelong a mmalwa go nepiša CSS ye e kgethegilego go diphetolelo tše itšego tša sephephediši e le gore e šome go dikologa diphošo ka go diphensele ka botšona. Di-hack tše ka mo go kwešišegago di dira gore ba netefatši ba CSS ba ngongorege ka gore ga di šome. Ka banyalani ba bang ba libaka, re boetse re sebelisa bleeding-bohale CSS litšobotsi tse sa 'n't yet ka botlalo standardized, empa tsena di sebediswa feela bakeng sa ntlafatso tsoelang pele.

Ditemošo tše tša netefatšo ga di na taba ka tirišo ka ge karolo yeo e sego ya hacky ya CSS ya rena e netefatša ka botlalo gomme dikarolo tša hacky ga di šitiše go šoma gabotse ga karolo yeo e sego ya hacky, ke ka fao ke ka lebaka la eng re hlokomologa ka boomo ditemošo tše tše itšego.

Ditokomane tša rena tša HTML ka mo go swanago di na le ditemošo tše dingwe tše di sa rego selo le tše di se nago mohola tša netefatšo ya HTML ka lebaka la go akaretšwa ga rena ga tharollo ya phošo ya phošo ye e itšego ya Firefox .