Source

Browser iyo aaladaha

Baro wax ku saabsan daalacashada iyo aaladaha, laga bilaabo casriga ilaa kuwii hore, ee ay taageerto Bootstrap, oo ay ku jiraan quirks iyo cayayaan kasta.

daalacashada la taageeray

Bootstrap waxay taageertaa sii dayntii ugu dambeysay, xasilloon ee dhammaan daalacashada waaweyn iyo aaladaha. On Windows, waxaan taageernaa Internet Explorer 10-11 / Microsoft Edge .

Daalacashada beddelka ah ee adeegsata noocii ugu dambeeyay ee WebKit, Blink, ama Gecko, ha ahaato si toos ah ama ha ahaato goobta muuqaalka shabakadda API, si cad looma taageero. Si kastaba ha ahaatee, Bootstrap waa in (xaaladaha intooda badan) ay si sax ah u soo bandhigaan oo si sax ah ugu shaqeeyaan daalacashadan sidoo kale. Macluumaad dheeri ah oo gaar ah ayaa lagu bixiyaa hoosta.

Waxaad ka heli kartaa daalacashadayada kala duwan ee la taageeray iyo noocyadoodapackage.json :

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

Waxaan u isticmaalnaa Autoprefixer si aan u maareyno taageerada browser-ka loogu tala galay anagoo adeegsanayna horgalayaasha CSS, kaas oo isticmaala liiska Browsers si uu u maamulo noocyada browserka. Kala tasho dukumeentiyadooda sida loogu dari karo qalabkan mashaariicdaada.

Qalabka mobilada

Guud ahaan, Bootstrap waxay taageertaa noocyadii ugu dambeeyay ee madal kasta oo daalacashada caadiga ah. Ogow in browsers-yada wakiillada ah (sida Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) aan la taageerin.

Chrome Firefox Safari Android Browser & WebView Microsoft Edge
Android Taageeray Taageeray N/A Android v5.0+ waa la taageeray Taageeray
IOS Taageeray Taageeray Taageeray N/A Taageeray
Windows 10 Mobile N/A N/A N/A N/A Taageeray

daalacashada Desktop

Sidoo kale, noocyadii ugu dambeeyay ee inta badan daalacashada desktop-ka waa la taageerayaa.

Chrome Firefox Internet Explorer Microsoft Edge Opera Safari
Mac Taageeray Taageeray N/A N/A Taageeray Taageeray
Daaqadaha Taageeray Taageeray La taageeray, IE10+ Taageeray Taageeray Lama taageero

Firefox, marka lagu daro sii dayntii ugu dambeysay ee xasilloonida, waxaan sidoo kale taageernaa sii deynta Taageerada Dheeraadka ah ee ugu dambeysay (ESR) ee Firefox.

Si aan rasmi ahayn, Bootstrap waa inuu si fiican ugu dhaqmaa Chromium iyo Chrome ee Linux, Firefox for Linux, iyo Internet Explorer 9, in kasta oo aan si rasmi ah loo taageerin.

Liisaska qaar ka mid ah cilladaha browserka ee Bootstrap ay tahay in uu la tacaalo, arag darbigayaga kutaannada browserka .

Internet Explorer

Internet Explorer 10+ waa la taageeray; IE9 iyo hoos ma aha. Fadlan la soco in qaar ka mid ah guryaha CSS3 iyo HTML5 aan si buuxda loogu taageerin IE10, ama ay u baahan yihiin guryaha horgalayaasha ah ee shaqayn buuxda. Booqo Miyaan isticmaali karaa… si aad u hesho faahfaahinta taageerada browserka ee CSS3 iyo astaamaha HTML5.

Haddii aad u baahan tahay taageerada IE8-9, isticmaal Bootstrap 3. Waa nooca ugu xasiloon ee koodkayaga waxaana weli taageera kooxdayada khaladaadka muhiimka ah iyo isbeddellada dukumentiga. Si kastaba ha ahaatee, sifooyin cusub laguma dari doono

Hababka iyo hoos u dhigida mobilada

Buux-dhaaf iyo rogrogid

Taageerada curiyaha overflow: hidden;ayaa <body>aad u xaddidan macruufka iyo Android. Si taas loo gaaro, marka aad ka gudubto xagga sare ama hoose ee modal mid ka mid ah daalacashada aaladahaas, <body>waxa ku jira ayaa bilaabi doona in ay rogaan. Eeg bug Chrome ah #175502 (ku xidhan Chrome v40) iyo bug WebKit #153852 .

Garoomada qoraalka ee iOS iyo duuduub

Sida iOS 9.2, halka modal furan yahay, haddii taabashada bilowga ah ee tilmaanta duubku ay ku dhex jirto xadka qoraalka <input>ama a <textarea>, <body>waxa ku jira modalka hoostiisa waa la rogrogmi doonaa halkii modal laftiisa. Fiiri WebKit bug #153856 .

Cunsurka .dropdown-backdroplooma isticmaalo IOS ee nav sababtoo ah kakanaanta z-indexing. Markaa, si aad u xidho hoos u dhaca navbars, waa inaad si toos ah u gujisaa qaybta hoos u dhaca (ama shay kasta oo kale kaas oo kicin doona dhacdo gujin ah oo ku taal iOS ).

Browser-gaaban

Soo-dhoweynta bogga ayaa si lama filaan ah u soo bandhigaysa samaynta farshaxan ee qaybaha qaarkood, labadaba Bootstrap iyo inta kale ee shabakadda. Iyadoo ay ku xiran tahay arrinta, waxaa laga yaabaa inaan awoodno inaan hagaajino (marka hore raadi ka dibna fur arrin haddii loo baahdo). Si kastaba ha ahaatee, waxaan u muuqannaa inaan iska indhatirno kuwan maadaama aysan inta badan haysan xal toos ah oo aan ahayn xalal xun.

Ku dheggan :hover/ :focusiOS

In kasta :hoveroo aanay suurtogal ahayn inta badan aaladaha taabashada, IOS waxa ay ku daydaa hab-dhaqankan, taas oo keenta qaabab “dheg-dheg leh” oo sii socda ka dib marka la taabto hal shay. Hababkan dullidda waxa la saaraa kaliya marka isticmaalayaashu taabtaan shay kale. Dhaqankan waxa loo arkaa mid aan si weyn loo jeclayn oo u muuqda in aanu ahayn arrin ku saabsan aaladaha Android ama Windows.

Inta lagu jiro sii deynta v4 alpha iyo beta, waxaan ku soo darnay mid aan dhameystirneyn oo ka faalloonnay koodka xulashada shimka weydiinta warbaahinta kaas oo baabi'in doona qaababka dullida ee daalacashada aaladaha taabashada ee ku dayanaya dul heehaabsiga. Shaqadani weligeed si buuxda looma dhammaystirin ama looma hawlgelin, laakiin si aan uga fogaano burbur dhammaystiran, waxaanu door bidnay in aanu meesha ka saarno shimkan oo aanu ka dhigno waxyaabaha la isku daray in ay noqdaan hab-gaabyo loogu talagalay fasallada been abuurka ah.

Daabacaadda

Xataa daalacashada casriga ah qaarkood, daabacaaddu waxay noqon kartaa mid qariib ah.

Marka la eego Safari v8.0, isticmaalka fasalka ballac-go'an .containerwuxuu sababi karaa Safari inay isticmaasho cabbir faryar oo aan caadi ahayn marka la daabacayo. Fiiri arrinta #14868 iyo bug WebKit #138192 wixii faahfaahin dheeraad ah. Mid ka mid ah xalinta suurtagalka ah waa CSS soo socota:

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

browserka stock Android

Marka laga reebo sanduuqa, Android 4.1 (iyo xitaa qaar cusub oo la sii daayay sida muuqata) waxay la soo degtaa abka Browser-ka oo ah browser-ka caadiga ah ee dookha (oo ka duwan Chrome). Nasiib darro, abka Browserku wuxuu leeyahay kutaanno badan iyo iswaafaqla'aan la xiriira CSS guud ahaan.

Dooro liiska

Cunsurrada <select>, browserka saamiyada Android ma soo bandhigi doono kontaroolada dhinac haddii ay jiraan border-radiusiyo/ama borderlagu dabaqay. ( Faahfaahinta ka eeg su'aashan StackOverflow <select>Wakiilka adeegsadaha dhuuqida ayaa ka fogaanaya faragelinta Chrome, Safari, iyo daalacashada 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>

Ma rabtaa inaad aragto tusaale? Fiiri JS Bin demo.

Ansixiyeyaal

In order to provide the best possible experience to old and buggy browsers, Bootstrap uses CSS browser hacks in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves. These hacks understandably cause CSS validators to complain that they are invalid. In a couple places, we also use bleeding-edge CSS features that aren’t yet fully standardized, but these are used purely for progressive enhancement.

These validation warnings don’t matter in practice since the non-hacky portion of our CSS does fully validate and the hacky portions don’t interfere with the proper functioning of the non-hacky portion, hence why we deliberately ignore these particular warnings.

Dukumeentiyadayada HTML sidoo kale waxay leeyihiin digniino ansax ah oo HTML ah oo aan waxtar lahayn oo aan macno lahayn taas oo ay ugu wacan tahay ku darista hab-dhaqanka cilad Firefox gaar ah .