Source

Mabhurawuza uye zvishandiso

Dzidza nezvemabhurawuza uye zvishandiso, kubva zvazvino kusvika zvekare, zvinotsigirwa neBootstrap, kusanganisira zvinozivikanwa quirks uye tsikidzi kune yega yega.

Mabhurawuza anotsigirwa

Bootstrap inotsigira ichangoburwa, yakagadzikana kuburitswa kwese makuru mabhurawuza uye mapuratifomu. PaWindows, tinotsigira Internet Explorer 10-11 / Microsoft Edge .

Mamwe mabhurawuza anoshandisa yazvino vhezheni yeWebKit, Blink, kana Gecko, ingave yakananga kana kuburikidza neyepuratifomu yewebhu yekuona API, haina kutsigirwa zvakajeka. Nekudaro, Bootstrap inofanirwa (munguva zhinji) kuratidza uye kushanda nemazvo mumabhurawuza aya zvakare. Ruzivo rwakawanda rwerutsigiro rwunopihwa pazasi.

Unogona kuwana mabhurawuza edu anotsigirwa neshanduro dzawo mune yedu.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

Isu tinoshandisa Autoprefixer kubata inotarirwa bhurawuza rutsigiro kuburikidza neCSS prefixes, iyo inoshandisa Browserslist kubata idzi shanduro dzebrowser. Tarisa zvinyorwa zvavo kuti ungabatanidza sei maturusi aya mumapurojekiti ako.

Mobile midziyo

Kazhinji kutaura, Bootstrap inotsigira ichangoburwa vhezheni yega yega hombe yepuratifomu mabhurawuza. Ziva kuti mabhurawuza (akadai seOpera Mini, Opera Mobile's Turbo modhi, UC Browser Mini, Amazon Silk) haatsigirwe.

Chrome Firefox Safari Android Browser & WebView Microsoft Edge
Android Inotsigirwa Inotsigirwa N/A Android v5.0+ inotsigirwa Inotsigirwa
iOS Inotsigirwa Inotsigirwa Inotsigirwa N/A Inotsigirwa
Windows 10 Mobile N/A N/A N/A N/A Inotsigirwa

Desktop browsers

Saizvozvo, ichangoburwa vhezheni yeakawanda desktop browser anotsigirwa.

Chrome Firefox Internet Explorer Microsoft Edge Opera Safari
Mac Inotsigirwa Inotsigirwa N/A N/A Inotsigirwa Inotsigirwa
Windows Inotsigirwa Inotsigirwa Inotsigirwa, IE10+ Inotsigirwa Inotsigirwa Haisi kutsigirwa

YeFirefox, mukuwedzera kune yazvino yakajairwa kuburitswa, isu tinotsigirawo yazvino Yakawedzerwa Rutsigiro Kuburitswa (ESR) vhezheni yeFirefox.

Zvisina pamutemo, Bootstrap inofanirwa kutarisa uye kuzvibata zvakanaka muChromium uye Chrome yeLinux, Firefox yeLinux, uye Internet Explorer 9, kunyangwe isingatsigirwe zviri pamutemo.

Kuti uwane runyoro rwemamwe mabhurawuza ebhurawuza ayo Bootstrap anofanirwa kugadzirisa nawo, ona yedu Wall yebrowser bugs .

Internet Explorer

Internet Explorer 10+ inotsigirwa; IE9 uye pasi haisi. Ndapota ziva kuti zvimwe zvivakwa zveCSS3 neHTML5 zvinhu hazvina kutsigirwa zvizere muIE10, kana kuti zvinoda prefixed zvivakwa kuti zvishande zvizere. Shanyira Ndinogona kushandisa… kune ruzivo nezverutsigiro rwebrowser yeCSS3 uye HTML5 maficha. Kana iwe uchida rutsigiro rweIE8-9, shandisa Bootstrap 3.

Modals uye kudonha pane mobile

Kufashukira uye kupuruzira

Tsigiro yechinhu overflow: hidden;pane <body>inogumira muIOS uye Android. Kuti izvozvo zviitike, kana iwe ukapfuura nepamusoro kana pasi pe modal mune chero yeaya mabhurawuza emidziyo, <body>zvirimo zvinotanga kupururudza. Ona Chrome bug #175502 (yakagadziriswa muChrome v40) uye WebKit bug #153852 .

iOS zvinyorwa zvinyorwa uye kupuruzira

As of iOS 9.2, while a modal is open, if the initial touch of a scroll gesture is within the boundary of a textual <input> or a <textarea>, the <body> content underneath the modal will be scrolled instead of the modal itself. See WebKit bug #153856.

The .dropdown-backdrop element isn’t used on iOS in the nav because of the complexity of z-indexing. Thus, to close dropdowns in navbars, you must directly click the dropdown element (or any other element which will fire a click event in iOS).

Browser zooming

Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.

Sticky :hover/:focus on iOS

While :hover isn’t possible on most touch devices, iOS emulates this behavior, resulting in “sticky” hover styles that persist after tapping one element. These hover styles are only removed when users tap another element. This behavior is considered largely undesirable and appears to not be an issue on Android or Windows devices.

Throughout our v4 alpha and beta releases, we included incomplete and commented out code for opting into a media query shim that would disable hover styles in touch device browsers that emulate hovering. This work was never fully completed or enabled, but to avoid complete breakage, we’ve opted to deprecate this shim and keep the mixins as shortcuts for the pseudo-classes.

Printing

Even in some modern browsers, printing can be quirky.

As of Safari v8.0, use of the fixed-width .container class can cause Safari to use an unusually small font size when printing. See issue #14868 and WebKit bug #138192 for more details. One potential workaround is the following CSS:

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

Android stock browser

Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.

Select menu

On <select> elements, the Android stock browser will not display the side controls if there is a border-radius and/or border applied. (See this StackOverflow question for details.) Use the snippet of code below to remove the offending CSS and render the <select> as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.

<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>

Want to see an example? Check out this JS Bin demo.

Validators

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.

Mapepa edu eHTML anewo yambiro diki uye isingakoshesi yeHTML nekuda kwekubatanidzwa kwedu kwekugadzirisa kune imwe Firefox bug .