Bootstrap включає стилі, які визначають, як показуються текстові елементи.
Основний текст
За замовчуванням у Bootstrap 4 font-size дорівнює 16px (застосовується до елемента <html>), до елемента < body> також застосовується font-size рівне 1rem.
Bootstrap використовує «рідний набір шрифтів» (системні шрифти користувача) із запасним варіантом Helvetica Neue , Arial та sans-serif. Всі заголовки та елементи <p> видалено margin-top. Для заголовків margin-bottom задано як .5rem, а для елементів <p> воно задано як 1rem .
Ви можете повністю змінити будь-яке з цих значень відповідно до вашого власного проекту.
Заголовки
Ось приклад елементів заголовка, як вони показуються в Bootstrap 4.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <h1>h1 (Напівжирний 36px)</h1> <h2>h2 (Напівжирний 30px)</h2> <h3>h3 (Напівжирний 24px)</h3> <h4>h4 (Напівжирний 18px)</h4> <h5>h5 (Напівжирний 14px)</h5> <h6>h6 (Напівжирний 12px)</h6>
Класи заголовків
Bootstrap також включає класи заголовків від .h1 до .h6 на випадок, якщо вам потрібно відобразити певний рядковий текст у стилі певного заголовка.
<link rel=" stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <p class="h1">.h1 (Напівжирний 36px)</p> <p class="h2">.h2 (Напівжирний 30px)</p> <p class="h3">.h3 (Напівжирний 24px)</p> <p class="h4">.h4 (Напівжирний 18px)</p> <p class="h5">.h5 (Напівжирний 14px)</p> <p class="h6">.h6 (Напівжирний 12px)</p>
Підзаголовки
Ви можете створити підзаголовок або додатковий текст, помістивши текст у елемент <small> всередині заголовка.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <h1>Заголовок 1 <small>Підзаголовок</small></h1> <h2>Заголовок 2 <small>Підзаголовок</small></h2> <h3>Заголовок 3 <small>Підзаголовок</small></h3> <h4>Заголовок 4 <small>Підзаголовок</small></h4> <h5>Заголовок 5 <small>Підзаголовок</small></h5> <h6>Заголовок 6 <small>Підзаголовок</small></h6>
Заголовки дисплея
Заголовки дисплея призначені для того, щоб виділятися більше, ніж звичайні заголовки. Існує чотири розміри заголовка дисплея (.display-1, .display-2, .display-3 та .display-4). Так, наприклад, елемент <h1> може бути представлений у чотирьох різних розмірах за допомогою класів заголовків дисплея.
Щоб створити заголовок, що відображається, додайте один з перерахованих вище класів до елемента заголовка.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <h1 class="display-1">Дисплей 1</h1> <h1 class="display-2">Дисплей 2</h1> <h1 class="display-3">Дисплей 3</h1> <h1 class="display-4">Дисплей 4</h1>
Провідний текст
Ви можете виділити абзац за допомогою класу .lead.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <p class="lead"> Це провідний текст статті — він виділяється на початку статті. </p> <p> Це звичайний текст звичайного розміру. HTML представляє текст, помічений або виділений для довідкових цілей через його доречність в іншому контексті. Ось приклад відображення цього елемента.</p> <pre class="sh_html"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <p>Приклад <mark>позначеного тексту</mark>.</p>
Абревіатури
Елемент <abbr> в HTML є абревіатурою або акронімом. Атрибут title можна використовувати для розширення абревіатури.
У Bootstrap абревіатури з атрибутом title відображаються зі світлою пунктирною нижньою кордоном та курсором довідки при наведенні.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <abbr title="Професор">Проф.</abbr>
Ви можете додати клас .initialism для відображення абревіатури дещо меншим розміром шрифту.
<abbr title="Structured Query Language" class="initialism">SQL</abbr> використовується для запитів до баз даних.
Цитати
Щоб застосувати стилі Bootstrap до елемента <blockquote>, використовуйте клас .blockquote.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <blockquote class="blockquote"> <p>Найважливіший момент вашого життя відбувається зараз. Найважливіша людина у вашому житті — та, з ким ви зараз перебуваєте, а найважливіша діяльність у вашому житті — те, чим ви зараз займаєтеся.</p> </blockquote>
Джерело цитати
Bootstrap відображає елементи <cite> та <footer>, вкладені в елемент <blockquote>, таким чином.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <blockquote class="blockquote"> <p>Багато хто з нас хитається на хвилях вірувань всіх сортів. Ми занурені у здоровий глузд і мудрість нашої культури, традицій, громади, професії, сім'ї та друзів.</p> <footer>Том Кембелл, <cite>Моя велика теорія всього</cite></footer> </blockquote>
Вирівнювання цитат
Ви можете використовувати текстові утиліти Bootstrap для вирівнювання цитати, наприклад .text-center.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <blockquote class="blockquote text-center"> <p>Багато хто з нас хитається на хвилях вірувань всіх сортів. Ми занурені у здоровий глузд і мудрість нашої культури, традицій, громади, професії, сім'ї та друзів.</p> <footer>Том Кембелл, <cite>Моя велика теорія всього</cite></footer> </blockquote>
І .text-right.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <blockquote class="blockquote text-right"> <p>Багато хто з нас хитається на хвилях вірувань всіх сортів. Ми занурені у здоровий глузд і мудрість нашої культури, традицій, громади, професії, сім'ї та друзів.</p> <footer>Том Кембелл, <cite>Моя велика теорія всього</cite></footer> </blockquote>
Списки
Bootstrap застосовує різні стилі та містить набір класів спеціально для списків.
Нестилізовані списки
Ви можете використовувати клас .list-unstyled для відображення списків без list-style та margin-left за промовчанням.
Сторінки
Ви можете використовувати класи .list-inline та .list-inline-item для відображення списків у вигляді display: inline-block та для застосування деяких відступів .
Список описів
У Bootstrap списки описів відображаються таким чином.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <dl> <dt>Архат</dt> <dd>«Довершений», який подолав три отрути бажання, ненависті та незнання.</dd> <dt>Бодхі</dt> <dd>Пробуджена мудрість.</dd> <dt>Дзен</dt> <dd>Медитативне занурення, при якому усуваються всі дуалістичні відмінності.</dd> </dl>
Горизонтальний список описів
Ви можете вирівняти терміни та описи по горизонталі, додавши клас .row до елемента <dl>, а потім будь-який з визначених класів системи сітки до елементів <dt> та <dd>.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <dl class="row"> <dt class="col-sm-2">Архат</dt> <dd class="col-sm-10">«Довершений», який подолав три отрути бажання, ненависті та незнання.</dd> <dt class="col-sm-2">Бодхі</dt> <dd class="col-sm-10">Пробуджена мудрість.</dd> <dt class="col-sm-2">Дзен</dt> <dd class="col-sm-10">Медитативне занурення, при якому усуваються всі дуалістичні відмінності.</dd> </dl>
Зверніть увагу, що це працює лише при широкій області перегляду. Якщо ви не бачите жодної різниці між відображенням цього прикладу та попереднього, тоді відкрийте попередній перегляд у новому вікні. Якщо він ще не відрізняється, вам знадобиться пристрій більшого розміру для перегляду цього прикладу.
У Bootstrap 3 використовується клас .dl-horizontal, а Bootstrap 4 використовує клас .row.
Код
У Bootstrap елемент <code> відображається так.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> Атрибут <code>accesskey</code> може використовуватися для будь-якого елемента HTML5.
Введення з клавіатури
У Bootstrap елемент <kbd> відображається наступним чином.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> Щоб зберегти документ на Mac, натисніть <kbd><kbd>Command</kbd>+<kbd>S</kbd></kbd>
Форматований
У Bootstrap елемент <pre> відображається так.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <pre>Цей текст було відформатовано за допомогою елемента pre. Браузер повинен показати всі прогалини, як їх було введено. </pre>
Ви також можете додати клас .pre-scrollable, щоб встановити max-height як 350 пікселів і встановити смугу прокручування по осі Y.
Зразок тексту
У Bootstrap елемент < ;samp> відображається так.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> Комп'ютер говорить <samp>Недостатньо пам'яті</samp>.Я завжди думав, що у мене хороша пам'ять!
Змінні
У Bootstrap елемент <var> відображається так.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <var>E</var>=<var>m</var> <var>c</var><sup>2</sup>