Подключение bootstrap 4 – Как организовать грамотное подключение отдельных компонентов Bootstrap 4 (чтобы не подтягивать лишнего)?

Содержание

Bootstrap 4. Начало работы. Шаблон

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

Огромное количество сайтов было сделано на основе версии 3, последней из которых является Bootstrap 3.3.7 (перейти на официальный сайт). Более года разрабатывался Bootstrap 4, который был доступен для скачивания в alpha-версии. На данный момент  можно использовать версию 4.1.1 Bootstrap-4. Лучше всего скачивать его с официального сайта, хотя вы можете это сделать и на русскоязычном сайте, если с английским пока беда.

Загрузка и подключение файлов Bootstrap 4

Bootstrap 4 доступен для скачивания в скомпилированном виде, т.е. файлы, которые вы получите после распаковки архива будут в формате css и js, причем они будут размещены в соответствующих папках css и js.

Можно также скачать исходные файлы, которые подойдут для разработчиков, знакомых с SASS (SCSS). Этот вариант лучше подходит для тех, кто будет менять значение переменных для создания собственных параметров сетки, цветов, отступов или шрифтов. Если вы пока не разбираетесь в принципах SASS, имеет смысл подключать стандартную версию Bootstrap 4 и переопределять некоторые правила в собственном стилевом файле. Также можно будет подключать различные темы Bootstrap.

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

<!-- подключение css-файла --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <!-- подключение нужной версии jQuery --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <!-- подключение popper.js, необходимого для корректной работы некоторых плагинов Bootstrap 4 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"> </script> <!-- подключение js-файла --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"> </script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<!-- подключение css-файла -->

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"

integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

 

 

<!-- подключение нужной версии jQuery -->

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"

integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">

</script>

 

<!-- подключение popper.js, необходимого для корректной работы некоторых плагинов Bootstrap 4 -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"

integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous">

</script>

  

<!-- подключение js-файла -->

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"

integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous">

</script>

Плюсом данного способа подключения файлов Bootstrap является то, что вы пользуйтесь кэшированной версией Bootstrap-4 для «облегчения» страницы и ускорения загрузки, т.к. такой способ использует ряд сайтов, которые уже, возможно, загружал пользователь на свой компьютер.

Для тех, кто использует npm или  другие системы управления пакетами (например, Composer), существует ряд вариантов загрузок через пакетные менеджеры, представленные на официальном сайте или его русскоязычной версии.

Содержимое архива с Bootstrap 4

Внутри папки css вы найдете ряд файлов, внутреннее содержимое которых состоит из разных составляющих. Точнее - в папках css и js будут представлены следующие файлы:

bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ └── bootstrap-reboot.min.css.map
└── js/
├── bootstrap.bundle.js
├── bootstrap.bundle.min.js
├── bootstrap.js
└── bootstrap.min.js

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

Если вам нужна только сетка Bootstrap 4, имеет смысл подключать только файл bootstrap-grid.min.css.

Карты исходного кода CSS (bootstrap.*.map) доступны для использования лишь с определенными инструментами разработчика в браузере. Для их использования необходимо знание работы препроцессоров.

Файлы в папке js имеют также разное содержимое. Для использования файла bootstrap.min.js необходимо подключить jQuery и Popper, а файлы bootstrap.bundle.js и минимизированный bootstrap.bundle.min.js уже включают Popper, но не jQuery.

В таблице ниже представлен список включенных в различные css-файлы компонентов:

CSS файлы Разметка Содержание Компоненты Утилиты

bootstrap.css

bootstrap.min.css

Включены Включены Включены Включены

bootstrap-grid.css

bootstrap-grid.min.css

Только Система сеток Не включены Не включены Только flex утилиты

bootstrap-reboot.css

bootstrap-reboot.min.css

Не включены Только Reboot Не включены Не включены

Следующая таблица содержит список включенных js-компонентов:

JS-файлы Popper jQuery

bootstrap.bundle.js

bootstrap.bundle.min.js

Включены Не включены

bootstrap.js

bootstrap.min.js

Не включены Не включены

Поддержка Bootstrap 4

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

Internet Explorer версий 10-11 / Microsoft Edge. Для поддержки младших версий IE необходимо использовать Botstrap 3. Существует ряд нюансов, связанный с нормальным отображением ряда элементов в мобильных браузерах на платформах iOS и Android, которые необходимо рассмотреть в документации BS4.

Шаблон страницы Bootstrap 4

При верстке страницы на основе Bootstrap 4 следует указывать Doctype стандарта HTML5 и meta-тег veiwport, чтобы страницы адаптировались к разрешениям экрана на различных устройствах. Также в нижней части страницы необходимо подключить jQuery и Popper, и уже после них bootstrap.js. Сделать это можно 2-мя основными способами: указав относительный путь к файлам, скачанным на ваш компьютер или используя файлы Bootstrap CDN.

Шаблон на основе Bootstrap CDN

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <h2>Hello, world!</h2> <!-- Подключение JavaScript --> <!-- Сначала jQuery, затем Popper.js, затем Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"> </script <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"> </script> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

<!doctype html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

 

    <!-- Bootstrap CSS -->

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"

integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

 

    <title>Hello, world!</title>

  </head>

  <body>

    <h2>Hello, world!</h2>

 

    <!-- Подключение JavaScript -->

    <!-- Сначала jQuery, затем Popper.js, затем Bootstrap JS -->

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"

    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"

    crossorigin="anonymous"> </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"

    integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"

    crossorigin="anonymous"> </script

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"

    integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"

    crossorigin="anonymous"> </script>

  </body>

</html>

Шаблон на основе файлов из папки скомпилированных файлов Bootstrap 4

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="css/bootstrap.min.css"> <title>Hello, world!</title> </head> <body> <h2>Hello, world!</h2> <!-- Подключение JavaScript --> <!-- Сначала jQuery, затем Popper.js, затем Bootstrap JS --> <script src="js/jquery-3.3.1.slim.min.js"></script> <script src="js/popper.min.js" ></script> <script src="js/bootstrap.min.js"></script> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<!doctype html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

 

    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="css/bootstrap.min.css">

 

    <title>Hello, world!</title>

  </head>

  <body>

    <h2>Hello, world!</h2>

 

    <!-- Подключение JavaScript -->

    <!-- Сначала jQuery, затем Popper.js, затем Bootstrap JS -->

    <script src="js/jquery-3.3.1.slim.min.js"></script>

    <script src="js/popper.min.js" ></script>

    <script src="js/bootstrap.min.js"></script>

  </body>

</html>

Скачать оба варианта можно по ссылке.

Использование Reboot

Reboot - это комплекс css-стилей, не использующий классов, а основанный на стилизации элементов для единого их отображения в различных браузерах. Он основан на  normalize.css,  который уже давно используется для унификации стилей основных элементов. Reboot также переводит все единицы измерения в remвместо em, устанавливает значение свойства box-sizing как border-box для всех элементов, а также псевдоэлементов  :*::before и *::after.

Эти css-стили входят в bootstrap.css и минифицированный bootstrap.min.css, поэтому подключать его отдельно не нужно.

Полезные ссылки:

Просмотров: 1 425

Введение. Начало работы · Bootstrap. Версия v4.2.1

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

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

Хотите использовать Бутстрап в своем проекте? Bootstrap – библиотека шаблонов CSS, распространяемая свободно командой сайта MaxCDN. Нужна система управления пакетами или исходники Bootstrap? Посетите страницу загрузок.

CSS

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

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

JS

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

Мы используем мини-сборку jQuery, но и полную можно использовать.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

Любопытно, какие компоненты явно требуют jQuery, наших JS и Popper.js? Нажмите ссылку «Показать компоненты» ниже. Если вы не уверены в том, как правильно написать «коренную» структуру страницы, можете использовать наши шаблоны.

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

Показать компоненты, требующие JavaScript
  • Уведомления отмены
  • Кнопки изменения состояний и чекбоксов/"радио"
  • Карусель для поведения "слайд", элементы контроля и индикаторы
  • Коллапс для изменения видимости содержимого
  • Выпадающие элементы для отображения и расположения (также требует Popper.js)
  • Модальные окна для отображения, расположения и создания поведения прокрутки
  • Навбар для расширения нашего плагина коллапса для придания отзывчивого поведения
  • Выплывающие подсказки и окна для отображения и расположения (также требует Popper.js)
  • Отслеживание прокрутки и обновления навигации

Начальный шаблон страницы

Удостоверьтесь, что ваши страницы сверстаны по новейшим стандартам. Они должны включать и использовать HTML5 doctype и viewport meta tag для правильного «отзывчивого» поведения страниц. Вот как должен выглядеть «верхний», коренной код страницы:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h2>Hello, world!</h2>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  </body>
</html>

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

Важные глобальные атрибуты

Бутстрап включает некоторые глобальные стили и настройки, о которых вам необходимо знать при работе с ним; все эти стили и настройки почти полностью имеют дело с и «заточены» под нормализацию кроссбраузерных стилей.

HTML5 doctype

Bootstrap требует использования doctype «HTML5». Без него у вас возникнут некоторые проблемы со стилями.

<!DOCTYPE html>
<html lang="en">
  ...
</html>

«Отзывчивый» мета-тэг

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

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Вы можете посмотреть пример этого в действии на странице starter template.

Размер ширины и высоты элемента

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

В том редком случае, когда вам надо преодолеть эти возможные баги, делайте так:

.selector-for-some-widget {
  box-sizing: content-box;
}

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

Узнайте больше о блоковой модели и параметризации размеров на CSS Tricks.

«Ребут» (новая библиотека CSS, не использующая классов, обеспечивающая «модульный подход»)

Для улучшенной кроссбраузерной визуализации мы применили «Ребут», обеспечивающий более продвинутые «сбросы стилей» для элементов HTML для коррекции мелких багов в браузерах и девайсах.

Оставайтесь в курсе последних новостей Bootstrap и вливайтесь в сообщество Bootstrap с помощью этих ресурсов:

  • @getbootstrap on Twitter.
  • The Official Bootstrap Blog.
  • the official Slack room.
  • Чат с камрадами по Bootstrap. Канал ##bootstrap на сервере irc.freenode.net.
  • Помощь в реализации Bootstrap 4 на Stackoverflow bootstrap-4).
  • При разработке через npm или аналогичные депозитарии, разработчикам следует использовать ключевое слово bootstrap в своих пакетах и библиотеках для максимальной видимости.

Вы также можете присоединиться @getbootstrap on Twitter для получения «свежайших» слухов и классных музыкальных клипов.

Браузеры и устройства. Начало работы · Bootstrap. Версия v4.0.0

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

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

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.

Если вам потребуется поддержка IE8-9, пользуйтесь BS3. Это наиболее стабильная версия и она все еще поддерживается нашей командой в наиболее критических случаях. Но туда уже не добавятся новые возможности и свойства.

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

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

Поддержка свойства overflow:hidden; достаточно ограничена в iOS и Андроидах. По этой причине, когда вы прокручиваете ниже верха или низа всплывающего окна в этих устройствах, содержимое <body> начнет прокручиваться. Смотрите Chrome bug #175502 (решено в Chrome v40) и WebKit bug #153852.

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

Что касается iOS 9.2, - пока всплывающее окно открыто – если начальное касание жеста прокрутки происходит внутри границ <input> или <textarea>, прокручиваться вместо окна будет содержимое <body>. Смотри WebKit bug #153856.

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

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

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

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

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

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

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

Печать

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

Что касается Safari v8.0 – использование класса с фиксированной шириной .container может заставить браузер использовать необычно мелкий шрифт при печати. Смотрите issue issue #14868 и WebKit bug #138192. Есть еще один обход этого бага (код внизу):

@media print {
  .container {
    width: auto;
  }
}

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

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

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

Валидаторы

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

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

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

Доступность. Начало работы · Bootstrap. Версия v4.0.0

Краткий обзор возможностей и ограничений Bootstrap для создания доступного контента.

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

Обзор и ограничения

Итоговая доступность и «user-friendliness» проекта на Bootstrap зависит в большой степени от разметки автора, его дополнительных стилей и добавленных им скриптов. Однако, при условии, что все перечисленное работает корректно, созданные на BS4 сайты в идеале должны отвечать WCAG 2.0 (A/AA/AAA), Section 508 и прочим стандартам и требованиям доступности.

Структурная разметка

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

Интерактивные компоненты

Интерактивные компоненты Bootstrap – такие как модальные диалоги, выпадающие меню и стандартные выпадающие подсказки – созданы для работы с тачскрином, мышью и клавиатурой. Эти компоненты должны также быть понятными и доступными людям с ограничениями (такие как экранная «читалка»), для чего используются «роли» и атрибуты WAI-ARIA.

Из-за того, что компоненты Bootstrap созданы как generic (т.е. могут иметь много экземпляров одного класса), разработчикам в их дальнейшей работе может понадобиться включить в проект роли и атрибуты ARIA или скрипты JS для более аккуратного использования точной функциональности такого компонента. Это обычно отмечается в документации.

Контраст цвета

Использование большинства цветов стандартной палитры Bootstrap на светлом бэкграунде (кнопки, вариации отзывов на действия, индикаторы форм валидации) может привести к недостаточному контрасту (смотрите WCAG 2.0 color contrast ratio of 4.5:1). В этом случае для придания контрасту адекватных значений разработчикам потребуется вручную изменить/расширить палитру, существующую по умолчанию.

Спрятанный контент

Контент, который следует скрыть, но оставить доступным, к примеру, для «помощников чтения», может быть создан через класс .sr-only. Это может быть полезным, когда дополнительная информация или псевдоэлемент cue (например, когда значение передается цветом) нужны незрячим пользователям.

<p>
  <span>Danger: </span>
  This action is not reversible
</p>

Для спрятанных элементов интерактивного контроля, таких как «навигационные» ссылки, класс .sr-only можно сочетать с .sr-only-focusable. Это гарантирует, что элемент будет виден после фокусировки (для зрячих).

<a href="#content">Перейти к основному содержанию</a>

Дополнительные ресурсы

Отправить ответ

avatar
  Подписаться  
Уведомление о