Прелистувачи и уреди
Дознајте повеќе за прелистувачите и уредите, од модерни до стари, кои се поддржани од Bootstrap, вклучувајќи познати чуда и грешки за секој од нив.
Поддржани прелистувачи
Bootstrap ги поддржува најновите, стабилни изданија на сите главни прелистувачи и платформи. На Windows, поддржуваме Internet Explorer 10-11 / Microsoft Edge .
Алтернативните прелистувачи кои ја користат најновата верзија на WebKit, Blink или Gecko, без разлика дали директно или преку API за веб-приказ на платформата, не се експлицитно поддржани. Сепак, Bootstrap треба (во повеќето случаи) да се прикажува и функционира правилно и во овие прелистувачи. Поконкретни информации за поддршка се дадени подолу.
Може да го најдете нашиот поддржан опсег на прелистувачи и нивните верзии во нашите.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
Ние користиме 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 | Поддржано | Поддржано | Поддржано |
| Windows | Поддржано | Поддржано | Поддржано, IE10+ | Поддржано | Поддржано | Не се поддржани |
За Firefox, покрај најновото нормално стабилно издание, ја поддржуваме и најновата верзија на Firefox со продолжена поддршка (ESR) .
Неофицијално, Bootstrap треба да изгледа и да се однесува доволно добро во Chromium и Chrome за Linux, Firefox за Linux и Internet Explorer 9, иако тие не се официјално поддржани.
За список на некои грешки на прелистувачот со кои Bootstrap треба да се справи, видете ги нашите грешки на Ѕидот на прелистувачите .
Internet Explorer
Поддржан е 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 и лизгање
Почнувајќи од iOS 9.2, додека модалот е отворен, ако првичниот допир на движење на лизгање е во границите на текстуал <input>или <textarea>, <body>содржината под модалот ќе се прелистува наместо самиот модал. Видете грешка WebKit #153856 .
Паѓања за навигација
Елементот не се користи на .dropdown-backdropiOS во навивањето поради сложеноста на z-индексирањето. Така, за да ги затворите паѓачките мени во лентите за навигација, мора директно да кликнете на паѓачкиот елемент (или кој било друг елемент што ќе активира настан за кликнување во iOS ).
Зумирање на прелистувачот
Зумирањето на страницата неизбежно претставува рендерирање на артефакти во некои компоненти, и во Bootstrap и во останатиот дел од мрежата. Во зависност од проблемот, можеби ќе можеме да го поправиме (прво пребарајте, а потоа отворете проблем доколку е потребно). Сепак, ние тежнееме да ги игнорираме овие, бидејќи тие често немаат директно решение освен хакерски решенија.
Лепливо :hover/ :focusна iOS
Иако :hoverне е возможно на повеќето уреди на допир, iOS го имитира ваквото однесување, што резултира со „лепливи“ стилови на лебдење кои опстојуваат по допирање на еден елемент. Овие стилови на лебдење се отстрануваат само кога корисниците ќе допрат друг елемент. Ова однесување се смета за главно непожелно и се чини дека не е проблем на уредите со Android или Windows.
Во текот на нашите v4 алфа и бета изданија, вклучивме нецелосен и коментиран код за одлучување на шим за пребарување за медиуми што ќе ги оневозможи стиловите на лебдење во прелистувачите на уреди на допир што емулираат лебдење. Оваа работа никогаш не беше целосно завршена или овозможена, но за да избегнеме целосно кршење, избравме да ја отфрлиме оваа обвивка и да ги задржиме миксините како кратенки за псевдо-класите.
Печатење
Дури и во некои модерни прелистувачи, печатењето може да биде чудно.
Од Safari v8.0, употребата на .containerкласата со фиксна ширина може да предизвика Safari да користи невообичаено мала големина на фонтот при печатење. Погледнете го изданието #14868 и грешката на WebKit #138192 за повеќе детали. Едно потенцијално решение е следнава CSS:
@media print {
.container {
width: auto;
}
}
Андроид берзански прелистувач
Надвор од кутијата, Android 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 .