Bootstrap подключение, быстрый старт
Начните с Bootstrap, самой популярной в мире платформы для создания адаптивных мобильных сайтов, с BootstrapCDN и стартовой страницей шаблона.
Быстрый старт
Хотите быстро добавить Bootstrap в свой проект? Используйте BootstrapCDN, предоставленный в бесплатном доступе. Загрузить бутстрап css можно по ссылке. Версия Bootstrap - 4.0.0.
CSS
Для подключения скопируйте и вставьте таблицу стилей в ваш проект в контейнер < head> перед всеми остальными таблицами стилей.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">JS
Многие из компонентов Bootstrap требуют использования JavaScript для работы. В частности, они требуют jQuery, Popper.js и собственные плагины JavaScript. Поместите следующий JavaScript код <script> в конце страницы, перед закрывающим тегом </body>, чтобы включить их. jQuery должна подключиться первой, а потом Popper.js, а затем остальные плагины JavaScript.
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> Начальный шаблон
Убедитесь, что ваша страница настроена для использования технологий HTML 5 в соответствии с последними стандартами дизайна и разработки. Это означает, что должен быть подключен мета тег viewport для правильного адаптивного поведения. Готовая страница должна выглядеть так:
<!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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> </body> </html>Важно
Bootstrap использует несколько важных глобальных стилей и настроек, о которых вам нужно знать при его использовании, все из которых почти исключительно ориентированы на нормализацию кросс-браузерных стилей. Давайте рассмотрим их.
HTML5 doctype
Bootstrap требует использования HTML5 doctype. Без него вы увидите некрасивый стиль
<!doctype html> <html lang="en"> ... </html>Адаптивный мета тег
Bootstrap разработан изначально для мобильных браузеров, где код оптимизирован для мобильных устройств. Все компоненты используются по мере необходимости с помощью CSS медиа-запросов. Для обеспечения правильного отображения и сенсорного масштабирования для всех устройств, добавляют адаптивный мета тега viewport в тело <head> на странице.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">Box-sizing
Для более простых размеров в CSS, Bootstrap переходит на мировые значения калибровки содержимого. Это гарантирует, что заполнение не влияет на конечную вычисляемую ширину элемента, но это может вызвать проблемы с некоторыми сторонними программами, такими как Google Maps и Google Custom Search Engine.
официальный сайт Bootstrap https://getbootstrap.com/