Типография
Документация и примеры типографики Bootstrap, включая глобальные настройки, заголовки, основной текст, списки и многое другое.
Bootstrap устанавливает базовые глобальные стили отображения, типографики и ссылок. Если требуется больше контроля, воспользуйтесь текстовыми служебными классами .
- Используйте собственный стек шрифтов, который выбирает лучший
font-family
для каждой ОС и устройства. - Для более инклюзивной и доступной шкалы типов мы предполагаем, что корень браузера по умолчанию
font-size
(обычно 16 пикселей), чтобы посетители могли настроить свои браузеры по умолчанию по мере необходимости. - Используйте атрибуты
$font-family-base
,$font-size-base
и$line-height-base
в качестве нашей типографской основы, применяемой к файлу<body>
. - Установите глобальный цвет ссылки через
$link-color
и примените подчеркивание ссылок только к файлам:hover
. - Используйте
$body-bg
, чтобы установитьbackground-color
на<body>
(#fff
по умолчанию).
Эти стили можно найти в _reboot.scss
, а глобальные переменные определены в _variables.scss
. Обязательно установите $font-size-base
.rem
Доступны все заголовки HTML <h1>
до <h6>
.
Заголовок | Пример |
---|---|
|
ч1. Начальный заголовок |
|
ч2. Начальный заголовок |
|
h3. Начальный заголовок |
|
h4. Начальный заголовок |
|
h5. Начальный заголовок |
|
h6. Начальный заголовок |
.h1
сквозные .h6
классы также доступны, когда вы хотите подобрать стиль шрифта заголовка, но не можете использовать связанный элемент HTML.
ч1. Начальный заголовок
ч2. Начальный заголовок
h3. Начальный заголовок
h4. Начальный заголовок
h5. Начальный заголовок
h6. Начальный заголовок
Используйте включенные служебные классы, чтобы воссоздать небольшой вторичный текст заголовка из Bootstrap 3.
Традиционные элементы заголовков лучше всего подходят для контента вашей страницы. Если вам нужно, чтобы заголовок выделялся, рассмотрите возможность использования отображаемого заголовка — более крупного, немного более самоуверенного стиля заголовка.
Дисплей 1 |
Дисплей 2 |
Дисплей 3 |
Дисплей 4 |
Выделите абзац, добавив .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Стили для обычных встроенных элементов HTML5.
Вы можете использовать тег метки, чтобывыделятьтекст.
Эта строка текста должна рассматриваться как удаленный текст.
Эта строка текста должна рассматриваться как неточная.
Эта строка текста должна рассматриваться как дополнение к документу.
Эта строка текста будет отображаться как подчеркнутая.
Эта строка текста должна рассматриваться как мелкий шрифт.
Эта строка выделена жирным шрифтом.
Эта строка отображается как выделенный курсивом текст.
.mark
и .small
классы также доступны для применения тех же стилей, что <mark>
и <small>
при избежании любых нежелательных семантических последствий, которые могут принести теги.
Хотя это и не показано выше, не стесняйтесь использовать <b>
и <i>
в HTML5. <b>
предназначен для выделения слов или фраз без дополнительной важности, в то время <i>
как в основном для голоса, технических терминов и т. д.
Изменяйте выравнивание текста, трансформируйте его, стиль, толщину и цвет с помощью наших текстовых и цветных утилит .
Стилизованная реализация элемента HTML <abbr>
для аббревиатур и акронимов для отображения расширенной версии при наведении. Аббревиатуры имеют подчеркивание по умолчанию и получают курсор справки, чтобы предоставить дополнительный контекст при наведении курсора и пользователям вспомогательных технологий.
Добавьте .initialism
к аббревиатуре немного меньший размер шрифта.
атрибут
HTML
Для цитирования блоков контента из другого источника в вашем документе. Оберните <blockquote class="blockquote">
любой HTML как цитату.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Целое число можно поставить заранее.
Добавьте <footer class="blockquote-footer">
для идентификации источника. Оберните название исходной работы в <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Целое число можно поставить заранее.
При необходимости используйте текстовые утилиты, чтобы изменить выравнивание цитаты.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Целое число можно поставить заранее.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Целое число можно поставить заранее.
Удалите поле по умолчанию list-style
и левое поле для элементов списка (только для непосредственных дочерних элементов). Это относится только к непосредственным дочерним элементам списка , то есть вам также нужно будет добавить класс для любых вложенных списков.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Целое число слов и масса
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Угревая сыпь
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Энеан сит амет эрат нунк
- Eget porttitor lorem
Удалите маркеры списка и добавьте немного света margin
с комбинацией двух классов .list-inline
и .list-inline-item
.
- Лорем ипсум
- Фазеллус якулис
- Нулла волютпат
Выровняйте термины и описания по горизонтали, используя предопределенные классы нашей системы сетки (или семантические примеси). Для более длинных терминов вы можете дополнительно добавить .text-truncate
класс для усечения текста многоточием.
- Списки описаний
- Список описаний идеально подходит для определения терминов.
- Юисмод
-
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
- Порта Малесуада
- Etiam porta sem malesuada magna mollis euismod.
- Усеченный термин усечен
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- Вложение
-
- Вложенный список определений
- Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
Адаптивная типографика относится к масштабированию текста и компонентов путем простой настройки корневого элемента в font-size
рамках серии медиа-запросов. Bootstrap не делает этого за вас, но его довольно легко добавить, если вам это нужно.
Вот пример на практике. Выберите любые font-size
s и медиа-запросы, которые вы хотите.