bootstrap4显示与隐藏元素方法

bootstrap4隐藏元素、显示元素其实非常的简单，因为bootstrap4已经为我们提供了相应的类，只需要按照它的规则去命名就可以了。

使用我们的响应式显示实用程序类更改display属性的值。我们特意只支持 的所有可能值的一个子集display。可以根据需要组合类以获得各种效果。我们可以根据需要组合类以获得各种效果。

类使用以下格式命名：

• .d-{value}
• .d-{breakpoint}-{value}

value的值可以是以下之一：

none

inline

inline-block

block

table

table-cell

table-row

flex

inline-flex

懂html代码的朋友，从这里其实可以看出来，相信都已经知道了：display设置为none就是隐藏，display设置为block就是显示的原理。

breakpoint的值可以是以下之一：

sm

md

lg

xl

再讲一点基础知识，Bootstrap 4 网格系统有以下 5 个类：

.col- 针对所有设备

.col-sm- 平板 - 屏幕宽度等于或大于 576px

.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px

.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px

.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px

一、bootstrap4显示元素

显示元素可用的值可以有很多，例如：block、table

这里以我的需求为例子：

d-sm-block：平板 - 屏幕宽度等于或大于 576px 显示。

d-md-block：桌面显示器 - 屏幕宽度等于或大于 768px 显示。

d-lg-block：大桌面显示器 - 屏幕宽度等于或大于 992px 显示。

d-xl-table：超大桌面显示器 - 屏幕宽度等于或大于 1200px 显示。

<div class="col-12 col-sm-4 col-md-3 col-lg-2 col-xl-2">
                <ul class="list-group d-none d-sm-block d-md-block d-lg-block d-xl-table">
                    <li class="list-group-item"> <a href="#">操作系统</a></li>
                    <li class="list-group-item">编程语言</li>
                    <li class="list-group-item">数据库</li>
                    <li class="list-group-item">中间件</li>
                    <li class="list-group-item">职业方向</li>
                    <li class="list-group-item">付杰博客</li>
                </ul>
            </div>

二、bootstrap4隐藏元素

隐藏元素的值就只有一个，那就是：none

还是以我这里的需求为例子：

d-none：小于576px的 不显示。

d-sm-none：平板 - 屏幕宽度等于或大于 576px 不显示。

d-md-none：桌面显示器 - 屏幕宽度等于或大于 768px 不显示。

<div class="col-12 col-sm-4 col-md-3 col-lg-2 col-xl-2">
                <ul class="list-group d-none d-sm-none d-md-none d-lg-block d-xl-table">
                    <li class="list-group-item"> <a href="#">操作系统</a></li>
                    <li class="list-group-item">编程语言</li>
                    <li class="list-group-item">数据库</li>
                    <li class="list-group-item">中间件</li>
                    <li class="list-group-item">职业方向</li>
                    <li class="list-group-item">付杰博客</li>
                </ul>
            </div>

总结：

bootstrap4显示与隐藏元素其实非常的简单，最常用的就是none与block。以下是一些常用的简单组合：