in English

Типографіка

Документація та приклади типографіки 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 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

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

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

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

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

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

Дисплей 1

Дисплей 2

Дисплей 3

Дисплей 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

атрибут

HTML

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

Блок цитат

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

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

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

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

Додайте <footer class="blockquote-footer">для визначення джерела. Увімкніть назву вихідної роботи в <cite>.

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

Хтось відомий у назві джерела

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

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

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

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

Хтось відомий у назві джерела

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

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

Хтось відомий у назві джерела

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

списки

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

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

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

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

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

<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клас, щоб скоротити текст крапкою.

Списки опису

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

термін

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

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

Інший термін

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

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

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

Гніздування

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

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

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

Починаючи з версії 4.3.0, Bootstrap поставляється з опцією ввімкнення адаптивних розмірів шрифту, що дозволяє більш природним чином масштабувати текст на різних пристроях і у вікні перегляду. RFS можна ввімкнути, змінивши $enable-responsive-font-sizesзмінну Sass на trueта перекомпілювавши Bootstrap.

Для підтримки RFS ми використовуємо міксин Sass, щоб замінити наші звичайні font-sizeвластивості. Розміри адаптивного шрифту будуть скомпільовані у calc()функції з поєднанням remодиниць вікна перегляду, щоб увімкнути поведінку адаптивного масштабування. Більше про RFS та його конфігурацію можна знайти в репозиторії GitHub .