自适应辅助类

根据不同的视口宽度来显示(隐藏)内容

显示 #

您可以使用下列 display 类之一:

  • is-block
  • is-flex
  • is-inline
  • is-inline-block
  • is-inline-flex

例如,这是 is-flex 辅助类如何工作的:

移动设备
上至 768px
平板
769px1023px
桌面系统
1024px1215px
宽屏
1216px1407px
巨屏
1408px 及以上
is-flex-mobile Flex 无变化 无变化 无变化 无变化
is-flex-tablet-only 无变化 Flex 无变化 无变化 无变化
is-flex-desktop-only 无变化 无变化 Flex 无变化 无变化
is-flex-widescreen-only 无变化 无变化 无变化 Flex 无变化

类显示上至一个特定断点开始

is-flex-touch Flex Flex 无变化 无变化 无变化
is-flex-tablet 无变化 Flex Flex Flex Flex
is-flex-desktop 无变化 无变化 Flex Flex Flex
is-flex-widescreen 无变化 无变化 无变化 Flex Flex
is-flex-fullhd 无变化 无变化 无变化 无变化 Flex

至于其他显示选项,只需用 is-blockis-inlineis-inline-block 或者 is-inline-flex 替换 is-flex 即可

隐藏 #

移动设备
上至 768px
平板
769px1023px
桌面系统
1024px1215px
宽屏
1216px1407px
巨屏
1408px 及以上
is-hidden-mobile 隐藏 显示 显示 显示 显示
is-hidden-tablet-only 显示 隐藏 显示 显示 显示
is-hidden-desktop-only 显示 显示 隐藏 显示 显示
is-hidden-widescreen-only 显示 显示 显示 隐藏 显示

类隐藏上至一个特定断点开始

is-hidden-touch 隐藏 隐藏 显示 显示 显示
is-hidden-tablet 显示 隐藏 隐藏 隐藏 隐藏
is-hidden-desktop 显示 显示 隐藏 隐藏 隐藏
is-hidden-widescreen 显示 显示 显示 隐藏 隐藏
is-hidden-fullhd 显示 显示 显示 显示 隐藏

其他可视辅助类 #

is-invisible 添加可视性之隐藏
is-hidden 隐藏元素
is-sr-only 隐藏元素的显示但要保证元素对于屏幕阅读器可见

Made with Bulma 此页面为开放源码页面。 发现排版问题?或者表达模糊?
在 GitHub 改进该页内容

#native_company# #native_desc#
#native_cta#

简讯 功能、版本、展柜……实时新闻滚动发布!