Контент

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

Типографика

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

Содержание

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

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

  • Используйте собственный стек шрифтов который выбирает наилучшее font-family для каждой ОС и устройства.
  • Для более инклюзивной и доступной шкалы типов мы предполагаем по умолчанию браузера root 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.

Заголовки

Доступны все заголовки HTML от <h1> до <h6>.

h1. Bootstrap heading

 Semibold 2.5rem (40px)

h2. Bootstrap heading

 Semibold 2rem (32px)

h3. Bootstrap heading

 Semibold 1.75rem (28px)

h4. Bootstrap heading

 Semibold 1.5rem (24px)
h5. Bootstrap heading
 Semibold 1.25rem (20px)
h6. Bootstrap heading
 Semibold 1rem (16px) 
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

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

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

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

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

Fancy display heading With faded secondary text 

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

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

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

Display 1

Display 2

Display 3

Display 4

 
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

Lead

Сделайте выделение абзаца, добавив .lead.

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

<p class="lead">
  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> для аббревиатур и сокращений для отображения расширенной версии при зависании. Сокращения имеют подчеркивание по умолчанию из Normalize.css и получают указатель справки, чтобы обеспечить дополнительный контекст при наведении и для пользователей ассистивных технологий.

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

attr

HTML

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

Блок-цитаты

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

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

Добавьте <footer class="blockquote-footer"> для идентификации источника. Заверните имя исходной работы в <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-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.

Someone famous in Source Title
<blockquote class="blockquote blockquote-reverse">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Списки

Unstyled

Удалите по умолчанию 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 class="list-unstyled">
  <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>

Inline

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

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">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 class="row">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Euismod</dt>
  <dd class="col-sm-9">Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
  <dd class="col-sm-9 offset-sm-3">Donec id elit non mi porta gravida at eget metus.</dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>

  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

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

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

Вот пример этого на практике. Выбирайте любые font-sizes и медиа-запросы, которые вы хотите.

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;
  }
}

Комментарии

На сайте функционирует система проверки ошибок. Обнаружив неточность в тексте, выделите ее и нажмите Ctrl + Enter.

Поддержать проект

x