Какие браузеры не поддерживают bootstrap

Обновлено: 07.07.2024

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

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

Bootstrap поддерживает все новейшие, стабильные релизы браузеров и платформ.

Альтернативные браузеры, использующие последнюю версию WebKit, Blink или Gecko, напрямую или через API, явно не поддерживаются. Однако Bootstrap должен в большинстве случаев правильно работать в этих браузерах. Более подробная информация о поддержке приведена ниже.

Здесь вы можете найти версии поддерживаемых браузеров в файле .browserslistrc file :

Мы используем Autoprefixer для обработки поддержки браузера через префиксы CSS с использованием Browserslist для взаимодействия и управления версиями браузеров. Смотрите документацию для получения информации по их внедрению в ваши проекты.

Мобильные устройства

В общем, Bootstrap поддерживает последние версии браузеров по умолчанию для каждой платформы. Заметьте, что прокси-браузеры (такие как Opera Mini, Турбо-режим в Opera Mobile, UC Browser Mini, Amazon Silk) не поддерживаются.

Chrome	Firefox	Safari	Android Browser & WebView
Android	Поддерживается	Поддерживается	—	v6.0+
iOS	Поддерживается	Поддерживается	Поддерживается	—

Настольные браузеры

Точно так же поддерживаются последние версии большинства настольных браузеров.

Chrome	Firefox	Microsoft Edge	Opera	Safari
Mac	Поддерживается	Поддерживается	Поддерживается	Поддерживается	Поддерживается
Windows	Поддерживается	Поддерживается	Поддерживается	Поддерживается	—

Для Firefox, в дополнение к последней стабильной версии, мы также поддерживаем последние релизы Firefox с «расширенной поддержкой» - Extended Support Release (ESR).

Неофициально Bootstrap должен работать нормально в Chromium и Chrome для Linux, Firefox для Linux, хотя они официально не поддерживаются.

Internet Explorer

Internet Explorer не поддерживается. Если вам требуется поддержка Internet Explorer, используйте Bootstrap v4.

Модальные окна и выпадающие списки на мобильных устройствах

Переполнение и прокрутка

Текстовые поля и прокрутка в iOS

Выпадающие элементы навигационной панели

Элемент .dropdown-backdrop не используется на iOS в навигационной панели из-за сложности z-индексирования. Таким образом, чтобы закрыть выпадающий элемент, необходимо коснуться его (или другой элемент, который вызовет событие «клик» в iOS).

«Зум» в браузере

Масштабирование страницы неизбежно влечет искажения прорисовки некоторых компонентов BS4 и остальной страницы. В зависимости от вида проблемы, мы можем «починить» этот баг (пожалуйста, перед обращением к нам поищите решение сами). Однако, мы часто игнорируем подобные обращения, т.к. часто иного решения, чем временные «костыли», просто нет.

Валидаторы

Для обеспечения наилучшей работы на старых и глючных браузерах для применения определенных настроек CSS к определенным версиям браузеров и исправления «багов» в самих браузерах, BS4 иногда использует CSS browser hacks. Эти «хаки» по понятным причинам заставляют «ругаться» валидаторы CSS. Кое-где мы используем не до конца проверенные и стандартизированные, но нужные для прогресса, свойства CSS.

Эти «ругательства» валидатора не следует воспринимать серьезно, поскольку остальной наш CSS полностью валиден, а «хаки» не мешают правильному функционированию остального CSS. Посему смело игнорируйте эти предупреждения.

Наши HTML–документы также вызывают некоторые тривиальные и несущественные предупреждения – потому что в них есть «костыли» для исправления определенного «бага» в Firefox.

Оживите Bootstrap с помощью наших дополнительных плагинов JavaScript. Узнайте о каждом плагине, наших данных и параметрах программного API и многом другом.

Индивидуальный или составной

Плагины могут быть включены индивидуально (с использованием индивидуального Bootstrap js/dist/*.js ) или все сразу с использованием bootstrap.js или минифицированных bootstrap.min.js (не включайте оба).

Если вы используете сборщик (Webpack, Rollup…), вы можете использовать /js/dist/*.js файлы, готовые для UMD.

Использование Bootstrap как модуля

Мы предоставляем версию Bootstrap, построенную как ESM ( bootstrap.esm.js и bootstrap.esm.min.js ), которая позволяет вам использовать Bootstrap в качестве модуля в вашем браузере, если ваши целевые браузеры поддерживают его.

Несовместимые плагины

Из-за ограничений браузера некоторые из наших плагинов, а именно плагины Dropdown, Tooltip и Popover, нельзя использовать в <script> тегах с module типом, поскольку они зависят от Popper.js. Дополнительную информацию о проблеме см. здесь.

Зависимости

Некоторые плагины и компоненты CSS зависят от других плагинов. Если вы включаете плагины по отдельности, обязательно проверьте наличие этих зависимостей в документации.

Наши выпадающие, всплывающие и всплывающие подсказки также зависят от Popper.js.

Все еще хотите использовать jQuery? Это возможно!

Bootstrap 5 разработан для использования без jQuery, но все же можно использовать наши компоненты с jQuery. Если Bootstrap обнаруживает jQuery в window объекте это добавит все наши компоненты в системе плагин JQuery в; это означает, что вы сможете $('[data-toggle="tooltip"]').tooltip() включить всплывающие подсказки. То же самое и с другими нашими компонентами.

Атрибуты данных

Почти все плагины Bootstrap можно включить и настроить только с помощью HTML с атрибутами данных (наш предпочтительный способ использования функциональности JavaScript). Убедитесь, что вы используете только один набор атрибутов данных для одного элемента (например, вы не можете запускать всплывающую подсказку и модальное окно с помощью одной кнопки).

Селекторы

В настоящее время для запроса элементов DOM мы используем собственные методы querySelector и querySelectorAll из соображений производительности, поэтому вам необходимо использовать допустимые селекторы. Если вы используете специальные селекторы, например: collapse:Example не забудьте их экранировать.

События

Bootstrap предоставляет настраиваемые события для уникальных действий большинства плагинов. Как правило, они бывают в форме причастия прошедшего времени и инфинитива, где инфинитив (например show ) запускается в начале события, а его форма причастия прошедшего времени (например shown ) запускается при завершении действия.

Все инфинитивные события обеспечивают preventDefault() функциональность. Это дает возможность остановить выполнение действия до его запуска. При возврате false из обработчика событий также будет выполнен автоматический вызов preventDefault() .

события jQuery

Bootstrap обнаружит jQuery, если jQuery он присутствует в window объекте и не data-no-jquery установлен атрибут <body> . Если jQuery найден, Bootstrap будет генерировать события благодаря системе событий jQuery. Поэтому, если вы хотите прослушивать события Bootstrap, вам придется использовать методы jQuery ( .on , .one ) вместо addEventListener .

Программный API

Все конструкторы принимают необязательный объект параметров или ничего (который запускает плагин с его поведением по умолчанию):

Если вы хотите получить конкретный экземпляр плагина, каждый плагин предоставляет getInstance метод. Для того , чтобы восстановить его непосредственно из элемента, выполните следующие действия : bootstrap.Popover.getInstance(myPopoverEl) .

Асинхронные функции и переходы

Все программные методы API асинхронны и возвращаются вызывающей стороне после начала перехода, но до его завершения.

Чтобы выполнить действие после завершения перехода, вы можете прослушать соответствующее событие.

Кроме того, вызов метода переходного компонента будет проигнорирован.

Настройки по умолчанию

Вы можете изменить настройки по умолчанию для плагина, изменив Constructor.Default объект плагина:

Нет конфликта (только если вы используете jQuery)

Иногда необходимо использовать плагины Bootstrap с другими фреймворками пользовательского интерфейса. В этих обстоятельствах иногда могут возникать конфликты пространств имен. Если это произойдет, вы можете вызвать .noConflict плагин, для которого хотите вернуть значение.

Номера версий

Доступ к версии каждого из плагинов Bootstrap можно получить через VERSION свойство конструктора плагина. Например, для плагина всплывающей подсказки:

Никаких специальных резервных вариантов при отключенном JavaScript

Плагины Bootstrap не особо изящно отключаются при отключенном JavaScript. Если вы заботитесь о пользовательском опыте в этом случае, используйте, <noscript> чтобы объяснить ситуацию (и как повторно включить JavaScript) вашим пользователям и / или добавить свои собственные резервные варианты.

Сторонние библиотеки

Дезинфицирующее средство

Всплывающие подсказки и всплывающие окна используют наше встроенное средство очистки для очистки параметров, которые принимают HTML.

Значение по умолчанию whiteList следующее:

Если вы хотите добавить новые значения к этому значению по умолчанию, whiteList вы можете сделать следующее:

Если вы хотите обойти наше средство дезинфекции, потому что предпочитаете использовать специальную библиотеку, например DOMPurify , вам следует сделать следующее:

Разработан и построен с любовью к миру, командой Bootstrap и помощью наших участников.

В настоящее время v5.0.0-alpha1. Код под лицензией MIT, документы CC BY 3.0.

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

Bootstrap поддерживает все новейшие, стабильные релизы браузеров и платформ. В Windows поддерживается IE10-11 / Microsoft Edge.

Альтернативные браузеры, поддерживающие последнюю версию Webkit, Blink или Gecko, поддерживаются не полностью. Однако и в них BS4 должен отображаться и работать корректно. Более точная информация – ниже.

Мобильные устройства

В общем, BS4 поддерживает последние версии браузеров по умолчанию для каждой платформы. Заметьте, что прокси-браузеры (такие как Opera Mini, Opera Mobile’s Turbo mode, UC Browser Mini, Amazon Silk) не поддерживаются.

Chrome	Firefox	Safari	Android Browser & WebView	Microsoft Edge
Android	Поддерживается	Поддерживается	Нет	Android v5.0+ поддерживается	Поддерживается
iOS	Поддерживается	Поддерживается	Поддерживается	Нет	Поддерживается
Windows 10 Mobile	Нет	Нет	Нет	Нет	Поддерживается

Браузеры PC

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

Chrome	Firefox	Internet Explorer	Microsoft Edge	Opera	Safari
Mac	Поддерживается	Поддерживается	Нет	Нет	Поддерживается	Поддерживается
Windows	Поддерживается	Поддерживается	Поддерживается, IE10+	Поддерживается	Поддерживается	Не поддерживается

Для Firefox, дополняя поддержку последнего стабильного релиза, BS4 также поддерживает последний релиз Firefox с «расширенной поддержкой» - Extended Support Release (ESR).

Предположительно BS4 должен работать нормально в Chromium и Chrome в Линуксе, Firefox для Линуска, и IE9, хотя эти браузеры и не поддерживаются официально.

Для получения списка некоторых «багов» браузеров, с которыми довольно трудно бороться, загляните на стену «багов».

Internet Explorer

IE 10+ поддерживаются, IE9 и ниже – нет. Знайте, что некоторые свойства CSS3 и элементы HTML5 поддерживаются не полностью в IE10, или требуют предустановленных свойств для нормальной работы. Посетите Can I use… для подробностей по поддержке браузерами свойств CSS3 и HTML5.

Всплывающие окна и выпадающие меню на мобильниках

Прокрутка и отображение содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.

Текстовые поля и прокрутка в iOS

Выпадающие элементы навигационной панели

«Зум» в браузере

«Липкий» :hover / :focus на мобильных

Хотя реальный «hover» невозможен на большинстве тачскринов, большинство мобильных браузеров симулируют его и делают :hover «липким». Другими словами: стили :hover начинают работать после постукивания на элементе и останавливаются лишьпосле того как юзер «стукнет» по другому элементу. На сайтах концепции «mobile-first» такое поведение обычно нежелательно.

Bootstrap имеет решение для описанного поведения, хотя оно и отключено по умолчанию. При установке значения переменной $enable-hover-media-query на true при компиляции Sass, BS4 будет использовать mq4-hover-shim для дезактивации стилей :hover в браузерах, имитирующих «hovering», таким образом предотвращая «липкое» поведение стилей :hover .

Печать

Даже в современных браузерах она может вызвать проблемы.

Встроенный браузер Андроида

По умолчанию Android 4.1 (и даже некоторые более его новые релизы ) поставляются с браузером-приложением по умолчанию (в противоположность Chrome). К несчастью, это приложение имеет множество «багов» и несовместимостей с CSS в целом.

Меню выбора

По элементам <select> : встроенный браузер андроида не отобразит их элементы управления (кнопки), если применен border-radius и\или border . (Смотрите вопрос на StackOverflow). Используйте кусок кода ниже для удаления мешающего CSS и отрисовки элемента <select> встроенным браузером андроида как «нестилизованного» элемента. В этом случае при определении браузера пользователя не происходит взаимодействия с браузерами Chrome, Safari и Mozilla.

Валидаторы

Начните работу с Bootstrap, самой популярной в мире платформой для создания адаптивных, ориентированных на мобильные устройства сайтов, с BootstrapCDN и начальной страницей шаблона.

Быстрый старт

Хотите быстро добавить Bootstrap в свой проект? Используйте BootstrapCDN, бесплатно предоставляемый ребятами из StackPath. Используете менеджер пакетов или вам нужно скачать исходные файлы? Перейдите на страницу загрузок.

Скопируйте и вставьте таблицу стилей <link> в <head> перед всеми другими таблицами стилей, чтобы загрузить наш CSS.

Многие из наших компонентов требуют использования JavaScript для работы. В частности, для них требуются наши собственные плагины JavaScript и Popper.js. Поместите следующие <script> в конце страниц, прямо перед закрывающим тегом </body> , чтобы включить их. Сначала должен быть Popper.js, а затем наши плагины JavaScript.

Интересно, какие компоненты явно требуют нашего JavaScript и Popper.js? Щелкните ссылку "Показать компоненты" ниже. Если вы совсем не уверены в общей структуре страницы, продолжайте читать, чтобы найти образец шаблона страницы.

Наши bootstrap.bundle.js и bootstrap.bundle.min.js включают Popper. Для получения дополнительной информации о том, что включено в Bootstrap, см. Наш раздел содержимого.

Оповещения об увольнении (Alerts)
Кнопки для переключения состояний и функции флажка / радио
Карусель для любого поведения слайдов, элементов управления и индикаторов
Свернуть для переключения видимости содержимого (Collapse)
Выпадающие списки (Dropdowns) для отображения и позиционирования (также требуется Popper.js)
Модальные окна для отображения, позиционирования и прокрутки
Navbar для расширения нашего плагина Collapse для реализации адаптивного поведения
Всплывающие подсказки и всплывающие окна для отображения и позиционирования (также требуется Popper.js)
Scrollspy для поведения прокрутки и обновлений навигации

Стартовый шаблон

Убедитесь, что ваши страницы настроены в соответствии с последними стандартами дизайна и разработки. Это означает использование документа HTML5 и включение метатега области просмотра для правильного реагирования. Соберите все это вместе, и ваши страницы должны выглядеть так:

Это все, что вам нужно для выполнения общих требований к странице. Посетите документацию или наши официальные примеры, чтобы начать размещать контент и компоненты вашего сайта.

Важные глобалы

Bootstrap использует несколько важных глобальных стилей и настроек, о которых вам нужно знать при его использовании, и все они почти исключительно направлены на нормализацию кросс-браузерных стилей. Давайте погрузимся.

HTML5 doctype

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

Адаптивный метатег

Bootstrap разрабатывается в первую очередь для мобильных устройств. Это стратегия, в которой мы сначала оптимизируем код для мобильных устройств, а затем масштабируем компоненты по мере необходимости с помощью медиа-запросов CSS. Чтобы обеспечить надлежащий рендеринг и масштабирование касанием для всех устройств, добавьте метатег адаптивного окна просмотра к вашему <head> .

Вы можете увидеть пример этого в действии в стартовом шаблоне.

Box-sizing

Для упрощения настройки размеров в CSS мы переключаем глобальное box-sizing значение с content-box на border-box . Это гарантирует, что padding это не повлияет на окончательную вычисленную ширину элемента, но может вызвать проблемы с некоторым сторонним программным обеспечением, таким как Карты Google и Система пользовательского поиска Google.

В редких случаях, когда вам нужно переопределить его, используйте что-то вроде следующего:

В приведенном выше фрагменте все вложенные элементы, включая сгенерированный контент с помощью ::before и ::after будут наследовать указанные box-sizing для этого .selector-for-some-widget .

Reboot (перезагрузка)

Сообщество

Будьте в курсе развития Bootstrap и обращайтесь к сообществу с помощью этих полезных ресурсов.

Вы также можете подписаться на @getbootstrap в Twitter, чтобы следить за последними сплетнями и классными музыкальными клипами.

Разработан и построен с любовью к миру, командой Bootstrap и помощью наших участников.

В настоящее время v5.0.0-alpha1. Код под лицензией MIT, документы CC BY 3.0.

Читайте также: