ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

Bootstrap 4 Tutorial

BS4 HOME BS4 Get Started BS4 Grid Basic BS4 Typography BS4 Colors BS4 Tables BS4 Images BS4 Jumbotron BS4 Alerts BS4 Buttons BS4 Button Groups BS4 Badges BS4 Progress Bars BS4 Pagination BS4 List Groups BS4 Cards BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbar BS4 Forms BS4 Inputs BS4 Carousel BS4 Modal BS4 Tooltip BS4 Popover BS4 Scrollspy BS4 Utilities BS4 Flex BS4 Media Objects BS4 Filters

Bootstrap 4 Grid

BS4 Grid System BS4 Stacked/Horizontal BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge BS4 Grid Examples

Bootstrap 4 Theme

BS4 Basic Template

Bootstrap 4 Ref

All Classes JS Alert JS Button JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Scrollspy JS Tab JS Tooltip


Bootstrap 4 Text/Typography


Параметры начальной загрузки 4 по умолчанию

Bootstrap 4 использует значение по умолчанию font-size of 16px, and its line-height is 1.5.

По умолчанию font-family используется шрифт "Новая", шрифт, Arial, без засечек.

Кроме того, все <p> элементы имеют margin-top: 0 и margin-bottom: 1rem (16px по умолчанию).


<h1> - <h6>

Bootstrap 4 стили HTML заголовки (<h1> - <h6>)  с более смелым шрифтом и увеличенным размером шрифта:

Пример

h1 Bootstrap heading (2.5rem = 40px)

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)

Отображение заголовков

Отображаемые заголовки используются для выделять больше, чем обычные заголовки (больший размер шрифта и более легкий шрифт-вес), и есть четыре класса на выбор: .display-1, .display-2, .display-3, .display-4

Пример

Display 1

Display 2

Display 3

Display 4


<small>

В Bootstrap 4 элемент HTML <small> используется для создания более светлого, вторичного текста в любом заголовке:

Пример

h1 heading secondary text

h2 heading secondary text

h3 heading secondary text

h4 heading secondary text

h5 heading secondary text
h6 heading secondary text


<mark>

Bootstrap 4 будет стиль HTML <mark> элемент с желтым цветом фона и некоторые отступы:

Пример

Используйте элемент Mark для highlight Текста.


<abbr>

Bootstrap 4 будет стиль HTML <abbr> элемент с пунктирным нижней границы:

Пример

The WHO was founded in 1948.


<blockquote>

Добавьте .blockquote класс к a <blockquote> при цитировании блоков содержимого из другого источника:

Пример

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.


From WWF's website

<dl>

Bootstrap 4 будет стиль HTML <dl> элемент следующим образом:

Пример

Coffee
- black hot drink
Milk
- white cold drink

<code>

Bootstrap 4 будет стиль HTML <code> элемент следующим образом:

Пример

Следующие элементы HTML: span , section и div определяет раздел в документе.


<kbd>

Bootstrap 4 будет стиль HTML <kbd> элемент следующим образом:

Пример

Use ctrl + p to open the Print dialog box.


<pre>

Bootstrap 4 будет стиль HTML <pre> элемент следующим образом:

Пример

Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.

Другие классы типографии

Следующие классы Bootstrap 4 можно добавить в HTML-элементы стиля далее:

Класс Описание
.font-weight-bold Полужирный текст
.font-italic Курсивный текст
.font-weight-light Легковесный текст
.font-weight-normal Обычный текст
.lead Выделяет абзац
.small Обозначает меньший текст (значение 85% от размера родительского элемента)
.text-left Указывает текст, выровненный по левому краю
.text-*-right Обозначает текст, выровненный по левому краю на малых, средних, больших или XLarge экранах
.text-center Обозначает текст, выровненный по центру
.text-*-center Обозначает выравнивание текста по центру на малых, средних, больших или XLarge экранах
.text-right Указывает текст с выравниванием по правому краю
.text-*-right Обозначает текст с выравниванием по правому краю на малых, средних, больших или XLarge экранах
.text-justify Обозначает обоснованный текст
.text-monospace Текст с интервалом
.text-nowrap Обозначает отсутствие текста переноса
.text-lowercase Обозначает текст в нижнем регистре
.text-uppercase Указывает верхний текст
.text-capitalize Обозначает текст с прописными буквами
.initialism Отображение текста внутри <abbr> элемента в немного меньшем размере шрифта
.list-unstyled Удаляет стандартный стиль списка и левое поле для элементов списка (работает на обоих <ul> и <ol> ). Этот класс применяется только к элементам списка непосредственных дочерних элементов (чтобы удалить стиль списка по умолчанию из любых вложенных списков, примените этот класс ко всем вложенным спискам)
.list-inline Размещение всех элементов списка в одной строке (используется вместе с .list-inline-item на каждом <li> Элементами)
.pre-scrollable Делает <pre> элемент прокручиваемым

Полный Bootstrap 4 CSS Ссылка

Для полного справочника всех классов CSS, доступных в Bootstrap 4, посетите наш Bootstrap 4 все классы ссылка.