Раніше ми дізналися, як підключити Bootstrap, створити в ньому свій шаблон, оформити таблиці і елементи форм. Крім того, фреймворк додає нові стилі для звичайного тексту і малих елементів. Він визначає стандартний розмір будь-якого тексту всередині тега <body>
в 14px і висоту рядка в 1,428. Для абзаців змінюються зовнішні відступи (margin) зверху і знизу: тепер це половина висоти рядка, за замовчуванням 10px.
Давайте подивимося на приклади і розберемося з текстом в бутстрапа.
Заголовки
Заголовки в бутстрапі на вигляд такі:
Заголовок h1, 36px
Заголовок h2, 30px
Заголовок h3, 24px
Заголовок h4, 18px
Заголовок h5, 14px
Заголовок h6, 12px
Елемент <small> в заголовку
Також можна додати пояснювальний текст в тег <small>
й розмістити його в заголовку, він буде таким:
Заголовок h1 пояснювальний текст
Заголовок h2 пояснювальний текст
Заголовок h3 пояснювальний текст
Заголовок h4 пояснювальний текст
Заголовок h5 пояснюный текст
Заголовок h6 пояснительный текст
Тег <mark>
Елемент <mark>
будеоформлено в такому стилі:
Ваня зпт все пішло не так зпт подриці листом тчк
Вирівнювання тексту
Бутстрап має набір класів для вирівнювання текстів:
<p class="text-left">Рівняння по лівому краю</p> <p class="text-center">Текст по центру</p> <p class="text-right">Рівняння по правому краю</p> <p class="text-justify">Рівняння по обом краям</p> <p class="text-nowrap">Текст без перенесення</p>
Більше не потрібно додавати додаткові класи для рівняння з різними варіантами text-align
в css.
Текст зліва (як зазвичай)
Текст по центру
Текст справа
Цитата, <blockquote>
Цитати в Bootstrap на вигляд такі:
Цілий рік між нами відбувалося щось на зразок інтелектуальної близькості. З відтінком ворожнечі й розпусти.
Код прикладу:
<blockquote> Цілий рік між нами відбувалося щось на зразок інтелектуальної близькості. З відтінком ворожнечі і розпусти. <footer>Сергій Довлатов</footer> </blockquote>
Щоб додати цитаті рівняння по правому краю, додайте їй клас .blockquote-reverse
:
Танцювала риба з раком, риба з раком, а петрушка з пастернаком, з пастернаком!
А цибуля з часником, а дівчина з козаком!
Трансформація тексту
Трансформувати текст можна простим додаванням класів: нижній, верхній регістр і великі літери.
нижній регістр
верхній регістр
заглавні букви
<p class="text-lowercase">нижній регістр</p> <p class="text-uppercase">верхній регістр</p> <p class="text-capitalize">заглавні букви</p>
<dl>
Список описів — не найбільш популярний тег, але його можна зручно використовувати для швидкого створення списків з поясненнями.
- Beatles
- – Liverpool, Great Britain
- Bon Jovi
- – New Jersey, USA
<dl> <dt>Beatles</dt> <dd>- Liverpool, Great Britain</dd> <dt>Bon Jovi</dt> <dd>- New Jersey, USA</dd> </dl>
<code>
Bootstrap додає строчним елементам <code>
контрастний стиль, фон і червоний колір:
Приклади блочних елементів: pre
, div
и p
.
Код прикладу:
Приклади блочних елементів: <code>pre</code>, <code>div</code> і <code>p</code>.
Контекстні кольори й фони
В бутстрапі є набір класів для виділення тексту кольором або фоном: .text-muted
, .text-primary
, .text-success
, .text-info
, .text-warning
, і .text-danger
.
Сум-нудьга-туга.
Важливий текст.
Добре там, де?
Іноді ти їси тигра, а іноді тигр їсть тебе.
В Польщі є пам’ятник Вікіпедії.
Мы знайдемо вас і зробимо щасливими.
<p class="text-muted">Сум-нудьга-туга.</p> <p class="text-primary">Важливий текст.</p> <p class="text-success">Добре там, де?</p> <p class="text-info">Іноді ти їси тигра, а іноді тигр їсть тебе.</p> <p class="text-warning">В Польщі є пам'ятник Вікіпедії.</p> <p class="text-danger">Мы знайдемо вас і зробимо щасливими.</p>
Класи для контекстного фону такі: .bg-primary
, .bg-success
, .bg-info
, .bg-warning
, і .bg-danger
.
Ніколи не довіряйте людям, які не вміють писати грамотно.
Ви успішно прочитали попередні абзаци.
Будь ласка, закрийте рота з іншого боку.
Ви дійсно впевнені, що вимкнули праску?
Увага: всі ваші коровани пограбовано.
Огляд класів для тексту
Ось вам загальний список класів, якими можна користуватися в бутстрапі для оформлення текстів і інших елементів.
Клас | Опис |
---|---|
.lead |
Виділяє параграф збільшенням розміру тексту |
.small |
Зменшує розмір тексту до 85% від батьківського елемента |
.text-left |
Рівняння тексту по лівому краю |
.text-center |
Центровка тексту |
.text-right |
Рівняння тексту по правому краю |
.text-justify |
Рівняння текста по левому і правому краям |
.text-nowrap |
Текст без переносів строк |
.text-lowercase |
Текст в нижньому регістрі |
.text-uppercase |
Текст в верхньому регістрі |
.text-capitalize |
Кожне Слово З Великої Букви |
.list-unstyled |
Прибирає стандартне оформлення для списку і відступи для його елементів. Працює як для <ul> , так і для <ol> . Стилі заберуться тільки для елементів першого рівня вкладеності. Щоб прибрати стилі для іншої вкладеності, використовуйте це клас знову для їхніх батьківських елементів. |
.list-inline |
Відображає всі елементи списку в один рядок, перетворюючи їх на малі |
.dl-horizontal |
Використовується для terms (<dt> ) і descriptions (<dl> ) в <dl> (списку описів, description list). Замість вертикального відображення опису під заголовком пари розташовуються горизонтально. У випадках невеликих екранів списки описів з таким класом будуть відображатися як зазвичай, вертикально орієнтованими. |
Всем хорошої верстки :)
На десерт
Будь ласка, уникайте є млинці з лопати і слухайте хорошу музику:
Про блины с лопаты супер))))) и в точку))))
Мне кажется в этот урок можно ещё добавить про класс alert
Спасибо! Как вы вставляете код? Ищу пол дня. Я думал, что между code /code но так не работает…
@Чек, если в комментарий, то в code или pre.
Спасибо за отличную статью.
Буду заглядывать как в справочник )
@Владимир, хорошей вёрстки :)