Типографика в 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>

Автор и редакторы

Автор: Йен Диксон
Последнее изменение: 11.03.2020
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты