Обзор Bootstrap, в том числе, как загрузить и использовать его, некоторые основные шаблоны и примеры, и многое другое.
Bootstrap поддерживает широкий спектр современных браузеров и устройств, а также некоторые более старые. Смотрите, какие именно из них ниже, а также подробные сведения об известных особенностях и ошибках.
:hover
/:focus
на мобильномBootstrap поддерживает последние, стабильные релизы всех основных браузеров и платформ. В Windows мы поддерживаем Internet Explorer 9-11 / Microsoft Edge.
Альтернативные браузеры, которые используют последнюю версию WebKit, blink, или Гекко, будь то напрямую или через веб-платформы просмотреть API, явно не поддерживается. Однако, Bootstrap должна (в большинстве случаев) дисплей и работает в этих браузерах, а также. Более конкретные сведения приводятся ниже.
Вообще говоря, Bootstrap поддерживает последние версии браузеров каждой крупной платформы по умолчанию. Обратите внимание, что прокси-браузеры (такие как Опера Мини, Турбо-режим в Opera мобильный, браузер, Амазонки шелк) не поддерживаются.
Chrome | В Firefox | Safari | Android-Браузер & Webview С | Microsoft Edge | |
---|---|---|---|---|---|
Android | Supported | Supported | N/A | Android v5.0+ supported | N/A |
iOS | Supported | Supported | Supported | N/A | N/A |
Windows 10 Мобильная | N/A | N/A | N/A | N/A | Supported |
Аналогично, последние версии самых десктопные браузеры поддерживаются.
Chrome | В Firefox | Internet Explorer | Microsoft Edge | Opera | Safari | |
---|---|---|---|---|---|---|
Mac | Supported | Supported | N/A | N/A | Supported | Supported |
Windows | Supported | Supported | Supported | Supported | Supported | Not supported |
Для Firefox, в дополнение к последней нормальной стабильной версии, мы также поддерживаем последний Выпуск с расширенной поддержкой (ESR) версия браузера Firefox.
Неофициально, Bootstrap должен выглядеть и вести себя достаточно хорошо в Chromium и Chrome для Linux, Firefox для Linux, а Internet Explorer 8 и ниже, хотя они официально не поддерживаются.
Список некоторых ошибок в брузере, с чем Bootstrap может столкнуться, смотрите наш Баги в браузере.
Internet Explorer 9 & 10, также поддерживаются, однако, необходимо учитывать, что некоторые свойства CSS3 и HTML5 элементы поддерживаются не полностью.
Свойство | Internet Explorer 9 | Internet Explorer 10 |
---|---|---|
transition |
Not supported | Supported |
placeholder |
Not supported | Supported |
Flexbox | Not supported | Partially supported, with -ms prefixSee Can I use for details |
Посетите Я могу использовать... для более детального ознакомления, какие свойства CSS3 и HTML5 поддерживаются различными браузерами.
В качестве v4, Bootstrap больше не поддерживается в IE8. Если вам нужна поддержка IE8, мы рекомендуем Вам использовать Bootstrap 3. который еще поддерживается нашей командой для исправления и изменения документации, но никакие новые функции не будут добавлены к нему.
Кроме того, можно добавить какой-то третьей партии JavaScript до засыпки поддержка IE8 на Bootstrap 4. Вам потребуется следующее:
Никакой поддержки для этого, хотя вы можете найти некоторую помощь от сообщества в наш Slack канала.
Bootstrap не поддерживается в старых Internet Explorer режимы совместимости. Чтобы убедиться, что вы используете последний режим рендеринга для IE, рассмотреть вопрос о включении соответствующих <meta>
тег в страницы:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Подтвердите режим документов на открытие средства отладки: наберите F12 и проверяем режим “документ”.
Этот тег в Bootstrap документации и примеров для обеспечения наилучшего отображения в каждой поддерживаемой версии Internet Explorer.
Просмотрите эти вопросы на StackOverflow для уточнений.
Internet Explorer 10 в Windows Phone 8 версии Обновления 3 (а.к.а. GDR3) не дифференцируют ширину устройства от ширины окна просмотра в @-ms-viewport
по-правилам, и таким образом не правильно применять на %1 В% 2% CSS. Для решения этой проблемы вам потребуется следующие JavaScript чтобы обойти ошибку.
// Авторское Право 2014-2015 Годы Bootstrap Авторов
// Авторских 2014-2015 Twitter, Вкл.
// Лицензированных в соответствии с MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement('style')
msViewportStyle.appendChild(
document.createTextNode(
'@-ms-viewport{width:auto!important}'
)
)
document.head.appendChild(msViewportStyle)
}
Для получения дополнительной информации и руководства по использованию, просмотрите Windows Phone и 8 Device-Width.
Как руководители, мы включаем в Все Bootstrap документация и примеры в качестве демонстрации.
Поддержка overflow: hidden;
на <body>
элемент весьма ограничен в iOS и Android. С этой целью, когда вы прокрутите мимо верхнюю или нижнюю часть модальное окно в любом из браузеров тех устройств, на <body>
контент начнет прокручивать. Смотрите Хром ошибка № 175502 (исправлено в Chrome и V40) и В WebKit ошибка #153852.
В качестве операционной системы iOS 9.2, а модальное окно работает, если начальное касание прокрутки жест пределах границы текстового <input>
или <textarea>
В <body>
содержание под модадьное окно будет прокручиваться вместо модадьное окно сам. Смотрите В WebKit ошибка № 153856.
В .dropdown-backdrop
элемент не используется на iOS сча из-за сложности с Z-индексирования. Таким образом, чтобы закрыть выпадающие в navbars, необходимо просто нажать на выпадающий элемент (или любой другой элемент, который будет генерировать событие нажатия в iOS).
При изменении размера страницы, неизбежно оказывается некорректное отображение некоторых элементов: это касается и Bootstrap, и остальных веб-документа. В зависимости от конкретного случая, мы можем исправить это (при необходимости вы можете открыть соответствующий запрос, но сначала необходимо поискать или нет аналогичных запросов). Тем не менее, но как правило мы игнорируем их, поскольку они часто не имеют прямого решения, кроме создания обходных путей в виде хаков (hacky).
:hover
/:focus
на мобильномНесмотря на то, что на большинстве сенсорных экранов реальное зависание невозможно, большинство мобильных браузеров эмулируют поддержку зависания и делают :hover
зависание «липким». Другими словами, стили :hover
начинают применяться после касания элемента и прекращают применять только после того, как пользователь коснется какого-либо другого элемента. На мобильных сайтах такое поведение обычно нежелательно.
Bootstrap включает обходной путь для этого, хотя по умолчанию он отключен. Установка $enable-hover-media-query
для true
при компиляции из Sass, Bootstrap будет использовать mq4-hover-shim отключить :hover
стили в браузерах, которые эмулируют висения, тем самым предотвращая залипание :hover
стили. Есть некоторые предостережения, этот метод обхода уязвимости; см. в документации на ШИМ для деталей.
Даже в некоторых современных браузерах, печать может быть изворотливым.
Как Сафари и V8.0, использование фиксированной ширины .container
класс может вызвать сафари в использовании необычайно маленький размер шрифта при печати. См. вопрос #14868 и В WebKit ошибка #138192 Для более подробной информации. Одним из возможных решением является следующее CSS:
@media print {
.container {
width: auto;
}
}
Из коробки, Android 4.1 (и даже некоторые новые релизы по-видимому) ставит с браузера приложение, как в веб-браузере по умолчанию(в отличие от Chrome). К сожалению, браузер приложение имеет множество ошибок и несоответствий с CSS в целом.
На <select>
элементе, в Android браузере не будет отображаться элементы управления если есть border-radius
и/or border
. (Смотри эти вопросы на StackOverflow более детально.) Используйте фрагмент кода ниже, чтобы удалить этот CSS и сделать <select>
элемент без стиля на Android браузере. Агент пользователя фырканье предотвращает помехи с Chrome, Safari, and 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 demo.
Для того, чтобы обеспечить наилучшие впечатления для старый и глючит браузеры, Bootstrap использует CSS хаки браузер в нескольких местах особые CSS на определенные версии браузеров, чтобы обойти ошибки в самих браузерах. Эти писаки понятно дело CSS валидаторы жаловаться на то, что они являются недействительными. В пару мест, мы также применяем ультрасовременные CSS функций, которые еще не полностью стандартизирована, но они используются исключительно для постепенного улучшения.
Эти предупреждения не имеют значения в практике, поскольку не вымышленная часть нашей CSS делает полной проверки и богатство порциями не препятствовать нормальному функционированию, не ломаные части, поэтому мы намеренно игнорируют эти предупреждения.
Наш HTML-документы также имеют некоторые тривиальным и несущественным HTML проверка предупреждения, в связи с наличие решения ошибок в Firefox.