Bootstrap 简单实用的自适应显示隐藏方法

Bootstrap 是一个流行的前端框架，它提供了大量的预定义样式和组件，使得开发响应式网站变得简单。在Bootstrap中，实现元素在不同屏幕尺寸下的显示与隐藏，可以通过使用其响应式工具类来完成。以下是一些简单实用的自适应显示隐藏方法：

1. 使用响应式可见性类

Bootstrap 提供了一系列用于控制不同屏幕尺寸下元素可见性的工具类。这些类包括：

.d-none：在任何屏幕尺寸下都隐藏元素。

.d-sm-none、.d-md-none、.d-lg-none、.d-xl-none：分别在小型、中型、大型和超大型设备上隐藏元素。

.d-sm-block、.d-md-block、.d-lg-block、.d-xl-block：分别在小型、中型、大型和超大型设备上显示元素。

例如，如果你想在小型设备上隐藏一个元素，而在其他尺寸的屏幕上显示它，你可以这样写：

<div class="d-sm-none d-md-block">

  This is only visible on medium and larger screens.

</div>

2. 使用响应式实用工具类

Bootstrap 4及以上版本引入了更多的实用工具类来控制不同屏幕尺寸下的显示与隐藏。例如：

.visible-xs-block (已弃用，使用 .d-block d-sm-none 替代)

.visible-sm-block (已弃用，使用 .d-none d-sm-block d-md-none 替代)

.visible-md-block (已弃用，使用 .d-none d-md-block d-lg-none 替代)

.visible-lg-block (已弃用，使用 .d-none d-lg-block d-xl-none 替代)

3. 使用媒体查询自定义CSS

如果你需要更细粒度的控制，或者Bootstrap的工具类不满足你的需求，你可以使用CSS媒体查询来控制元素的显示与隐藏。例如：

@media (max-width: 575.98px) {

  .hide-on-small {

    display: none;

  }

}

然后在HTML中使用这个类：

<div class="hide-on-small">

  This is hidden on small screens.

</div>

4. 使用Bootstrap Flex Utilities（针对Flex布局）

对于使用Flex布局的情况，Bootstrap还提供了一些特殊的实用工具类来控制flex项目的显示与隐藏：

<div class="d-flex flex-wrap">

  <div class="p-2">Flex item 1</div>

  <div class="p-2 d-none d-md-block">Flex item 2 (hidden on small screens)</div>

</div>

结论

通过上述方法，你可以根据不同的屏幕尺寸灵活地控制元素的显示与隐藏，从而创建出既美观又功能强大的响应式网页。记得查阅最新的Bootstrap文档，因为框架的更新可能会带来新的工具类和最佳实践。

   <div class="d-none">
        我在任何屏幕都会隐藏！    </div>

    <div class="d-block">
        我在任何屏幕都会显示    </div>

    <div class="d-none d-sm-block">
        仅在xs隐藏！    </div>

    <div class="d-lg-block d-xl-none">
        仅在xl显示！    </div>

    <div class="d-none d-md-block">
        仅在md显示！    </div>


    <div class="d-block">
        我在任何屏幕都会显示    </div>