Типография с Bootstrap 4

Инструменти за подравняване и настройване на текст

Подравняване на текст

Разполагаме със следните класове за подравняване на текст: .text-left, .text-right и .text-center, като лявото подравняване е по подразбиране. Можем също така да укажем, че текстът е подравнен от двете страни с .text-justify. Ето примери за всеки от тях:

Bootstrap 4 Typography Aligning

Цвят на текст

Класовете за цветове се дефинират като .text-[context], където context приема следните значения:

  • primary за синьо
  • secondary за черно
  • success за зелено
  • danger за червено
  • warning за жълто
  • info за светло синьо

Т.е. за да оцветим текста в червено, трябва да използваме клас .text-danger, за жълто .text-warning и т.н.
Тази процедура е обща за всички компоненти на Bootstrap 4. По същия начин ще оцветяваме бутоните, предупредителните съобшения, редовете в таблиците и други.

Още информация и примери за контекст на цветовете.

Трансформиране на текст

Разполагаме с три опции за трансформиране на текст:

  • lowercase (.text-lowercase)
  • uppercase (.text-uppercase)
  • capitalized (.text-capitalize)
Text Transform

Удебеляване (font weight) и наклонен текст (font style)

Класове:

  • .font-weight-bold
  • .font-weight-normal
  • .font-weight-light
  • .font-italic
Font Weight and Style

Заглавия

Всички стилове от <h1> до <h6> са налични в Bootstrap. За да стилизираме заглавията, можем да използваме таг <h[number]>, както и клас .h[number].

Display класове

За да увеличим размера, с който се визуализира текста, можем да използваме класовете .display-[size] (size = 1 – 4)

  • <h1 class=“display-1″>11б клас</h1>
  • <h1 class=“display-2″>11б клас</h1>
  • <h1 class=“display-3″>11б клас</h1>
  • <h1 class=“display-4″>11б клас</h1>

Inline елементи

  • За да откроим (highlight) част от текста, използвме тага <mark></mark> или клас .mark;
  • За да покажем част от текста с по-малък размер от текста в който се съдържа, използваме таг <small></small> или клас .small;
  • За да визуализираме зачертан текст, използваме тагове <del></del> или <s></s> ;
  • За да подчертаем текст, използваме таг <u></u> или <ins></ins> ;
  • За удебелим текст, тагове <b></b> или <strong></strong> , или клас .font-weight-bold споменат по-горе в урока;
  • За наклонен текст <i></i> или <em></em> тагове, или клас .font-italic.

Съкращения

HTML5 тага <abbr></abbr> се използва за маркиране на съкращения и акроними. Когато се добави към част от текста, той го подчертава и променя курсора на въпросителен знак, показвайки обяснението (зададено с атрибута title).

Abbreviations

Цитати

За да цитираме част от текста в нашия документ, можем да използваме класа .blockquote в тага <blockquote>. в класа можем да използваме няколко елемента (заглавия, параграфи и др.). За да добавим източника на цитата, е предвиден специален клас, наречен .blockquote-footer. Ако маркираме текст със <cite>, той ще се появи в курсив.

Blockquote

Блокове с код

Ако е необходимо да покажем програмен код в документа, можем да използваме тага <code></code> когато кода е на един ред. За правилно изобразяване трябва да избягваме HTML ъгловите скоби от кода. Ако имаме няколко реда код, тогава трябва да използваме таговете <pre></pre> .
Ако искаме да маркирате текста като вход, който обикновено се въвежда от клавиатурата, можем да го направим с тага <kbd> </kbd>. 

Code Blocks

Упражнение

Задача 1. Като използвате текста в края на документа, изпълнете модела от картинките при следните условия:

  • За мобилни телефони, страницата се визуализира в една колона, а за всички по-големи екрани в две колони (както на картинките)
  • Размер на основния шрифт на документа 10px.
  • Размер на шрифта в менюто 15px, връзките са оцветени в бяло, при посочване с показалеца на мишката, в синьо. Подчертаването е премахнато. Вътрешният отстъп на бутоните е 5px.
  • CSS Tutorials – заглавие от ниво 1
  • …Introductory level – заглавие от ниво 5, маркиран като вход от клавиатурата
  • Заглавията на основните теми – заглавие от ниво 3, оцветени с инструментите на Bootstrap в зелено
  • В основния текст, всички срещани „CSS“ са маркирани като абревиатура с описание „Cascading Style Sheets“ и са „осветени“
  • Основния текст е подравнен от двете страни. Между двете колони се визуализира сива разделителна линия с дебелина 3px.
  • Надписа във footer е оформен като цитат, центриран и оцветен в червено с инструментите на Bootstrap, а надписа „how they are styled, laid out, etc.“ е оформен като източник на цитата и в него „styled“ е удебелен, наклонен, подчертан и оцветен в червено (с инструментите на Bootstrap)

CSS Tutorials
Introductory level
CSS basics
CSS (Cascading Style Sheets) is the code you use to style your webpage. CSS Basicstakes you through what you need to get started. We’ll answer questions like: How do I make my text black or red? How do I make my content show up in such-and-such a place on the screen? How do I decorate my webpage with background images and colors?
Introduction to CSS
This module goes in depth with how CSS works, including selectors and properties, writing CSS rules, applying CSS to HTML, how to specify length, color, and other units in CSS, cascade and inheritance, box model basics, and debugging CSS.
Styling boxes
Next up, we look at styling boxes, one of the fundamental steps towards laying out a web page. In this module we recap the box model then look at controlling box layouts by setting padding, borders and margins, setting custom background colors, images and other features, and fancy features such as drop shadows and filters on boxes.
Styling text
Here we look at text styling fundamentals, including setting font, boldness, and italics, line and letter spacing, and drop shadows and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.

As we have mentioned before, CSS is a language for specifying how documents are presented to users
how they are styled, laid out, etc. 

Задача 2.