Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

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

Содержание

Типография · 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

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

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, включая глобальные настройки, заголовки, основной текст, списки и многое другое.

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

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. Заголовок начальной загрузки
 
 
h5. Заголовок начальной загрузки
 
 
h6. Заголовок начальной загрузки
 
 9Также доступны классы от 0125 
  .h2  до  .h6 , когда вы хотите подобрать стиль шрифта заголовка, но не можете использовать связанный элемент HTML. 

 
 х2. Заголовок начальной загрузки 
 
 h3. Заголовок начальной загрузки 
 
 h4. Заголовок начальной загрузки 
 
 h5. Заголовок начальной загрузки 
 
 h5. Заголовок начальной загрузки 
 
 h6. Заголовок начальной загрузки 
 
 
h2. Заголовок начальной загрузки


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


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


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


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 Типография