Bootstrap's умолчанию Настройки
Bootstrap's глобальным по умолчанию размер шрифта является 14px, с очередью высотой 1.428.
Это применяется к <body>
и все пункты.
Кроме того, все <p>
элементы имеют нижнюю границу , которая равна половине их вычисленного высоту строки (10px по умолчанию).
Bootstrap против значения по умолчанию браузера
В этой главе мы рассмотрим некоторые HTML - элементы , которые будут стилизованных немного по- разному Bootstrap , чем браузер по умолчанию.
<h1> - <h6>
По умолчанию, Bootstrap будет стилизовать HTML заголовков ( <h1>
до <h6>
) следующим образом:
пример
h1 Bootstrap heading (36px)
h2 Bootstrap heading (30px)
h3 Bootstrap heading (24px)
h4 Bootstrap heading (18px)
h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)
Попробуй сам " <small>
В грузиться HTML <small>
элемент используется для создания более легкого, вторичный текст в любой позиции:
пример
h1 heading secondary text
h2 heading secondary text
h3 heading secondary text
h4 heading secondary text
h5 heading secondary text
h6 heading secondary text
Попробуй сам " <mark>
Bootstrap будет стилизации HTML <mark>
элемент следующим образом:
<abbr>
Bootstrap будет стилизации HTML <abbr>
элемент следующим образом:
<blockquote>
Bootstrap будет стилизации HTML <blockquote>
элемент следующим образом:
пример
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
Попробуй сам " Для того, чтобы показать цитату справа, используйте .blockquote-reverse
класс:
пример
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
Попробуй сам " <dl>
Bootstrap будет стилизации HTML <dl>
элемент следующим образом:
<code>
Bootstrap будет стилизации HTML <code>
элемент следующим образом:
пример
The following HTML elements: span
, section
, and div
defines a section in a document.
Попробуй сам " <kbd>
Bootstrap будет стилизации HTML <kbd>
элемент следующим образом:
<pre>
Bootstrap будет стилизации HTML <pre>
элемент следующим образом:
пример
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
Попробуй сам " Контекстные Цвета и обои
Bootstrap также имеет некоторые контекстные классы , которые могут быть использованы для обеспечения "означает через цветов".
Классы для текстовых цветов: .text-muted
, .text-primary
, .text-success
, .text-info
, .text-warning
, и .text-danger
:
пример
This text is muted.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Попробуй сам " Классы для цвета фона являются: .bg-primary
, .bg-success
, bg-info
, bg-warning
, и .bg-danger
:
пример
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Попробуй сам " Другие классы Книгопечатания
Классы Bootstrap ниже могут быть добавлены в стиле HTML-элементов далее:
Класс | Описание | пример |
---|---|---|
.lead | Заставляет абзац выделяется | Попробуй |
.small | Указывает меньший текст (устанавливается на 85% от размера родителя) | Попробуй |
.text-left | Указывает, по левому краю текста | Попробуй |
.text-center | Указывает, выровнен по центру текста | Попробуй |
.text-right | Указывает выравнивание по правому краю текста | Попробуй |
.text-justify | Указывает, выровненный текст | Попробуй |
.text-nowrap | Указывает на отсутствие текста обруча | Попробуй |
.text-lowercase | Указывает текст строчными | Попробуй |
.text-uppercase | Указывает текст в верхний регистр | Попробуй |
.text-capitalize | Указывает текст капитализированную | Попробуй |
.initialism | Отображает текст внутри <abbr> элемент в немного меньший размер шрифта | Попробуй |
.list-unstyled | Удаляет список-стиль по умолчанию и левый край по элементам списка (работает на обоих <ul> и <ol> ). Этот класс применяется только к элементам списка непосредственных детей (чтобы удалить список-стиль по умолчанию из любых вложенных списков, применять этот класс для любых вложенных списков, а) | Попробуй |
.list-inline | Места все Элементы списка в одной строке | Попробуй |
.dl-horizontal | Выстраивает условиям ( <dt> ) и описания ( <dd> ) в <dl> элементы бок о бок. Начинается , как по умолчанию <dl> с, но когда расширяет окно браузера, он будет выстраиваться бок о бок | Попробуй |
.pre-scrollable | Делает <pre> элемент прокручивать | Попробуй |
Полное Bootstrap Typography Reference
Для полного ведения всех типографики элементов / классов, перейдите на наш полный Bootstrap Типографии Reference .
Также обратите внимание на наш Bootstrap вспомогательные классы Reference для получения дополнительной информации о контекстных классах.