W3.CSS Макет
Привіт W3.CSS Макет.
Привіт W3.CSS Макет.
Привіт W3.CSS Макет.
Привіт W3.CSS Макет.
Привіт W3.CSS Макет.
Привіт W3.CSS Макет.
W3.CSS Класи макету
| Клас | Опис |
|---|---|
| w3-cell-row | Контейнер для комірок (стовпців). |
| w3-cell | Комірка макета (стовпець). |
| w3-cell-top | Вирівнює вміст у верхній частині комірки (стовпця). |
| w3-cell-middle | Вирівнює вміст по вертикалі посередині комірки (стовпця). |
| w3-cell-bottom | Вирівнює вміст у нижній частині комірки (стовпця). |
| w3-mobile | Додає комірці (стовпцю) реакцію на мобільний пристрій. Відображає елементи як блокові елементи на мобільних пристроях. |
HTML Блокові елементи
Спочатку блокові елементи HTML (наприклад, елементи <div>) відображаються як вертикальні блоки:
Привіт W3.CSS Макет.
Привіт W3.CSS Макет.
Приклад
<div class="w3-container w3-red">
<p>Привіт W3.CSS Макет.</p>
</div>
<div class="w3-container w3-green">
<p>Привіт W3.CSS Макет.</p>
</div>
Комірки (клітинки) макета
Клас w3-cell перевизначає блокові елементи для відображення горизонтально (як клітинки таблиці):
Привіт W3.CSS Макет.
Привіт W3.CSS Макет.
Приклад
<div class="w3-container w3-red w3-cell">
<p>Привіт W3.CSS Макет.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Привіт W3.CSS Макет.</p>
</div>
Контейнер макета
w3-cell-row – це контейнер для комірок (стовпців).
Ширина контейнера w3-cell-row визначає загальну ширину всіх комірок, що містяться.
Ширина за умовчанням становить 100%:
Привіт W3.CSS Макет.
Привіт W3.CSS Макет.
Приклад
<div class="w3-cell-row">
<div class="w3-container w3-red w3-cell">
<p>Привіт W3.CSS Макет.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Привіт W3.CSS Макет.</p>
</div>
</div>
Якщо змінити ширину контейнера комірок, це зменшить загальну ширину комірок, що містяться:
Привіт W3.CSS Макет.
Привіт W3.CSS Макет.
Приклад
<div class="w3-cell-row" style="width:75%">
<div class="w3-container w3-red w3-cell">
<p>Привіт W3.CSS Макет.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Привіт W3.CSS Макет.</p>
</div>
</div>
Комірки макета саморегулюються
Клас w3-cell має дуже гарний вбудований стандарт саморегулювання. Елементи, розташовані поруч, автоматично підлаштуються до необхідної ширини:
Привіт W3.CSS Макет.
Привіт W3.CSS Макет. Привіт W3.CSS Макет.
Приклад
<div class="w3-container w3-red w3-cell">
<p>Привіт W3.CSS Макет.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Привіт W3.CSS Макет. Привіт W3.CSS Макет.</p>
</div>
Комірки макета налаштувати на однакову висоту
Елементи w3-cell, розташовані пліч-о-пліч, також автоматично регулюватимуться на однакову висоту:
Привіт W3.CSS Макет.
Привіт W3.CSS Макет.
Привіт W3.CSS Макет.
Привіт W3.CSS Макет.
Привіт W3.CSS Макет.
Приклад
<div class="w3-container w3-red w3-cell">
<p>Привіт W3.CSS Макет.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Привіт W3.CSS Макет.</p>
<p>Привіт W3.CSS Макет.</p>
<p>Привіт W3.CSS Макет.</p>
<p>Привіт W3.CSS Макет.</p>
</div>
Адаптивний макет
Клас w3-mobile додає будь-якому елементу HTML першочергове реагування на мобільні пристрої.
Якщо використовується разом із w3-cell, він відображатиме стовпці макета вертикально на маленьких екранах/мобільних телефонах і горизонтально на середніх/великих екранах (десктопах).
На середніх і великих екранах:
Привіт W3.CSS Макет.
Привіт W3.CSS Макет.
Привіт W3.CSS Макет.
На маленьких екранах (телефонах):
Привіт W3.CSS Макет.
Привіт W3.CSS Макет.
Привіт W3.CSS Макет.
Приклад
<div class="w3-container w3-red w3-cell w3-mobile">
<p>Привіт W3.CSS Макет.</p>
</div>
<div class="w3-container w3-green w3-cell w3-mobile">
<p>Привіт W3.CSS Макет.</p>
</div>
<div class="w3-container w3-blue w3-cell w3-mobile">
<p>Привіт W3.CSS Макет.</p>
</div>
Легке вирівнювання
Клас w3-cell дозволяє дуже легко вирівнювати текст.
Існує 3 різні класи вирівнювання:
- w3-cell-top (за замовчуванням)
- w3-cell-middle
- w3-cell-bottom
Привіт W3.CSS Макет.
Привіт W3.CSS Макет.
Привіт W3.CSS Макет.
Привіт W3.CSS Макет.
Привіт W3.CSS Макет.
Привіт W3.CSS Макет.
Приклад
<div class="w3-container w3-red w3-cell">
<p>Привіт W3.CSS Макет.</p>
<p>Привіт W3.CSS Макет.</p>
<p>Привіт W3.CSS Макет.</p>
<p>Привіт W3.CSS Макет.</p>
</div>
<div class="w3-container w3-green w3-cell w3-cell-middle">
<p>Привіт W3.CSS Макет.</p>
</div>
<div class="w3-container w3-blue w3-cell w3-cell-bottom">
<p>Привіт W3.CSS Макет.</p>
</div>
Клас w3-cell-row розтягує елементи відповідно до ширини сторінки:
Привіт W3.CSS Макет.
Привіт W3.CSS Макет.
Привіт W3.CSS Макет.
Привіт W3.CSS Макет.
Привіт W3.CSS Макет.
Привіт W3.CSS Макет.
Приклад
<div class="w3-cell-row">
<div class="w3-container w3-red w3-cell">
<p>Привіт W3.CSS Макет.</p>
<p>Привіт W3.CSS Макет.</p>
<p>Привіт W3.CSS Макет.</p>
<p>Привіт W3.CSS Макет.</p>
</div>
<div class="w3-container w3-green w3-cell w3-cell-middle">
<p>Привіт W3.CSS Макет.</p>
</div>
<div class="w3-container w3-blue w3-cell w3-cell-bottom">
<p>Привіт W3.CSS Макет.</p>
</div>
</div>
