Bootstrap: Быстрое создание современных сайтов
Шрифт:
Bootstrap Text/Typography
По умолчанию, глобальный размер шрифта Bootstrap, применяемый к тегу <body> и ко всем тегам , является 14px, с высотой линии 1.428.
Кроме того, все элементы имеют нижний margin-отступ, равный половине компьютерной высоте строки (10px по умолчанию).
Bootstrap заголовки <h1> – <h6> имеют следующий размер:
h1 – 36px
h2 – 30px
h3 – 24px
h4 – 18px
h5 – 14px
h6 – 12px
Для добавления вспомогательных заголовков используется тег <small>, который устанавливает размер шрифта 85%:
<h1> h1 heading <small> secondary text </small> </h1>
С помощью
<p class = «lead»> This is an example paragraph demonstrating the use of lead body copy.
Тег <strong> делает шрифт жирным.
Тег <em> выделяет текст курсивом.
Для выравнивания и выделения текста цветом применяются классы:
<p class = «text-left»> Left aligned text.
<p class = «text-center»> Center aligned text.
<p class = «text-right»> Right aligned text.
<p class=«text-lowercase»> Lowercased text.
<p class=«text-uppercase»> Uppercased text.
<p class=«text-capitalize»> Capitalized text.
Подгонка текста под ширину экрана:
<p class=«text-justify»> Justified text. Justified text. Justified text.
Отмена переноса строк:
<p class=«text-nowrap»> No wrap text. No wrap text. No wrap text.
Выделение цветом:
<p class = «text-muted»> This content is muted
<p class = «text-primary»> This content carries a primary class
<p class = «text-success»> This content carries a success class
<p class =
<p class = «text-warning»> This content carries a warning class
< image l:href="#"/><p class = «text-danger»> This content carries a danger class
<p class=«bg-primary»> This text is important.
<p class=«bg-success»> This text indicates success.
<p class=«bg-info»> This text represents some information.
<p class=«bg-warning»> This text represents a warning.
<p class=«bg-danger»> This text represents danger.
Тег <abbr> обеспечивает подчеркивание текста пунктирной линией, при этом класс class=«initialism» слегка уменьшает шрифт:
<abbr title = «World Wide Web»> WWW </abbr>
Тег <blockquote> выделяет текст как цитируемый, при этом класс class=«blockquote-reverse» выравнивает по правому краю:
This is a default blockquote example. This is a default blockquote example.
<blockquote>
This is a default blockquote example. This is a default blockquote example.
</blockquote>
<blockquote class=«blockquote-reverse»>
This is a default blockquote example. This is a default blockquote example.
</blockquote>
Тег <mark> подсвечивает текст:
Use the mark element to <mark> highlight </mark> text.
Элементы <dl>, <dt> и <dd> обеспечивают разметку словаря: