Властивість відображення
Швидко та оперативно перемикайте відображувані значення компонентів тощо за допомогою наших утиліт відображення. Включає підтримку деяких найбільш поширених значень, а також деякі додаткові функції для керування відображенням під час друку.
Як це працює
Змінюйте значення display
властивості за допомогою наших адаптивних класів утиліт відображення. Ми навмисно підтримуємо лише підмножину всіх можливих значень для display
. Класи можна комбінувати для різних ефектів, як вам потрібно.
Позначення
Класи корисності відображення, які застосовуються до всіх точок зупину , від xs
до xl
, не містять абревіатури точки зупину. Це пов’язано з тим, що ці класи застосовуються від min-width: 0;
і догори, і тому вони не зв’язані медіа-запитом. Решта контрольних точок, однак, включають абревіатуру контрольної точки.
Таким чином, класи називаються у форматі:
.d-{value}
дляxs
.d-{breakpoint}-{value}
дляsm
,md
,lg
, іxl
.
Де значення є одним із:
none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex
Відображувані значення можна змінити шляхом зміни $displays
змінної та перекомпіляції SCSS.
Медіа-запити впливають на ширину екрана з заданою точкою зупину або більшою . Наприклад, .d-lg-none
набори display: none;
на обох lg
і xl
екранах.
Приклади
<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>
<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>
Елементи приховування
Для швидшої розробки, адаптованої до мобільних пристроїв, використовуйте адаптивні класи відображення для показу та приховання елементів на пристрої. Уникайте створення абсолютно різних версій одного сайту, натомість приховуйте елементи відповідно до кожного розміру екрана.
Щоб приховати елементи, просто використовуйте .d-none
клас або один із .d-{sm,md,lg,xl}-none
класів для будь-якої адаптивної варіації екрана.
Щоб показати елемент лише на заданому інтервалі розмірів екрану, ви можете об’єднати один .d-*-none
клас із .d-*-*
класом, наприклад .d-none .d-md-block .d-xl-none
, приховати елемент для всіх розмірів екрана, крім середніх і великих пристроїв.
Розмір екрану | Клас |
---|---|
Приховано на всіх | .d-none |
Прихована тільки на хз | .d-none .d-sm-block |
Прихована лише на смт | .d-sm-none .d-md-block |
Приховано лише на мр | .d-md-none .d-lg-block |
Приховано тільки на lg | .d-lg-none .d-xl-block |
Приховано лише на xl | .d-xl-none |
Видно на всіх | .d-block |
Видно тільки на xs | .d-block .d-sm-none |
Видно лише на смт | .d-none .d-sm-block .d-md-none |
Видно тільки на md | .d-none .d-md-block .d-lg-none |
Видно тільки на lg | .d-none .d-lg-block .d-xl-none |
Видно тільки на xl | .d-none .d-xl-block |
<div class="d-lg-none">hide on lg and wider screens</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>
Показати в друкованому вигляді
Змінюйте display
значення елементів під час друку за допомогою наших класів утиліт друку. Включає підтримку тих самих display
значень, що й наші адаптивні .d-*
утиліти.
.d-print-none
.d-print-inline
.d-print-inline-block
.d-print-block
.d-print-table
.d-print-table-row
.d-print-table-cell
.d-print-flex
.d-print-inline-flex
Класи друку та відображення можна комбінувати.
<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>