HTML Bootstrap 5 текст заголовок список описание

HTML Bootstrap 5 Типографика

Описание

Типографика примеры текст, заголовок, список, описание.

Название

Typography Bootstrap 5

Текст, Заголовок, Список, Описание

Фреймворк

Bootstrap 5

Группа

Контент (content)

Источник

Typography Bootstrap 5

Языки программирования

CSS, HTML, JavaScript, Sass, Less

Принцип

Как это работает?

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

HTML текст

Bootstrap 5 использует размер текста в браузере по умолчанию, обычно 16px. Бутстрап 5 использует системные шрифты пользователя и выбирает лучшее семейство шрифтов для каждого устройства и операционной системы. Можно полностью изменить любое из этих значений в соответствии со своим сайтом.

Форматирование HTML

<p>Выделенный текст</p>
<p><s>Зачеркнутый текст</s></p>
<p><u>Подчеркнутый текст</u></p>
<p><small>Мелкий текст</small></p>
<p><strong>Жирный текст</strong></p>
<p><em>Курсивный текст</em></p>

Аббревиатуры и акронимы HTML

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

Высота строки HTML

<p class="lh-1">На этой странице: Высота строки текста lh-1 расстояние между строками текста lh-1 интерлиньяж lh-1 междустрочный интервал lh-1 межстрочный интервал lh-1 отступы между строками lh-1 межстрочный интервал HTML lh-1 интерлиньяж HTML Bootstrap 5 lh-1 текст lh-sm оформление текста lh-1 интерлиньяж Бутстрап lh-1 утилиты lh-1</p>
<p class="lh-sm">На этой странице: Высота строки текста lh-sm расстояние между строками текста lh-sm интерлиньяж lh-sm междустрочный интервал lh-sm межстрочный интервал lh-sm отступы между строками lh-sm межстрочный интервал HTML lh-sm интерлиньяж HTML Bootstrap 5 lh-sm текст lh-sm оформление текста lh-sm интерлиньяж Бутстрап lh-sm утилиты lh-sm</p>
<p class="lh-base">На этой странице: Высота строки текста lh-base расстояние между строками текста lh-base интерлиньяж lh-base междустрочный интервал lh-base межстрочный интервал lh-base отступы между строками lh-base межстрочный интервал HTML lh-base интерлиньяж HTML Bootstrap 5 lh-base текст lh-base оформление текста lh-base интерлиньяж Бутстрап lh-base утилиты lh-base</p>
<p class="lh-lg">На этой странице: Высота строки текста lh-lg расстояние между строками текста lh-lg интерлиньяж lh-lg междустрочный интервал lh-lg межстрочный интервал lh-lg отступы между строками lh-lg межстрочный интервал HTML lh-lg интерлиньяж HTML Bootstrap 5 lh-lg текст lh-base оформление текста lh-lg интерлиньяж Бутстрап lh-lg утилиты lh-lg</p>

Заголовок HTML

Классы h1 — h6 можно использовать для стилизации текста, чтобы отобразить параграф, как заголовок h1 — h6

Заголовок h1 class="h1"

Заголовок h2 class="h2"

Заголовок h3 class="h3"

Заголовок h4 class="h4"

Заголовок h5 class="h5"

Заголовок h6 class="h6"

<p class="h1">Заголовок h1 <code>class="h1"</code></p>
<p class="h2">Заголовок h2 <code>class="h2"</code></p>
<p class="h3">Заголовок h3 <code>class="h3"</code></p>
<p class="h4">Заголовок h4 <code>class="h4"</code></p>
<p class="h5">Заголовок h5 <code>class="h5"</code></p>
<p class="h6">Заголовок h6 <code>class="h6"</code></p>

Стандартный заголовок с применением тега HTML h1 — h6

<h1>h1 heading</h1>
<h2>h2 heading</h2>
<h3>h3 heading</h3>
<h4>h4 heading</h4>
<h5>h5 heading</h5>
<h6>h6 heading</h6>

Список HTML

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

<ul class="list-unstyled">
  <li>Это список.</li>
  <li>Он выглядит совершенно не стилизованным.</li>
  <li>Структурно это все еще список.</li>
  <li>Однако этот стиль применяется только к непосредственным дочерним элементам.</li>
  <li>Вложенные списки:
    <ul>
      <li>не затронуты этим стилем</li>
      <li>все равно покажет маркер</li>
      <li>в соответствующем левом углу</li>
    </ul>
  </li>
  <li>Это все еще может пригодиться в некоторых ситуациях.</li>
</ul>

Описание

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

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

Срок

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

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

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

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

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

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

Вложение

Вложенный список определений

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

<dl class="row">
  <dt class="col-sm-3">Списки описаний</dt>
  <dd class="col-sm-9">Список описаний идеально подходит для определения терминов.</dd>

  <dt class="col-sm-3">Срок</dt>
  <dd class="col-sm-9">
    <p>Определение термина.</p>
    <p>И еще немного текста определения заполнителя.</p>
  </dd>

  <dt class="col-sm-3">Другой термин</dt>
  <dd class="col-sm-9">Это определение короткое, поэтому никаких лишних абзацев и прочего.</dd>

  <dt class="col-sm-3 text-truncate">Усеченный термин усечен</dt>
  <dd class="col-sm-9">Это может быть полезно, когда пространство ограничено. Добавляет многоточие в конце.</dd>

  <dt class="col-sm-3">Вложение</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Вложенный список определений</dt>
      <dd class="col-sm-8">Я слышал, тебе нравятся списки определений. Позвольте мне поместить список определений в ваш список определений.</dd>
    </dl>
  </dd>
</dl>

HTML

Похожие статьи

Accordion Bootstrap 5 — аккордеон JS HTML код