Оформлення і робота з текстом в bootstrap4

Управління margin і padding відступами

Синтаксис класів для задання margin і padding відступів Bootstrap 4 включає в себе набір класів, за допомогою яких можна дуже легко додавати до HTML елементам необхідні margin і padding відступи.

Називаються ці класи наступним чином:

{Property} {sides} - {size} для xs;
{Property} {sides} - {breakpoint} - {size} для sm, md, lg, і xl.

Замість {property} необхідно вказати першу букву назви відступу, тобто m або p (m - для margin, p - для padding).

Замість {sides} необхідно вказати сторону (t - для завдання відступу тільки зверху, b - знизу, l - зліва, r - праворуч) або кілька сторін (x - зліва і справа, y - зверху і знизу).

Якщо {sides} й вказати, то тоді відступ буде встановлений для всіх 4 сторін елемента.

Замість {breakpoint} потрібно вказати контрольну точку (sm, md, lg, або xl). Іншими словами, визначити мінімальну ширину viewport, починаючи з якої, відступи, що задаються цим класом, будуть діяти.

Контрольні точки задають саме мінімальну ширину viewport. Це означає, що, наприклад, клас з sm буде діяти не тільки на sm, але і на всіх наступних контрольних точках (sm-> md-> lg-> xl). Тобто до тих пір, поки його дію буде не перевизначено за допомогою іншого класу (наприклад, за допомогою lg).

Замість {size} необхідно задати величину відступу (за допомогою одного з наступних значень):

0 (дорівнює 0);
1 (одно $ spacer * .25);
2 (дорівнює $ spacer * .5);
3 (дорівнює $ spacer);
4 (дорівнює $ spacer * 1.5);
5 (дорівнює $ spacer * 3);
auto (так само auto) - можна використовувати тільки для margin.

Приклад:

Встановити блоку:

margin відступи зліва і справа, рівні auto (mx-auto);
на xs margin відступи зверху і знизу, рівні 2 (my-2);
на sm і md (тобто> sm) margin відступи зверху і знизу, рівні 3 (my-sm-3);
на lg і xl (тобто> lg) margin відступи зверху і знизу, рівні 4 (my-lg-4);
на всіх контрольних точках padding відступи для 4 сторін, рівні 3 (p-3).

See the Pen <a href='https://codepen.io/raisa69/pen/bGwYGwv'>m-p-bs4</a> by kravets (<a href='https://codepen.io/raisa69'>@raisa69</a>) on <a href='https://codepen.io'>CodePen</a>.

Форматування тексту

За замовчуванням весь текст в Bootstrap має розмір font-size 14px і висоту рядка line-height 1,428. Це стосується <body> і всіх параграфів. У параграфом (<p>) також є відступ знизу рівний половині від висоти рядка (за замовчуванням 10px).

Шрифти

В Bootstrap 4 за замовчуванням для основного вмісту використовується наступні шрифти:

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

Це дозволяє відображати текстовий контент на різних пристроях і операційних системах за допомогою "рідних" шрифтів.

Вирівнювання тексту

Бутстрап має набір класів для вирівнювання текстів:

<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.

Трансформація тексту

Трансформувати текст можна простим додаванням класів: нижній, верхній регістр і великі літери.

<p class="text-lowercase">нижній регістр</p> 
<p class="text-uppercase">верхній регістр</p> 
<p class="text-capitalize">заглавні букви</p>

У Bootstrap 3 і 4 HTML-заголовків <h1> ... <h6> задано вже деякий стиль оформлення за замовчуванням (наприклад, розмір шрифту, margin відступи знизу і зверху, товщина шрифту і т.д.).

Bootstrap, крім CSS стилів для заголовків містить ще класи h1, h2, h3, h4, h5 і h6. Вони призначені для стилізації деякого контенту як заголовка або зміни оформлення заголовків елементів h1 ... h6:

<! - Відображення заголовка h1 буде відповідати h2 ->

<h1 class = "h2"> Заголовок 1 рівня </ h1>

<! - Відобразити контент як заголовок 3 рівня ->

<div class = "h3"> Деякий контент ... </ div>

Класи display для заголовків

Фреймворк Bootstrap 4 в файлі bootstrap.css містить додаткові класи display-1, display-2, display-3 і display-4, призначені для альтернативного оформлення заголовків. Ці класи на відміну від традиційного оформлення, дозволяють зробити їх більш виділеними (вони задають більше значення font-size і менше властивості font-weight).

Розмір шрифту та висота рядка

У Bootstrap 4 змінився підхід до задання розміру шрифту. Він перестав бути фіксованим, тепер розмір задається за допомогою одиниці виміру rem

1rem дорівнює розміру шрифту, який встановлений для елемента html. Дана одиниця виміру є відносною, тому що вона залежить від розміру шрифту, який встановлений для всього документа.

В стилях Bootstrap 4 елементу html явно не встановлюється розмір шрифту, тому дане значення буде братися з браузера

Оформлення абзаців

Для оформлення абзаців Bootstrap використовує стилі:

/* в Boostrap 4 */
p {
  margin-top: 0;
  margin-bottom: 1rem;
}

<code>

Bootstrap додає строчним елементам <code> контрастний стиль, фон і червоний колір:

Приклади блочних елементів: <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.

See the Pen Background Color classes bs4 by kravets (@raisa69) on CodePen.

Загальний список класів для оформлення текстів і інших елементів

Клас	Опис
`.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). Замість вертикального відображення опису під заголовком пари розташовуються горизонтально. У випадках невеликих екранів списки описів з таким класом будуть відображатися як зазвичай, вертикально орієнтованими.

Завдання №1

1. застосувати класи bootstrap 4 для оформлення тексту за зразком

2. Створити сітку з двома блоками по 4 колонки , які розміщені по центру сторінки, відступ між блоками встановити 3, для стилізації блоків застосувати відповідні класи bootstrap 4:

3. Створити сітку з 3 рядків згідно зразка з використанням класів bootstrap 4 для кольору фону та тексту та відступів, при умові, що блоки мають висоту 50px,

в першому та третьому рядку рядку блок 1 і блок 2 займають по 4 колонки, застосувати зміщення блоків за допомогою класу margin на адаптивну змінну величину
в другому рядку блоки займають по 3 колонки, мають адаптивну узмінну величину відступів між собою

Pages