Введение

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 за последними сплетнями и потрясающими музыкальными видео.

Начало работы