Vivinjari na vifaa
Jifunze kuhusu vivinjari na vifaa, vya kisasa hadi vya zamani, ambavyo vinatumika na Bootstrap, ikijumuisha makosa na hitilafu zinazojulikana kwa kila moja.
Vivinjari vinavyotumika
Bootstrap inasaidia matoleo ya hivi punde na thabiti ya vivinjari na majukwaa yote makuu. Kwenye Windows, tunaauni Internet Explorer 10-11 / Microsoft Edge .
Vivinjari mbadala vinavyotumia toleo jipya zaidi la WebKit, Blink, au Gecko, iwe moja kwa moja au kupitia API ya mwonekano wa wavuti ya jukwaa, havitumiki kwa uwazi. Walakini, Bootstrap inapaswa (katika hali nyingi) kuonyesha na kufanya kazi ipasavyo katika vivinjari hivi pia. Taarifa maalum zaidi za usaidizi zimetolewa hapa chini.
Unaweza kupata anuwai ya vivinjari vinavyotumika na matoleo yao katika.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
Tunatumia Autoprefixer kushughulikia usaidizi uliokusudiwa wa kivinjari kupitia viambishi awali vya CSS, ambayo hutumia Orodha ya Kivinjari kudhibiti matoleo haya ya kivinjari. Angalia hati zao za jinsi ya kuunganisha zana hizi kwenye miradi yako.
Vifaa vya rununu
Kwa ujumla, Bootstrap inasaidia matoleo ya hivi punde ya kila vivinjari chaguo-msingi vya jukwaa kuu. Kumbuka kuwa vivinjari vya seva mbadala (kama vile Opera Mini, hali ya Turbo ya Opera Mobile, UC Browser Mini, Amazon Silk) havitumiki.
| Chrome | Firefox | Safari | Kivinjari cha Android na Mwonekano wa Wavuti | Microsoft Edge | |
|---|---|---|---|---|---|
| Android | Imeungwa mkono | Imeungwa mkono | N/A | Android v5.0+ inatumika | Imeungwa mkono |
| iOS | Imeungwa mkono | Imeungwa mkono | Imeungwa mkono | N/A | Imeungwa mkono |
| Windows 10 Mobile | N/A | N/A | N/A | N/A | Imeungwa mkono |
Vivinjari vya eneo-kazi
Vile vile, matoleo ya hivi karibuni ya vivinjari vingi vya eneo-kazi yanaauniwa.
| Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
|---|---|---|---|---|---|---|
| Mac | Imeungwa mkono | Imeungwa mkono | N/A | Imeungwa mkono | Imeungwa mkono | Imeungwa mkono |
| Windows | Imeungwa mkono | Imeungwa mkono | Inatumika, IE10+ | Imeungwa mkono | Imeungwa mkono | Haitumiki |
Kwa Firefox, pamoja na toleo la hivi punde thabiti la kawaida, pia tunaauni toleo la hivi punde la Utoaji wa Usaidizi Uliopanuliwa (ESR) wa Firefox.
Isivyo rasmi, Bootstrap inapaswa kuonekana na kutenda vyema katika Chromium na Chrome kwa Linux, Firefox kwa Linux, na Internet Explorer 9, ingawa hazitumiki rasmi.
Kwa orodha ya baadhi ya hitilafu za kivinjari ambazo Bootstrap inapaswa kukabiliana nazo, angalia Wall of browser bugs zetu .
Internet Explorer
Internet Explorer 10+ inatumika; IE9 na chini sio. Tafadhali fahamu kuwa baadhi ya vipengele vya CSS3 na vipengele vya HTML5 havitumiki kikamilifu katika IE10, au vinahitaji sifa zilizoangaziwa kwa utendakazi kamili. Tembelea Je, ninaweza kutumia... kwa maelezo kuhusu usaidizi wa kivinjari wa vipengele vya CSS3 na HTML5. Ikiwa unahitaji usaidizi wa IE8-9, tumia Bootstrap 3.
Modals na dropdowns kwenye simu
Kufurika na kusogeza
Usaidizi kwa overflow: hidden;kipengele <body>ni mdogo katika iOS na Android. Kwa ajili hiyo, unaposogeza juu au chini ya modali katika mojawapo ya vivinjari vya vifaa hivyo, <body>maudhui yataanza kusogeza. Tazama hitilafu ya Chrome #175502 (iliyorekebishwa katika Chrome v40) na mdudu wa WebKit #153852 .
Sehemu za maandishi za iOS na kusogeza
Kuanzia iOS 9.2, wakati modali imefunguliwa, ikiwa mguso wa kwanza wa ishara ya kusogeza uko ndani ya mpaka wa maandishi <input>au a <textarea>, <body>maudhui yaliyo chini ya modali yatasonga badala ya modali yenyewe. Tazama hitilafu ya WebKit #153856 .
Miteremko ya Upau wa Urambazaji
Kipengele .dropdown-backdrophiki hakitumiki kwenye iOS kwenye nav kwa sababu ya uchangamano wa z-index. Kwa hivyo, ili kufunga menyu kunjuzi kwenye pau za urambazaji, lazima ubofye moja kwa moja kipengee kunjuzi (au kipengele kingine chochote kitakachowasha tukio la kubofya katika iOS ).
Kukuza kwa kivinjari
Ukuzaji wa ukurasa bila shaka huwasilisha uwasilishaji wa vizalia vya programu katika baadhi ya vipengele, katika Bootstrap na kwingineko kwenye wavuti. Kulingana na tatizo, tunaweza kulitatua (tafuta kwanza kisha ufungue tatizo ikihitajika). Walakini, huwa tunapuuza haya kwani mara nyingi hayana suluhisho la moja kwa moja isipokuwa njia za kudanganya.
Inanata :hover/ :focuskwenye iOS
Ingawa :hoverhaiwezekani kwenye vifaa vingi vya kugusa, iOS huiga tabia hii, na kusababisha mitindo ya "nata" ya kuelea ambayo huendelea baada ya kugonga kipengele kimoja. Mitindo hii ya kuelea huondolewa tu wakati watumiaji wanagonga kipengele kingine. Tabia hii inachukuliwa kuwa isiyofaa na inaonekana kuwa si suala kwenye vifaa vya Android au Windows.
Katika matoleo yetu yote ya v4 ya alpha na beta, tulijumuisha msimbo ambao haujakamilika na tulitoa maoni kwa ajili ya kujijumuisha katika hoja ya media ambayo itazima mitindo ya kuelea kwenye vivinjari vya kifaa cha kugusa ambavyo vinaiga kuelea. Kazi hii haikukamilishwa kabisa au kuwashwa, lakini ili kuepuka kuvunjika kabisa, tumechagua kuacha kutumia shim hii na kuweka michanganyiko kama njia za mkato za aina bandia.
Uchapishaji
Hata katika vivinjari vingine vya kisasa, uchapishaji unaweza kuwa wa kushangaza.
Kufikia Safari v8.0, utumiaji wa darasa la upana usiobadilika .containerunaweza kusababisha Safari kutumia saizi ndogo ya fonti wakati wa kuchapisha. Tazama toleo #14868 na mdudu wa WebKit #138192 kwa maelezo zaidi. Njia moja inayowezekana ya kufanya kazi ni CSS ifuatayo:
@media print {
.container {
width: auto;
}
}
Kivinjari cha hisa cha Android
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.
Hati zetu za HTML vile vile zina maonyo madogo na yasiyo na maana ya uthibitishaji wa HTML kwa sababu ya ujumuishaji wetu wa suluhisho kwa hitilafu fulani ya Firefox .