bootstrap4显示与隐藏元素方法

这篇文章介绍了bootstrap4显示与隐藏元素方法，分享给大家做个参考，收藏Java资料网收获更多编程知识

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

文章来源:https://blog.csdn.net/ffffffff8/article/details/142568161
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！