Bootstrap использует Helvetica Neue, Helvetica, Arial и sans-serif в стеке шрифтов по умолчанию. Используя функцию типографии Bootstrap, вы можете создавать заголовки, абзацы, списки и другие встроенные элементы. Давайте посмотрим на каждый из них в следующих разделах.
Содержание:
Ранее статья о типографии Bootstrap 3. Типография - заголовки, цитаты, списки, работа с текстом. Часть 2 уже публиковалась. Прочтите ее, будет полезно!
Заголовки
Все заголовки HTML (от h1 до h6) оформлены в Bootstrap. Пример показан ниже -
Вышеупомянутый сегмент кода с Bootstrap даст следующий результат:
I'm Heading1 h1
I'm Heading2 h2
I'm Heading3 h3
I'm Heading4 h4
I'm Heading5 h5
I'm Heading6 h6
Встраиваемые подзаголовки
Чтобы добавить встроенную подзаголовку в любой из заголовков, просто добавьте тег small
вокруг любого из элементов или добавьте класс .small
, и вы получите меньший текст в более светлом цвете, как показано в примере ниже -
Вышеупомянутый сегмент кода с Bootstrap даст следующий результат:
I'm Heading1 h1. I'm secondary Heading1 h1
I'm Heading2 h2. I'm secondary Heading2 h2
I'm Heading3 h3. I'm secondary Heading3 h3
I'm Heading4 h4. I'm secondary Heading4 h4
I'm Heading5 h5. I'm secondary Heading5 h5
I'm Heading6 h6. I'm secondary Heading1 h6
Чтобы добавить некоторый акцент на абзац, добавьте class = "lead"
. Это даст вам больший размер шрифта, более легкий вес и более высокую высоту линии, как в следующем примере -
Lead Example
This is an example paragraph demonstrating the use of lead body copy. This is an example paragraph demonstrating the use of lead body copy.This is an example paragraph demonstrating the use of lead body copy.This is an example paragraph demonstrating the use of lead body copy. This is an example paragraph demonstrating the use of lead body copy.
Акцент
HTML-теги подчеркивания по умолчанию, такие как small
устанавливает текст на 85% размера родителя, strong
подчеркивает текст с более тяжелым шрифтом, а em
выделяет текст курсивом.
Bootstrap предлагает несколько классов, которые могут использоваться для обеспечения акцента на тексты, как показано в следующем примере -
Сокращения
Элемент HTML abbr
обеспечивает разметку аббревиатур или сокращений, таких как WWW или HTTP. Элементы стиля Bootstrap abbr с легкой пунктирной рамкой внизу и раскрывают полный текст при наведении (пока вы добавляете этот текст в атрибут title abbr
). Чтобы получить немного меньший размер шрифта, добавьте .initialism
в abbr.
Адреса
Используя тег address
, вы можете отображать контактную информацию на своей веб-странице. Поскольку address
по умолчанию отображается в CSS как block; вам нужно будет использовать теги для добавления разрывов строк в текст прилагаемого адреса, натример тег br
.
Цитаты
Вы можете использовать blockquote
по умолчанию для любого текста HTML. Другие варианты включают в себя добавление тега small для идентификации источника цитаты и выравнивания по правому краю блока с использованием класса .pull-right
. Следующий пример демонстрирует все эти функции -
Списки
Bootstrap поддерживает упорядоченные списки, неупорядоченные списки и списки определений.
- Упорядоченные списки - упорядоченный список - это список, который попадает в какой-то последовательный порядок и предваряется цифрами.
- Неупорядоченные списки. Неупорядоченный список - это список, который не имеет особого порядка и традиционно оформлен пулями. Если вы не хотите, чтобы маркеры отображались, вы можете удалить стиль, используя класс
.list-unstyled
. Вы также можете поместить все элементы списка в одну строку, используя класс.list-inline
. - Списки определений. В этом типе списка каждый элемент списка может состоять из элементов
dt
иdd
.dt
означает термин определения , и, как словарь, это термин (или фраза), который определяется. Впоследствииdd
является определениемdt
. Вы можете заключить термины и описания вdl
рядом друг с другом, используя классdl-horizontal
.
Следующий пример демонстрирует каждый из этих типов -
Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!
Новые статьи
- Bootstrap - Заголовок страницы - 22/09/2018 17:23
- Бутстрап - Jumbotron - карточка статьи - 22/09/2018 17:23
- Бутстрап - Значки - 22/09/2018 17:23
- Бутстрап - Ярлыки - 22/09/2018 17:22
- Бутстрап - Пагинация - разбиение на страницы - 22/09/2018 17:20
- Bootstrap - Breadcrumb - хлебные крошки - 22/09/2018 17:20
- Bootstrap - Navbar - 22/09/2018 17:18
- Бутстрап - Элементы навигации - 22/09/2018 17:17
- Bootstrap - Группы ввода - 22/09/2018 17:17
- Bootstrap - Выпадающие окна и кнопки - 22/09/2018 17:16
- Bootstrap - Группы загрузки - кнопки - 22/09/2018 17:16
- Бутстрап - Выпадающие окна - 22/09/2018 17:15
- Бутстрап - Глификон - 22/09/2018 17:15
- Bootstrap - Отзывчивые утилиты - 22/09/2018 17:14
- Bootstrap - Вспомогательные классы - 22/09/2018 17:14
- Bootstrap - Изображения - 22/09/2018 17:13
- Бутстрап - Кнопки - 22/09/2018 17:13
- Бутстрап - Формы - 22/09/2018 17:12
- Бутстрап - Таблицы - 22/09/2018 17:12
- Бутстрап - Вставка кода - 22/09/2018 17:11
Предыдущие статьи
- Bootstrap - Обзор CSS - 22/09/2018 17:10
- Бутстрап - Сетка - 22/09/2018 17:09
- Bootstrap - Настройка среды - 22/09/2018 17:09
- Bootstrap - Обзор - 22/09/2018 17:08
- Bootstrap 3. Адаптивные изображения, различные типы меню, формы в меню. Часть 3 - 31/12/2017 16:54
- Bootstrap 3. Типография - заголовки, цитаты, списки, работа с текстом. Часть 2 - 23/12/2017 20:44
- Подключение фреймворка Bootstrap 3 к сайту. Основы сетки шаблона. Часть 1 - 15/12/2017 15:47