Bootstrap - Дизайн и работа с текст, IT Chef
В тази статия ще разгледаме как Bootstrap 3 и 4 проектират и работят с текстова информация.
Шрифтове в Bootstrap
Bootstrap 3 използва следните шрифтове по подразбиране за основно съдържание:
В Bootstrap 4 стекът на шрифтовете е променен на следното:
Тази промяна направи възможно показването на текстово съдържание на различни устройства и операционни системи с помощта на „родни“ шрифтове.
Ако желаете, този набор от шрифтове може да бъде инсталиран и за Bootstrap 3. За да направите това, трябва да изградите своя собствена сборка (например на страницата за персонализиране и изтегляне), в която задавате стека на шрифтовете на Bootstrap 4 като променлива @font-family-sans-serif.
Ако опцията е да използвате тази функция, без да създавате персонализирано сглобяване, като добавите тази инструкция към вашия CSS файл.
Свързване на вашия шрифт към страницата
Ако е необходимо, можете също да включите персонализиран шрифт в страницата. За да направите това, например, можете да използвате услугата Google Font или по друг начин (например да използвате някакъв изтеглен шрифт).
1. Свързваме шрифта (например Roboto) с помощта на елемента връзка:
2. Определяме областта на неговото използване, т.е. изберете елементите, в които текстовото съдържание ще се показва с този шрифт. Този шрифт (например Roboto) трябва да бъде в свойството font-family преди всички други шрифтове:
Дизайн на заглавие
В Bootstrap 3 и 4 HTML заглавки
някои стилове по подразбиране вече са зададени (например размер на шрифта, поле, долно и горно поле, дебелина на шрифта и т.н.).
Пример за създаване на HTML заглавки:
Оформяне на заглавия в Bootstrap
Класове h1, h2, h3,h4, h5 и h6
Bootstrap, освен CSS стилове за заглавия, съдържа и класовете h1, h2, h3, h4, h5 и h6. Те са предназначени да стилизират някакво съдържание като заглавие или да променят стила на елементите на h1 заглавието. h6 .
Показване на вторично съдържание в заглавките
За да добавите допълнителен текст към заглавката, който трябва да се различава по размер и цвят от останалото съдържание на тази заглавка, можете да използвате малкия елемент.
Класове за показване на заглавки
Рамката Bootstrap 4 във файла bootstrap.css съдържа допълнителни класове display-1, display-2, display-3 и display-4 за алтернативен стил на заглавката. Тези класове, за разлика от традиционния стил, ви позволяват да ги направите по-забележими (те задават по-голяма стойност на размера на шрифта и по-малко свойство на теглото на шрифта).
Класът на заглавката на страницата за h1 стил
Bootstrap 3 има класа за заглавка на страницата, който е предназначен да стилизира заглавката h1 на страницата. Той задава подложката на "по-високи" стойности и добавя ред под заглавието на заглавието.
Синтаксисът за този клас е:
Пример за използване на класа page-header:
Ето как изглежда Bootstrap 3 като h1 хедър със заглавие на страницата
Размер на шрифта и височина на реда
Bootstrap 3 по подразбиране е с фиксирана стойност от 14px като размер на шрифта. Височината на линията (line-height) е 1,428. Тези CSS свойства се прилагат към основния елемент на страницата.
В 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.
Тези единици зависят от ширината или височината на прозореца за изглед. 1vw = 1% от ширината на прозореца за изглед, 1vh - 1% от височината на прозореца за изглед, 1vmin - 1% от ширината или височината, което е по-малко, 1vmax - 1% от ширината или височината, което от двете е по-голямо.
Ако определено свойство на CSS не работи, тогава можете да го направите по-силно, като добавите !important към него:
Тези опции могат да се използват за създаване на адаптивни заглавия и текст.
В допълнение към горните единици има също % (процент) и em. Когато инсталирате тези единици, трябва да внимавате, защото. те задават размера на шрифта спрямо техния размер на шрифтародител.
Освен това има ситуации, когато давате на блок фиксирана височина и съдържанието, което съдържа този блок, не се вписва в него.
Съдържанието не се побира в кутия с фиксирана височина
В този случай можете да зададете свойството за препълване на CSS на блока на скрито. Това CSS свойство ще скрие съдържание, което не се побира в този блок.
Но можете да го направите по различен начин, а именно да покажете на потребителя, че това не е цялото съдържание, като добавите три точки след него.
За да направите това, можете да изтеглите js-plugin dotdotdot. Свържете го със страницата и го задайте на необходимите елементи.
Опции за изрязване за съдържание, което не се побира в блок с фиксирана височина
Друга много често срещана задача е, когато текстът трябва да бъде поставен на един ред. Това става със свойството CSS за бяло пространство, зададено на nowrap.
Едноредово оформление на съдържанието
Можете също да използвате CSS свойството на oveflow със стойност hidden, за да скриете съдържание, което не се побира в блок. Ако трябва да добавите многоточие след текста, тогава трябва допълнително да добавите CSS свойството text-overflow със стойността многоточие.
Има, разбира се, друг начин за решаване на този проблем, в зависимост от проблема. Можете например да не скривате съдържанието, но да му позволите да се превърта.
Показване на съдържание с превъртания
Освен това това може да стане не в 2 посоки, а в една посока. За това служат CSS свойствата overflow-x и overflow-y. Действия в друга посока могат да се извършват по един от горните начини.