Типографика
Документация и примеры типографии Bootstrap, включая глобальные настройки, заголовки, текст документа, списки и т.д.
Глобальные настройки
Bootstrap предустанавливает глобальные стили отображения, типографии и ссылок. Когда нужно настроить больше элементов, проверьте наши классы текстовых утилит.
- Используйте набор встроенных шрифтов, который выберет лучшее семейство шрифтов
font-familyдля всех ОС и девайсов. - Для более широкой и доступной шкалы шрифтов BS4 использует шрифт браузера по умолчанию
font-size(обычно 16px), так что юзеры могут сами настроить шрифты через настройки шрифтов браузера. - Используйте атрибуты
$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>) доступны в BS4.
| Заголовок | Пример |
|---|---|
| h1. Заголовок bootstrap |
| h2. Заголовок bootstrap |
| h3. Заголовок bootstrap |
| h4. Заголовок bootstrap |
| h5. Заголовок bootstrap |
| h6. Заголовок bootstrap |
<h1>h1. Заголовок bootstrap </h1><h2>h2. Заголовок bootstrap </h2><h3>h3. Заголовок bootstrap </h3><h4>h4. Заголовок bootstrap </h4><h5>h5. Заголовок bootstrap </h5><h6>h6. Заголовок bootstrap </h6>Если вы хотите, чтобы стилизация шрифта совпадала с заголовком, но не можете использовать соотнесенный HTML-элемент, классы .h1 - .h6 также доступны.
h1. Заголовок bootstrap
h2. Заголовок bootstrap
h3. Заголовок bootstrap
h4. Заголовок bootstrap
h5. Заголовок bootstrap
h6. Заголовок bootstrap
<pclass="h1">h1. Заголовок bootstrap </p><pclass="h2">h2. Заголовок bootstrap </p><pclass="h3">h3. Заголовок bootstrap </p><pclass="h4">h4. Заголовок bootstrap </p><pclass="h5">h5. Заголовок bootstrap </p><pclass="h6">h6. Заголовок bootstrap </p>Настройка заголовков
Используйте имеющиеся общие классы для воссоздания маленького вторичного текста-подзаголовка из Bootstrap 3.
<h3> Заголовок отображения <smallclass="text-muted">С выцветшим вторичным текстом</small></h3>«Заголовок дисплея»
Традиционные заголовки созданы для «работы» «в глубине» вашей страницы. Если вам необходимо выделить заголовок, используйте «заголовок дисплея» - большего размера, слегка более вычурный.
| Display 1 |
| Display 2 |
| Display 3 |
| Display 4 |
<h1class="display-1">Display 1</h1><h1class="display-2">Display 2</h1><h1class="display-3">Display 3</h1><h1class="display-4">Display 4</h1>«Лид»
Создайте выделяющийся, отстоящий от основной массы параграф добавлением класса .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<pclass="lead"> Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>Блочные текстовые элементы
Стили для обычных блочных элементов HTML5.
тег-выделитель для подсветки текста.
Удаленный текст.
Зачеркнутый.
Строка - дополнение к документу.
Подчеркнутая
Мелкий шрифт (типа нижний индекс).
Жирный текст.
Курсив.
<p>тег-выделитель для <mark>подсветки</mark> текста.</p><p><del>Удаленный текст.</del></p><p><s>Зачеркнутый.</s></p><p><ins>Строка - дополнение к документу.</ins></p><p><u>Подчеркнутая</u></p><p><small>Мелкий шрифт (типа нижний индекс).</small></p><p><strong>Жирный текст.</strong></p><p><em>Курсив.</em></p>Классы .mark и .small дают стили, одинаковые с тегами <mark> и <small>, но помогают избежать нежелательных семантических последствий, которые могут возникнуть с тегами.
Также, свободно пользуйтесь тегами <b> и <i> в HTML5. <b> создан для выделения слов или фраз, когда выделение не придает словам дополнительной важности, а <i> выделяет цитаты, прямую речь, термины и т.д.
Классы текстовых утилит
Изменяйте выравнивание текста, стиль, «жирность» и цвет с помощью текстовых утилит и утилит цвета.
Сокращения
Реализация элемента <abbr> нужна для показа полной версии акронимов и сокращений по наведению. Этот тег имеет подчеркивание по умолчанию и показывает “help-cursor” для дополнительного контекста, а также для помощи юзерам-инвалидам.
Добавьте класс .initialism к сокращению для создания слегка уменьшенного шрифта.
attr
HTML
<p><abbrtitle="attribute">attr</abbr></p><p><abbrtitle="HyperText Markup Language"class="initialism">HTML</abbr></p>Цитаты
Для цитат с другого источника в вашем документе. Оберните любой элемент в <blockquote class="blockquote"> для создания цитаты.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquoteclass="blockquote"><pclass="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p></blockquote>Наименование источника
Добавьте <footer class="blockquote-footer"> для идентификации источника. Оберните имя источника в <cite>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquoteclass="blockquote"><pclass="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p><footerclass="blockquote-footer">Кто-то знаменитый в <citetitle="Название источника">Source Title</cite></footer></blockquote>Выравнивание
Используйте текстовые утилиты, если необходимо изменить выравнивание блока цитат.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquoteclass="blockquote text-center"><pclass="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p><footerclass="blockquote-footer">Кто-то знаменитый в <citetitle="Название источника">Название источника</cite></footer></blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquoteclass="blockquote text-right"><pclass="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p><footerclass="blockquote-footer">Кто-то знаменитый в <citetitle="Название источника">Название источника</cite></footer></blockquote>Списки
Без элементов стилизации
Удаляет свойство по умолчанию list-style и левый марджин элементов списка (только прямые «потомки»). Это работает лишь для прямых «потомков», т.е. вам необходимо будет добавлять класс для каждого из вложенных списков.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ulclass="list-unstyled"><li>Lorem ipsum dolor sit amet</li><li>Consectetur adipiscing elit</li><li>Integer molestie lorem at massa</li><li>Facilisis in pretium nisl aliquet</li><li>Nulla volutpat aliquam velit <ul><li>Phasellus iaculis neque</li><li>Purus sodales ultricies</li><li>Vestibulum laoreet porttitor sem</li><li>Ac tristique libero volutpat at</li></ul></li><li>Faucibus porta lacus fringilla vel</li><li>Aenean sit amet erat nunc</li><li>Eget porttitor lorem</li></ul>Блочные
Удаляет у элементов списка значок слева и создает небольшой отступ margin с помощью сочетания классов .list-inline и .list-inline-item.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
<ulclass="list-inline"><liclass="list-inline-item">Lorem ipsum</li><liclass="list-inline-item">Phasellus iaculis</li><liclass="list-inline-item">Nulla volutpat</li></ul>Описание и выравнивание
Выравнивайте термины и описания по горизонтали, используя предустановленные классы сеточной системы BS4 (или семантические миксины). Для более длинных терминов вы можете добавить класс .text-truncate чтобы «усечь» текст эллипсисом.
- Списки описания
- A description list is perfect for defining terms.
- Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Truncated term is truncated
- 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.
<dlclass="row"><dtclass="col-sm-3">Description lists</dt><ddclass="col-sm-9">A description list is perfect for defining terms.</dd><dtclass="col-sm-3">Euismod</dt><ddclass="col-sm-9"><p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p><p>Donec id elit non mi porta gravida at eget metus.</p></dd><dtclass="col-sm-3">Malesuada porta</dt><ddclass="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd><dtclass="col-sm-3 text-truncate">Truncated term is truncated</dt><ddclass="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd><dtclass="col-sm-3">Nesting</dt><ddclass="col-sm-9"><dlclass="row"><dtclass="col-sm-4">Nested definition list</dt><ddclass="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd></dl></dd></dl>Адаптивные размеры шрифта
В Bootstrap включена опция возможность адаптивного изменения размера шрифта, что позволяет тексту более естественно масштабироваться в зависимости от размеров устройства и области просмотра. RFS можно включить, изменив переменную $enable-responsive-font-sizes в Sass на true и перекомпилировав Bootstrap.
Для поддержки RFS мы используем миксин Sass, чтобы заменить наши обычные свойства размера шрифта font-size. Размеры адаптивного шрифта будут скомпилированы в функции calc() со смесью блоков rem, чтобы включить адаптивное масштабирование. Больше информации о RFS и его конфигурации можно найти в репозитории GitHub.