Skip to main content

C чего начать

Обзор Bootstrap, в том числе, как загрузить и использовать его, некоторые основные шаблоны и примеры, и многое другое.

Браузеры и устройства

Bootstrap поддерживает широкий спектр современных браузеров и устройств, а также некоторые более старые. Смотрите, какие именно из них ниже, а также подробные сведения об известных особенностях и ошибках.

Содержание

Поддержка браузерами

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

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 prefix
See Can I use for details

Посетите Я могу использовать... для более детального ознакомления, какие свойства CSS3 и HTML5 поддерживаются различными браузерами.

Поддерживание Internet Explorer 8

В качестве v4, Bootstrap больше не поддерживается в IE8. Если вам нужна поддержка IE8, мы рекомендуем Вам использовать Bootstrap 3. который еще поддерживается нашей командой для исправления и изменения документации, но никакие новые функции не будут добавлены к нему.

Кроме того, можно добавить какой-то третьей партии JavaScript до засыпки поддержка IE8 на Bootstrap 4. Вам потребуется следующее:

Никакой поддержки для этого, хотя вы можете найти некоторую помощь от сообщества в наш Slack канала.

Режим совместимости с IE

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

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

В качестве операционной системы 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 stock браузер

Из коробки, 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.