Bootstrap как изменить шрифт - Исправление ошибок и поиск оптимальных решений проблем

Выравнивание текста

Легко выравнивайте текст в соответствии с выравниванием компонентов с помощью классов выравнивания. Для выравнивания влево, вправо и по центру доступны адаптивные классы, которые используют те же контрольные точки ширины окна просмотра, что и система сеток.

Текст с выравниванием по левому краю для всех размеров области просмотра.

Выровненный по центру текст на всех размерах области просмотра.

Текст с выравниванием по правому краю для всех размеров области просмотра.

Выровненный по левому краю текст на размерных области просмотра SM (маленький) или шире.

Выровненный по левому краю текст на размерных области просмотра MD (средний) или шире.

Выровненный по левому краю текст на размерных области просмотра LG (большой) или шире.

Выровненный по левому краю текст на размерных области просмотра XL (очень большой) или шире.

<p class="text-start">Текст с выравниванием по левому краю для всех размеров области просмотра.</p>
<p class="text-center">Выровненный по центру текст на всех размерах области просмотра.</p>
<p class="text-end">Текст с выравниванием по правому краю для всех размеров области просмотра.</p>

<p class="text-sm-start">Выровненный по левому краю текст на размерных области просмотра SM (маленький) или шире.</p>
<p class="text-md-start">Выровненный по левому краю текст на размерных области просмотра MD (средний) или шире.</p>
<p class="text-lg-start">Выровненный по левому краю текст на размерных области просмотра LG (большой) или шире.</p>
<p class="text-xl-start">Выровненный по левому краю текст на размерных области просмотра XL (очень большой) или шире.</p>

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

Перенос текста и переполнение

Оберните текст классом .text-wrap.

Этот текст следует обернуть.

<div class="badge bg-primary text-wrap" style="width: 6rem;">
  Этот текст следует обернуть.
</div>

Запретить перенос текста с помощью класса .text-nowrap.

Этот текст должен переполнять родительский.

<div class="text-nowrap bd-highlight" style="width: 8rem;">
  Этот текст должен переполнять родительский.
</div>

Разрыв слов

Запретите длинным строкам текста нарушать компоновку ваших компонентов, используя .text-break для установки word-wrap: break-word и word-break: break-word. Мы используем word-wrap вместо более распространенного overflow-wrap через переполнение для более широкой поддержки браузеров и добавляем устаревшее word-break: break-word, чтобы избежать проблем с гибкими контейнерами.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>

Обратите внимание, что разрыв слов на арабском языке невозможен, который является наиболее часто используемым языком RTL. Поэтому .text-break удаляется из нашего RTL-скомпилированного CSS.

Трансформация текста

Трансформируйте текст в компонентах с помощью классов заглавных букв.

Текст в нижнем регистре.

Текст в верхнем регистре.

Заглавный текст.

<p class="text-lowercase">Текст в нижнем регистре.</p>
<p class="text-uppercase">Текст в верхнем регистре.</p>
<p class="text-capitalize">Заглавный текст.</p>

Обратите внимание, как .text-capitalize изменяет только первую букву каждого слова, не затрагивая регистр любых других букв.

Размер шрифта

Быстро изменить размер шрифта текста font-size. В то время как наши классы заголовков (например, .h1–.h6) применяют font-size, font-weight и line-height, эти утилиты применяют только font-size. Размер этих утилит соответствует элементам заголовка HTML, поэтому по мере увеличения числа их размер уменьшается.

.fs-1 text

.fs-2 text

.fs-3 text

.fs-4 text

.fs-5 text

.fs-6 text

<p class="fs-1">.fs-1 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p>

Настройте свой доступный font-size, изменив карту Sass $font-sizes.

Толщина текста и курсив

Изменяйте толщину (жирность) или выделите текст курсивом.

Жирный текст.

Жирный текст (относительно родительского элемента).

Нормальная толщина текста.

Легкий текст.

Легкий текст (относительно родительского элемента).

Курсивный текст.

Текст без стиля шрифта

<p class="fw-bold">Жирный текст.</p>
<p class="fw-bolder">Жирный текст (относительно родительского элемента).</p>
<p class="fw-normal">Нормальная толщина текста.</p>
<p class="fw-light">Light weight text.</p>
<p class="fw-lighter">Легкий текст (относительно родительского элемента).</p>
<p class="fst-italic">Курсивный текст.</p>
<p class="fst-normal">Текст без стиля шрифта</p>

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

Измените высоту строки с помощью утилит .lh-*.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.

<p class="lh-1">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p class="lh-sm">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p class="lh-base">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p class="lh-lg">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.</p>

Моноширинный текст (ширина каждого символа одинакова)

Измените выделение на наш моноширинный стек с помощью .text-monospace.

Это моноширинный текст

<p class="font-monospace">Это моноширинный текст</p>

Сброс цветов

Сбросьте цвет текста или ссылки с помощью .text-reset для наследования цвета от своего родителя.

<p class="text-muted">
  Неяркий текст <a href="#" class="text-reset">с бесцветной ссылкой</a>.
</p>

Оформление текста

Украшайте текст в компонентах классами оформления текста.

<p class="text-decoration-underline">Под этим текстом есть линия.</p>
<p class="text-decoration-line-through">По этому тексту проходит линия.</p>
<a href="#" class="text-decoration-none">Оформление этой ссылки удалено</a>

Sass

Переменные

// stylelint-disable value-keyword-case
$font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
// stylelint-enable value-keyword-case
$font-family-base:            var(--#{$variable-prefix}font-sans-serif);
$font-family-code:            var(--#{$variable-prefix}font-monospace);

// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
// $font-size-base affects the font size of the body text
$font-size-root:              null;
$font-size-base:              1rem; // Assumes the browser default, typically `16px`
$font-size-sm:                $font-size-base * .875;
$font-size-lg:                $font-size-base * 1.25;

$font-weight-lighter:         lighter;
$font-weight-light:           300;
$font-weight-normal:          400;
$font-weight-bold:            700;
$font-weight-bolder:          bolder;

$font-weight-base:            $font-weight-normal;

$line-height-base:            1.5;
$line-height-sm:              1.25;
$line-height-lg:              2;

$h1-font-size:                $font-size-base * 2.5;
$h2-font-size:                $font-size-base * 2;
$h3-font-size:                $font-size-base * 1.75;
$h4-font-size:                $font-size-base * 1.5;
$h5-font-size:                $font-size-base * 1.25;
$h6-font-size:                $font-size-base;

Карты

Утилиты с размером шрифта генерируются из этой карты в сочетании с нашим API утилит.

$font-sizes: (
  1: $h1-font-size,
  2: $h2-font-size,
  3: $h3-font-size,
  4: $h4-font-size,
  5: $h5-font-size,
  6: $h6-font-size
);

API утилит

Утилиты шрифта и текста указаны в нашем API утилит в scss/_utilities.scss. Узнайте, как использовать API утилит.

    "font-family": (
      property: font-family,
      class: font,
      values: (monospace: var(--#{$variable-prefix}font-monospace))
    ),
    "font-size": (
      rfs: true,
      property: font-size,
      class: fs,
      values: $font-sizes
    ),
    "font-style": (
      property: font-style,
      class: fst,
      values: italic normal
    ),
    "font-weight": (
      property: font-weight,
      class: fw,
      values: (
        light: $font-weight-light,
        lighter: $font-weight-lighter,
        normal: $font-weight-normal,
        bold: $font-weight-bold,
        bolder: $font-weight-bolder
      )
    ),
    "line-height": (
      property: line-height,
      class: lh,
      values: (
        1: 1,
        sm: $line-height-sm,
        base: $line-height-base,
        lg: $line-height-lg,
      )
    ),
    "text-align": (
      responsive: true,
      property: text-align,
      class: text,
      values: (
        start: left,
        end: right,
        center: center,
      )
    ),
    "text-decoration": (
      property: text-decoration,
      values: none underline line-through
    ),
    "text-transform": (
      property: text-transform,
      class: text,
      values: lowercase uppercase capitalize
    ),
    "white-space": (
      property: white-space,
      class: text,
      values: (
        wrap: normal,
        nowrap: nowrap,
      )
    ),
    #34;word-wrap": (
      property: word-wrap word-break,
      class: text,
      values: (break: break-word),
      rtl: false
    ),

Источник

Bootstrap 5 Text

Documentation and examples for common text utilities to control alignment, wrapping, weight,
and more.

Text alignment

Easily realign text to components with text alignment classes. For left, right, and center
alignment, responsive classes are available that use the same viewport width breakpoints as
the grid system.

Left aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

Right aligned text on all viewport sizes.

Left aligned text on viewports sized SM (small) or wider.

Left aligned text on viewports sized MD (medium) or wider.

Left aligned text on viewports sized LG (large) or wider.

Left aligned text on viewports sized XL (extra-large) or wider.

Note: We don’t provide utility classes for justified text. While,
aesthetically, justified text might look more appealing, it does make word-spacing more random
and therefore harder to read.

Text wrapping and overflow

Wrap text with a .text-wrap class.

Prevent text from wrapping with a .text-nowrap class.

This text should overflow the parent.

Word break

Prevent long strings of text from breaking your components’ layout by using
.text-break to set word-wrap: break-word and
word-break: break-word. We use word-wrap instead of the more common
overflow-wrap for wider browser support, and add the deprecated
word-break: break-word to avoid issues with flex containers.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

Text transform

Transform text in components with text capitalization classes.

Lowercased text.

Uppercased text.

CapiTaliZed text.

Note how .text-capitalize only changes the first letter of each word, leaving the
case of any other letters unaffected.

Font weight and italics

Quickly change the font-weight or font-style of text with these
utilities. font-style utilities are abbreviated as .fst-* and
font-weight utilities are abbreviated as .fw-*.

Bold text.

Bolder weight text (relative to the parent element).

Normal weight text.

Light weight text.

Lighter weight text (relative to the parent element).

Italic text.

Text without font style

Line height

Change the line height with .lh-* utilities.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui.
Cras mattis pannenkoek purus sit amet fermentum. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras
mattis consectetur purus sit amet fermentum.

Monospace

Change a selection to our monospace font stack with .font-monospace.

Reset color

Reset a text or link’s color with .text-reset, so that it inherits the color from
its parent.

Text decoration

Decorate text in components with text decoration classes.

Источник

In Bootstrap 4, font-size defaults to using em or rem for fonts.

How can I increase the font-size for all viewport sizes? Because every element looks tiny.

asked Sep 1, 2017 at 11:35

Mukul KantMukul Kant

7,0225 gold badges36 silver badges53 bronze badges

Because Bootstrap 4 uses rem for the font-size unit of most of it’s elements, you can set the font-size in px on the HTML element in your own stylesheet and this will change the default sizing Bootstrap applies to your elements. I’ve included a link to a codeply project, so you can see it in action. The environment already has Bootstrap 4 loaded in it. If you change the value of the font-size for the html selector and run the project you can see how the sizing of the elements all change relative to the root element.

Adding three lines of CSS to your stylesheet should be pretty easy:

html {
    font-size: 16px;
}

answered Sep 1, 2017 at 14:44

Jade CowanJade Cowan

2,5131 gold badge17 silver badges32 bronze badges

You can use .h1 to .h6 bootstrap classes or you can make your own custom CSS class and define font size over here and put your class on your HTML element.

Mukul Kant

7,0225 gold badges36 silver badges53 bronze badges

answered Sep 1, 2017 at 14:47

Bootstrap 4: There’re range of classes you can use to customize your text:

h1 — h6
display-1 — display-4
small
lead

I.e:

<!--class="h3" class="display-3", class="small"-->
<div *ngIf="customer_selected" class="h5">
  <p>First name: {{selected_customer.first_name}}</p>
  <p>Last name: {{selected_customer.last_name}}</p>
</div>

answered Nov 22, 2019 at 5:59

7guyo7guyo

2,7691 gold badge27 silver badges31 bronze badges

You may also want to consider adding this:

<meta name="viewport" content="width=device-width, user-scalable=no" />

When I added this, my mobile browsers suddenly showed reasonable text sizes.

answered Dec 16, 2019 at 21:55

Alan BaljeuAlan Baljeu

2,3074 gold badges24 silver badges39 bronze badges

Источник

Документация и примеры типографии 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, от <h1> до <h6>.

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

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

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

h1. Заголовок bootstrap

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

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

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

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

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

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

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

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

Заголовок отображения
С выцветшим второстепенным текстом

<h3>
  Заголовок отображения
  <small class="text-muted">С выцветшим второстепенным текстом</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.

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

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

Блочные текстовые элементы

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

тег-выделитель для подсветки текста.

Удаленный текст.

~~Зачеркнутый.~~

Строка — дополнение к документу.

Подчеркнутая

Мелкий шрифт (типа нижний индекс).

Жирный текст.

Курсив.

<p>тег-выделитель для <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> выделяет цитаты, прямую речь, термины и т.д.

Классы текстовых утилит

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

Сокращения

Реализация элемента <abbr> нужна для показа полной версии акронимов и сокращений по наведению. Этот тег имеет подчеркивание по умолчанию и показывает “help-cursor” для дополнительного контекста, а также для помощи юзерам-инвалидам.

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

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

Цитаты

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

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

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

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

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

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

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

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

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

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

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

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

<blockquote class="blockquote text-right">
  <p class="mb-0">Известная цитата, содержащаяся в элементе цитаты.</p>
  <footer class="blockquote-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 class="list-unstyled">
  <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 class="list-inline">
  <li class="list-inline-item">This is a list item.</li>
  <li class="list-inline-item">And another one.</li>
  <li class="list-inline-item">But they're displayed inline.</li>
</ul>

Описание и выравнивание

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

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

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

  <dt class="col-sm-3">Term</dt>
  <dd class="col-sm-9">
    <p>Definition for the term.</p>
    <p>And some more placeholder definition text.</p>
  </dd>

  <dt class="col-sm-3">Another term</dt>
  <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</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">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 включает в себя простую и легко настраиваемую типографику для заголовков, основного текста, списков и т. д. Для еще большего контроля просмотрите textual utility classes.

Содержание

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

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

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 к аббревиатуре для немного меньшего размера шрифта.

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

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

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

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

Источник

Выравнивание текста

Перенос текста и переполнение

Разрыв слов

Трансформация текста

Размер шрифта

Толщина текста и курсив

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

Моноширинный текст (ширина каждого символа одинакова)

Сброс цветов

Оформление текста

Sass

Переменные

Карты

API утилит

Bootstrap 5 Text

Text alignment

Text wrapping and overflow

Word break

Text transform

Font size

Font weight and italics

Line height

Monospace

Reset color

Text decoration

I.e:

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

Заголовки

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

«Заголовок дисплея»

«Лид»

Блочные текстовые элементы

Классы текстовых утилит

Сокращения

Цитаты

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

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

Списки

Без элементов стилизации

Строковый

Описание и выравнивание

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

Типографика

Содержание

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

Заголовки

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

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

Fancy display heading With faded secondary text

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

Display 1

Display 2

Display 3

Display 4

Lead

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

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

Сокращения

Блок-цитаты

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

Обратный макет

Списки

Unstyled

Inline

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

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

Комментарии

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

Fancy display heading
With faded secondary text