Source

Властивість відображення

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

Як це працює

Змініть значення 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

Медіа-запити впливають на ширину екрана з заданою точкою розриву або більшою . Наприклад, .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>
d-блок d-блок
<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
hide on screens wider than lg
приховати на екранах менше LG
<div class="d-lg-none">hide on screens wider than lg</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

Класи друку та відображення можна комбінувати.

Лише екран (лише для друку)
Print Only (Hide on screen only)
Приховати до великого розміру на екрані, але завжди показувати на друкованому
<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>