Все HTML заголовки, от <h1>
- <h6>
, являются доступными. Также доступны классы от .h1
- .h6
, на случай если вы захотите изменить стиль заголовков, но вместе с тем хотите, чтобы соседней текст отображался в том же строке.
h1. Bootstrap заголовок |
Semibold 36px |
h2. Bootstrap заголовок |
Semibold 30px |
h3. Bootstrap заголовок |
Semibold 24px |
h4. Bootstrap заголовок |
Semibold 18px |
h5. Bootstrap заголовок |
Semibold 14px |
h6. Bootstrap заголовок |
Semibold 12px |
<h1>h1. Bootstrap заголовок</h1>
<h2>h2. Bootstrap заголовок</h2>
<h3>h3. Bootstrap заголовок</h3>
<h4>h4. Bootstrap заголовок</h4>
<h5>h5. Bootstrap заголовок</h5>
<h6>h6. Bootstrap заголовок</h6>
Простое создание, вторичного текста в любом заголовке за помощью тега <small>
или класса .small
.
h1. Bootstrap заголовок Вторичный текст |
h2. Bootstrap заголовок Вторичный текст |
h3. Bootstrap заголовок Вторичный текст |
h4. Bootstrap заголовок Вторичный текст |
h5. Bootstrap заголовок Вторичный текст |
h6. Bootstrap заголовок Вторичный текст |
<h1>h1. Bootstrap заголовок <small>Вторичный текст</small></h1>
<h2>h2. Bootstrap заголовок <small>Вторичный текст</small></h2>
<h3>h3. Bootstrap заголовок <small>Вторичный текст</small></h3>
<h4>h4. Bootstrap заголовок <small>Вторичный текст</small></h4>
<h5>h5. Bootstrap заголовок <small>Вторичный текст</small></h5>
<h6>h6. Bootstrap заголовок <small>Вторичный текст</small></h6>
Bootstrap общий и изначальный font-size
это 14px, с line-height
1.428. Это применимо к <body>
и всем параграфам. В дополнение, <p>
(параграфы) получают нижний отступ в половину калькулируемой высоты строки (изначально 10px).
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<p>...</p>
Создайте выделенный параграф путем добавления .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="lead">...</p>
Типографская шкала основана на двух Less переменных в variables.Less: @font-size-base
и @line-height-base
. Первый это базовый размер шрифта используемый везде, а второй является базовой высоты строки. Мы используем эти переменные и простую арифметику для создания margins, paddings, и line-heights всех наших типов и прочего. Настройте их, чтобы адаптировать Bootstrap.
Чтобы выделить текст можно использовать HTML-теги по умолчанию, добавив им легкие стили.
Для уменьшения выделения встроенного текста или блока текста, используйте тег <small>
, чтобы задать ему размер, который будет составлять 85% от размера его родительского элемента. Заголовки должны установлены собственные (отдельные) font-size
для вложенных элементов <small>
.
В качестве альтернативы, можно использовать встроенный элемент с классом .small
-где в середине <small>
Эта строка текста должна продемонстрировать мелкий шрифт.
<small>This line of text is meant to be treated as fine print.</small>
Для выделения фрагмента текста с тяжелым насыщенным шрифтом.
Следующий фрагмент текста отображается как жирный текст.
<strong>rendered as bold text</strong>
Для выделения фрагмента текста курсивом.
Следующий фрагмент текста отображается курсивным текстом.
<em>rendered as italicized text</em>
Свободно используйте <b>
и <i>
в HTML5. Тег <b>
предназначен для выделения слова или фразы без передачи дополнительного значения, в то время как <i>
в основном для цитирования, технических терминов и т.д.
Легко выровнять текст компонентов с помощью классов выравнивания текста.
Выравнивание по левому краю.
Выравнивание по центру.
Выравнивание по правому краю.
Выравнивание текста по ширине
<p class="text-left">Выравнивание по левому краю.</p>
<p class="text-center">Выравнивание по центру.</p>
<p class="text-right">Выравнивание по правому краю.</p>
<p class="text-justify">Выравнивание текста по ширине</p>
Внедрена стилизацию HTML-элементов <abbr>
для аббревиатур и акронимов, чтобы показать расширенную их версию при наведении. Аббревиатуры с атрибутом title
имеют внизу легкое точечное подчеркивания, а курсор принимает вид знака вопроса при наведении, предоставляя дополнительный контекст для зависания (hover).
Для расширения текста при длительном наведении на аббревиатуру, включите атрибут title
с элементом <abbr>
.
Аббревиатурой слова attribute является attr.
<abbr title="attribute">attr</abbr>
Добавьте .initialism
аббревиатуры для легкого уменьшения размера шрифта.
HTML is the best thing since sliced bread.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
Представьте контактную информацию. Обезопасьте форматирования закончив все строки <br>
.
<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">first.last@example.com</a>
</address>
Цитаты нужны для цитирования блока содержимого с другого ресурса в теле вашего документа.
Оберните при помощи <blockquote>
-HTML-код, который должен быть цитатой. Рекомендуем начинать цитату из <p>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
Изменение стиля и содержимого для простых вариаций стандартного <blockquote>
.
Добавьте <footer>
для указания источника. Заключите имя источника работы в <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
Добавьте .blockquote-reverse
для выравнивания цитаты справа.
<blockquote class="blockquote-reverse">
...
</blockquote>
Список пунктов, когда порядок сортировки нет явного значение.
<ul>
<li>...</li>
</ul>
Список пунктов, когда порядок сортировки должен явное значение.
<ol>
<li>...</li>
</ol>
Удаление list-style
и отступ слева для списка пунктов. Такое удаление применяется только к непосредственных дочерних элементов, то есть необходимо добавлять соответствующий класс в любых вложенных списков.
<ul class="list-unstyled">
<li>...</li>
</ul>
Размещение всех пунктов списка в одну линию при помощи display: inline-block;
и небольших отступлений.
<ul class="list-inline">
<li>...</li>
</ul>
Список терминов и их описаний.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
Расположение терминов и их описаний бок о бок в линию при помощи <dl>
.
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
Горизонтальный список описания будет автоматически сужается, если в нем есть слишком долгие сроки, которые не помещаются в левую колонку с text-overflow
. В узком окне данный список примет стандартный вид для <dl>
.