Механизм скрытия элементов при печати с использованием Bootstrap 5 Display работает следующим образом:
- Включают файл Bootstrap CSS в HTML-документ. 1 Его можно скачать и разместить на сервере локально или включить из CDN. 1
- Используют класс d-print вместе с другими классами отображения для управления видимостью элементов при печати. 1 Некоторые часто используемые классы:
- d-print-none — скрывает элемент при печати; 13
- d-print-block — делает элемент видимым при печати в стиле блока; 1
- d-print-inline — делает элемент видимым при печати в стиле встроенного элемента; 1
- d-print-inline-block — делает элемент видимым при печати в стиле встроенного блока; 1
- d-print-table — делает элемент видимым при печати в стиле таблицы; 1
- d-print-table-row — делает элемент видимым при печати в стиле строки таблицы; 1
- d-print-table-cell — делает элемент видимым при печати в стиле ячейки таблицы. 1
- Применяют соответствующий класс отображения к HTML-элементам, которые нужно контролировать для печати. 1 Например, чтобы скрыть элемент при печати, используют класс d-print-none:
<div class='d-print-none'>Этот контент будет скрыт при печати</div>
. 1 - После применения подходящих классов отображения можно протестировать предварительный просмотр документа в браузере. 1 Для этого используют функцию печати браузера, чтобы увидеть, как элементы будут выглядеть при печати. 1
С помощью класса d-print и других классов отображения в Bootstrap 5 можно легко контролировать видимость и макет элементов специально для печати на веб-страницах. 1