in English

Типографіка

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

На цій сторінці

Глобальні налаштування

Bootstrap встановлює базові глобальні стилі відображення, типографіки та посилань. Якщо потрібен більший контроль, перевірте текстові класи корисності .

Використовуйте власний стек шрифтів , який вибирає найкращий font-familyдля кожної ОС і пристрою.
Для більш інклюзивної та доступної шкали типів ми використовуємо корінь веб-переглядача за замовчуванням font-size(зазвичай 16 пікселів), щоб відвідувачі могли за потреби налаштувати параметри свого браузера за замовчуванням.
Використовуйте атрибути $font-family-base, $font-size-baseі $line-height-baseяк нашу друкарську основу для <body>.
Встановіть глобальний колір посилання за допомогою $link-color.
Використовуйте $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 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

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

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

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

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

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

html

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

Вигадливий заголовок із вицвілим другорядним текстом

html

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

Відображення заголовків

Традиційні елементи заголовків створені для того, щоб найкраще працювати з вмістом вашої сторінки. Якщо вам потрібен заголовок, щоб виділятися, подумайте про використання відображуваного заголовка — більшого, дещо впевненішого стилю заголовка.

Дисплей 1

Дисплей 2

Дисплей 3

Дисплей 4

Дисплей 5

Дисплей 6

<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>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

Відображення заголовків налаштовується за допомогою $display-font-sizesкарти Sass і двох змінних $display-font-weightі $display-line-height.

Відображення заголовків можна налаштувати за допомогою двох змінних $display-font-familyі $display-font-style.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

Вести

Виділіть абзац, додавши .lead.

Це провідний абзац. Він виділяється із звичайних абзаців.

html

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

Вбудовані текстові елементи

Стиль для поширених вбудованих елементів HTML5.

Ви можете використовувати позначку, щобпідсвічуватитекст.

~~Цей рядок тексту має розглядатися як видалений текст.~~

~~Цей рядок тексту має вважатися неточним.~~

Цей рядок тексту має розглядатися як доповнення до документа.

Цей рядок тексту відображатиметься як підкреслений.

Цей рядок тексту має розглядатися як дрібний шрифт.

Цей рядок відображається жирним шрифтом.

Цей рядок відображається як текст, виділений курсивом.

html

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

Зауважте, що ці теги слід використовувати для семантичних цілей:

являє собою текст, який позначено або виділено для посилань або позначень.
представляє побічні коментарі та дрібний шрифт, як-от авторські права та юридичний текст.
<s>представляє елемент, який більше не актуальний або більше не точний.
представляє проміжок вбудованого тексту, який має бути відображено таким чином, щоб вказувати, що він має нетекстову анотацію.

Якщо ви хочете стилізувати свій текст, замість цього вам слід використовувати такі класи:

.markзастосовуватиме ті самі стилі, що й .
.smallзастосовуватиме ті самі стилі, що й .
.text-decoration-underlineзастосовуватиме ті самі стилі, що й .
.text-decoration-line-throughзастосовуватиме ті самі стилі, що й <s>.

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

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

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

Скорочення

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

Додайте .initialismдо абревіатури трохи менший розмір шрифту.

атрибут

HTML

html

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

Блок цитат

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

Добре відома цитата, що міститься в елементі blockquote.

html

<blockquote class="blockquote">
  <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

Називання джерела

Специфікація HTML вимагає, щоб атрибуція блокових цитат була розміщена за межами <blockquote>. Надаючи атрибуцію, загорніть <blockquote>її в a <figure>та використовуйте a <figcaption>або елемент рівня блоку (наприклад, ) із .blockquote-footerкласом. Обов’язково вставте також назву вихідної роботи <cite>.

Добре відома цитата, що міститься в елементі blockquote.

html

<figure>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Вирівнювання

За потреби використовуйте текстові утиліти, щоб змінити вирівнювання цитати.

Добре відома цитата, що міститься в елементі blockquote.

html

<figure class="text-center">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Добре відома цитата, що міститься в елементі blockquote.

html

<figure class="text-end">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

списки

Нестилізований

Видаліть стандартне list-styleта ліве поле для елементів списку (лише безпосередні дочірні елементи). Це стосується лише безпосередніх дочірніх елементів списку , тобто вам також потрібно буде додати клас для будь-яких вкладених списків.

Це список.
Виглядає абсолютно без стилю.
Структурно це все-таки список.
Однак цей стиль застосовується лише до безпосередніх дочірніх елементів.
Вкладені списки:
- не впливають на цей стиль
- все одно буде показувати кулю
- і мати відповідне ліве поле
Це може стати в нагоді в деяких ситуаціях.

html

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

Це пункт списку.
І ще один.
Але вони відображаються вбудовано.

html

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

Вирівнювання списку описів

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

Списки опису

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

термін

Визначення терміна.

І ще трохи тексту визначення заповнювача.

Інший термін

Це визначення коротке, тому немає зайвих абзаців чи чогось іншого.

Усічений термін – усічений

Це може бути корисно, коли місця мало. Додає крапку в кінці.

Гніздування

Список вкладених визначень: Я чув, що вам подобаються списки визначень. Дозвольте мені додати список визначень у ваш список визначень.

html

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

Чуйний розмір шрифту

У Bootstrap 5 за замовчуванням ми ввімкнули адаптивні розміри шрифту, що дозволяє більш природним чином масштабувати текст на різних пристроях і у вікні перегляду. Перегляньте сторінку RFS, щоб дізнатися, як це працює.

Сасс

Змінні

Заголовки мають деякі спеціальні змінні для розміру та інтервалу.

$headings-margin-bottom:      $spacer * .5;
$headings-font-family:        null;
$headings-font-style:         null;
$headings-font-weight:        500;
$headings-line-height:        1.2;
$headings-color:              null;

Різноманітні елементи типографіки, розглянуті тут і в Reboot , також мають спеціальні змінні.

$lead-font-size:              $font-size-base * 1.25;
$lead-font-weight:            300;

$small-font-size:             .875em;

$sub-sup-font-size:           .75em;

$text-muted:                  $gray-600;

$initialism-font-size:        $small-font-size;

$blockquote-margin-y:         $spacer;
$blockquote-font-size:        $font-size-base * 1.25;
$blockquote-footer-color:     $gray-600;
$blockquote-footer-font-size: $small-font-size;

$hr-margin-y:                 $spacer;
$hr-color:                    inherit;

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-bg:                     $yellow-100;

Міксини

Спеціальних міксинів для типографіки немає, але Bootstrap використовує Responsive Font Sizing (RFS) .