Введение
Содержание:
- Позиции
- Интервал
- Сообщество
- Отзывчивые поплавки
- Two Basic Bootstrap 4 Pages
- Bootstrap 4 CDN
- Цвета
- Bootstrap 3 vs. Bootstrap 4
- —
- h2 Bootstrap heading (2rem = 32px)
- Отображение заголовков
- <mark>
- <code>
- <pre>
- Другие классы типографии
- Расположение адаптивных блоков в ряду
- Глобально важно
- Адаптивные встраивания
- Быстрый старт
- What is Bootstrap?
- Create First Web Page With Bootstrap 4
- Изменение визуального порядка следования адаптивных блоков
- Типография/текстовые классы
- CSP и встроенные SVG
- Пропуск навигации
- Смещение адаптивных блоков
- Назначение Bootstrap сетки. Контрольные точки
Позиции
Используйте класс, чтобы сделать любой элемент фиксированным/пребывание в верхней части страницы:
<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 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 |
Сообщество
Будьте в курсе развития Bootstrap и обращайтесь к сообществу с помощью этих полезных ресурсов.
- Вступите в группу @getbootstrap_ru в Телеграм.
- Прочтите и подпишитесь на Официальный блог Bootstrap.
- Присоединяйтесь к официальной комнате Slack.
- Общайтесь с другими Бутстрапперами в IRC. На сервере , в канале .
- Справку по реализации можно найти на сайте Stack Overflow (с тегом ).
- Разработчикам следует использовать ключевое слово в пакетах, которые изменяют или расширяют функциональность Bootstrap при распространении через npm или аналогичные механизмы доставки для максимальной доступности.
Вы также можете следить за @getbootstrap в Twitter, чтобы следить за последними сплетнями и потрясающими музыкальными клипами.
Отзывчивые поплавки
Плавающий элемент влево или вправо в зависимости от ширины экрана, с адаптивными классами 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>
Two Basic Bootstrap 4 Pages
The following example shows the code for a basic Bootstrap 4 page (with a responsive fixed width container):
Container Example
<!DOCTYPE html><html lang=»en»><head> <title>Bootstrap
4 Example</title> <meta charset=»utf-8″> <meta name=»viewport» content=»width=device-width, initial-scale=1″> <link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css»>
<script src=»https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js»></script>
<script src=»https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js»></script>
<script src=»https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js»></script>
</head><body><div class=»container»> <h1>My First Bootstrap Page</h1> <p>This is some text.</p> </div></body></html>
The following example shows the code for a basic Bootstrap 4 page (with a full width container):
Container Fluid Example
<!DOCTYPE html><html lang=»en»><head> <title>Bootstrap
4 Example</title> <meta charset=»utf-8″> <meta name=»viewport» content=»width=device-width, initial-scale=1″> <link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css»>
<script src=»https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js»></script>
<script src=»https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js»></script>
<script src=»https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js»></script></head><body><div class=»container-fluid»> <h1>My First Bootstrap Page</h1> <p>This is some text.</p> </div></body></html>
❮ Previous
Next ❯
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
Цвета
Как описано в разделе » цвета «, ниже приведен список всех классов текста и фона:
Классы для текстовых цветов: ,
, , ,
, , , ,
, (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% непрозрачность для черного или белого текста с или классов:
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 стили HTML заголовки ( —
) с более смелым шрифтом и увеличенным размером шрифта:
Пример
h2 Bootstrap heading (2rem = 32px)
h3 Bootstrap heading (1.75rem = 28px)
h4 Bootstrap heading (1.5rem = 24px)
h5 Bootstrap heading (1.25rem = 20px)
h6 Bootstrap heading (1rem = 16px)
Отображение заголовков
Отображаемые заголовки используются для выделять больше, чем обычные заголовки (больший размер шрифта и более легкий шрифт-вес), и есть четыре класса на выбор: , , ,
Пример
В Bootstrap 4 элемент HTML используется для создания более светлого, вторичного текста в любом заголовке:
Пример
h3 heading secondary text
h4 heading secondary text
h5 heading secondary text
h6 heading secondary text
<mark>
Bootstrap 4 будет стиль HTML элемент с желтым цветом фона и некоторые отступы:
Пример
Используйте элемент Mark для highlight Текста.
Bootstrap 4 будет стиль HTML элемент с пунктирным нижней границы:
Пример
The WHO was founded in 1948.
Добавьте класс к a при цитировании блоков содержимого из другого источника:
Пример
Bootstrap 4 будет стиль HTML элемент следующим образом:
Пример
- Coffee
- — black hot drink
- Milk
- — white cold drink
<code>
Bootstrap 4 будет стиль HTML элемент следующим образом:
Пример
Следующие элементы HTML: , и определяет раздел в документе.
Bootstrap 4 будет стиль HTML элемент следующим образом:
Пример
Use ctrl + p to open the Print dialog box.
<pre>
Bootstrap 4 будет стиль HTML элемент следующим образом:
Пример
Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks.
Другие классы типографии
Следующие классы Bootstrap 4 можно добавить в HTML-элементы стиля далее:
| Класс | Описание | |
|---|---|---|
| Полужирный текст | ||
| Курсивный текст | ||
| Легковесный текст | ||
| Обычный текст | ||
| Выделяет абзац | ||
| Обозначает меньший текст (значение 85% от размера родительского элемента) | ||
| Указывает текст, выровненный по левому краю | ||
| Обозначает текст, выровненный по левому краю на малых, средних, больших или XLarge экранах | ||
| Обозначает текст, выровненный по центру | ||
| Обозначает выравнивание текста по центру на малых, средних, больших или XLarge экранах | ||
| Указывает текст с выравниванием по правому краю | ||
| Обозначает текст с выравниванием по правому краю на малых, средних, больших или XLarge экранах | ||
| Обозначает обоснованный текст | ||
| Текст с интервалом | ||
| Обозначает отсутствие текста переноса | ||
| Обозначает текст в нижнем регистре | ||
| Указывает верхний текст | ||
| Обозначает текст с прописными буквами | ||
| Отображение текста внутри элемента в немного меньшем размере шрифта | ||
| Удаляет стандартный стиль списка и левое поле для элементов списка (работает на обоих и ). Этот класс применяется только к элементам списка непосредственных дочерних элементов (чтобы удалить стиль списка по умолчанию из любых вложенных списков, примените этот класс ко всем вложенным спискам) | ||
| Размещение всех элементов списка в одной строке (используется вместе с на каждом <li> Элементами) |
||
| Делает элемент прокручиваемым |
Для полного справочника всех классов CSS, доступных в Bootstrap 4, посетите наш
Bootstrap 4 все классы ссылка.
Расположение адаптивных блоков в ряду
Адаптивные блоки в ряду по умолчанию располагаются горизонтальными линиями. В пределах горизонтальной линии адаптивные блоки выстраиваются последовательно слева направо. В одну горизонтальную линию могут поместиться адаптивные блоки с суммарным числом колонок не более 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 использует несколько важных глобальных стилей и настроек, о которых Вам необходимо знать при его использовании, и все они почти исключительно нацелены на нормализацию кроссбраузерных стилей. Давайте погрузимся.
HTML5 doctype
Bootstrap требует использования документа типа HTML5. Без него Вы увидите несколько забавных неполных стилей, но его включение не должно вызывать каких-либо серьезных сбоев.
Адаптивный метатег
Bootstrap разработан как сначала мобильный, стратегия, в которой мы сначала оптимизируем код для мобильных устройств, а затем масштабируем компоненты по мере необходимости с помощью медиа-запросов CSS. Чтобы обеспечить правильный рендеринг и сенсорное масштабирование для всех устройств, добавьте метатег адаптивного окна просмотра к Вашему .
Вы можете увидеть пример этого в действии в .
Box-sizing
Для более простого изменения размера в CSS мы переключаем глобальное значение с на . Это гарантирует, что не влияет на окончательную вычисленную ширину элемента, но может вызвать проблемы с некоторым сторонним программным обеспечением, таким как Google Maps или Google Custom Search Engine.
В редких случаях Вам нужно отменить его, используйте что-то вроде следующего:
WiВ приведенном выше фрагменте все вложенные элементы, включая сгенерированный контент с помощью и , будут наследовать указанный для этого .
Узнайте больше о блочной модели и размерах на сайте CSS Tricks.
Reboot
Для улучшения кроссбраузерности рендеринга мы используем Перезагрузку, чтобы исправить несоответствия между браузерами и устройствами, обеспечивая при этом несколько более самоуверенный сброс общих элементов HTML.
Адаптивные встраивания
Создание адаптивного видео или слайд-шоу встраивается в зависимости от ширины родительского элемента.
Добавьте к любым элементам встраивания (например, < IFRAME > или < Video >) в родительский элемент и пропорции по вашему выбору:
Пример
<!— 21:9 aspect ratio —><div class=»embed-responsive
embed-responsive-21by9″> <iframe class=»embed-responsive-item»
src=»…»></iframe></div><!— 16:9 aspect ratio —><div class=»embed-responsive
embed-responsive-16by9″> <iframe class=»embed-responsive-item»
src=»…»></iframe></div><!— 4:3 aspect ratio —><div class=»embed-responsive
embed-responsive-4by3″> <iframe class=»embed-responsive-item»
src=»…»></iframe></div><!— 1:1 aspect ratio —><div class=»embed-responsive
embed-responsive-1by1″> <iframe class=»embed-responsive-item»
src=»…»></iframe></div>
Быстрый старт
Хотите быстро добавить 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: Слежение прокрутки для поведения прокрутки и обновлений навигации
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:
- The class provides a responsive fixed width container
- The class provides a full width container, spanning the entire width of the viewport
.container
.container-fluid
Изменение визуального порядка следования адаптивных блоков
По умолчанию адаптивные блоки визуально отображаются в том порядке, в котором они расположены в 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>
Типография/текстовые классы
Как описано в разделе типография, вот список всех типографий/текстовых классов:
| Класс | Описание | |
|---|---|---|
| Отображаемые заголовки используются для выделять больше, чем обычные заголовки (больший размер шрифта и более легкий шрифт-вес), и есть четыре класса на выбор: , , , | ||
| Полужирный текст | ||
| Обычный текст | ||
| Легковесный текст | ||
| Курсивный текст | ||
| Выделяет абзац | ||
| Обозначает меньший текст (значение 85% от размера родительского элемента) | ||
| Указывает текст, выровненный по левому краю | ||
| Обозначает текст, выровненный по центру | ||
| Указывает текст с выравниванием по правому краю | ||
| Обозначает обоснованный текст | ||
| Текст с интервалом | ||
| Обозначает отсутствие текста переноса | ||
| Обозначает текст в нижнем регистре | ||
| Указывает верхний текст | ||
| Обозначает текст с прописными буквами | ||
| Отображение текста внутри элемента в немного меньшем размере шрифта | ||
| Удаляет стандартный стиль списка и левое поле для элементов списка (работает на обоих и ). Этот класс применяется только к элементам списка непосредственных дочерних элементов (чтобы удалить стиль списка по умолчанию из любых вложенных списков, примените этот класс ко всем вложенным спискам) | ||
| Размещение всех элементов списка в одной строке (используется вместе с каждым элементом <li>) | ||
| Делает элемент прокручиваемым |
CSP и встроенные SVG
Некоторые компоненты Bootstrap включают встроенные SVG в наш CSS для единообразного и простого стиля компонентов в разных браузерах и на разных устройствах. Для организаций с более строгими конфигурациями CSP, мы задокументировали все экземпляры наших встроенных SVG (все из которых применяются через ), поэтому Вы можете более тщательно изучить свои варианты.
- Close button (используется в предупреждениях и модальных окнах)
Основываясь на обсуждениях сообщества, некоторые варианты решения этой проблемы в Вашей собственной кодовой базе включают замену URL-адресов локально размещенными ресурсами, удаление изображений и использование встроенных изображений ( невозможно во всех компонентах) и изменение вашего CSP. Наша рекомендация — внимательно изучить свои собственные политики безопасности и при необходимости выбрать лучший путь для дальнейшего развития.
Пропуск навигации
Благодаря давнему недостатки/ошибки в Chrome (см. вопрос 262171 в хром багтрекер) и Internet Explorer (см. эту статью на ссылки и фокус того), Вы должны убедиться, что цель вашей ссылке пропустить хотя бы программно фокусируемый, добавив .
Кроме того, может потребоваться явно подавляет видимый фокусировки на мишени (в частности, хром в настоящее время также устанавливает фокус на элементах с при щелчке мышкой) с .
Обратите внимание, что эта ошибка также влияет на другие ссылки вашего сайта могут использовать, делая их бесполезными для пользователей клавиатуры. Вы можете рассмотреть вопрос о включении аналогичного затычка исправить все другие именованные анкеры / идентификаторы фрагментов, которые выступают в качестве цели ссылки
Смещение адаптивных блоков
В 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>
Назначение Bootstrap сетки. Контрольные точки
Сетка Bootstrap 4 – это основная часть фреймворка. Она предназначена для создания адаптивных шаблонов.
Сетка Bootstrap 4 основывается на CSS Flexbox и медиа-запросах (CSS media queries). Чтобы понять, как она работает более точно, рекомендуется сначала изучить эти CSS технологии.
Следующий шаг – это разобраться с тем, что такое адаптивный макет сайта.
Если кратко, адаптивный макет – это такой макет, вид которого может изменяться в зависимости от того, какую ширину viewport имеет браузер. Это означает, что при одних значениях ширины viewport адаптивный макет может выглядеть одним образом, а при иных – совершенно по-другому.
В Bootstrap изменения вида макета реализовано через медиа-запросы. Каждый медиа-запрос в Bootstrap строится на основании минимальной ширины viewport браузера. В Bootstrap ключевое значение ширины viewport в медиа-запросе называется breakpoint (контрольной точкой, или более просто классом устройства).
На схеме приведены основные контрольные точки, которые Bootstrap 4 имеет по умолчанию:
Это означает что до 576px макет сайта может отображаться одним образом, от 576px до 768px – другим образом и т.д. Таким образом, можно создать макет, который на каждом из этих участков может выглядеть по-разному.
Контрольные точки имеют обозначение. Первый breakpoint не имеет обозначения (), второй называется – , третий – , четвёртый – и пятый – . Эти обозначения необходимо запомнить, т.к. они используются в классах, которые мы будем добавлять к элементам. Эти обозначения в имени класса будут указывать на то с какой ширины viewport стили, определённые в нём, будут применяться к элементу.
| Ширина viewport браузера | Контрольная точка (название устройства) |
|---|---|
| >=0 | без обозначения (xs) |
| >=576px | sm |
| >=768px | md |
| >=992px | lg |
| >=1200px | xl |
При этом, контрольные точки задают только минимальную ширину. Т.е., например, если вы определили макет, используя в нём классы без обозначения контрольной точки () и с использованием , то он на будет иметь такую же структуру как на , а на и — как на .
Если вы знакомы с сеткой Bootstrap 3, то в ней количество контрольных точек равнялось четырём.
