Bootstrap - Оформлення та робота з текстом, ІТ Шеф
У цій статті розглянемо, як у Bootstrap 3 та 4 здійснюється оформлення та робота з текстовою інформацією.
Шрифти у Bootstrap
У Bootstrap 3 за промовчанням для основного вмісту використовуються такі шрифти:
У Bootstrap 4 стек шрифтів змінено на наступний:
Ця зміна дозволила відображати текстовий контент на різних пристроях та операційних системах за допомогою "рідних" шрифтів.
За бажанням цей набір шрифтів можна встановити і для Bootstrap 3. Для цього необхідно зібрати свою збірку (наприклад, на сторінці Customize and download), в якій в якості змінної @font-family-sans-serif встановити стек шрифтів Bootstrap 4.
Якщо варіант використання даної можливості і без створення користувальницької збірки, за допомогою додавання даної інструкції до файлу CSS.
Підключення свого шрифту до сторінки
При необхідності можна також підключити нестандартний шрифт до сторінки. Для цього, наприклад, можна скористатися сервісом Google Font або іншим способом (наприклад, використовувати якийсь завантажений шрифт).
1. Підключаємо шрифт (наприклад, Roboto) за допомогою елемента link :
2. Визначаємо сферу його використання, тобто. вибираємо елементи, всередині яких текстовий контент відображатиметься за допомогою цього шрифту. Цей шрифт (наприклад, Roboto) при цьому повинен стояти як font-family перед усіма іншими шрифтами:
Оформлення заголовків
У Bootstrap 3 та 4 HTML-заголовках
задано вже деяке оформлення за умовчанням (наприклад, розмір шрифту, margin відступи знизу та зверху, товщина шрифту тощо).
Приклад створення HTML заголовків:
Стилізація заголовків у Bootstrap
Класи h1, h2, h3,h4, h5 та h6
Bootstrap, крім CSS стилів для заголовків містить ще класи h1, h2, h3, h4, h5 і h6. Вони призначені для стилізації деякого контенту як заголовка або зміни оформлення елементів заголовків h1 . h6.
Відображення другорядного контенту в заголовках
Для того щоб до заголовка додати додатковий текст, який повинен відрізнятися розміром та кольором від решти контенту цього заголовка, можна скористатися елементом small .
Класи display для заголовків
Фреймворк Bootstrap 4 у файлі bootstrap.css містить додаткові класи display-1, display-2, display-3 та display-4, призначені для альтернативного оформлення заголовків. Ці класи на відміну від традиційного оформлення дозволяють зробити їх більш виділеними (вони задають більше значення font-size і менше властивості font-weight).
Клас page-header для оформлення h1
Bootstrap 3 має клас page-header , який призначений для оформлення заголовка h1 на сторінці. Він задає "вищі" значення відступів і додає лінію під назвою заголовка.
Синтаксис цього класу:
Приклад використання класу page-header:
Так на Bootstrap 3 виглядає заголовок h1 з page-title
Розмір шрифту та висота рядка
У Bootstrap 3 як розмір шрифту ( font-size ) за умовчанням використовується фіксована величина, що дорівнює 14px. Висота рядка (line-height) має значення 1.428. Ці CSS властивості застосовуються до елемента сторінки body .
У Bootstrap 4 змінився підхід до завдання розміру шрифту. Вона перестала бути фіксованою, тепер вона задається за допомогою одиниці виміру rem.
1rem дорівнює розміру шрифту, який встановлений для елемента HTML. Дана одиниця виміру євідносною, т.к. вона залежить від розміру шрифту, встановленого для всього документа.
В даному випадку 1rem дорівнюватиме 16px.
Але так як у стилях Bootstrap 4 елементу html явно не встановлюється розмір шрифту, то це значення буде братися з браузера.
Наприклад, у десктопній версії браузера Chrome налаштування розміру шрифтів здійснюється на сторінці "Налаштування" у розділі "Вигляд сторінок". За умовчанням це значення дорівнює 16px. Якщо це значення, наприклад, збільшити до 18px, то 1rem в Bootstrap 4 вже дорівнює 18px.
Зміна розміру шрифту
Якщо потрібно змінити розмір шрифту, тобто. зробити його для деякого блоку більше або менше, можна скористатися CSS. Для цього необхідно відкрити свій файл CSS та написати інструкцію (вибрати елементи та вказати їм властивість font-size з необхідним значенням):
Якщо ж ви хочете зробити розмір шрифту на різних пристроях різним, то можна скористатися медіа-запитами:
Зробити гумовий (масштабований) розмір шрифту можна не тільки за допомогою медіа запитів, але і за допомогою таких одиниць вимірювання як vw, vh, vmin і vmax.
Дані одиниці залежить від ширини чи висоти viewport. 1vw = 1% від ширини viewport, 1vh – 1% від висоти viewport, 1vmin – 1% від ширини або висоти, а саме від того значення, яке менше, 1vmax – 1% від ширини або висоти, а саме від того значення, яке більше.
Якщо якась CSS властивість не працює, то ви можете посилити її, додавши до неї !important :
Ці варіанти можна використовувати для створення адаптивних заголовків та тексту.
Крім перерахованих вище одиниць є ще % (відсотки) і em . При встановленні цих одиниць необхідно бути обережними, т.к. вони встановлюють розмір шрифту щодо розміру шрифту свогобатька.
Крім цього бувають ситуації, коли ви задає блоку фіксовану висоту, а контент, який містить даний блок, в нього не поміщається.
Контент не міститься в блок фіксованої висоти
У цьому випадку блоку можна задати CSS властивість overflow зі значенням hidden . Ця CSS-властивість буде приховувати контент, який не поміщається в цей блок.
Але можна зробити і по-іншому, а саме показати користувачеві, що це не весь контент, додавши після нього три точки.
Для цього можна завантажити js-плагін dotdotdot. Підключити його до сторінки та призначити необхідним елементам.
Варіанти обрізки контенту, який не вміщується в блок фіксованої висоти
Ще одне дуже часто завдання - це коли текст необхідно розмістити в один рядок. Це здійснюється за допомогою CSS-властивості white-space зі значенням nowrap .
Розташування контенту в один рядок
Для приховання контенту, який не міститься в блок, також можна використовувати CSS-властивість oveflow зі значенням hidden . Якщо необхідно додати три крапки після тексту, то потрібно додатково додати CSS-властивість text-overflow зі значенням ellipsis .
Можливий, звісно, й інший варіант вирішення цієї проблеми залежно від завдання. Можна, наприклад, зробити не приховування контенту, а дати можливість його прокручування.
Відображення контенту з прокручуванням
Крім цього, це можна зробити не за 2 напрямками, а за якимось одним. Для цього призначені CSS-властивості overflow-x та overflow-y. Дії по іншому напрямку можна виконати одним із наведених вище способів.