Что такое Bootstrap

Содержание

Что это значит?
Как подключить Bootstrap?
Сетка
Брейкпойнты
Flexbox
Утилиты адаптивности
Примеры
Дополнительные ссылки

Bootstrap — HTML/CSS/JS-фреймворк. Это набор CSS-стилей и JavaScript-скриптов для быстрого создания современных адаптивных сайтов.

Что это значит?

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

Весь Хекслет, включая этот сайт, создан на Bootstrap’е.

Как подключить Bootstrap?

Самый простой способ — добавить такую строку в свой HTML:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

Такой же файл можно скачать и разместить на своем сервере. Либо подключить Bootstrap через пакетный менеджер. Подробнее на официальном сайте.

Сетка

Главная идея структуризации элементов — сетка. Экран разделен на 12 колонок. Любому элементу можно задать ширину в 1, 2, 3, …, 12 колонок. Например, если вы делаете сайт с боковой панелью и основной панелью, то можно сделать боковой панели ширину в 3 колонки, а основной — 9 колонок:

<div class="container">
  <div class="row">
    <div class="col-3">
      Боковая панель
    </div>
    <div class="col-9">
      Основная панель
    </div>
  </div>
</div>

Боковая панель

Основная панель

Подробнее о сетке в документации →

Брейкпойнты

Bootstrap следует принципу “mobile first”: верстка изначально делается для мобильных устройств, и адаптируется при увеличении ширины экрана.

Есть несколько брейкпойнтов. Это значения ширины, при которых возможно изменение стиля. Например, пример с двумя колонками выше выглядит не очень хорошо на маленьком экране мобильного телефона. Вот как можно решить это:

<div class="container">
  <div class="row">
    <div class="col-12 col-md-3">
      Боковая панель
    </div>
    <div class="col-12 col-md-9">
      Основная панель
    </div>
  </div>
</div>

Боковая панель

Основная панель

Попробуйте уменьшить ширину окна. Вторая колонка упадет вниз.

Классы col-12 col-md-3 означают:

по умолчанию ширина будет 12 колонок
при ширине окна md и выше ширина будет 3 колонки

Есть такие точки:

xl: 1200px и больше
lg: от 992px до 1200px
md: от 768px до 992px
sm: от 576px до 768px
xs: меньше 576px

В Bootstrap 4 col-xs заменили на просто col.

Подробнее о брейкпойнтах в документации →

Flexbox

Bootstrap основан на flexbox. Это позволяет быстро и легко делать адаптивные блоки, распределять элементы, группировать и так далее. Пример:

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

Flex item

Flexbox — тема для отдельной статьи (coming soon!). Пока советуем почитать:

Утилиты адаптивности

Брейкпойнты дают дополнительные возможности для адаптивности. Например, можно скрывать элементы на определенной ширине окна:

Класс hidden-lg-up скроет элемент на экранах lg и выше (от 992px и выше).
Класс hidden-sm-down скроет элемент на экранах sm и ниже (от 768px и ниже).

Также можно указать те элементы, которые следует или не следует выводить при печати страницы.

Подробнее об утилитах адаптивности в документации →

Примеры

Ниже — еще несколько примеров.


<div class="form-group has-success">
  <label class="form-control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control form-control-success" id="inputSuccess1">
  <div class="form-control-feedback">Success! You've done it.</div>
  <small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
<div class="form-group has-warning">
  <label class="form-control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control form-control-warning" id="inputWarning1">
  <div class="form-control-feedback">Shucks, check the formatting of that and try again.</div>
  <small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
<div class="form-group has-danger">
  <label class="form-control-label" for="inputDanger1">Input with danger</label>
  <input type="text" class="form-control form-control-danger" id="inputDanger1">
  <div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
  <small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>

Input with success

Success! You've done it.

Example help text that remains unchanged.

Input with warning

Shucks, check the formatting of that and try again.

Example help text that remains unchanged.

Input with danger

Sorry, that username's taken. Try another?

Example help text that remains unchanged.


<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>


<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago


<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

У Bootstrap’а огромное количество возможностей и хорошая документация.

Дополнительные ссылки

bootsnipp.com — готовые блоки на Bootstrap’е (формы регистрации, элементы лендингов, интерфейсы приложений и пр.)
fontawesome.io — набор иконок, подключаемых через шрифты (используется на Хекслете)
bootstrap-sass — Sass-версия Bootstrap’а

Рахим Давлеткалиев

Что такое Bootstrap

Набор стилей и скриптов для быстрой верстки.

Содержание

Что это значит?

Как подключить Bootstrap?

Сетка

Брейкпойнты

Flexbox

Утилиты адаптивности

Примеры

Card title

Card title

Card title

Дополнительные ссылки