Текст и типография

Bootstrap настройки по подразбиране

Основния размер на шрифта е 14 пиксела и височина на реда line-height от 1.428. Тове се отнася за <body> и всички параграфи. В допълнение всички <p> елементи имат долно отстояние равно на своя computed line-height (10px по подразбиране).

Bootstrap и настройките по подразбиране на браузърите

В тази глава ще разгледаме някои HTML елементи, които ще бъдат оформени па малко по-различен начин от Bootstrap, отколкото при браузърите по подразбиране.

h1 Bootstrap heading (36px)

h2 Bootstrap heading (30px)

h3 Bootstrap heading (24px)

h4 Bootstrap heading (18px)

h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)
Опитайте сами »

HTML елемента <small> се ползва за създаване на „лек“ второстепенен текст в заглавието.

h1 heading secondary text

h2 heading secondary text

h3 heading secondary text

h4 heading secondary text

h5 heading secondary text
h6 heading secondary text
Опитайте сами »

Bootstrap ще стилизира елемента HTML mark по следния начин:

Use the mark element to highlight text.
Опитайте сами »

Bootstrap ще стилизира елемента HTML abbr по следния начин:

The WHO was founded in 1948.

Опитайте сами »

Bootstrap ще стилизира елемента HTML blockquote по следния начин:

For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

From WWF’s website
Опитайте сами »

За да покажете цитата вдясно, използвайте класа .blockquote-reverse:

For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

From WWF’s website
Опитайте сами »

Bootstrap ще стилизира елемента HTML dl по следния начин:

Coffee
– black hot drink
Milk
– white cold drink
Опитайте сами »

Bootstrap ще стилизира елемента HTML code по следния начин:

The following HTML elements: span, section, and div defines a section in a document.
Опитайте сами »

Bootstrap ще стилизира елемента HTML kbd по следния начин:

Use ctrl + p to open the Print dialog box.
Опитайте сами »

Bootstrap ще стилизира елемента HTML pre по следния начин:

Опитайте сами »

Контекстуални цветове и фонове

Класовете за цвят на текста: .text-muted, .text-primary, .text-success, .text-info, .text-warning, и .text-danger.

Опитайте сами »

Класовете за фон са: .bg-primary, .bg-success, bg-info, bg-warning, и .bg-danger

Опитайте сами »
Клас Описание Пример
.lead прави параграфа отличителен Опитай
.small прави размера на текста с размер 85% от размера на родителският Опитай
.text-left подравнява текста откъм ляво Опитай
.text-center центрира тескта Опитай
.text-right подравнява тескта откъм дясно Опитай
.text-justify подравнява тескт откъм ляво и дясно Опитай
.text-nowrap прави текста no wrap Опитай
.text-lowercase прави текста с малки букви Опитай
.text-uppercase прави текста с главни букви Опитай
.text-capitalize прави първите букви на всяка дума в текст да започва с главна буква Опитай
.initialism Displays the text inside an <abbr> element in a slightly smaller font size Опитай
.list-unstyled премахва стиловете по подразбиране за list-style и левият маржин за всеки елемент в списък (работи и за двата тага <ul> и <ol>). Ако трябва да се приложи за вложен списък, добавете класа отново. Опитай
.list-inline прави всеки елемент от списък да е подреден до следващият на един ред Опитай
.dl-horizontal Прави елементите да са на един ред (<dt>) и (<dd>) в <dl>. Опитай
.pre-scrollable Прави елемента <pre> да бъде скролиращ се Опитай