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.
<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 все классы ссылка.