Типографія завантажувальної машини - Особливості типографіки Bootstrap з прикладами

Вступ у типографіку Bootstrap

Типографія - одна з останніх особливостей завантажувальної програми. Він особливо використовується для стилізації та форматування текстових елементів. За допомогою функції типографії завантажувального пристрою хтось може створити заголовки, абзаци, деякі інші вбудовані елементи та списки. В основному завантажувач використовує 1rem (16 пікселів) як розмір шрифту, включаючи висоту рядка 5. За замовчуванням сімейства шрифтів, використовувані bootstrap, є sans-serif, Arial, він встановлює, як вміст повинен відображатися на тілі, колір тла на тілі, використовує шрифт розмір і висота лінії для створення полів, прокладок тощо.

Особливості типографіки Bootstrap

Нижче наведено різні особливості типографії:

1) Заголовки

Заголовки HTML поділяються на

до

Заголовок завантажувача

відображається у форматі шрифту

Заголовок завантажувача

відображається у форматі шрифту

Заголовок завантажувача

відображається у форматі шрифту

Заголовок завантажувача

відображається у форматі шрифту

Заголовок завантажувача

відображається у форматі шрифту

Заголовок завантажувача

відображається у форматі шрифту

Використовуючи HTML-код, він дає результат, як показано нижче:

Використовуючи типографіку Bootstrap, вона стилізована та відформатована за допомогою відповідних класів, як показано нижче:

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size
Bootstrap Heading displayed in font-size

Вихід з вищевказаного коду з використанням типографії Bootstrap виглядає наступним чином:

2) чуйні заголовки

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

Просто додайте клас, який відповідає в тег заголовка, наступним чином:

Responsive Header

Таким чином, він покаже вихід у вигляді:

Чуйний заголовок

Ви можете перевірити один і той же текст на різних пристроях, а також змінивши розмір браузера, він покаже зміни.

3)

Цей тег використовується для створення більш легкого, меншого, другорядного тексту у вашій рубриці. За замовчуванням вона встановлює 85% від розміру батьківського заголовка.

Приклад:

Example heading secondary text

Вихід:

h5 заголовок другорядного тексту

4)

Цей тег використовується для виділення тексту.

Приклад:

Bootstrap Typography


Bootstrap Typography


Це використовується для виділення тексту.

5)

Цей тег використовується для позначення абревіатури. Абревіатури за замовчуванням підкреслюють і отримують довідковий курсор, щоб забезпечити додатковий контекст на наведення курсору та користувачам допоміжних технологій.

Приклад:

У світі так багато країн. Індія - найкраща країна

6)

Позначає видалений текст

Приклад:

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

Вихід:

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

7)

Елемент blockquote використовується для подання вмісту з іншого джерела.

Приклад:

Blockquotes


Blockquotes


Елемент blockquote використовується для представлення вмісту з іншого джерела:

Дуже мало потрібно для щасливого життя; все це всередині вас, у вашому мисленні. Життя - це як грати на скрипці на публіці та вивчати інструмент, як можна продовжувати.

Вихід:

Блок-котирування
Елемент blockquote використовується для представлення вмісту з іншого джерела:

Дуже мало потрібно для щасливого життя; все це всередині вас, у вашому способі мислення. Життя - це як грати на скрипці на публіці та вивчати інструмент, як можна продовжувати.

8)

:

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

Приклад:

Елемент dl вказує список опису:

Хліб

- Білий

- Коричневий

Холодні напої

- Пепсі

Вихід:

Елемент dl вказує список опису:

Хліб
Білий
Коричневий
Холодні напої
Пепсі.

9)

Вбудований вислів коду повинен бути з'єднаний між собою в елементі коду.

Приклад:

Наступні елементи HTML: span, section та div визначає розділ у документі.

Вихід:

Наступні елементи HTML: span, section та div визначає розділ у документі.

10) контекстуальні кольори

Це не що інше, як інший клас, який використовується для передачі значення за допомогою різних кольорів.
У нього є різні класи, такі як .text-вимкнено, .text-info, .text-basic, .text-success, .text-попередження, .text-небезпека.

Приклад:

Використовуйте контекстні класи, щоб вказати "значення через кольори":

Цей текст вимкнено.

Цей текст важливий.

Цей текст свідчить про успіх.

Цей текст представляє деяку інформацію.

Цей текст представляє попередження.

Цей текст представляє небезпеку.

Вихід:

Цей текст вимкнено.
Цей текст важливий.
Цей текст свідчить про успіх.
Цей текст представляє деяку інформацію.
Цей текст представляє попередження.
Цей текст представляє небезпеку.

Де ми можемо використовувати

• Більшість веб-дизайнерів вважають за краще використовувати типографію завантаження для кращого вигляду та відчуття тексту.
• Він особливо використовується під час стилізації та форматування текстового вмісту.
• Більшість часу виникає проблема щодо чуйності тексту. Розмір тексту змінюється залежно від різних пристроїв. Таким чином, ці проблеми з’ясовуються за допомогою функції типографії завантажувальної машини.
• Типографія завантажувального пристрою налаштована простим способом, щоб привабливо представити кінцевому користувачеві.
• Такі текстові елементи на веб-сторінці завжди відображатимуться за допомогою посилання на аркуш стилів Bootstrap 4 таким же чином, за винятком того, що ці елементи перекриваються іншими класами стилів.
• Bootstrap надає розробникам зручні функції типографіки, щоб полегшити їм створення заголовків, абзаців, списків та інших вбудованих елементів, які були б привабливими для читачів.

Висновок

• Відповідно до всіх деталей, наведених у наведеному вище змісті, різні типографічні функції Bootstrap для заголовків, блокчету, провідного тексту, поміченого тексту, скорочень з відповідними прикладами.
• Такі надійні та неабиякі особливості Bootstrap роблять його дуже популярним та унікальним фронтальним розвитком, який широко використовується багатьма організаціями.
• Завантажувальний прилад постачається з усіма тегами типографіки, до яких ми хочемо стилізуватися, - від тегу до

  і вся ієрархія заголовків.

Рекомендовані статті

Це посібник з типографії Bootstrap. Тут ми обговорюємо різні особливості типографіки Bootstrap, такі як заголовки, блок-котирування, абревіатура, марка тощо. Ви також можете переглянути наступні статті, щоб дізнатися більше -

• Команди завантаження
• Компоненти завантажувальної машини
• Як встановити Bootstrap
• Макет завантаження