5 способов скрыть отображение в Bootstrap: подробное руководство

Чтобы скрыть отображение в Bootstrap, вы можете использовать различные служебные классы и методы. Вот несколько методов, которые вы можете использовать:

  1. Использование класса «d-none». Этот класс можно применить к любому элементу HTML, чтобы скрыть его на экранах всех размеров. Он устанавливает для свойства display значение «none». Например:

    <div class="d-none">Hidden on all screen sizes</div>
  2. Использование адаптивных классов отображения: Bootstrap предоставляет набор классов, которые позволяют управлять видимостью элементов в зависимости от размеров экрана. К этим классам относятся «d-sm-none» (скрыть на маленьких экранах и выше), «d-md-none» (скрыть на средних экранах и выше) и так далее. Вот пример:

    <div class="d-sm-none">Hidden on small screens and up</div>
    <div class="d-md-none">Hidden on medium screens and up</div>
  3. Использование «невидимого» класса. Если вы хотите скрыть элемент, но при этом сохранить его пространство в макете, вы можете использовать «невидимый» класс. Этот класс устанавливает для свойства «видимость» значение «скрытый», сохраняя при этом макет элемента нетронутым. Вот пример:

    <div class="invisible">Invisible but still takes up space</div>
  4. Пользовательский CSS: вы также можете написать свои собственные правила CSS, чтобы скрывать элементы в Bootstrap. Например, вы можете создать собственный класс и применить его к элементам, которые хотите скрыть. Вот пример:

    <style>
    .custom-hidden {
    display: none;
    }
    </style>
    <div class="custom-hidden">Custom hidden element</div>
  5. JavaScript/jQuery: если вам нужно динамически скрывать элементы на основе взаимодействия с пользователем или других событий, вы можете использовать JavaScript или jQuery для программного управления свойством отображения элемента. Вот пример jQuery:

    $('.my-element').hide();