Типография на Bootstrap - Характеристики на Bootstrap Typography с примери

Въведение в типографията на Bootstrap

Типографията е една от най-новите характеристики на обувката за зареждане. Използва се специално за стилизиране и форматиране на текстови елементи. Използвайки функцията за типография на bootstrap, някой може да създава заглавия, абзаци, някои други вградени елементи и списъци. По принцип bootstrap използва 1rem (16px) като размер на шрифта, включително височината на реда остава 5. По подразбиране семействата шрифтове, използвани от bootstrap, са sans-serif, Arial, Той определя как съдържанието да се показва на тялото, цветът на фона на тялото, използва шрифт размер и височина на линията, за да създадете полета, подплънки и т.н.

Характеристики на Bootstrap Typography

По-долу са описани различните характеристики на типографията, както следва:

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 Typography е както следва:

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.
• Типографията на Bootstrap е персонализирана по прост начин, за да се представи привлекателно за крайния потребител.
• Такива текстови елементи на уеб страница винаги ще бъдат изобразявани чрез връзката към листа за стил Bootstrap 4 по същия начин, с изключение на това, че тези елементи са отменени от други класове стил.
• Bootstrap предоставя на разработчиците удобни типографски функции, за да им улеснят създаването на заглавия, параграфи, списъци и други вградени елементи, които биха били привлекателни за читателите.

заключение

• Както по всички подробности, дадени в горното съдържание, различните типографски характеристики на Bootstrap за заглавия, блокчети, водещ текст, маркиран текст, съкращения с подходящи примери.
• Подобни здрави и красиви характеристики на Bootstrap го правят много популярна и уникална рамка за разработка на предния край, която се използва широко от много организации.
• Bootstrap се предлага с всички типографски маркери, които искаме да бъдем оформени, всичко от таг до

  и цялата йерархия на заглавието.

Препоръчителни статии

Това е ръководство за Bootstrap Typography. Тук обсъждаме различни функции на Bootstrap Typography като заглавия, блокчети, абревиатура, марка и т.н. Можете също да разгледате следните статии, за да научите повече -

• Команди за зареждане
• Компоненти за зареждане
• Как да инсталирате Bootstrap
• Оформление на обувката