Типографіка
Документація та приклади типографіки 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. Заголовок Bootstrap |
|
h2. Заголовок Bootstrap |
|
h3. Заголовок Bootstrap |
|
h4. Заголовок Bootstrap |
|
h5. Заголовок Bootstrap |
|
h6. Заголовок Bootstrap |
.h1
наскрізні .h6
класи також доступні, коли ви хочете відповідати стилю шрифту заголовка, але не можете використовувати пов’язаний елемент HTML.
h1. Заголовок Bootstrap
h2. Заголовок Bootstrap
h3. Заголовок Bootstrap
h4. Заголовок Bootstrap
h5. Заголовок Bootstrap
h6. Заголовок Bootstrap
Налаштування заголовків
Використовуйте включені службові класи, щоб відтворити невеликий допоміжний текст заголовка з Bootstrap 3.
Вигадливий заголовок із вицвілим другорядним текстом
Відображення заголовків
Традиційні елементи заголовків створені для того, щоб найкраще працювати з вмістом вашої сторінки. Якщо вам потрібен заголовок, щоб виділятися, подумайте про використання відображуваного заголовка — більшого, дещо впевненішого стилю заголовка. Майте на увазі, що ці заголовки не адаптивні за замовчуванням, але можна ввімкнути відповідні розміри шрифту .
Дисплей 1 |
Дисплей 2 |
Дисплей 3 |
Дисплей 4 |
Вести
Виділіть абзац, додавши .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Вбудовані текстові елементи
Стиль для поширених вбудованих елементів HTML5.
Ви можете використовувати позначку, щобпідсвічуватитекст.
Цей рядок тексту має розглядатися як видалений текст.
Цей рядок тексту має вважатися неточним.
Цей рядок тексту має розглядатися як доповнення до документа.
Цей рядок тексту відображатиметься як підкреслений
Цей рядок тексту має розглядатися як дрібний шрифт.
Цей рядок відображається жирним шрифтом.
Цей рядок відображається як текст, виділений курсивом.
.mark
і .small
класи також доступні для застосування тих самих стилів, що <mark>
й <small>
уникаючи будь-яких небажаних семантичних наслідків, які принесуть теги.
Хоча це не показано вище, сміливо використовуйте <b>
та <i>
в HTML5. <b>
призначений для виділення слів або фраз без надання додаткової важливості, тоді <i>
як переважно для голосу, технічних термінів тощо.
Текстові утиліти
Змінюйте вирівнювання, трансформацію, стиль, щільність і колір тексту за допомогою наших утиліт для тексту та кольорів .
Скорочення
Стилізована реалізація елемента HTML <abbr>
для скорочень і абревіатур для показу розгорнутої версії при наведенні курсора. Абревіатури мають підкреслення за замовчуванням і отримують довідковий курсор, щоб надати додатковий контекст під час наведення курсора та для користувачів допоміжних технологій.
Додайте .initialism
до абревіатури трохи менший розмір шрифту.
атрибут
HTML
Блок цитат
Для цитування блоків вмісту з іншого джерела у вашому документі. Оберніть <blockquote class="blockquote">
будь-який HTML як цитату.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ціле число posuere erat a ante.
Називання джерела
Додайте <footer class="blockquote-footer">
для визначення джерела. Увімкніть назву вихідної роботи в <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ціле число posuere erat a ante.
Вирівнювання
За потреби використовуйте текстові утиліти, щоб змінити вирівнювання цитати.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ціле число posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ціле число posuere erat a ante.
списки
Нестилізований
Видаліть стандартне 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
В лінію
Видаліть маркери зі списку та застосуйте трохи світла margin
за допомогою комбінації двох класів .list-inline
і .list-inline-item
.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
Вирівнювання списку описів
Вирівняйте терміни й описи по горизонталі за допомогою попередньо визначених класів (або семантичних міксинів) нашої сітки. Для тривалих термінів ви можете додатково додати .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.
Чуйний розмір шрифту
Bootstrap v4.3 постачається з опцією ввімкнення адаптивних розмірів шрифту, що дозволяє більш природним чином масштабувати текст на різних пристроях і у вікні перегляду. RFS можна ввімкнути, змінивши $enable-responsive-font-sizes
змінну Sass на true
та перекомпілювавши Bootstrap.
Для підтримки RFS ми використовуємо міксин Sass, щоб замінити наші звичайні font-size
властивості. Розміри адаптивного шрифту будуть скомпільовані у calc()
функції з поєднанням rem
одиниць вікна перегляду, щоб увімкнути поведінку адаптивного масштабування. Більше про RFS та його конфігурацію можна знайти в репозиторії GitHub .