Bootstrap Текст/шрифт
Настройки по умолчанию Bootstrap
Глобальный размер шрифта по умолчанию Bootstrap — 14px, с высотой строки 1,428.
Это применяется к элементу <body> и ко всем абзацам (<p>).
Кроме того, все <p> элементы имеют нижнее поле, равное половине вычисленной высоты линии (10px по умолчанию).
По умолчанию Bootstrap vs. браузер
В этой главе мы рассмотрим некоторые элементы HTML, которые будут стилизованы немного по-другому по сравнению с браузером по умолчанию.
<h1> - <h6>
По умолчанию Bootstrap будет стиль заголовки HTML (<h1> для
<h6>) следующим образом:
Пример
h1 Bootstrap heading (36px)
h2 Bootstrap heading (30px)
h3 Bootstrap heading (24px)
h4 Bootstrap heading (18px)
h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)
<small>
В Bootstrap элемент 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 будет стиль HTML <mark> элемент следующим образом:
Пример
Use the mark element to highlight text.
<abbr>
Bootstrap будет стиль HTML <abbr> элемент следующим образом:
Пример
The WHO was founded in 1948.
<blockquote>
Bootstrap будет стиль HTML <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.
Чтобы показать цитату справа, используйте .blockquote-reverse класс:
Пример
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 будет стиль HTML <dl> элемент следующим образом:
Пример
- Coffee
- - black hot drink
- Milk
- - white cold drink
<code>
Bootstrap будет стиль HTML <code> элемент следующим образом:
Пример
Следующие элементы HTML: span , section и div определяет раздел в документе.
<kbd>
Bootstrap будет стиль HTML <kbd> элемент следующим образом:
Пример
Use ctrl + p to open the Print dialog box.
<pre>
Bootstrap будет стиль HTML <pre> элемент следующим образом:
Пример
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
Контекстуальные цвета и фоны
Bootstrap также имеет некоторые контекстные классы, которые можно использовать для предоставления "смысла через цвета".
Для цветов текста используются следующие классы: .text-muted, .text-primary, .text-success, .text-info,
.text-warning, и .text-danger:
Пример
Этот текст отключен.
Этот текст важен.
Этот текст указывает на успех.
Этот текст представляет некоторую информацию.
Этот текст представляет предупреждение.
Этот текст представляет опасность.
Для цветов фона используются следующие классы: .bg-primary,
.bg-success, .bg-info, .bg-warning и .bg-danger:
Пример
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Другие классы типографии
Следующие классы начальной загрузки можно добавить в HTML-элементы стиля.
| Class | Description | Example |
|---|---|---|
.lead |
Makes a paragraph stand out | |
.small |
Обозначает меньший текст (значение 85% от размера родительского элемента) | |
.text-left |
Указывает текст, выровненный по левому краю | |
.text-center |
Обозначает текст, выровненный по центру | |
.text-right |
Указывает текст с выравниванием по правому краю | |
.text-justify |
Обозначает обоснованный текст | |
.text-nowrap |
Обозначает отсутствие текста переноса | |
.text-lowercase |
Обозначает текст в нижнем регистре | |
.text-uppercase |
Указывает верхний текст | |
.text-capitalize |
Обозначает текст с прописными буквами | |
.initialism |
Отображение текста внутри <abbr> элемента в немного меньшем размере шрифта |
|
.list-unstyled |
Удаляет стандартный стиль списка и левое поле для элементов списка (работает на обоих <ul> и <ol>). Этот класс применяется только к элементам списка непосредственных дочерних элементов (чтобы удалить стиль списка по умолчанию из любых вложенных списков, примените этот класс ко всем вложенным спискам) |
|
.list-inline |
Размещение всех элементов списка в одной строке | |
.dl-horizontal |
Строки вверх термины (<dt>) и описания (<dd>) в
<dl> элементы бок о бок. Начинается как по умолчанию <dl>, но когда окно браузера расширяется, он будет выстроились бок о бок |
|
.pre-scrollable |
Делает <pre> элемент прокручиваемым |
Полная ссылка на типографию Bootstrap
Для полной справки всех элементов типографии/классов, перейдите к нашей полной Справочник по типографии Bootstrap.
Также смотрите наши вспомогательные классы Bootstrap для получения дополнительной информации о контекстных классах.
