Типографика в Bootstrap 4
Bootstrap включает в себя стили, которые определяют, как показываются текстовые элементы.
Основной текст
По умолчанию в Bootstrap 4 font-size равен 16px (применяется к элементу <html>), к элементу <body> также применяется font-size равное 1rem.
Bootstrap использует «родной набор шрифтов» (системные шрифты пользователя) с запасным вариантом Helvetica Neue, Arial и sans-serif. У всех заголовков и элементов <p> удалено margin-top. Для заголовков margin-bottom задано как .5rem, а для элементов <p> оно задано как 1rem.
Вы можете полностью поменять любое из этих значений в соответствии с вашим собственным проектом.
Заголовки
Вот пример элементов заголовка, как они показываются в Bootstrap 4.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<h1>h1 (Полужирный 36px)</h1>
<h2>h2 (Полужирный 30px)</h2>
<h3>h3 (Полужирный 24px)</h3>
<h4>h4 (Полужирный 18px)</h4>
<h5>h5 (Полужирный 14px)</h5>
<h6>h6 (Полужирный 12px)</h6>
Классы заголовков
Bootstrap также включает в себя классы заголовков от .h1 до .h6 на случай, если вам нужно отобразить некоторый строчный текст в стиле определённого заголовка.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<p class="h1">.h1 (Полужирный 36px)</p>
<p class="h2">.h2 (Полужирный 30px)</p>
<p class="h3">.h3 (Полужирный 24px)</p>
<p class="h4">.h4 (Полужирный 18px)</p>
<p class="h5">.h5 (Полужирный 14px)</p>
<p class="h6">.h6 (Полужирный 12px)</p>
Подзаголовки
Вы можете создать подзаголовок или дополнительный текст, поместив текст в элемент <small> внутри заголовка.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<h1>Заголовок 1 <small>Подзаголовок</small></h1>
<h2>Заголовок 2 <small>Подзаголовок</small></h2>
<h3>Заголовок 3 <small>Подзаголовок</small></h3>
<h4>Заголовок 4 <small>Подзаголовок</small></h4>
<h5>Заголовок 5 <small>Подзаголовок</small></h5>
<h6>Заголовок 6 <small>Подзаголовок</small></h6>
Заголовки дисплея
Заголовки дисплея предназначены для того, чтобы выделяться больше, чем обычные заголовки. Существует четыре размера заголовка дисплея (.display-1, .display-2, .display-3 и .display-4). Так, например, элемент <h1> может быть представлен в четырёх разных размерах с помощью классов заголовков дисплея.
Чтобы создать отображаемый заголовок, добавьте один из перечисленных выше классов к элементу заголовка.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<h1 class="display-1">Дисплей 1</h1>
<h1 class="display-2">Дисплей 2</h1>
<h1 class="display-3">Дисплей 3</h1>
<h1 class="display-4">Дисплей 4</h1>
Ведущий текст
Вы можете выделить абзац с помощью класса .lead.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<p class="lead">
Это ведущий текст статьи — он выделяется в начале статьи.
</p>
<p>
Это обычный текст обычного размера…
</p>
Помеченный текст
Элемент <mark> в HTML представляет текст, помеченный или выделенный для справочных целей, из-за его уместности в другом контексте. Вот пример отображения этого элемента.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<p>Пример <mark>помеченного текста</mark>.</p>
Аббревиатуры
Элемент <abbr> в HTML представляет собой аббревиатуру или акроним. Атрибут title можно использовать для расширения аббревиатуры.
В Bootstrap аббревиатуры с атрибутом title отображаются со светлой пунктирной нижней границей и курсором справки при наведении.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<abbr title="Профессор">Проф.</abbr>
Вы можете добавить класс .initialism для отображения аббревиатуры несколько меньшим размером шрифта.
<abbr title="Structured Query Language" class="initialism">SQL</abbr> используется для запросов к базам данных.
Цитаты
Чтобы применить стили Bootstrap к элементу <blockquote>, используйте класс .blockquote.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<blockquote class="blockquote">
<p>Самый важный момент вашей жизни происходит сейчас.
Самый важный человек в вашей жизни — тот, с кем вы сейчас находитесь,
а самая важная деятельность в вашей жизни — то, чем вы сейчас занимаетесь.</p>
</blockquote>
Источник цитаты
Bootstrap отображает элементы <cite> и <footer>, вложенные в элемент <blockquote>, следующим образом.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<blockquote class="blockquote">
<p>Многие из нас качаются на волнах верований всех сортов.
Мы погружены в здравый смысл и мудрость нашей культуры,
традиций, общины, профессии, семьи и друзей.</p>
<footer>Том Кэмбелл, <cite>Моя большая теория всего</cite></footer>
</blockquote>
Выравнивание цитат
Вы можете использовать текстовые утилиты Bootstrap для выравнивания цитаты, например, .text-center.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<blockquote class="blockquote text-center">
<p>Многие из нас качаются на волнах верований всех сортов.
Мы погружены в здравый смысл и мудрость нашей культуры,
традиций, общины, профессии, семьи и друзей.</p>
<footer>Том Кэмбелл, <cite>Моя большая теория всего</cite></footer>
</blockquote>
И .text-right.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<blockquote class="blockquote text-right">
<p>Многие из нас качаются на волнах верований всех сортов.
Мы погружены в здравый смысл и мудрость нашей культуры,
традиций, общины, профессии, семьи и друзей.</p>
<footer>Том Кэмбелл, <cite>Моя большая теория всего</cite></footer>
</blockquote>
Списки
Bootstrap применяет разные стили и содержит набор классов специально для списков.
Нестилизованные списки
Вы можете использовать класс .list-unstyled для отображения списков без list-style и margin-left по умолчанию.
Строчные списки
Вы можете использовать классы .list-inline и .list-inline-item для отображения списков в виде display: inline-block и для применения некоторых отступов.
Список описаний
В Bootstrap списки описаний отображаются следующим образом.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<dl>
<dt>Архат</dt>
<dd>«Совершенный», преодолевший три яда желания, ненависти и неведения.</dd>
<dt>Бодхи</dt>
<dd>Пробуждённая мудрость.</dd>
<dt>Дзен</dt>
<dd>Медитативное погружение, при котором устраняются все дуалистические различия.</dd>
</dl>
Горизонтальный список описаний
Вы можете выровнять термины и описания по горизонтали добавив класс .row к элементу <dl>, а затем любой из предопределённых классов системы сетки к элементам <dt> и <dd>.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<dl class="row">
<dt class="col-sm-2">Архат</dt>
<dd class="col-sm-10">«Совершенный», преодолевший три яда желания, ненависти и неведения.</dd>
<dt class="col-sm-2">Бодхи</dt>
<dd class="col-sm-10">Пробуждённая мудрость.</dd>
<dt class="col-sm-2">Дзен</dt>
<dd class="col-sm-10">Медитативное погружение, при котором устраняются все дуалистические различия.</dd>
</dl>
Обратите внимание, что это работает только при широкой области просмотра. Если вы не видите никакой разницы между отображением этого примера и предыдущего, тогда откройте предварительный просмотр в новом окне. Если он по-прежнему не отличается, вам потребуется устройство большего размера для просмотра данного примера.
В Bootstrap 3 используется класс .dl-horizontal, а Bootstrap 4 использует класс .row.
Код
В Bootstrap элемент <code> отображается следующим образом.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
Атрибут <code>accesskey</code> может использоваться для любого элемента HTML5.
Ввод с клавиатуры
В Bootstrap элемент <kbd> отображается следующим образом.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
Чтобы сохранить документ на Mac, нажмите <kbd><kbd>Command</kbd>+<kbd>S</kbd></kbd>
Форматированный текст
В Bootstrap элемент <pre> отображается следующим образом.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<pre>Этот текст был
отформатирован с помощью
элемента pre. Браузер должен
показать все пробелы,
как они были введены.
</pre>
Вы также можете добавить класс .pre-scrollable, чтобы установить max-height как 350 пикселей и задать полосу прокрутки по оси Y.
Образец текста
В Bootstrap элемент <samp> отображается следующим образом.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
Компьютер говорит <samp>Недостаточно памяти</samp>. Я всегда думал, что у меня хорошая память!
Переменные
В Bootstrap элемент <var> отображается следующим образом.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<var>E</var> = <var>m</var> <var>c</var><sup>2</sup>
