Содержание

Создание Bootstrap-сетки в Figma

Всем привет, дорогие друзья! Сегодня мы рассмотрим создание сетки Bootstrap для Figma – одного из популярнейших UI-инструментов в настоящее время.

Смотреть урок на YouTube

Сетка Bootstrap уже прочно вошла в стек инструментов для коммерческой разработки – она позволяет эффективно и быстро разрабатывать адаптивные сайты, значительно сокращает и оптимизирует время разработки на этапе Дизайн to Front-end. У нас уже были уроки по созданию сетки Bootstrap для различных графических программ, таких, как Photoshop, Adobe XD, Gimp, Inkscape и т.д. Ознакомиться с сопутствующими уроками и материалами:

  • Bootstrap 4. Сетка. Подробное руководство: Посмотреть урок
  • Bootstrap Grid options: Документация
  • Photoshop (Bootstrap сетка, PSD): Посмотреть урок
  • Open Source Web Design: Урок и сетка Inkscape
  • Сетка для Gimp: Скачать
Результат этого урока (готовые сетки Figma) вы можете скачать здесь:

Скачать Bootstrap Figma

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

Итак, для начала создадим новый документ. Обычно я создаю документ для нового проекта с паттерном «Desktop»:

Здесь у нас создается фрейм шириной 1440 пикселей. Это среднее универсальное значение. Конечно-же можно сделать макет шире или наоборот уже, но, в целом, начинать создание дизайна можно именно с такой ширины макета. Как я говорил ранее, сетка в Figma настраивается довольно-таки быстро и просто. Однако, что касается сетки Bootstrap, здесь есть подводные камни. Давайте разберемся подробнее.

На панели справа найдем «Layout grid» и добавим сетку со следующими параметрами:

Сетка Bootstrap с настройками по умолчанию имеет общую ширину 1140 пикселей на больших разрешениях (Extra large, см. документацию), но при создании сетки в Figma следует учитывать тот факт, что CSS-сетка имеет дополнительные отступы слева и справа по 15px, а в программе этих отступов нет, можно указывать только общее значение Gutter между колонками. Соответственно, ширина сетки в Figma будет иметь общую ширину 1100px (1140px — 15px — 15px). Размер одной ячейки в этом случае рассчитывается следующим образом. Во-первых, у нас есть 12 промежутков по 30px (11 по 30px в самой сетке и 15px + 15px по бокам). Общая ширина всех отступов сетки составляет 12 * 30 = 360px. Теперь вычтем из общей ширины сетки Bootstrap в CSS ширину всех отступов: 1140px — 360px = 780px. Это общая ширина всех колонок без промежутков. Далее делим общую ширину всех колонок на 12 и получаем ширину одной колонки в системе сеток Bootstrap на самых больших разрешениях: 780px / 12 = 65px.

Обратите внимание в «Type» мы указали «Center» – это значит, что мы без проблем сможем в дальнейшем управлять шириной макета. Например, если макет в результате окажется слишком широким, мы сможем его обрезать. И наоборот, если понадобится увеличить ширину макета, это также можно будет сделать без опасения, что нарисованный в системе сеток контент разъедется и дизайн придется переделывать.

Кроме 12-ти колоночной системы сеток Bootstrap, я также использую и горизонтальную разметку для соблюдения вертикального ритма. Давайте добавим еще одну сетку (Rows) и зададим следующие значения:

Здесь мы указываем «Count» — «Auto» для того, чтобы вся доступная область выбранного фрейма заполнялась сеткой. Для того, чтобы сетка не была такой контрастной и не мешала работе над дизайном, я обычно прибираю значение непрозрачности цвета «Color» до 5%.

Обратите внимание, что «Type» мы можем указать как «Center» или «Top» – это самые популярные параметры горизонтальной сетки для веб-дизайна в Figma. Однако, я рекомендую использовать именно «Top», чтобы в процессе работы, если понадобится сделать макет выше, сетка не съехала и дизайн не пришлось переделывать.

В качестве «Gutter» и «Height» мы указали 10px. Это адекватный вертикальный ритм для большинства проектов, однако вы можете использовать более популярное значение 8px для этих двух параметров.

Экспериментируйте.

Внимание! Здесь, стоит добавить, что если вы используете в работе стартер OptimizedHTML 5, то здесь уже определен наиболее оптимальный вертикальный ритм для дефолтного размера текста в 16px (line-height: 1.65). Эти значения являются результатом моего опыта работа над различными сайтами и являются наиболее адекватными для практически любого проекта.
Если вы планируете в дальнейшем использовать стартер OptimizedHTML 5 или общий межстрочный интервал в CSS line-height: 1.65 и дефолтный размер шрифта проекта 16px, то при создании дизайна следует устанавливать значения «Gutter» и «Height» для горизонтальной сетки в 13px:

На панели справа найдем секцию «Frame» в Figma, укажем высоту макета 3500 (H) и перейдем к созданию сетки для следующего разрешения.

При создании Bootstrap-сеток в Figma и других графических редакторах для других разрешений следует учитывать, что если для самого большого разрешения ширина фрейма свободная и может меняться, то на остальных разрешениях, которые меньше, ширина фреймов должна быть привязана к соответствующим значениям из документации Bootstrap (см. Bootstrap Grid options):

Соответственно, общая ширина фрейма для следующего разрешения составит 992px (Large):

Ширина одной Bootstrap-колонки для данного разрешения, при условии, что будет отражено 12 колонок, составит 50px. Остальные параметры Bootstrap-сетки такие-же, как у предыдущего фрейма:

Горизонтальная сетка (вертикальный ритм) для этого и последующих разрешений будет иметь те же параметры, что и у первого макета (см. скачанный файл Figma).

Отлично! Переходим к созданию сетки для следующего разрешения. Создаем новый фрейм (по документации Bootstrap ширина 768px). В данном фрейме можно также отобразить 12 колонок. Зачастую, на таком разрешении адаптивный контент еще не «схлопывается», контент максимально вытягивается по высоте. Однако, в зависимости от задач, вы можете указать и другое количество колонок. Ширина одной колонки на таком разрешении составит 30px, если количество колонок указано 12. остальные параметры – как у предыдущих макетов.

Следующий размер фрейма 576px. На таком разрешении целесообразнее отобразить 6 колонок. Ширина одной колонки 60px. Остальные параметры и горизонтальная сетка как у предыдущих макетов.

И последний фрейм сделаем шириной 320px, отобразим 2 колонки, ширина колонки 130px. Остальные параметры как у предыдущих макетов. 320px – это минимальное разрешение в веб-дизайне, так как в настоящее время уже нет устройств, способных отобразить современный веб-контент меньше этого разрешения. Обычно на таком разрешении весь контент вытягивается в длинную ленту, однако иногда бывают случаи, когда необходимо разделить дизайн на колонки и на таком маленьком разрешении. Так как отступы в любом случае одинаковые по краям, можно сделать разлиновку на 2 колонки для того, чтобы в случае необходимости у нас была возможность воспользоваться колоночной системой.

Для того, чтобы воспользоваться созданной в данном уроке системой сеток в Figma, Скачайте архив с документом Figma, распакуйте и перетащите файл в список проектов Figma (Drafts). У вас появится новый документ «Bootstrap-Figma». Откройте его.

Для того, чтобы включить или отключить сетки в Figma, воспользуйтесь горячими клавишами Ctrl + Shift + 4.

Любой из фреймов документа «Bootstrap-Figma» вы можете выделить, скопировать Ctrl + C и вставить Ctrl + V в новый проект и использовать в своей работе.

Премиум уроки от WebDesign Master

Создание сайта от А до Я. Комплексный курс

Создание современного интернет-магазина от А до Я

Я — фрилансер! Базовый курс для начинающих

Другие уроки по теме «Веб-дизайн»
  • Создание дизайна сайта в Figma на реальном примере. Материалы урока
  • С чего начать работу над дизайном и где брать вдохновение
  • Процесс создания дизайна сайта салона красоты. Мастер веб-дизайна #7
  • Мастер веб-дизайна #5: Создание дизайна сайта пиццерии
  • Как стать крутым веб-дизайнером? Все по полочкам: UI/UX, Wireframing, правила хорошего тона, организация работы, верстка, самообучение

Установка Bootstrap | Bootstrap 5: Основы верстки

Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Театр начинается с вешалки, а использование Bootstrap начинается с подключения к странице. Подключение происходит одним из нескольких доступных способов: от подключения готовых файлов CSS и JS до использования SASS препроцессора с возможностью подключения нужных компонентов.

Подключение с помощью CDN

Перед тем, как изучить подключение через CDN стоит разобраться с тем, что такое CDN.

CDN — сокращение от Content Delivery Network. Чаще всего система CDN представляет собой несколько серверов в разных странах мира. Они хранят в себе файлы, которые можно подключить к проекту. В зависимости от того, где находится пользователь, отдается файл с того сервера, который обеспечит минимальную задержку.

Для подключения Bootstrap с помощью CDN достаточно просто подключить необходимые файлы в HTML. Свежие ссылки для подключения находятся на странице документации Bootstrap. В настоящее время это выглядит следующим образом:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Подключение Bootstrap</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
 <!-- Основная разметка страницы -->
</body>
</html>

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

Локальное подключение CSS

Разработчики не всегда хотят доверять внешним серверам, которые они не могут контролировать. Никто не может дать гарантию того, что CDN не подведет в самый нужный момент, когда на сайт пришли инвесторы с миллиардами. Чтобы избежать такой ситуации можно расположить все файлы Bootstrap у себя в рабочей директории и подключать их локально.

Скачать все необходимые файлы можно на официальной странице Bootstrap или через репозиторий GitHub. В случае с репозиторием нас интересует директория dist.

Внутри директории dist находится следующая структура CSS файлов:

bootstrap/
├── css/
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-reboot. css
│   ├── bootstrap-reboot.min.css
│   ├── bootstrap-utilities.css
│   ├── bootstrap-utilities.min.css
│   ├── bootstrap.css
│   └── bootstrap.min.css

В директории css находится больше файлов, чем при подключении Bootstrap через CDN. При таком подходе возможно подключать только необходимые части CSS.

  • bootstrap-grid.css. В файле находятся все стили, отвечающие за создание сеток. Если от Bootstrap в проекте необходима только сетка, то данного файла достаточно. В этом случае нет необходимости подключать все остальные зависимости, в том числе и JavaScript.

  • bootstrap-reboot.css. Файл, вопреки своему названию не сбрасывает стандартные стили браузеров, как это делает reset.css, а устанавливает стандартные Bootstrap стили для всех элементов.

  • bootstrap-utilities.css. Файл содержит все атомарные классы и утилиты Bootstrap. Основные утилиты будут изучены в следующих уроках.

  • bootstrap.css. Компиляция всех стилей Bootstrap. Если необходимы все стили, то достаточно подключить именно этот файл. Так же файл содержит стили всех компонентов.

Создадим проект, в котором используется только сетка и утилиты бутстрапа:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Подключение Bootstrap</title>
  <link rel="stylesheet" href="bootstrap/css/bootstrap-grid.min.css">
  <link rel="stylesheet" href="bootstrap/css/bootstrap-utilities.min.css">
</head>
<body>
 <!-- Основная разметка страницы -->
</body>
</html>

При подключении стилей к проекту лучше использовать минимизированные версии файлов. Они имеют дополнение в названии в виде .min. Эти файлы сжаты, что уменьшает вес стилей.

Подключение с помощью npm пакета

Последним способом является подключение Bootstrap с помощью npm пакета. Вместе с этим появится доступ ко всем SASS файлам Bootstrap, открывая возможности к более тонким настройкам проекта, а также созданию новых компонентов и утилит.

Для установки Bootstrap через npm используется команда:

npm install bootstrap

После этого в директории node_modules появится директория bootstrap. Внутри нее, помимо скомпилированных CSS и JS присутствуют SASS файлы, которые пригодятся при создании своих компонентов или утилит.

При таком подходе разработка зачастую ведется с использованием SASS препроцессора. Чтобы подключить Bootstrap к файлу используется стандартная директива @import.

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов

Электронная почта *

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Профессия

Верстальщик

Верстка с использованием последних стандартов CSS

в любое время 5 месяцев

Для перемещения по курсу нужно зарегистрироваться

1. Введение ↳ теория

2. Почему Bootstrap ↳ теория

3. Установка Bootstrap ↳ теория / тесты

4. Сетка ↳ теория / тесты / упражнение

5. Адаптивность ↳ теория / тесты / упражнение

6. Работа с текстом ↳ теория / тесты / упражнение

7. Таблицы ↳ теория / тесты / упражнение

8. Компоненты ↳ теория / тесты / упражнение

9. Создание пользовательского компонента ↳ теория / упражнение

10. Утилиты ↳ теория / тесты / упражнение

Порой обучение продвигается с трудом. Сложная теория, непонятные задания… Хочется бросить. Не сдавайтесь, все сложности можно преодолеть. Рассказываем, как

Не понятна формулировка, нашли опечатку?

Выделите текст, нажмите ctrl + enter и опишите проблему, затем отправьте нам. В течение нескольких дней мы улучшим формулировку или исправим опечатку

Что-то не получается в уроке?

Загляните в раздел «Обсуждение»:

  1. Изучите вопросы, которые задавали по уроку другие студенты — возможно, ответ на ваш уже есть
  2. Если вопросы остались, задайте свой. Расскажите, что непонятно или сложно. ПВ вопросах по коду дайте ссылку на ваше решение. Обратите внимание – команда поддержки не ревьюит код и не подсказывает ответы, но обязательно поможет, если вы неправильно поняли задание или учли не все условия
  3. Мы отвечаем на сообщения в течение 2-3 дней. Но к «Обсуждениям» могут подключаться и другие студенты. Возможно, получится решить вопрос быстрее!

Подробнее о том, как задавать вопросы по уроку

Bootstrap 4. Сетка

Bootstrap использует систему FlexBox. В сетке Bootstrap по умолчанию содержится 12 колонок. Число 12 делится на много других чисел, поэтому им очень удобно оперировать. Ваша задача — разбивать колонки таким образом, чтобы в сумме они давали 12, например, две колонки в пропорции 8:4 или три колонки 5:4:3. Если вы ошибётесь и число колонок будет больше 12, то лищние колонки будут переноситься на следующую строку по правилам FlexBox.

Имеются три главных компонента сетки — контейнер, ряд и колонка.

container

Контейнер представлен классом container для фиксированной ширины и container-fluid на всю ширину страницы. Контейнеры помогают выравнивать содержимое страницы.

Container-fluid – это полностью резиновый контейнер, который растягивается всегда на 100% ширины окна, поэтому если у вас полностью резиновый сайт, вам нужен именно такой контейнер.

На странице может быть несколько контейнеров, логически разбивающие содержание страницы.

row

Внутри этого контейнера должен быть ещё один блок с классом row, то есть ряд сетки.

Ряды представляют собой горизонтальные группы колонок для равномерного и аккуратного распределения содержимого. Контент должен находиться в колонках. Только колонки могут быть дочерними элементами рядов.

Ряды не могут существовать вне контейнера.

col

Классы колонок содержат в названии число колонок. Колонка имеет класс col-x-x, где первый x – обозначение устройства, а второй – количество колонок от 1 до 12. Максимальное число — 12 колонок в ряд. Таким образом, если вы хотите разбить контент на три равные части, то используйте .col-sm-4 (4 * 3 = 12).

Ширина колонки вычисляется автоматически относительно родительского элемента.

Колонки имеют горизонтальные отступы для создания пространства между собой.

Если использовать простые варианты без дополнительных модификаторов типа col-8 и col-4, то две колонки с заданными пропорциями будут построены на любых экранах — на десктопе, планшетах и телефонах. Это не всегда удобно. Поэтому применяют дополнительные правила. Можно реализовать 3 колонки на настольном компьютере, 2 колонки на планшетах и 1 колонку на мобильном телефоне

Построение по сетке

Было выделено 5 основных типов устройств по ширине экрана. Для самых маленьких устройств (extra small), у которых ширина экрана менее 576 пикселей, префикс класса – col. Далее идет col-sm (small, ширина от 576 до 768 пикселей), col-md (medium, ширина от 768 до 992 пикселей), col-lg (large ), с шириной от 992 до 1200 пикселей и xl (extra large) с шириной более 1200 пикселей.

Перестроение начинается с определённых величин: 540px, 720px, 960px, 1140px.

Опорные точки основаны на минимальной ширине и распространяются выше. Например, col-sm-4 применим к маленьким, средним, большим и сверхбольшим экранам по нарастающей.

Как же работают классы типа col-x-x? Очень просто.

Создадим три одинаковые колонки.

Одна треть/col-sm-4

Одна треть/col-sm-4

Одна треть/col-sm-4

<div>
  <div>
    <div>
      Одна треть/col-sm-4
    </div>
    <div>
      Одна треть/col-sm-4
    </div>
    <div>
      Одна треть/col-sm-4
    </div>
  </div>
</div>

Три равные колонки будут на маленьких, средних, больших и очень экранах. Колонки центрируются внутри родительского container.

Теперь создадим другой пример, когда на маленьких экранах всё будет размещаться в одной колонке. При увеличении размеров разметка будет меняться. Удобнее проверять на настольном компьютере, уменьшив ширину браузера до маленьких величин и постепенно его увеличивая.

col-md-1

col-md-1

col-md-1

col-md-1

col-md-1

col-md-1

col-md-1

col-md-1

col-md-1

col-md-1

col-md-1

col-md-1

col-md-8

col-md-4

col-md-4

col-md-4

col-md-4

col-md-6

col-md-6

<div>
  <div>
    <div>col-md-1</div>
    <div>col-md-1</div>
    <div>col-md-1</div>
    <div>col-md-1</div>
    <div>col-md-1</div>
    <div>col-md-1</div>
    <div>col-md-1</div>
    <div>col-md-1</div>
    <div>col-md-1</div>
    <div>col-md-1</div>
    <div>col-md-1</div>
    <div>col-md-1</div>
  </div>
  <div>
    <div>col-md-8</div>
    <div>col-md-4</div>
  </div>
  <div>
    <div>col-md-4</div>
    <div>col-md-4</div>
    <div>col-md-4</div>
  </div>
  <div>
    <div>col-md-6</div>
    <div>col-md-6</div>
  </div>
</div>

В этом примере мы использовали класс . col-md-* для построения сетки, начиная с десктопных устройств (medium). Всё, что меньше (телефоны (col) и планшеты (col-sm)), будет выводиться в одну колонку, так как мы не указали для этих размеров правила.

Mobile и desktop

Если такое поведение не устраивает, то добавляйте класс col-*.

На мобильных устройствах одна колонка растянется на всю ширину, а вторая займёт половину ниже. Так как больше 12 колонок быть не может, то задав ширину у первой колонки в 12 единиц, мы заставили вторую колонку перейти на следующую строку и занять половину (col-xs-6)

.col-12 .col-md-8

.col-6 .col-md-4

<div>
  <div>.col-xs-12 .col-md-8</div>
  <div>.col-xs-6 .col-md-4</div>
</div>

Следующий пример.

На мобильных каждая колонка занимает половину экрана. Третья колонка разместится с новой строки под первой колонкой. На настольных устройствах колонки разместятся в один ряд, занимая одну треть каждая.

.col-6 . col-md-4

.col-6 .col-md-4

.col-6 .col-md-4

<div>
  <div>.col-xs-6 .col-md-4</div>
  <div>.col-xs-6 .col-md-4</div>
  <div>.col-xs-6 .col-md-4</div>
</div>

Колонки всегда занимают половину экрана на мобильных и настольных устройствах.

.col-6

.col-6

<div>
  <div>.col-xs-6</div>
  <div>.col-xs-6</div>
</div>

Mobile, tablet, desktop

Ещё больше вариативности. Добавляем поддержку планшетов, используя класс .col-sm-*.

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

<div>
  <div>.col-xs-12 .col-sm-6 .col-md-8</div>
  <div>.col-xs-6 .col-md-4</div>
</div>

Подведём итог. Создадим две колонки в пропорции 3:1.

  <div class = "row">
  	<div class = "col-md-3 col-sm-6">Первая колонка ряда</div>
  	<div class = "col-md-1 col-sm-6">Вторая колонка ряда</div>
  </div>

Первая колонка ряда

Вторая колонка ряда

С помощью этих классов мы определили: на средних и больших устройствах дать первому блоку ширину в 3 колонки из 12, а второму – 1 из 12. А вот на маленьких экранах планшетов следует оба блока показать на 50% ширины ряда.

А что же произойдет на самых маленьких экранах телефонов? Если сузить окна браузера до размеров телефона, то отменится правило для extra small и каждый блок станет занимать по 100% ширины в ряде. Запомните, что это поведение блоков по умолчанию – занимать 100% ширины в своем контейнере.

Если мы задаем, например, col-sm-6, то такая ширина сохранится у блока и на md и lg, если для этих устройств ничего не прописано.

А вот на col, то есть на экстра-маленьких устройствах, ширина блока будет 100%, а не 50%. То есть наследование прописанной ширины происходит только для больших устройств, но ни в коем случаев не для меньших. Например, если вы напишите такой класс: col-lg-6, то такая ширина у блока будет только на экранах более 1200 пикселей. На md, sm, xs будет другая ширина.

Вы можете указывать блоку не один, а несколько классов. Например, col-6 col-md-4.

На маленьких экранах будет 50%, то есть половина ширины контейнера. На sm то же самое – 50%, так как значение наследуется для устройств с большей шириной. На md блок займет треть ширины. На самых больших экранах тоже треть. Опять же, значение наследуется из md.

Вы можете прописать так:

<div></div>

Мы задали своё отображение для каждого типа устройств.

Можно вкладывать сетку в какой-угодно блок. Давайте рассмотрим такой пример кода:

1 блок

2 блок

3 блок

<div>
  <div>
  	<div>
  	  <div class= "row">
  	  	<div>1 блок</div>
  	  	<div>2 блок</div>
  	  	<div>3 блок</div>
  	  </div>
  	</div>
  </div>
</div>

У нас есть общий контейнер (фиолетовый), а в нём один ряд. В ряд вложен блок, который занимает половину ширины контейнера на средних и больших экранах, две трети на маленьких и 100% на самых маленьких. Внутри ещё три блока.

Ряд является контейнером для других рядов и т.д. Обязательно придерживайтесь в коде структуры: контейнер – ряд — ячейки (колонки).

Старые сетки работали на обтеканиях, поэтому все колонки были разной высоты. Высота определялась контентом.

В Flexbox макетах все ячейки в строке имеют высоту колонки с наибольшим контентом.

Чтобы помочь представить две системы, посмотрите демо обеих сеток.

Когда колонок в строке становится больше 12, тринадцатая колонка перепрыгивает на следующую строку. Эффект называется переход столбца и работает одинаково в обычной сетке и flex-bootstrap.

<div>
   <div>.col-xs-6</div>
   <div>.col-xs-6</div>
   <div>.col-xs-3, This column will move to the next line.</div>
</div>

.col-6

.col-6

.col-3, This column will move to the next line.

Единственное, на что стоит обратить внимание, это то, что в режиме автомакетирования безразмерная колонка может растянуться на всю строку, если она не вместилась на предыдущей.

Различные примеры сеток смотрите также в FlexBox

Общие рекомендации по построению

Сначала создаём блок ряда в контейнере.

<div>
    <div></div>
    <div></div>
</div>

Начинается проверка с маленького экрана. Выводим два блока по вертикали один над другим.

<div>
    <div></div>
    <div></div>
</div>

На средних экранах хотим видеть два блока рядом по горизонтали.

<div>
    <div></div>
    <div></div>
</div>

Так, варьируя классы, вы можете построить нужный макет.

Реклама

Типографика · Bootstrap

Документация и примеры типографики Bootstrap, включая глобальные настройки, заголовки, основной текст, списки и многое другое.

Глобальные настройки

Bootstrap устанавливает базовые глобальные стили отображения, типографики и ссылок. Когда требуется больше контроля, проверьте текстовые служебные классы.

  • Используйте собственный стек шрифтов, который выбирает лучшее семейство шрифтов для каждой ОС и устройства.
  • Для более всеобъемлющей и доступной шкалы типов мы предполагаем корневой каталог браузера по умолчанию размер шрифта (обычно 16 пикселей), чтобы посетители могли настроить свои браузеры по умолчанию по мере необходимости.
  • Используйте атрибуты $font-family-base , $font-size-base и $line-height-base в качестве нашей типографской базы, примененной к .
  • Установите глобальный цвет ссылки с помощью $link-color и примените подчеркивание ссылки только к :hover .
  • Используйте $body-bg , чтобы установить фоновый цвет на ( #fff по умолчанию).

Эти стили можно найти в _reboot.scss , а глобальные переменные определены в _variables. scss . Обязательно установите $font-size-base в rem .

Заголовки

Доступны все заголовки HTML от

до
.

Заголовок Пример

х2. Заголовок начальной загрузки

х3. Заголовок начальной загрузки

h4. Заголовок начальной загрузки

h5. Заголовок начальной загрузки

h5. Заголовок начальной загрузки

h6. Заголовок начальной загрузки
  

h2. Заголовок начальной загрузки

h3. Заголовок начальной загрузки

h4. Заголовок начальной загрузки

h5. Заголовок начальной загрузки
h5. Заголовок начальной загрузки
h6. Заголовок начальной загрузки
9Также доступны классы от 0135

.h2 до .h6 , когда вы хотите подобрать стиль шрифта заголовка, но не можете использовать связанный элемент HTML.

х2. Заголовок начальной загрузки

h3. Заголовок начальной загрузки

h4. Заголовок начальной загрузки

h5. Заголовок начальной загрузки

h5. Заголовок начальной загрузки

h6. Заголовок начальной загрузки

 

h2. Заголовок начальной загрузки

h3. Заголовок начальной загрузки

h4. Заголовок начальной загрузки

h5. Заголовок начальной загрузки

h5. Заголовок начальной загрузки

h6. Заголовок начальной загрузки

Настройка заголовков

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

Причудливый заголовок дисплея С блеклым вторичным текстом

 

Необычный заголовок дисплея

С блеклым второстепенным текстом

Показать заголовки

Традиционные элементы заголовков лучше всего подходят для содержания вашей страницы. Если вам нужен заголовок, чтобы выделиться, рассмотрите возможность использования отображает заголовок — более крупный и немного более самоуверенный стиль заголовка.

Дисплей 1
Дисплей 2
Дисплей 3
Дисплей 4
  

Экран 1

Экран 2

Экран 3

Отображение 4

Лид

Выделите абзац, добавив . lead .

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

 

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Элементы встроенного текста

Стили для обычных встроенных элементов HTML5.

Вы можете использовать тег метки, чтобы выделить текст .

Эта строка текста должна рассматриваться как удаленный текст.

Эта строка текста считается неточной.

Эта строка текста должна рассматриваться как дополнение к документу.

Эта строка текста будет отображаться как подчеркнутая

Эта строка текста должна рассматриваться как мелкий шрифт.

Эта строка выделена жирным шрифтом.

Эта строка выделена курсивом.

 

Тег mark можно использовать для выделения текста.

Эта строка текста должна рассматриваться как удаленный текст.

Эта строка текста больше не соответствует действительности.

Эта строка текста должна рассматриваться как дополнение к документу.

Эта строка текста будет отображаться как подчеркнутая

Эта строка текста должна рассматриваться как мелкий шрифт.

Эта строка выделена жирным шрифтом.

Эта строка выделена курсивом.

Также доступны классы

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

Хотя это не показано выше, не стесняйтесь использовать и в HTML5. предназначен для выделения слов или фраз без придания им дополнительной важности, тогда как в основном предназначен для голосовых, технических терминов и т. д.

Текстовые утилиты

Изменяйте выравнивание текста, трансформируйте его, стиль, толщину и цвет с помощью наших текстовых и цветных утилит.

Сокращения

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

Добавить .инициализм на аббревиатуру для немного меньшего размера шрифта.

атрибут

HTML

 

атрибут

HTML

Блок-котировки

Для цитирования блоков содержимого из другого источника в вашем документе. Оберните

вокруг любого HTML в качестве цитаты.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Целое число можно поставить заранее.

 <цитата>
  

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Целое число ставится перед ставкой.

Наименование источника

Добавьте <нижний колонтитул> для идентификации источника. Заключите название исходной работы в .

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Целое число можно поставить заранее.

 <цитата>
  

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Целое число ставится перед ставкой.

Кто-то известен в исходном названии

Выравнивание

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Целое число можно поставить заранее.

 <цитата>
  

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Целое число ставится перед ставкой.

Кто-то известен в исходном названии

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Целое число можно поставить заранее.

 <цитата>
  

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Целое число ставится перед ставкой.

Кто-то известен в исходном названии

Списки

Без стиля

Удалить стиль списка по умолчанию и левое поле для элементов списка (только непосредственные дочерние элементы). Это применимо только к непосредственным дочерним элементам списка , что означает, что вам также нужно будет добавить класс для любых вложенных списков.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Целое число слов и масса
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Содовый гнойник
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Энеан сит амет эрат нунк
  • Eget porttitor lorem
 <ул>
  
  • Lorem ipsum dolor sit amet
  • Создание элитной косметики
  • Целое число слов и масса
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit <ул>
  • Phasellus iaculis neque
  • Популярная сыпь
  • Вестибюль лаорет порттитор сем
  • Ac tristique libero volutpat
  • Faucibus porta lacus fringilla vel
  • Энеан сит амет эрат нунк
  • Есть порттитор лорем
  • Встроенный

    Удалить маркеры списка и применить небольшое поле с комбинацией двух классов, . list-inline и .list-inline-item .

    • Лорем ипсум
    • Фазеллус якулис
    • Нулла волютпат
     <ул>
      
  • Лорем ипсум
  • Phasellus iaculis
  • Нулла волютпат
  • Выравнивание списка описаний

    Выровняйте термины и описания по горизонтали, используя предопределенные классы нашей системы сетки (или семантические примеси). Для более длинных терминов вы можете дополнительно добавить класс .text-truncate , чтобы обрезать текст многоточием.

    Списки описаний
    Список описаний идеально подходит для определения терминов.
    Эуисмод

    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

    Donec id elit non mi porta gravida at eget metus.

    Порт Малесуада
    Etiam porta sem malesuada magna mollis euismod.
    Усеченный термин усекается
    Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
    Вложение
    Вложенный список определений
    Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
     <дл>
      
    Списки описаний
    Список описаний идеально подходит для определения терминов.
    Эйсмод
    <дд>

    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

    Donec id elit non mi porta gravida at eget metus.

    Малесуада Порта
    Etiam porta sem malesuada magna mollis euismod.
    Усеченный термин усекается
    Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
    Вложение
    <дд> <дл>
    Вложенный список определений
    Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

    Адаптивная типографика

    Адаптивная типографика относится к масштабированию текста и компонентов путем простой настройки размера шрифта корневого элемента в рамках серии медиазапросов. Bootstrap не делает этого за вас, но его довольно легко добавить, если вам это нужно.

    Вот пример из практики. Выберите любой размер шрифта , размер шрифта и медиа-запросы, которые вы хотите.

     HTML {
      размер шрифта: 1rem;
    }
    @include media-breakpoint-up(sm) {
      HTML {
        размер шрифта: 1.2rem;
      }
    }
    @include media-breakpoint-up(md) {
      HTML {
        размер шрифта: 1.4rem;
      }
    }
    @include media-breakpoint-up(lg) {
      HTML {
        размер шрифта: 1.6rem;
      }
    } 

    Панель навигации · Начальная загрузка

    Документация и примеры для мощного, отзывчивого навигационного заголовка Bootstrap, панели навигации. Включает поддержку фирменного стиля, навигации и многого другого, включая поддержку нашего плагина для сворачивания.

    Как это работает

    Вот что вам нужно знать перед началом работы с панелью навигации:

    • Для панелей навигации требуется упаковка .navbar с . navbar-expand{-sm|-md|-lg|-xl} для адаптивного свертывания и классов цветовых схем.
    • Панели навигации и их содержимое по умолчанию изменчивы. Используйте дополнительные контейнеры, чтобы ограничить их ширину по горизонтали.
    • Используйте наши служебные классы spacing и flex для управления интервалами и выравниванием в панелях навигации.
    • Панели навигации по умолчанию реагируют, но вы можете легко изменить их, чтобы изменить это. Отзывчивое поведение зависит от нашего подключаемого модуля Collapse JavaScript.
    • Панели навигации по умолчанию скрыты при печати. Заставьте их распечатать, добавив .d-print до .navbar . См. служебный класс дисплея.
    • Обеспечьте доступность с помощью элемента

    Прочтите пример и список поддерживаемых подкомпонентов.

    Поддерживаемый контент

    Navbars поставляются со встроенной поддержкой нескольких подкомпонентов. При необходимости выберите из следующего:

    • .navbar-brand для названия вашей компании, продукта или проекта.
    • .navbar-nav для полноразмерной и облегченной навигации (включая поддержку раскрывающихся списков).
    • .navbar-toggler для использования с нашим подключаемым модулем сворачивания и другими функциями переключения навигации.
    • .form-inline для любых элементов управления и действий формы.
    • .navbar-text для добавления вертикально центрированных строк текста.
    • .collapse.navbar-collapse для группировки и скрытия содержимого панели навигации родительской точкой останова.

    Вот пример всех подкомпонентов, включенных в адаптивную панель навигации в светлом стиле, которая автоматически сворачивается в контрольной точке lg (большой).

     <навигация>
      Панель навигации
      
        
      

    В этом примере используются служебные классы цвета ( bg-light ) и интервала ( my-2 , my-lg-0 , mr-sm-0 , my-sm-0 ).

    Марка

    .navbar-brand можно применить к большинству элементов, но якорь работает лучше всего, поскольку для некоторых элементов могут потребоваться служебные классы или пользовательские стили.

     
    <навигация>
      Панель навигации
    
    
    <навигация>
      Панель навигации
     

    Добавление изображений в .navbar-brand , скорее всего, всегда потребует пользовательских стилей или утилит для правильного размера. Вот несколько примеров для демонстрации.

     
    <навигация>
      <а href="#">
        
      
     
     
    <навигация>
      <а href="#">
        
        Начальная загрузка
      
     

    Навигация

    Навигационные ссылки

    Navbar основаны на наших опциях . nav с собственным классом модификатора и требуют использования классов переключателей для правильного адаптивного стиля. Навигация в навигационных панелях также будет увеличиваться, чтобы занимать как можно больше горизонтального пространства , чтобы обеспечить надежное выравнивание содержимого вашей навигационной панели.

    Активные состояния — с .active — для указания того, что текущая страница может быть применена непосредственно к .nav-link или их непосредственному родителю .nav-элемент с.

     <навигация>
      Панель навигации