Прелистувачи и уреди
Дознајте повеќе за прелистувачите и уредите, од модерни до стари, кои се поддржани од Bootstrap, вклучувајќи познати чуда и грешки за секој од нив.
Bootstrap ги поддржува најновите, стабилни изданија на сите главни прелистувачи и платформи. На Windows, поддржуваме Internet Explorer 10-11 / Microsoft Edge .
Алтернативните прелистувачи кои ја користат најновата верзија на WebKit, Blink или Gecko, без разлика дали директно или преку API за веб-приказ на платформата, не се експлицитно поддржани. Сепак, Bootstrap треба (во повеќето случаи) да се прикажува и функционира правилно и во овие прелистувачи. Поконкретни информации за поддршка се дадени подолу.
Може да го најдете нашиот поддржан опсег на прелистувачи и нивните верзии во нашитеpackage.json :
"browserslist": [
"last 1 major version",
">= 1%",
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
]
Ние користиме Autoprefixer за да се справиме со наменетата поддршка на прелистувачот преку CSS префикси, кој користи листа на прелистувачи за управување со овие верзии на прелистувачот. Консултирајте се со нивната документација за тоа како да ги интегрирате овие алатки во вашите проекти.
Општо земено, Bootstrap ги поддржува најновите верзии на стандардните прелистувачи на секоја голема платформа. Забележете дека прокси-прелистувачите (како што се Opera Mini, Turbo режимот на Opera Mobile, UC Browser Mini, Amazon Silk) не се поддржани.
| Хром | Firefox | Сафари | Андроид прелистувач и веб-преглед | Мајкрософт Еџ | |
|---|---|---|---|---|---|
| Андроид | Поддржано | Поддржано | N/A | Поддржан Android v5.0+ | Поддржано |
| iOS | Поддржано | Поддржано | Поддржано | N/A | Поддржано |
| Windows 10 Mobile | N/A | N/A | N/A | N/A | Поддржано |
Слично на тоа, се поддржани најновите верзии на повеќето десктоп прелистувачи.
| Хром | Firefox | Internet Explorer | Мајкрософт Еџ | Опера | Сафари | |
|---|---|---|---|---|---|---|
| Мек | Поддржано | Поддржано | N/A | N/A | Поддржано | Поддржано |
| Windows | Поддржано | Поддржано | Поддржано, IE10+ | Поддржано | Поддржано | Не се поддржани |
За Firefox, покрај најновото нормално стабилно издание, ја поддржуваме и најновата верзија на Firefox со продолжена поддршка (ESR) .
Неофицијално, Bootstrap треба да изгледа и да се однесува доволно добро во Chromium и Chrome за Linux, Firefox за Linux и Internet Explorer 9, иако тие не се официјално поддржани.
За список на некои грешки на прелистувачот со кои Bootstrap треба да се справи, видете ги нашите грешки на Ѕидот на прелистувачите .
Поддржан е Internet Explorer 10+; IE9 и надолу не е. Имајте предвид дека некои CSS3 својства и HTML5 елементи не се целосно поддржани во IE10 или бараат префиксни својства за целосна функционалност. Посетете Дали можам да користам… за детали за поддршката на прелистувачот за функциите CSS3 и HTML5.
Ако ви треба поддршка за IE8-9, користете Bootstrap 3. Тоа е најстабилната верзија на нашиот код и сè уште е поддржана од нашиот тим за критични поправки на грешки и промени во документацијата. Сепак, нема да бидат додадени нови функции на него.
Поддршката за overflow: hidden;елементот <body>е доста ограничена во iOS и Android. За таа цел, кога ќе се движите покрај горниот или долниот дел на модалот во кој било од прелистувачите на тие уреди, <body>содржината ќе почне да се движи. Видете грешка на Chrome #175502 (поправена во Chrome v40) и грешка WebKit #153852 .
Почнувајќи од iOS 9.2, додека модалот е отворен, ако првичниот допир на движење на лизгање е во границите на текстуален <input>или <textarea>, <body>содржината под модалот ќе се прелистува наместо самиот модал. Видете грешка WebKit #153856 .
Елементот не се користи на .dropdown-backdropiOS во навивањето поради сложеноста на z-индексирањето. Така, за да ги затворите паѓачките мени во лентите за навигација, мора директно да кликнете на паѓачкиот елемент (или кој било друг елемент што ќе активира настан за кликнување во iOS ).
Зумирањето на страницата неизбежно претставува рендерирање на артефакти во некои компоненти, и во Bootstrap и во останатиот дел од мрежата. Во зависност од проблемот, можеби ќе можеме да го поправиме (прво пребарајте, а потоа отворете проблем доколку е потребно). Сепак, ние тежнееме да ги игнорираме овие, бидејќи тие често немаат директно решение освен хакерски решенија.
Иако :hoverне е возможно на повеќето уреди на допир, iOS го имитира ваквото однесување, што резултира со „лепливи“ стилови на лебдење кои остануваат по допирање на еден елемент. Овие стилови на лебдење се отстрануваат само кога корисниците ќе допрат друг елемент. Ова однесување се смета за главно непожелно и се чини дека не е проблем на уредите со Android или Windows.
Во текот на нашите v4 алфа и бета изданија, вклучивме нецелосен и коментиран код за одлучување на шим за барање за медиуми што ќе ги оневозможи стиловите на лебдење во прелистувачите на уреди на допир што емулираат лебдење. Оваа работа никогаш не беше целосно завршена или овозможена, но за да избегнеме целосно кршење, избравме да ја отфрлиме оваа обвивка и да ги задржиме миксините како кратенки за псевдо-класите.
Дури и во некои модерни прелистувачи, печатењето може да биде чудно.
Од Safari v8.0, употребата на .containerкласата со фиксна ширина може да предизвика Safari да користи невообичаено мала големина на фонтот при печатење. Погледнете го изданието #14868 и грешката на WebKit #138192 за повеќе детали. Едно потенцијално решение е следниов CSS:
@media print {
.container {
width: auto;
}
}Надвор од кутијата, Андроид 4.1 (па дури и некои понови изданија очигледно) се испорачуваат со апликацијата Прелистувач како стандарден избор на веб-прелистувач (за разлика од Chrome). За жал, апликацијата Browser има многу грешки и недоследности со CSS воопшто.
На <select>елементи, прелистувачот за акции на Android нема да ги прикаже страничните контроли ако има border-radiusи/или borderприменети. (Видете го ова прашање на StackOverflow за детали.) Користете го фрагментот од кодот подолу за да го отстраните навредливиот CSS и да го претставите <select>како нестилизиран елемент на прелистувачот за акции на Android. Шмркањето на кориснички агент избегнува пречки со прелистувачите Chrome, Safari и 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>Сакате да видите пример? Проверете го ова демо за JS Bin.
Со цел да се обезбеди најдоброто можно искуство на старите и прелистувачи со кабриолет, Bootstrap користи хакери на CSS прелистувачи на неколку места за да насочи специјални CSS кон одредени верзии на прелистувачот со цел да ги надмине грешките во самите прелистувачи. Овие хакови разбирливо предизвикуваат валидаторите на CSS да се жалат дека се невалидни. На неколку места, ние исто така користиме најнови CSS функции кои сè уште не се целосно стандардизирани, но тие се користат чисто за прогресивно подобрување.
Овие предупредувања за валидација не се важни во пракса, бидејќи не-хакискиот дел од нашиот CSS целосно се потврдува и хакерските делови не се мешаат во правилното функционирање на не-хакиниот дел, па затоа намерно ги игнорираме овие конкретни предупредувања.
Нашите HTML документи исто така имаат некои тривијални и незначителни предупредувања за валидација на HTML поради нашето вклучување на решение за одредена грешка на Firefox .