Source

Типографіка

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

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.

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

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

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

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

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

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

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

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

<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 як цитату.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ціле число 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. Ціле число 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>

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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ціле число posuere erat a ante.

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

<blockquote class="blockquote text-center">
  <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>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ціле число posuere erat a ante.

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

<blockquote class="blockquote text-right">
  <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>

списки

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

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

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Ціле число molesteie 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>

В лінію

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

Списки опису

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

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Порта Малесуада

Etiam porta sem malesuada magna mollis euismod.

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

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Гніздування

Список вкладених визначень: 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">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </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-size-які запити та медіа-запити.

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}