Перейти к основному контенту
Основы Bootstrap

Обзор Bootstrap, в том числе как загрузить и использовать его, некоторые основные шаблоны и примеры, и многое другое

Введение

Bootstrap-это самая популярная в мире платформа для создания отзывчивым и мобильных сайтов и приложений. Внутри вы найдете высококачественные шаблоны HTML, CSS и JavaScript. С ними создавать любой проект проще, чем когда-либо.

Вот как быстро начать работу с помощью bootstrap cdn и шаблона стартовой страницы.

Контент

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

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

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>

Вот и все — вы полностью выполнили начальную загрузку сайта с Bootstrap.

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

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

  • Используете HTML5 doctype
  • Заставляете Internet Explorer, использовать свой последний режим рендеринга (Подробнее)
  • И используете мета-тег viewport.

Соберите все это вместе и ваши страницы должны выглядеть так::

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery first, then Bootstrap JS. -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
  </body>
</html>

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

Важные оновы

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

HTML5 doctype

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

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

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

Bootstrap разработанmobile first. Прежде всего это создание сайта изначально под мобильные устройства, а потом уже отдельным стилем адаптируем его под стационарные ПК или ноутбукииспользуя CSS медиа запросы. Чтобы гарантировать правильное отображение касаний и масштабирований для всех устройств, добавте адаптивный метатег viewport в ваш <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.

Читать подробнее модели и размеры в CSS трюках.

Кроссбраузерность с Normalize.css

Для улучшения кроссбраузерной визуализации, мы используем Normalize.css чтобы исправить мелкие нестыковки в разных браузерах и устройствах. На основе этого мы построили, чуть более отзывчивые стили Reboot.

Сообщество

Оставайтесь в курсе развития bootstrap и обратитесь к сообществу с этими полезными ресурсами.

Так же вы можете следить за нами в Твиттере. Вас ждут последние сплетни и потрясающая музыка и видео.