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。以下是一些常用的简单组合：
| 屏幕尺寸与效果 | Class |
|---|---|
| 全部隐藏 | .d-none |
| 仅在 xs 上隐藏 | .d-none .d-sm-block |
| 仅在 sm 上隐藏 | .d-sm-none .d-md-block |
| 仅在 md 上隐藏 | .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 |
| 仅在 sm 上可见 | .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 |
