BootStrap组件class根据不同设备设定显示与隐藏

BootStrap组件class根据不同设备设定显示与隐藏

类使用以下格式命名:

.d-{value}

.d-{breakpoint}-{value}

value的值可以是以下之一:

none

inline

inline-block

block

table

table-cell

table-row

flex

inline-flex

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

如需在给定的屏幕尺寸范围内显示某个页面元素的话,可以将一个 .d-*-none 类和一个 .d-*-* 类联合使用,例如,.d-none .d-md-block .d-xl-none .d-xxl-none 的效果是:在中等尺寸(medium)和大尺寸(large)的屏幕上显示指定的页面元素,其余尺寸的屏幕上全部隐藏该页面元素。
隐藏元素:

复制代码
d-none: 全部隐藏
d-sm-none: 设备尺寸大于等于sm时隐藏
d-md-none: 设备尺寸大于等于md时隐藏
d-lg-none: 设备尺寸大于等于lg时隐藏
d-xl-none: 设备尺寸大于等于xl时隐藏
d-xxl-none: 设备尺寸大于等于xxl时隐藏
显示元素:
复制代码
d-block: 全部可见
d-sm-block: 设备尺寸大于等于sm时显示
d-md-block: 设备尺寸大于等于md时显示
d-lg-block: 设备尺寸大于等于lg时显示
d-xl-block: 设备尺寸大于等于xl时显示
d-xxl-block: 设备尺寸大于等于xxl时显示
组合:
复制代码
d-none d-sm-block: 设备尺寸小于sm时隐藏
d-none d-md-block: 设备尺寸小于md时隐藏
d-none d-lg-block: 设备尺寸小于lg时隐藏
d-none d-xl-block: 设备尺寸小于xl时隐藏

我的热门文章推荐

相关推荐
wordbaby4 分钟前
备忘录模式(Memento Pattern)详解
前端
THMAIL9 分钟前
机器学习从入门到精通 - Transformer颠覆者:BERT与预训练模型实战解析
python·随机森林·机器学习·分类·bootstrap·bert·transformer
小鱼儿亮亮18 分钟前
二、React基础精讲:编写TodoList、事件绑定、JSX语法、组件之间传值
前端·react.js
Mintopia21 分钟前
实时 AIGC:Web 端低延迟生成的技术难点与突破
前端·javascript·aigc
小鱼儿亮亮21 分钟前
五、Redux进阶:UI组件、容器组件、无状态组件、异步请求、Redux中间件:Redux-thunk、redux-saga,React-redux
前端·react.js
Mintopia22 分钟前
Next.js 性能优化双绝:Image 与 next/font 的底层修炼手册
前端·javascript·next.js
jingling55527 分钟前
uniapp | 解决组件样式不生效问题
前端·css·uni-app·html·学习方法
小菜全28 分钟前
使用UniApp实现下拉框和表格组件页面
开发语言·前端·javascript·elementui·前端框架·html
三十_A33 分钟前
【工具】41K star!网页一键变桌面应用
前端·开源
wordbaby1 小时前
解锁时光机:用 React Hooks 轻松实现 Undo/Redo 功能
前端·react.js