Перейти до основного вмісту Перейти до навігації документами
Check
in English

Утиліти для верстки

Для швидшої розробки, зручної для мобільних пристроїв, Bootstrap містить десятки службових класів для показу, приховування, вирівнювання та розміщення вмісту.

Змінаdisplay

Використовуйте наші утиліти відображення для швидкого перемикання загальних значень displayвластивості. Змішайте його з нашою системою сіток, вмістом або компонентами, щоб відобразити або приховати їх у певних вікнах перегляду.

Параметри Flexbox

Bootstrap створено за допомогою flexbox, але не всі елементи displayбули змінені, display: flexоскільки це додало б багато непотрібних перевизначень і неочікувано змінило ключову поведінку браузера. Більшість наших компонентів створено з увімкненим flexbox.

Якщо вам потрібно додати display: flexдо елемента, зробіть це за допомогою .d-flexабо одного з адаптивних варіантів (наприклад, .d-sm-flex). Вам знадобиться цей клас або displayзначення, щоб дозволити використовувати наші додаткові утиліти flexbox для визначення розміру, вирівнювання, інтервалів тощо.

Поля та відступи

Використовуйте утиліти marginта padding spacing, щоб контролювати розподіл між елементами та компонентами та їх розмір. Bootstrap включає шестирівневу шкалу для утиліт інтервалів на основі значення змінної 1remза замовчуванням . $spacerВиберіть значення для всіх вікон перегляду (наприклад, .me-3для margin-right: 1remв LTR) або виберіть адаптивні варіанти для націлювання на певні вікна перегляду (наприклад, .me-md-3для margin-right: 1rem—в LTR— починаючи з mdточки зупину).

Перемикачvisibility

Якщо перемикання displayне потрібне, ви можете перемкнути visibilityелемент за допомогою наших утиліт видимості . Невидимі елементи все одно впливатимуть на макет сторінки, але візуально приховані від відвідувачів.