Bootstrap 4 типография: Типография

Содержание

Типография · Bootstrap v4.6

Посмотреть на GitHub Оригинал

Документация и примеры типографики Bootstrap, включая глобальные настройки, заголовки, основной текст, списки и многое другое.

Глобальные настройки

Bootstrap устанавливает основные глобальные стили отображения, типографики и ссылок. Когда требуется больше контроля, посмотрите текстовые служебные классы.

Используйте собственный стек шрифтов, который выбирает лучшее font-family для каждой ОС и устройства.
Для более инклюзивной и доступной шкалы шрифтов мы используем корневой размер шрифта font-size браузера по умолчанию (обычно 16 пикселей), чтобы посетители могли настроить свои настройки браузера по умолчанию по мере необходимости.
Используйте атрибуты $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, от <h2> до <h6>.

Заголовок	Пример
`<h2></h2>`	h2. Заголовок Bootstrap
`<h3></h3>`	h3. Заголовок Bootstrap
`<h4></h4>`	h4. Заголовок Bootstrap
`<h5></h5>`	h5. Заголовок Bootstrap
`<h5></h5>`	h5. Заголовок Bootstrap
`<h6></h6>`	h6. Заголовок Bootstrap

<h2>h2. Заголовок Bootstrap</h2>
<h3>h3. Заголовок Bootstrap</h3>
<h4>h4. Заголовок Bootstrap</h4>
<h5>h5. Заголовок Bootstrap</h5>
<h5>h5. Заголовок Bootstrap</h5>
<h6>h6. Заголовок Bootstrap</h6>

Также доступны классы с .h2 по .h6, когда Вы хотите соответствовать стилю шрифта заголовка, но не можете использовать связанный элемент HTML.

h2. Заголовок Bootstrap

h3. Заголовок Bootstrap

h4. Заголовок Bootstrap

h5. Заголовок Bootstrap

h6. Заголовок Bootstrap

<p>h2. Заголовок Bootstrap</p>
<p>h3.  Заголовок Bootstrap</p>
<p>h4. Заголовок Bootstrap</p>
<p>h5. Заголовок Bootstrap</p>
<p>h5. Заголовок Bootstrap</p>
<p>h6. Заголовок Bootstrap</p>

Настройка заголовков

Используйте включенные служебные классы, чтобы воссоздать небольшой текст вторичного заголовка из Bootstrap 3.

Необычный заголовок дисплея

С выцветшим второстепенным текстом

<h4>
  Необычный заголовок дисплея
  <small>С выцветшим второстепенным текстом</small>
</h4>

Отображение заголовков

Традиционные элементы заголовка лучше всего подходят для содержания Вашей страницы. Если Вам нужен заголовок, чтобы выделиться, подумайте об использовании

отображаемого заголовка — более крупного, немного более самоуверенного стиля заголовка. Имейте в виду, что эти заголовки не являются адаптивными по умолчанию, но можно включить размеры адаптивного шрифта.

Отображение 1

Отображение 2

Отображение 3

Отображение 4

<h2>Отображение 1</h2>
<h2>Отображение 2</h2>
<h2>Отображение 3</h2>
<h2>Отображение 4</h2>

Выделение

Выделите абзац, добавив .lead.

This is a lead paragraph. It stands out from regular paragraphs.

<p>
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

Встроенные текстовые элементы

Стили для общих встроенных элементов HTML5.

Вы можете использовать тег mark для выделения текста.

~~Эта строка текста должна рассматриваться как удаленный текст.~~

~~Эта строка текста больше не соответствует действительности.~~

Эта строка текста должна рассматриваться как дополнение к документу.

Эта строка текста будет подчеркнута

Эту строку текста следует рассматривать как мелкий шрифт.

Эта строка выделена жирным шрифтом.

Эта строка выделена курсивом.

<p>Вы можете использовать тег mark для <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> в основном используется для озвучивания, технических терминов и т.д.

Текстовые утилиты

Измените выравнивание, преобразование, стиль, толщину и цвет текста с помощью наших текстовых утилит и утилит цвета.

Аббревиатура

Стилизованная реализация HTML-элемента <abbr> для сокращений и акронимов для отображения расширенной версии при наведении курсора. Аббревиатуры имеют подчеркивание по умолчанию и получают курсор справки, чтобы предоставить дополнительный контекст при наведении курсора и пользователям вспомогательных технологий.

Добавьте к аббревиатуре .initialism, чтобы уменьшить размер шрифта.

attr

HTML

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language">HTML</abbr></p>

Цитаты

Для цитирования блоков контента из другого источника в вашем документе. Оберните <blockquote> вокруг любого HTML в качестве цитаты.

Известная цитата, содержащаяся в элементе цитаты.

<blockquote>
  <p>Известная цитата, содержащаяся в элементе цитаты.</p>
</blockquote>

Название источника

Добавьте <footer> для идентификации источника. Оберните название исходной работы в <cite>.

Известная цитата, содержащаяся в элементе цитаты.

<blockquote>
  <p>Известная цитата, содержащаяся в элементе цитаты.</p>
  <footer>Кто-то известный в <cite title="Название источника">названии источника</cite></footer>
</blockquote>

Выравнивание

При необходимости используйте текстовые утилиты, чтобы изменить выравнивание цитаты.

Известная цитата, содержащаяся в элементе цитаты.

<blockquote>
  <p>Известная цитата, содержащаяся в элементе цитаты.</p>
  <footer>Кто-то известный в <cite title="Название источника">названии источника</cite></footer>
</blockquote>

Известная цитата, содержащаяся в элементе цитаты.

<blockquote>
  <p>Известная цитата, содержащаяся в элементе цитаты.</p>
  <footer>Кто-то известный в <cite title="Название источника">названии источника</cite></footer>
</blockquote>

Списки

Без стиля

Удалите стиль списка list-style по умолчанию и левое поле для элементов списка (только непосредственные дочерние элементы). Это применимо только к непосредственным дочерним элементам списка, то есть Вам нужно будет добавить класс также для любых вложенных списков.

This is a list.
It appears completely unstyled.
Structurally, it’s still a list.
However, this style only applies to immediate child elements.
Nested lists:
- are unaffected by this style
- will still show a bullet
- and have appropriate left margin
This may still come in handy in some situations.

<ul>
  <li>This is a list.</li>
  <li>It appears completely unstyled.</li>
  <li>Structurally, it's still a list.</li>
  <li>However, this style only applies to immediate child elements.</li>
  <li>Nested lists:
    <ul>
      <li>are unaffected by this style</li>
      <li>will still show a bullet</li>
      <li>and have appropriate left margin</li>
    </ul>
  </li>
  <li>This may still come in handy in some situations.  </li>
</ul>

Строковый

Удалите маркеры списка и примените небольшое поле margin с комбинацией двух классов .list-inline и .list-inline-item.

This is a list item.
And another one.
But they’re displayed inline.

<ul>
  <li>This is a list item.</li>
  <li>And another one.</li>
  <li>But they're displayed inline.</li>
</ul>

Выравнивание списка описаний

Выровняйте термины и описания по горизонтали с помощью предопределенных классов нашей сеточной системы (или семантических миксинов). Для более длительных сроков Вы можете по желанию добавить класс .text-truncate, чтобы обрезать текст многоточием.

Описание списка

Список описаний идеально подходит для определения терминов.

Term

Definition for the term.

And some more placeholder definition text.

Another term

This definition is short, so no extra paragraphs or anything.

Truncated term is truncated

This can be useful when space is tight. Adds an ellipsis at the end.

Nesting

Nested definition list: I heard you like definition lists. Let me put a definition list inside your definition list.

<dl>
  <dt>Описание списка</dt>
  <dd>Список описаний идеально подходит для определения терминов.</dd>
  <dt>Term</dt>
  <dd>
    <p>Definition for the term.</p>
    <p>And some more placeholder definition text.</p>
  </dd>
  <dt>Another term</dt>
  <dd>This definition is short, so no extra paragraphs or anything.</dd>
  <dt>Truncated term is truncated</dt>
  <dd>This can be useful when space is tight. Adds an ellipsis at the end.</dd>
  <dt>Nesting</dt>
  <dd>
    <dl>
      <dt>Nested definition list</dt>
      <dd>I heard you like definition lists.  Let me put a definition list inside your definition list.</dd>
    </dl>
  </dd>
</dl>

Размеры адаптивного шрифта

Начиная с версии 4.3.0, Bootstrap поставляется с возможностью включения гибких размеров шрифта, что позволяет тексту более естественно масштабироваться в зависимости от устройства и размеров области просмотра. RFS можно включить, изменив переменную Sass $enable-responsive-font-sizes на true и перекомпилировав Bootstrap.

Для поддержки RFS, мы используем миксин Sass для замены наших обычных свойств font-size. Размеры адаптивного шрифта будут скомпилированы в функции calc() с сочетанием rem и единиц просмотра, чтобы обеспечить адаптивное масштабирование. Подробнее о RFS и его конфигурации можно найти в его репозитории GitHub.

Типографика · Bootstrap на русском

Стили для отображения Контента с некоторыми из наиболее часто используемых HTML-элементов, включая нормализацию, типографика, Изображения, таблицы и более.

Bootstrap включает в себя простые и легко настраиваемую типографию для заголовков, текста, списков и многое другое. Для еще большего контроля, проверить текстовые утилиты классов.

Содержание

Содержание
Глобальные параметры
Заголовки
- Настройка заголовков
Отображение заголовков
Выделение
Встроенные текстовые элементы
Текстовые утилиты
Аббревиатуры
Цитаты
- Именование источника
- Обратное позиционирование
Списки
- Без стиля
- Встроенный
- Выровненный список описаний
Адаптивная типография

Глобальные параметры

Bootstrap устанавливает основные глобальные дисплеи, типографии, и стили ссылок. В частности, мы:

Использовать родной стек шрифтов, который выбирает лучшие font-family Для каждой операционной системы и устройства.
Используйте $font-family-base, $font-size-base и $line-height-base атрибутами как наши типографской базы в случае <body>.
Установите глобальный цвет ссылки через $link-color и применить только подчеркивает на :hover.
Используйте $body-bg настройка background-color на <body> (#fff по умолчанию).

Эти стили можно найти в _reboot.scss, и глобальные переменные, определенные в _variables.scss.

Заголовки

Все HTML заголовки, <h2> через <h6>, доступны.

	Semibold 36px
h3. Bootstrap heading	Semibold 30px
h4. Bootstrap heading	Semibold 24px
h5. Bootstrap heading	Semibold 18px
h5. Bootstrap heading	Semibold 14px
h6. Bootstrap heading	Semibold 12px

<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

.h2 через .h6 классы, также доступны, когда вы хотите, чтобы соответствовать шрифт заголовка, но не могут использовать соответствующий HTML-элемент.

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

<p>h2. Bootstrap heading</p>
<p>h3. Bootstrap heading</p>
<p>h4.  Bootstrap heading</p>
<p>h5. Bootstrap heading</p>
<p>h5. Bootstrap heading</p>
<p>h6. Bootstrap heading</p>

Настройка заголовков

С помощью входящих в комплект служебные классы, чтобы воссоздать маленький вторичный текст от Bootstrap 3.

Fancy display heading

With faded secondary text

<h4>
  Fancy display heading
  <small>With faded secondary text</small>
</h4>

Отображение заголовков

Традиционной рубрике элементы предназначены для работы в мясе содержание страницы. Когда вам нужен Заголовок, чтобы выделиться, используйте отображение заголовоков—более крупная, чуть более самоуверенные стиль заголовка.

<h2>Display 1</h2>
<h2>Display 2</h2>
<h2>Display 3</h2>
<h2>Display 4</h2>

Выделение

Создайте выделенный параграф путем добавления . lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p>
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>

Встроенные текстовые элементы

Стайлинг для общего встроенные элементы HTML5.

You can use the mark tag to highlight text.

~~This line of text is meant to be treated as deleted text.~~

~~This line of text is meant to be treated as no longer accurate.~~

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

<p>You can use the mark tag to <mark>highlight</mark> text. </p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

.mark и .small занятия также можно применить те же стили, как <mark> и <small>, избегая любых нежелательных семантических последствий, которые теги доведет.

Пока не показано выше, не стесняйтесь использовать <b> и <i> в HTML5. <b> предназначен для выделения слова или фразы без передачи дополнительного значения в то время как <i> в основном для голоса, технических терминов и т. д.

Текстовые утилиты

Изменение выравнивания текста, преобразование, стиль, вес и цвет с текстовые утилиты.

Аббревиатуры

Стилизованные реализация языка HTML <abbr> элемент аббревиатур и сокращений, чтобы показать расширенную версию на наведение. Аббревиатуры с title атрибут светло пунктирной нижней границы и помочь курсора на наведение, обеспечивая дополнительный контекст в наведение и для пользователей вспомогательных технологий.

Добавьте .initialism аббревиатуры для легкого уменьшения размера шрифта.

attr

HTML

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language">HTML</abbr></p>

Цитаты

За цитирование блоки Контента из другого источника в документе. Обертывание <blockquote> вокруг HTML-код Как цитата.

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>

Именование источника

Добавьте <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 для выравнивания цитаты справа.

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>

Списки

Без стиля

Удаление 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

<ul>
  <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

<ul>
  <li>Lorem ipsum</li>
  <li>Phasellus iaculis</li>
  <li>Nulla volutpat</li>
</ul>

Выровненный список описаний

Согласовать условия и описания по горизонтали с помощью нашей блочной системы предопределенных классов (или семантические миксины). На более длительные сроки, по желанию можно добавить .text-truncate класс для усечения текста с многоточием.

Description lists

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.

Nesting

Nested definition list: Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

<dl>
  <dt>Description lists</dt>
  <dd>A description list is perfect for defining terms.</dd>
  <dt>Euismod</dt>
  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
  <dd>Donec id elit non mi porta gravida at eget metus.</dd>
  <dt>Malesuada porta</dt>
  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
  <dt>Truncated term is truncated</dt>
  <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
  <dt>Nesting</dt>
  <dd>
    <dl>
      <dt>Nested definition list</dt>
      <dd>Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc. </dd>
    </dl>
  </dd>
</dl>

Адаптивная типография

Responsive typography относится к масштабирования текста и составляющих просто регулировать корневого элемента font-size в серии медиа запросы. Bootstrap не сделает это за вас, но это довольно легко добавить, если вам это нужно.

Вот пример на практике. Выбирайте те font-size и медиа запросы, которые пожелаете.

html {
  font-size: 14px;
}
@include media-breakpoint-up(sm) {
  html {
    font-size: 16px;
  }
}
@include media-breakpoint-up(md) {
  html {
    font-size: 20px;
  }
}
@include media-breakpoint-up(lg) {
  html {
    font-size: 28px;
  }
}

Типография · Bootstrap v4.6

Посмотреть на GitHub

Глобальные настройки

Bootstrap устанавливает базовые глобальные стили отображения, типографики и ссылок. Когда требуется больше контроля, проверьте текстовые служебные классы.

Используйте собственный стек шрифтов, который выбирает лучшее семейство шрифтов для каждой ОС и устройства.
Для более инклюзивной и доступной шкалы шрифтов мы используем корневой каталог браузера по умолчанию , размер шрифта (обычно 16 пикселей), чтобы посетители могли настроить значения по умолчанию в своем браузере по мере необходимости.
Используйте атрибуты $font-family-base , $font-size-base и $line-height-base в качестве нашей типографской базы, применяемой к .
Установите глобальный цвет ссылки с помощью $link-color и примените подчеркивание ссылки только к : наведите курсор на .
Используйте $body-bg , чтобы установить background-color на ( #fff по умолчанию).

Эти стили можно найти в _reboot. scss , а глобальные переменные определены в _variables.scss . Обязательно установите $font-size-base в rem .

Рубрики

Доступны все заголовки HTML от

до

Заголовок	Пример
	х2. Заголовок начальной загрузки
	х3. Заголовок начальной загрузки
	х4. Заголовок начальной загрузки
	h5. Заголовок начальной загрузки
	h5. Заголовок начальной загрузки
	h6. Заголовок начальной загрузки

h2. Заголовок начальной загрузки

h3. Заголовок начальной загрузки

h4. Заголовок начальной загрузки

h5. Заголовок начальной загрузки

h6. Заголовок начальной загрузки

9Также доступны классы от 0125

.h2 до .h6 , когда вы хотите подобрать стиль шрифта заголовка, но не можете использовать связанный элемент HTML.

х2. Заголовок начальной загрузки

h3. Заголовок начальной загрузки

h4. Заголовок начальной загрузки

h5. Заголовок начальной загрузки

h6. Заголовок начальной загрузки

h2. Заголовок начальной загрузки

h3. Заголовок начальной загрузки

h4. Заголовок начальной загрузки

h5. Заголовок начальной загрузки

h6. Заголовок начальной загрузки

Настройка заголовков

Используйте включенные служебные классы, чтобы воссоздать небольшой вторичный текст заголовка из Bootstrap 3.

Необычный заголовок дисплея

С блеклым вторичным текстом

 
  Необычный заголовок дисплея
  
С блеклым второстепенным текстом

Показать заголовки

Традиционные элементы заголовков лучше всего подходят для содержания вашей страницы. Если вам нужен заголовок, чтобы выделиться, рассмотрите возможность использования отображает заголовок — более крупный и немного более самоуверенный стиль заголовка. Имейте в виду, что эти заголовки по умолчанию не адаптивны, но можно включить адаптивные размеры шрифта.

Дисплей 1

Дисплей 2

Дисплей 3

Дисплей 4

  Отображение 1 
 Экран 2 
 Экран 3 
 Экран 4

Свинец

Выделите абзац, добавив . lead .

Это вводной абзац. Он выделяется среди обычных абзацев.

Элементы встроенного текста

Стили для обычных встроенных элементов HTML5.

Вы можете использовать тег для выделения текста .

~~Эта строка текста должна рассматриваться как удаленный текст.~~

~~Эта строка текста считается неточной.~~

Эта строка текста должна рассматриваться как дополнение к документу.

Эта строка текста будет отображаться как подчеркнутая

Эта строка текста должна рассматриваться как мелкий шрифт.

Эта строка выделена жирным шрифтом.

Эта строка выделена курсивом.

Вы можете использовать тег mark, чтобы выделить текст.

~~Эта строка текста должна рассматриваться как удаленный текст.~~

~~Эта строка текста больше не соответствует действительности.~~

Эта строка текста должна рассматриваться как дополнение к документу.

Эта строка текста будет отображаться как подчеркнутая

Эта строка текста должна рассматриваться как мелкий шрифт.

Эта строка выделена жирным шрифтом.

Эта строка выделена курсивом.

Также доступны классы

.mark и .small для применения тех же стилей, что и и , избегая любых нежелательных семантических последствий, которые могут иметь теги.

Хотя это не показано выше, не стесняйтесь использовать и в HTML5. предназначен для выделения слов или фраз без придания им дополнительной важности, тогда как в основном предназначен для голосовых, технических терминов и т. д.

Текстовые утилиты

Изменяйте выравнивание текста, трансформируйте его, стиль, толщину и цвет с помощью наших текстовых и цветных утилит.

Сокращения

Стилизованная реализация HTML-элемента для аббревиатур и акронимов для отображения расширенной версии при наведении курсора. Аббревиатуры имеют подчеркивание по умолчанию и получают курсор справки, чтобы предоставить дополнительный контекст при наведении курсора и пользователям вспомогательных технологий.

Добавить .инициализм на аббревиатуру для немного меньшего размера шрифта.

атрибут

HTML

 атрибут
HTML

Блок-котировки

Для цитирования блоков содержимого из другого источника в вашем документе. Оберните

вокруг любого HTML в качестве цитаты.
Известная цитата, содержащаяся в элементе blockquote.
<цитата>
Известная цитата, содержащаяся в элементе blockquote.

Наименование источника

Добавьте <нижний колонтитул> для идентификации источника. Заключите название исходной работы в .

Известная цитата, содержащаяся в элементе blockquote.

 <цитата>
  Известная цитата, содержащаяся в элементе blockquote.
  Кто-то известен в исходном названии

Выравнивание

При необходимости используйте текстовые утилиты, чтобы изменить выравнивание цитаты.

Известная цитата, содержащаяся в элементе blockquote.

 <цитата>
  Известная цитата, содержащаяся в элементе blockquote.
  Кто-то известен в исходном названии

Известная цитата, содержащаяся в элементе blockquote.

 <цитата>
  Известная цитата, содержащаяся в элементе blockquote.
  Кто-то известен в исходном названии

Списки

Без стиля

Удалите стиль списка по умолчанию и левое поле для элементов списка (только непосредственные дочерние элементы). Это применимо только к непосредственным дочерним элементам списка , что означает, что вам также нужно будет добавить класс для любых вложенных списков.

Это список.
Выглядит совершенно без стиля.
Структурно это все еще список.
Однако этот стиль применяется только к непосредственным дочерним элементам.
Вложенные списки: не затрагиваются этим стилем все равно будет показывать пулю и иметь соответствующее левое поле
Это все еще может пригодиться в некоторых ситуациях.

 <ул>
  Это список.
  Похоже, он полностью не оформлен.
  Структурно это по-прежнему список.
  Однако этот стиль применяется только к непосредственным дочерним элементам.
  Вложенные списки:
    <ул>
      
этот стиль не влияет
      все равно будет отображаться маркер
      и иметь соответствующее левое поле
    
  
  В некоторых ситуациях это может пригодиться.

`Встроенный`

Удалить маркеры списка и применить небольшое поле с комбинацией двух классов, .list-inline и .list-inline-item .

Это элемент списка.
И еще один.
Но они отображаются встроенными.

 <ул>
  Это элемент списка.
  И еще один.
  Но они отображаются встроенными.

`Выравнивание списка описаний`

Выровняйте термины и описания по горизонтали, используя предопределенные классы нашей системы сетки (или семантические примеси). Для более длинных терминов вы можете дополнительно добавить класс .text-truncate , чтобы обрезать текст многоточием.

Списки описаний

Список описаний идеально подходит для определения терминов.

Срок

Определение термина.

И еще текст определения заполнителя.

Другой термин

Это определение короткое, поэтому без лишних абзацев и прочего.

Усеченный термин усекается

Это может быть полезно, когда места мало. Добавляет многоточие в конце.

Вложение

Вложенный список определений: Я слышал, тебе нравятся списки определений. Позвольте мне поместить список определений в ваш список определений.

 <дл>
  Списки описаний
  Список описаний идеально подходит для определения терминов.
  Срок
  <дд>
    Определение термина. 
    И еще немного текста определения заполнителя.
  
  Другой термин
  Это определение короткое, поэтому без лишних абзацев и прочего.
  Усеченный термин усекается
  Это может быть полезно, когда места мало. Добавляет многоточие в конце.
  Вложение
  <дд>
    <дл>
      Вложенный список определений
      Я слышал, вам нравятся списки определений. Позвольте мне поместить список определений в ваш список определений.

`Адаптивные размеры шрифта`

Начиная с версии 4.3.0, Bootstrap поставляется с возможностью включения адаптивных размеров шрифта, что позволяет более естественно масштабировать текст в зависимости от размера устройства и области просмотра. RFS можно включить, изменив переменную Sass $enable-responsive-font-sizes на true и перекомпилировав Bootstrap.

Для поддержки RFS мы используем миксин Sass для замены наших обычных свойств размера шрифта . Адаптивные размеры шрифта будут объединены в calc() работает со смесью rem и единиц измерения окна просмотра, чтобы обеспечить адаптивное поведение масштабирования. Подробнее о RFS и его конфигурации можно найти в репозитории GitHub.

`Bootstrap 4 Типография`

Сетка Bootstrap
Таблицы начальной загрузки

Bootstrap включает стили, определяющие внешний вид текстовых элементов.

На этой странице показано, как определенные текстовые элементы отображаются при использовании Bootstrap (часто без использования каких-либо классов). Как правило, любая страница, которая ссылается на таблицу стилей Bootstrap 4, будет отображать эти элементы таким же образом (если только они не будут переопределены другими стилями).

`Основной текст`

Глобальный размер шрифта Bootstrap 4 по умолчанию равен 16px (применяется к элементу ), а элемент также имеет размер шрифта из 1rem 9001 3 применяется.

ПодзаголовокЗаголовок 2 ПодзаголовокЗаголовок 3 ПодзаголовокЗаголовок 4 ПодзаголовокЗаголовок 5 ПодзаголовокЗаголовок 6 Подзаголовок Показать заголовки Заголовки дисплея выделяются больше, чем обычные заголовки. Существует 4 размера заголовка дисплея ( .display-1 , .display-2 , .display-3 и .display-4 ). Так, например, элемент может отображаться в 4 различных размерах с использованием классов заголовков дисплея. Чтобы создать заголовок дисплея, добавьте один из вышеперечисленных классов к элементу заголовка. Ведущий текст Вы можете выделить абзац, используя класс Bootstrap .lead . Выделенный текст Элемент HTML представляет текст как помеченный или выделенный для справочных целей из-за его релевантности в другом контексте. Вот пример рендеринга этого элемента в Bootstrap: Сокращения В HTML представляет собой аббревиатуру или акроним. 9Атрибут 0012 title можно использовать для расширения аббревиатуры. В Bootstrap аббревиатуры с атрибутом title отображаются со светлой пунктирной нижней границей и курсором подсказки при наведении. Инициализм Вы можете добавить класс Bootstrap .initialism , чтобы отображать аббревиатуру шрифтом немного меньшего размера. Блок-котировки Чтобы применить стили Bootstrap к элементу , используйте команду .blockquote класс. <цитата> Сейчас самый важный момент в вашей жизни. Самый важный человек в вашей жизни — это тот, с кем вы находитесь сейчас, а самое важное дело в вашей жизни — это то, чем вы занимаетесь сейчас. Цитаты — Источник Bootstrap отображает элементы и , вложенные внутрь элемента , следующим образом:0003 <цитата> Большинство из нас переполнены всевозможными убеждениями. Мы пропитаны здравым смыслом и преобладающей мудростью нашей культуры, традиций, сообществ, профессии, семьи и друзей. Том Кэмпбелл в фильме Мой большой палец ноги Цитаты — Мировоззрение Вы можете использовать текстовые утилиты Bootstrap, чтобы указать выравнивание цитаты. Например, .text-center : <цитата> Большинство из нас переполнены всевозможными убеждениями. Мы пропитаны здравым смыслом и преобладающей мудростью нашей культуры, традиций, сообществ, профессии, семьи и друзей. Том Кэмпбелл в фильме Мой большой палец ноги и .text-right : <цитата> Большинство из нас переполнены всевозможными убеждениями. Мы пропитаны здравым смыслом и преобладающей мудростью нашей культуры, традиций, сообществ, профессии, семьи и друзей. Том Кэмпбелл в фильме Мой большой палец ноги Списки Bootstrap применяет различные стили и имеет ряд классов специально для списков. Листы — без стиля Вы можете использовать класс Bootstrap .list-unstyled для отображения списков без их стиля по умолчанию list-style и left-margin : Списки — Встроенный Вы можете использовать классы Bootstrap .list-inline и .list-inline-item для отображения списков как display: inline-block и применить некоторые отступы: Списки описаний В Bootstrap списки описаний отображаются следующим образом: <дл> Арахат "Совершенный", преодолевший Три Яда: Желание, Ненависть и Невежество. Бодхи Пробужденная мудрость. Дзен Медитативное погружение, при котором устраняются все дуалистические различия. Списки описаний — горизонтальные Вы можете выровнять термины и описания по горизонтали, добавив класс Bootstrap .row к тегу dl , а затем любой из предопределенных классов сетки к тегам dt и dd . <дл> Арахат "Совершенный", преодолевший Три Яда: Желание, Ненависть и Невежество. Бодхи Пробужденная мудрость. Дзен Медитативное погружение, при котором устраняются все дуалистические различия. Обратите внимание, что это работает, только когда область просмотра шире. Если вы не видите никакой разницы между отображением этого примера и предыдущего, вы можете открыть предварительный просмотр в новом окне. Если он по-прежнему не отличается, возможно, вам потребуется устройство большего размера для просмотра этого примера. Bootstrap 3 использовал .dl-horizontal , но Bootstrap 4 использует класс .row . Код В Bootstrap элемент отображается следующим образом: Ввод с клавиатуры В Bootstrap элемент отображается следующим образом: Предварительно отформатированный текст В Bootstrap элемент отображается следующим образом: Вы также можете добавить класс Bootstrap .

Bootstrap 4 типография: Типография · Bootstrap v4.6

Типография · Bootstrap v4.6

Глобальные настройки

Заголовки

Настройка заголовков

Необычный заголовок дисплея

Отображение заголовков

Выделение

Встроенные текстовые элементы

Текстовые утилиты

Аббревиатура

Цитаты

Название источника

Выравнивание

Списки

Без стиля

Строковый

Выравнивание списка описаний

Размеры адаптивного шрифта

Типографика · Bootstrap на русском

Содержание

Глобальные параметры

Заголовки

h3. Bootstrap heading

h4. Bootstrap heading

h5.

h5. Bootstrap heading

h6. Bootstrap heading

Настройка заголовков

Fancy display heading

Отображение заголовков

Выделение

Встроенные текстовые элементы

Текстовые утилиты

Аббревиатуры

Цитаты

Именование источника

Обратное позиционирование

Списки

Без стиля

Встроенный

Выровненный список описаний

Адаптивная типография

Типография · Bootstrap v4.6

Глобальные настройки

Рубрики

h2. Заголовок начальной загрузки

h3. Заголовок начальной загрузки

h4. Заголовок начальной загрузки

h5. Заголовок начальной загрузки

h5. Заголовок начальной загрузки

h6. Заголовок начальной загрузки

Настройка заголовков

Необычный заголовок дисплея

Необычный заголовок дисплея

Показать заголовки

Отображение 1

Экран 2

Экран 3

Экран 4

Свинец

Элементы встроенного текста

Текстовые утилиты

Сокращения

Блок-котировки

Наименование источника

Выравнивание

Списки

Без стиля

Встроенный

Выравнивание списка описаний

Адаптивные размеры шрифта

Bootstrap 4 Типография

Основной текст

Рубрики

Классы заголовков

Подзаголовки

Заголовок 1

`Встроенный`

`Выравнивание списка описаний`

`Адаптивные размеры шрифта`

`Bootstrap 4 Типография`

`Основной текст`