Introduction

Цвета

Как описано в разделе » цвета «, ниже приведен список всех классов текста и фона:

Классы для текстовых цветов: ,
, , ,
, , , ,
, (default body color/often black) and :

Этот текст отключен.

Этот текст важен.

Этот текст указывает на успех.

Этот текст представляет некоторую информацию.

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

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

Вторичный текст.

Темно-серый текст.

Основного текста.

Светло-серый текст.

Контекстные текстовые классы также можно использовать для ссылок, которые добавят более темный цвет наведения:

Muted link.
Primary link.
Success link.
Info link.
Warning link.
Danger link.
Secondary link.
Dark grey link.
Body/black link.
Light grey link.

Вы также можете добавить 50% непрозрачность для черного или белого текста с или классов:

Изменение визуального порядка следования адаптивных блоков

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

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

order-{breakpoint}-{visual_number}

Вместо необходимо указать число от 1 до 12.

Это число и определяет то, как элементы будут визуально следовать на странице. А именно все адаптивные элементы будут визуально следовать в порядке возрастания этих номеров. Если элементу не установлен класс , то по умолчанию он имеет значение 0.

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

<div class="row">
  <div class="col">
    Первый (не упорядоченный, без класса order-)
    <!-- По умолчанию order, равно 0, поэтому он и первый-->
  </div>
  <div class="col order-12">
    Второй, но будет отображаться последним
  </div>
  <div class="col order-1">
    Третий, но будет отображаться вторым
  </div>
</div>

Ещё один пример (с использованием адаптивных классов ):

<div class="row">
  <div class="col-md-8 order-2 order-md-1">
    Первый (на xs, sm будет отображаться вторым)
  </div>
  <div class="col-md-4 order-1 order-md-2">
    Второй (на xs, sm будет отображаться первым)
  </div>
</div>

Кроме чисел (по умолчанию от 1 до 12) можно ещё использовать слова и . Эти классы (, , , ) позволяют соответственно визуально сместить элемент в начало или конец.

Классы и оказывают своё действие посредством установки элементу CSS свойства со значением -1 (), а классы и — CSS свойства со значением 13 ().

Перепишем вышеприведённый пример с использованием классов , в которых используются ключевые слова и :

<div class="row">
  <div class="col-md-8 order-last order-md-first">
    Первый (на xs, sm будет отображаться последним)
  </div>
  <div class="col-md-4 order-first order-md-last">
    Последний (на xs, sm будет отображаться первым)
  </div>
</div>

Пример с использованием классов как с числом, так и со словами и :

<div class="row">
  <div class="col-3 order-sm-last order-md-1">#1 (XS), #LAST (SM), #1 (MD, LG и XL)</div>
  <div class="col-3 order-md-7">#2 (XS), #7 (MD, LG и XL)</div>
  <div class="col-3 order-md-6">#3 (XS), #6 (MD, LG и XL)</div>
  <div class="col-3 order-md-5">#4 (XS), #5 (MD, LG и XL)</div>
  <div class="col-3 order-md-4">#5 (XS), #4 (MD, LG и XL)</div>
  <div class="col-3 order-md-3">#6 (XS), #3 (MD, LG и XL)</div>
  <div class="col-3 order-md-2">#7 (XS), #2 (MD, LG и XL)</div>
  <div class="col-3 order-sm-first order-md-8">#8 (XS), #FIRST (SM), #8 (MD, LG и XL)</div>
</div>

Bootstrap 3 vs. Bootstrap 4

Bootstrap 4 is the newest version of Bootstrap; with new components, faster stylesheet and more responsiveness.

Bootstrap 4 supports the latest, stable releases of all major browsers and
platforms. However, Internet Explorer 9 and down is not supported.

If you require IE8-9 support, use Bootstrap 3. It is the most
stable version of Bootstrap, and it is still supported by the team for critical bugfixes and documentation changes. However, no new features will be added to
it.

Dropped icon support: Bootstrap 4 does not support BS3 Glyphicons. Use Font-Awesome or other icon libraries instead.

Bootstrap 4 CDN

If you don’t want to download and host Bootstrap 4 yourself, you can include it from a CDN (Content Delivery Network).

MaxCDN provides CDN support for Bootstrap’s CSS and JavaScript. You must also include jQuery:

MaxCDN:

<!— Latest compiled and minified CSS —><link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css»><!— jQuery library —><script src=»https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js»></script>
<!— Popper JS —><script src=»https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js»></script><!— Latest compiled JavaScript —><script src=»https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js»></script>

One advantage of using the Bootstrap 4 CDN:
Many users already have downloaded
Bootstrap 4 from MaxCDN when visiting
another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time.
Also, most CDN’s will make sure that once a user requests a file from it, it will be served
from the server closest to them, which also leads to faster loading time.jQuery and Popper?Bootstrap 4 use jQuery and Popper.js for
JavaScript components (like modals, tooltips, popovers etc). However, if you just use the
CSS part of Bootstrap, you don’t need them.

Show components that require jQuery »

• Closable alerts
• Buttons and checkboxes/radio buttons for toggling states
• Carousel for slides, controls, and indicators
• Collapse for toggling content
• Dropdowns (also requires Popper.js for perfect positioning)
• Modals (open and close)
• Navbar (for collapsible menus)
• Tooltips and popovers (also requires Popper.js for perfect positioning)
• Scrollspy for scroll behavior and navigation updates

Расположение адаптивных блоков в ряду

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

<div class="container">
  <div class="row">
    <div class="col-6"> (1) </div>
    <div class="col-6"> (2) </div>
    <div class="col-12"> (3) </div>
    <div class="col-8"> (4) </div>
  </div>
</div>

Рассмотрим ещё один пример, в котором адаптивные блоки имеют различную ширину на различных контрольных точках:

<div class="row">
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
    <!-- Этот адаптивный блок перенесётся на новую линию на xs-->
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
    <!-- Этот адаптивный блок перенесётся на новую линию на sm-->
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
    <!-- Этот адаптивный блок перенесётся на новую линию на xs и md-->
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
    <!-- Этот адаптивный блок перенесётся на новую линию на xs, sm и lg-->
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
</div>

Сообщество

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

• Вступите в группу @getbootstrap_ru в Телеграм.
• Прочтите и подпишитесь на Официальный блог Bootstrap.
• Присоединяйтесь к официальной комнате Slack.
• Общайтесь с другими Бутстрапперами в IRC. На сервере , в канале .
• Справку по реализации можно найти на сайте Stack Overflow (с тегом ).
• Разработчикам следует использовать ключевое слово в пакетах, которые изменяют или расширяют функциональность Bootstrap при распространении через npm или аналогичные механизмы доставки для максимальной доступности.

Вы также можете следить за @getbootstrap в Twitter, чтобы следить за последними сплетнями и потрясающими музыкальными клипами.

Позиции

Используйте класс, чтобы сделать любой элемент фиксированным/пребывание в верхней части страницы:

<nav class=»navbar navbar-expand-sm bg-dark navbar-dark fixed-top»> 
…</nav>

Используйте класс, чтобы сделать любой элемент фиксированным/остаться в нижней части страницы:

<nav class=»navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom»> 
…</nav>

Используйте класс, чтобы сделать любой элемент фиксированным/остаться в верхней части страницы, когда вы прокрутите его мимо. Примечание:
Этот класс не работает в Internet Explorer 11 и более ранних версиях (будет рассматривать его как ).

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

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

JS

Многие из наших компонентов требуют использования JavaScript для работы. В частности, для них требуются jQuery, Popper и наши собственные плагины JavaScript. Мы используем тонкую сборку jQuery, но также поддерживается полная версия.

Поместите один из следующих в конце Ваших страниц, прямо перед закрывающим тегом , чтобы включить их. Сначала должен быть jQuery, затем Popper, а затем наши плагины JavaScript.

Связка

Включите каждый плагин Bootstrap JavaScript в один из двух наших пакетов. И и включают Popper для наших всплывающих подсказок и всплывающих окон, но не jQuery. Сначала включите jQuery, а затем пакет Bootstrap JavaScript. Дополнительную информацию о том, что включено в Bootstrap, можно найти в разделе .

Раздельно

Если Вы решите использовать отдельные скрипты, сначала должен быть Popper (если Вы используете всплывающие подсказки или всплывающие окна), а затем наши плагины JavaScript.

Компоненты

Интересно, какие компоненты явно требуют jQuery, нашего JavaScript и Popper? Щелкните ссылку “Показать компоненты” ниже. Если Вы не уверены в структуре страницы, продолжайте читать, чтобы увидеть пример шаблона страницы.

Показать компоненты, требующие JavaScript

• Alerts: Уведомления для отклонений
• Buttons: Кнопки для переключения состояний и функции флажка/радио
• Carousel: Карусель для любого поведения слайдов, элементов управления и индикаторов
• Collapse: Сворачиваемый контент для переключения видимости контента
• Dropdowns: Выпадающие списки для отображения и позиционирования (также требуется Popper.js)
• Modals: Модальные окна для отображения, позиционирования и прокрутки
• Navbar: Панель навигации для расширения нашего плагина Сворачивания контента для реализации адаптивного поведения
• Tooltips и popovers: Всплывающие подсказки и Всплывающие окна для отображения и позиционирования (также требуется Popper.js)
• Scrollspy: Слежение прокрутки для поведения прокрутки и обновлений навигации

CSP и встроенные SVG

Некоторые компоненты Bootstrap включают встроенные SVG в наш CSS для единообразного и простого стиля компонентов в разных браузерах и на разных устройствах. Для организаций с более строгими конфигурациями CSP, мы задокументировали все экземпляры наших встроенных SVG (все из которых применяются через ), поэтому Вы можете более тщательно изучить свои варианты.

• Close button (используется в предупреждениях и модальных окнах)

Основываясь на обсуждениях сообщества, некоторые варианты решения этой проблемы в Вашей собственной кодовой базе включают замену URL-адресов локально размещенными ресурсами, удаление изображений и использование встроенных изображений ( невозможно во всех компонентах) и изменение вашего CSP. Наша рекомендация — внимательно изучить свои собственные политики безопасности и при необходимости выбрать лучший путь для дальнейшего развития.

Основной принцип верстки макета

Основной принцип верстки макета веб-страницы на сетке Bootstrap 4 заключается во вкладывании одних адаптивных блоков в другие.

При этом ширина адаптивных блоков это всегда относительная величина, которая задаётся в колонках Bootstrap и зависит только от ширины родителя, т.е. ряда.

Размещать контент веб-страницы следует только в адаптивных блоках.

Например, в имеющийся макет, а именно в адаптивный блок вложим ещё 2 блока:

<div class="container">
    <div class="row">
        <div class=col-8>...</div>
        <div class=col-4>...</div>
    </div>
</div>

Для этого предварительно необходимо в блок положить ряд (контейнер для адаптивных блоков):

<div class="container">
    <div class="row">
        <div class=col-8>
            <div class="row">...</div>
        <div class=col-4>...</div>
    </div>
</div>

После этого добавим 2 адаптивных блока в ряд:

<div class="container">
    <div class="row">
        <div class=col-8>
            <div class="row">
                <div class=col-6>...</div>
                <div class=col-6>...</div>
            </div>
        <div class=col-4>...</div>
    </div>
</div>

Отзывчивые поплавки

Плавающий элемент влево или вправо в зависимости от ширины экрана, с адаптивными классами float ( — where * is (>=576px), (>=768px), (>=992px) or (>=1200px)):

Пример

Float right on small screens or wider
Float right on medium screens or wider
Float right on large screens or wider
Float right on extra large screens or wider
Float none

Пример

<div class=»float-sm-right»>Float right on small screens or wider</div><br>
<div class=»float-md-right»>Float right on medium screens or wider</div><br>
<div class=»float-lg-right»>Float right on large screens or wider</div><br>
<div class=»float-xl-right»>Float right on extra large screens or
wider</div><br><div class=»float-none»>Float none</div>

Глобально важно

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

HTML5 doctype

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

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

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

Вы можете увидеть пример этого в действии в .

Box-sizing

Для более простого изменения размера в CSS мы переключаем глобальное значение с на . Это гарантирует, что не влияет на окончательную вычисленную ширину элемента, но может вызвать проблемы с некоторым сторонним программным обеспечением, таким как Google Maps или Google Custom Search Engine.

В редких случаях Вам нужно отменить его, используйте что-то вроде следующего:

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

Узнайте больше о блочной модели и размерах на сайте CSS Tricks.

Reboot

Для улучшения кроссбраузерности рендеринга мы используем Перезагрузку, чтобы исправить несоответствия между браузерами и устройствами, обеспечивая при этом несколько более самоуверенный сброс общих элементов HTML.

Выравнивание адаптивных блоков

Выравнивания адаптивных блоков в горизонтальном и вертикальном направлении осуществляется в Bootstrap 4 с помощью служебных flex-классов.

Вертикальное выравнивание адаптивных блоков

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

• (относительно начала линии);
• (по центру);
• (относительно конца).

Например, выровняем все адаптивные блоки по центру линии ряда:

<div class="row align-items-center">
    <div class="col"> 1/2 </div>
    <div class="col"> 2/2 </div>
</div>

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

Выравнивание какого-то определённого адаптивного блока по вертикали в пределах линии может осуществляться одним из следующих классов:

• (относительно начала линии);
• (по центру);
• (относительно конца).

Данные классы необходимо добавлять к адаптивным блокам, а не к ряду.

Например, выравниваем адаптивный блок 2 по нижнему краю линии:

<div class="row align-items-center">
    <div class="col"> (1) </div>
    <div class="col align-self-end"> (2) </div>
</div>

Горизонтальное выравнивание адаптивных блоков

Для выравнивания адаптивных блоков в горизонтальном направлении предназначены следующие классы:

• (относительно начала линии ряда — по умолчанию);
• (по центру);
• (относительно конца линии);
• (равномерно, с учётом пространства перед первым и последним адаптивным блоком);
• (равномерно, с одинаковым пространством между адаптивными блоками).

Например, распределим адаптивные блоки в горизонтальном направлении равномерно:

<div class="row justify-content-around">
    <div class="col-4"> (1) </div>
    <div class="col-4"> (2) </div>
</div>

Интервал

Bootstrap 4 имеет широкий диапазон полезных классов для гибких полей и отступов.
Они работают для всех точек останова: (<=576px), (>=576px), (>=768px), (>=992px) or (>=1200px)):

Классы используются в формате: for and for , , , and .

Где свойство является одним из:

• — sets
• — sets

Где стороны один из:

• — sets or
• — sets or
• — sets or
• — sets or
• — sets both and or and
• — sets both and or and
• blank — sets a or on all 4 sides of the element

Где Размер является одним из:

• — sets or to
• — sets or to (4px if font-size is 16px)
• — sets or to (8px if font-size is 16px)
• — sets or to (16px if font-size is 16px)
• — sets or to (24px if font-size is 16px)
• — sets or to (48px if font-size is 16px)
• — sets to auto

Пример

У меня только верхняя обивка (1.5rem = 24px)
У меня есть обивка со всех сторон (3rem = 48px)
У меня есть маржа со всех сторон (3rem = 48px) and a bottom padding (3rem = 48px)

Пример

<div class=»pt-4 bg-warning»>I only have a top padding (1.5rem =
24px)</div><div class=»p-5 bg-success»>I have a padding on all sides
(3rem = 48px)</div><div class=»m-5 pb-5 bg-info»>I have a margin on
all sides (3rem = 48px) and a bottom padding (3rem = 48px)</div>

Дополнительные примеры интервалов

	margin on all sides
	margin top
	margin bottom
	margin left
	margin right
	margin left and right
	margin top and bottom
	padding on all sides
	padding top
	padding bottom
	padding left
	padding right
	padding top and bottom
	padding left and right

Типография/текстовые классы

Как описано в разделе типография, вот список всех типографий/текстовых классов:

Класс	Описание
	Отображаемые заголовки используются для выделять больше, чем обычные заголовки (больший размер шрифта и более легкий шрифт-вес), и есть четыре класса на выбор: , , ,
	Полужирный текст
	Обычный текст
	Легковесный текст
	Курсивный текст
	Выделяет абзац
	Обозначает меньший текст (значение 85% от размера родительского элемента)
	Указывает текст, выровненный по левому краю
	Обозначает текст, выровненный по центру
	Указывает текст с выравниванием по правому краю
	Обозначает обоснованный текст
	Текст с интервалом
	Обозначает отсутствие текста переноса
	Обозначает текст в нижнем регистре
	Указывает верхний текст
	Обозначает текст с прописными буквами
	Отображение текста внутри элемента в немного меньшем размере шрифта
	Удаляет стандартный стиль списка и левое поле для элементов списка (работает на обоих и ). Этот класс применяется только к элементам списка непосредственных дочерних элементов (чтобы удалить стиль списка по умолчанию из любых вложенных списков, примените этот класс ко всем вложенным спискам)
	Размещение всех элементов списка в одной строке (используется вместе с каждым элементом <li>)
	Делает элемент прокручиваемым

What is Bootstrap?

• Bootstrap is a free front-end framework for faster and easier web development
• Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins
• Bootstrap also gives you the ability to easily create responsive designs

What is Responsive Web Design?
Responsive web design is about creating web sites which automatically adjust
themselves to look good on all devices, from small phones to large desktops.

Bootstrap 4 Example

<div class=»jumbotron text-center»>  <h1>My First Bootstrap
Page</h1>  <p>Resize this responsive page to see the effect!</p> </div><div class=»container»>  <div class=»row»>
    <div class=»col-sm-4″>      <h3>Column 1</h3>      <p>Lorem ipsum
dolor..</p>    </div>    <div class=»col-sm-4″>      <h3>Column 2</h3>      <p>Lorem ipsum
dolor..</p>    </div>    <div class=»col-sm-4″>      <h3>Column 3</h3>       <p>Lorem ipsum
dolor..</p>    </div>  </div></div>

Create First Web Page With Bootstrap 4

1. Add the HTML5 doctype

Bootstrap 4 uses HTML elements and CSS properties that require
the HTML5 doctype.

Always include the HTML5 doctype at the beginning of
the page, along with the lang attribute and the correct character set:

<!DOCTYPE html><html lang=»en»>  <head>    <meta charset=»utf-8″>   </head></html>

2. Bootstrap 4 is mobile-first

Bootstrap 4 is designed to be responsive to mobile devices. Mobile-first styles are
part of the core framework.

To ensure proper rendering and touch zooming, add the following tag inside the
element:

<meta name=»viewport» content=»width=device-width, initial-scale=1″>

The part sets the width of the page to follow the screen-width
of the device (which will vary depending on the device).

The part sets the initial zoom level when the page is first loaded
by the browser.

3. Containers

Bootstrap 4 also requires a containing element to wrap site contents.

There are two container classes to choose from:

1. The class provides a responsive fixed width container
2. The class provides a full width container, spanning the entire width of the viewport

.container

.container-fluid

Смещение адаптивных блоков

В Bootstrap 4 смещение адаптивных блоков можно выполнить с помощью:

• классов offset (на определённое количество колонок);
• служебных (утилитных) margin классов.

Классы offset

Классы offset предназначены для смещения адаптивных блоков вправо на определённое количество колонок.

Данные классы имеют следующий синтаксис:

оffset-{1} или offset-{breakpoint}-{1}

– контрольная точка, начиная с которой к данному блоку будет применено смещение (если она не указана, то смещение будет применено, начиная с самых крохотных устройств).

– величина смещения, указываемая с помощью количества колонок Bootstrap.

В качестве примера установим смещение адаптивным блокам так, как это показано на рисунке.

<div class="row">
  <div class="col-4"> (1) </div>
  <div class="col-4 offset-4"> (2) </div>
</div>
<div class="row">
  <div class="col-3 offset-3"> (1) </div>
  <div class="col-3 offset-3"> (2) </div>
</div>
<div class="row">
  <div class="col-6 offset-3"> (1) </div>
</div>

Смещение с помощью margin классов

В четвертой версии Bootstrap устанавливать смещение адаптивным блокам также можно с помощью margin отступов (margin-left: auto и (или) margin-right: auto). Эта вариант смещения появился благодаря тому, что сетка в новой версии Bootstrap (4) основывается на CSS Flexbox.

Данный вариант смещения (с помощью margin классов) используют, когда блоки необходимо сместить относительно друг от друга не которую переменную величину.

В Bootstrap 4 для более удобного и адаптивного задания блокам margin отступов ( и (или) ) можно использовать классы , , и .

<div class="row">
  <div class="col-4"> (1) </div>
  <div class="col-4 ml-auto"> (2) </div>
</div>
<div class="row">
  <div class="col-3"> (1) </div>
  <div class="col-3 ml-auto mr-auto"> (2) </div>
  <div class="col-3"> (3)</div>
</div>
<div class="row">
  <div class="col-4 ml-auto mr-auto"> (1) </div>
  <div class="col-4 ml-auto mr-auto"> (2) </div>
</div>