W3.CSS Display / Відображення
Класи display (відображення) дозволяють відображати елементи HTML у визначених позиціях всередині інших елементів HTML:
Top Left
Top Right
Bottom Left
Bottom Right
Left
Right
Middle
W3.CSS Класи відображення
W3.CSS надає наступні класи відображення:
| Клас | Визначає |
|---|---|
| w3-display-container | Контейнер для w3-display-класів |
| w3-display-topleft | Відображає зміст у верхньому лівому куті w3-display-container |
| w3-display-topright | Відображає зміст у верхньому правому куті w3-display-container |
| w3-display-bottomleft | Відображає зміст в лівому нижньому куті w3-display-container |
| w3-display-bottomright | Відображає зміст в правому нижньому куті w3-display-container |
| w3-display-left | Відображає зміст зліва (посередині зліва) w3-display-container |
| w3-display-right | Відображає зміст справа (посередині справа) w3-display-container |
| w3-display-middle | Відображає зміст в середині (в центрі) w3-display-container |
| w3-display-topmiddle | Відображає зміст в верхній середині w3-display-container |
| w3-display-bottommiddle | Відображає зміст в нижній середині w3-display-container |
| w3-display-position | Відображає зміст у вказаній позиції в контейнері w3-display-container |
| w3-display-hover | Відображає зміст при наведенні курсору всередині w3-display-container |
| w3-left | Плаваючій елемент зліва (float: left) |
| w3-right | Плаваючій елемент справа (float: right) |
| w3-show | Відображає елемент (display: block) |
| w3-hide | Ховає елемент (display: none) |
| w3-mobile | Додає адаптивність будь-яких елементів в першу чергу для мобільних пристроїв. Відображає елементи у вигляді блочних елементів на мобільних пристроях |
Приклади
Приклад
<div class="w3-display-container w3-green" style="height:300px;">
<div class="w3-display-topleft">Top Left</div>
<div class="w3-display-topright">Top Right</div>
<div class="w3-display-bottomleft">Bottom Left</div>
<div class="w3-display-bottomright">Bottom Right</div>
<div class="w3-display-left">Left</div>
<div class="w3-display-right">Right</div>
<div class="w3-display-middle">Middle</div>
<div class="w3-display-topmiddle">Top Mid</div>
<div class="w3-display-bottommiddle">Bottom Mid</div>
</div>
Спробуйте самі »
Той самий приклад, що і вище, з доданим внутрішнім відступом (padding):
Top Left
Top Right
Bottom Left
Bottom Right
Left
Right
Middle
Приклад
<div class="w3-display-container w3-green" style="height:300px;">
<div class="w3-padding w3-display-topleft">Top Left</div>
<div class="w3-padding w3-display-topright">Top Right</div>
<div class="w3-padding w3-display-bottomleft">Bottom Left</div>
<div class="w3-padding w3-display-bottomright">Bottom Right</div>
<div class="w3-padding w3-display-left">Left</div>
<div class="w3-padding w3-display-right">Right</div>
<div class="w3-padding w3-display-middle">Middle</div>
<div class="w3-padding w3-display-topmiddle">Top Mid</div>
<div class="w3-padding w3-display-bottommiddle">Bottom Mid</div>
</div>
Спробуйте самі »
Відображення тексту всередині зображення:
Top Left
Top Right
Bottom Left
Bottom Right
Top Mid
Left
Right
Middle
Bottom Mid
Приклад
<div class="w3-display-container">
<img src="img_lights.jpg" alt="Lights" style="width:100%">
<div class="w3-padding w3-display-topleft">Top Left</div>
<div class="w3-padding w3-display-topright">Top Right</div>
<div class="w3-padding w3-display-bottomleft">Bottom Left</div>
<div class="w3-padding w3-display-bottomright">Bottom Right</div>
<div class="w3-padding w3-display-topmiddle">Top Mid</div>
<div class="w3-padding w3-display-left">Left</div>
<div class="w3-padding w3-display-right">Right</div>
<div class="w3-padding w3-display-middle">Middle</div>
<div class="w3-padding w3-display-bottommiddle">Bottom Mid</div>
</div>
Спробуйте самі »
Відображення при наведенні
Клас w3-display-hover відображає зміст при наведенні курсору всередині w3-display-container (перехід від схованого до відображеного).
Top Left
Top Right
Bottom Left
Bottom Right
Left
Right
Наведіть курсор миші на цей блок!
Top Mid
Bottom Mid
Приклад
<div class="w3-display-container w3-light-grey" style="height:300px;">
<div class="w3-display-topleft w3-display-hover">Top Left</div>
<div
class="w3-display-topright w3-display-hover">Top Right</div>
<div
class="w3-display-bottomleft w3-display-hover">Bottom Left</div>
<div class="w3-display-bottomright w3-display-hover">Bottom Right</div>
<div class="w3-display-left w3-display-hover">Left</div>
<div
class="w3-display-right w3-display-hover">Right</div>
<div
class="w3-display-middle">Наведіть курсор миші на цей блок!</div>
<div
class="w3-display-topmiddle w3-display-hover">Top Mid</div>
<div
class="w3-display-bottommiddle w3-display-hover">Bottom Mid</div>
</div>
Спробуйте самі »
Класи w3-display-hover можна комбінувати з класами ефектів та анімації для створення крутих ефектів при наведенні:
Khaki pants, $19.99
Приклад
<div class="w3-display-container w3-hover-opacity">
<img src="img_avatar.png"
alt="Avatar">
<div class="w3-display-middle w3-display-hover">
<button class="w3-button w3-black">John Doe</button>
</div>
</div>
Спробуйте самі »
Вы узнаете больше об анимации и эффектах позже в этом учебнике.
Відображення флага
Доклавши трохи уяви, w3-display-класи можна використовувати для створення прапору:
Приклад
<div class="w3-display-container w3-card-4" style="height:200px;width:350px">
<div class="w3-red w3-display-topleft" style="width:25%;height:40%"></div>
<div class="w3-red w3-display-topright" style="width:60%;height:40%"></div>
<div class="w3-red w3-display-bottomleft" style="width:25%;height:40%"></div>
<div class="w3-red w3-display-bottomright" style="width:60%;height:40%"></div>
</div>
Спробуйте самі »
Плаваючі класи / Float
Клас w3-left переміщує елемент ліворуч, клас w3-right переміщує елемент праворуч:
w3-left
w3-right
Приклад
<div class="w3-bar w3-light-grey">
<div class="w3-left w3-red">w3-left</div>
<div class="w3-right w3-blue">w3-right</div>
</div>
Спробуйте самі »
Примітка: Clear float відбувається за допомогою класу w3-clear або розташуванням їх в контейнер w3-container, як в прикладі вище (очищує float автоматично).
Сховати і показати
Примусове відображення або приховування елементу за допомогою класу w3-show або w3-hide.
Приклад
<p class="w3-show">Я відображаюсь (display: block).</p>
<p class="w3-hide">Я ховаюсь (display: none).</p>
Спробуйте самі »
Ці класи часто використовуються для перемикання між приховуванням і відображенням елементів:
Клас w3-mobile
Клас w3-mobile додає mobile-first адаптивність (спочатку мобільність) будь-якому елементу.
Він додає display: block і width: 100% до елементу на екранах шириною меньше 600 пікселів.
