• 技术文章 >web前端 >前端问答

    bootstrap自带的隐藏类有哪些

    青灯夜游青灯夜游2022-01-10 11:05:39原创206

    bootstrap自带的隐藏类有:“.hidden”、“.visible-xs-*”、“.visible-sm-*”、“.visible-md-*”、“.visible-lg-*”、“.hidden-xs”、“.hidden-sm”等等。

    本教程操作环境:Windows7系统、bootsrap3.3.7版、DELL G3电脑

    Bootstrap 提供了一些辅助类,以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备,实现内容对设备的显示和隐藏。

    需要谨慎使用这些工具,避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换。

    描述
    .show强制元素显示
    .hidden强制元素隐藏

    超小屏幕
    手机 (<768px)
    小屏幕
    平板 (≥768px)
    中等屏幕
    桌面 (≥992px)
    大屏幕
    桌面 (≥1200px)
    .visible-xs-*可见隐藏隐藏隐藏
    .visible-sm-*隐藏可见隐藏隐藏
    .visible-md-*隐藏隐藏可见隐藏
    .visible-lg-*隐藏隐藏隐藏可见
    .hidden-xs隐藏可见可见可见
    .hidden-sm可见隐藏可见可见
    .hidden-md可见可见隐藏可见
    .hidden-lg可见可见可见隐藏

    从 v3.2.0 版本起,形如 .visible-*-* 的类针对每种屏幕大小都有了三种变体,每个针对 CSS 中不同的 display 属性,列表如下:

    类组CSS display
    .visible-*-blockdisplay: block;
    .visible-*-inlinedisplay: inline;
    .visible-*-inline-blockdisplay: inline-block;

    因此,以超小屏幕(xs)为例,可用的 .visible-*-* 类是:.visible-xs-block、.visible-xs-inline 和 .visible-xs-inline-block。

    .visible-xs、.visible-sm、.visible-md 和 .visible-lg 类也同时存在。但是从 v3.2.0 版本开始不再建议使用。除了 <table> 相关的元素的特殊情况外,它们与 .visible-*-block 大体相同。

    更多关于bootstrap的相关知识,可访问:bootstrap基础教程!!

    以上就是bootstrap自带的隐藏类有哪些的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:bootstrap 隐藏类
    上一篇:javascript中next的意思是什么 下一篇:nodejs中async的用法是什么
    PHP编程就业班

    相关文章推荐

    • bootstrap中图片样式有哪些• bootstrap有哪些特点• bootstrap 怎么设置背景• bootstrap中popover的用法是什么• bootstrap中switch的用法是什么• bootstrap属于前端框架吗

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网