Введение
Bootstrap - это самая популярная в мире платформа для создания адаптивных сайтов и приложений. Внутри вы найдете HTML, CSS и JavaScript высокого качества, чтобы сделать любой проект проще, чем когда-либо.
Вот как быстро начать работу с Bootstrap CDN и стартовой страницей шаблона.
Содержание
Быстрый старт
Хотите быстро добавить Bootstrap в свой проект? Используйте компакт-диск Bootstrap CDN, предоставляемый бесплатно пользователями MaxCDN. Используете диспетчер пакетов или нуждаетесь в загрузке исходных файлов?Перейдите на страницу загрузки.
Скопируйте таблицу стилей <link>
в ваш <head>
перед всеми другими таблицами стилей, чтобы загрузить наш CSS.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
Добавьте плагины JavaScript, jQuery и Tether в конец ваших страниц прямо перед закрывающим тегом </body>
. Обязательно разместите jQuery и Tether, так как наш код зависит от них. Хотя мы используем jQuery’s slim build в наших документах, полная версия также поддерживается.
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
И это все, вы на своем пути к полностью Bootstrap-овскому сайту. Если вы не уверены в общей структуре страницы, продолжайте читать пример шаблона страницы.
Стартовый шаблон
Убедитесь, что ваши страницы настроены с учетом последних стандартов проектирования и разработки. Это означает использование HTML5 doctype и включение метатега 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-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
Это все, что вам нужно для общих требований к страницам. Посмотрите Layout docs или наши официальные примеры, чтобы начать компоновку контента и компонентов вашего сайта.
Важные глобальные переменные
Bootstrap использует несколько важных глобальных стилей и настроек, о которых вам нужно знать при использовании, и которые почти исключительно направлены на нормализацию стилей кросс-браузера.
HTML5 doctype
Bootstrap требует использования doctype HTML5.
<!DOCTYPE html>
<html lang="en">
...
</html>
Адаптивный meta tag
Bootstrap разработан по стратегии mobile first, при которой мы сначала оптимизируем код для мобильных устройств, а затем масштабируем компоненты по мере необходимости с помощью меди-запросов CSS. Чтобы обеспечить правильное отображение и масштабирование для всех устройств, добавьте адаптивный viewport meta tag в ваш <head>
.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Вы можете увидеть пример этого в действии в стартовом шаблоне.
Box-sizing
Для более простого определения размеров в CSS мы переключаем глобальное значение box-sizing
из content-box
в border-box
. Это гарантирует, что padding
не повлияет на окончательную вычисленную ширину элемента, но может вызвать проблемы с некоторыми сторонними программными продуктами, такими как Google Maps и Google Custom Search Engine.
В редком случае вам нужно переопределить его, используйте что-то вроде следующего:
.selector-for-some-widget {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
С указанным фрагментом вложенные элементы - включая сгенерированный контент с помощью :before
и :after
— все наследуют указанный box-sizing
для этого .selector-for-some-widget
.
Узнайте больше о box model и sizing в CSS Tricks.
Normalize.css
Для улучшения кроссбраузерного рендеринга мы используем Normalize.css для коррекции небольших несоответствий между браузерами и устройствами. Мы также используем наши собственные стили с Reboot.
Сообщество
Будьте в курсе разработки Bootstrap и обращайтесь к сообществу с этими полезными ресурсами.
- Следуйте за @getbootstrap в Twitter.
- Читайте и подписывайтесь на The Official Bootstrap Blog.
- Присоединяйтесь к the official Slack room.
- Общайтесь с другими Bootstrappers в IRC. На сервере
irc.freenode.net
в канале##bootstrap
. - Справку по внедрению можно найти в Stack Overflow (
bootstrap-4
). - Разработчики должны использовать ключевое слово
bootstrap
для пакетов, которые изменяют или добавляют к функциональности Bootstrap при распространении через npm или аналогичные механизмы доставки для максимальной видимости.
Вы также можете следить за @getbootstrap в Twitter за последними сплетнями и потрясающими музыкальными видео.