menu LittleJake's Blog
color_lens
avatar
Jake Liu
Never Settle
creative commons by-nc-sa
hit
Category
keyboard_arrow_down

© 2024 LittleJake's Blog.

萌ICP备20223020号

Bootstrap v4隐藏响应式元素


bootstrap v4

前言

最近开发个项目,用久了Bootstrap v3和ThinkPHP5没啥感觉。
想尝试一下新版本开发:Bootstrap v4和ThinkPHP6

Bootstrap v4添加了对大显示器的支持,新增xl大小。

隐藏小于等于对应大小:

Bootstrap v3 Bootstrap v4
hidden-xs(xs及以下) d-none d-sm-block
hidden-sm hidden-xs(sm及以下) d-none d-md-block
hidden-md hidden-sm ...(md及以下) d-none d-lg-block
hidden-lg hidden-md ...(lg及以下) d-none d-xl-block
无(xl及以下) d-none

隐藏、显示等于对应大小:

Bootstrap v3 Bootstrap v4
hidden-xs(xs) d-none d-sm-block
hidden-sm(sm) d-block d-sm-none d-md-block
hidden-md(md) d-block d-md-none d-lg-block
hidden-lg(lg) d-block d-lg-none d-xl-block
无(xl) d-block d-xl-none
visible-xs d-block d-sm-none
visible-sm d-none d-sm-block d-md-none
visible-md d-none d-md-block d-lg-none
visible-lg d-none d-lg-block d-xl-none
无(xl) d-none d-xl-block

隐藏大于对应大小:

Bootstrap v3 Bootstrap v4
hidden-xs-up(xs及以上) d-none
hidden-sm-up(sm及以上) d-sm-none
hidden-md-up(md及以上) d-md-none
hidden-lg-up(lg及以上) d-lg-none
无(xl及以上) d-xl-none

bootstrap

Buy me a beer
Jake Liu
Never Settle

Title: Bootstrap v4隐藏响应式元素

Author: Jake Liu

Origin:

Creative Commons License

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0) For any re-post you must give appropriate credit.

文章遵循CC许可 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 转载请注明出处

Tag:Bootstrap

评论区

Add a new comment.

Theme