bootstrap自带的隐藏类有哪些

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

bootstrap自带的隐藏类有哪些

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

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

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

类 描述

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

超小屏幕
           手机 ( 小屏幕
           平板 (≥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 版本开始不再建议使用。除了

相关的元素的特殊情况外,它们与 .visible-*-block 大体相同。

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

以上就是bootstrap自带的隐藏类有哪些的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2940698.html

(0)
上一篇 2025年3月11日 21:47:17
下一篇 2025年3月8日 11:50:56

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • bootstrap有几个网格

    bootstrap有12个网格。Bootstrap提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口尺寸的增加,系统会自动将页面分为最多12个网格。 本教程操作环境:Windows7系统、bootsrap3.3.7版、DELL G…

    2025年3月11日 编程技术
    200
  • bootstrap有几种容器

    bootstrap有2种容器:1、固定布局容器,将默认栅格放到“class=”container””的容器中即可创建固定布局;2、流式布局容器,将流式栅格放到“class=”container-fluid…

    2025年3月11日 编程技术
    200
  • bootstrap有哪些表格类

    bootstrap的表格类有:1、“.table”,基础表格;2、“.table-striped”,斑马线表格;3、“.table-bordered”,带边框的表格;4、“ .table-hover”,鼠标悬停高亮的表格等等。 本教程操作环…

    2025年3月11日 编程技术
    200
  • bootstrap媒体查询有什么作用

    在Bootstrap中,媒体查询可以通过屏幕的大小来分辨使用的设备并设置不同样式,可以在不同的条件下使用不同的样式,使页面在不同在终端设备下达到不同的渲染效果。 本教程操作环境:Windows7系统、bootsrap3.3.7版、DELL …

    2025年3月11日
    200
  • bootstrap可对表单设置哪三种状态

    bootstrap可对表单设置的三种状态:1、焦点状态,该状态告诉用户可输入或选择东西;2、禁用状态,该状态告诉用户不可以输入或选择东西;3、验证状态,该状态告诉用户,其进行的操作是否正确。 本教程操作环境:Windows7系统、boots…

    2025年3月11日 编程技术
    200
  • bootstrap按钮是什么标签

    bootstrap按钮可以是:1、a标签,语法“”;2、button标签,语法“”;3、button类型的input标签,语法“”。 本教程操作环境:Windows7系统、bootsrap3.3.7版、DELL G3电脑 bootstrap…

    2025年3月11日 编程技术
    200
  • bootstrap4.0与3.0有什么区别

    区别:1、Bootsrap3采用float布局,Bootstrap4采用flex布局;2、Bootstrap4中栅格系统可以不用添加指定的列数,Bootsrap3不行;3、Bootstrap3有4种栅格类,Bootstrap4有5种栅格类。…

    2025年3月11日
    200
  • bootstrap怎么实现右侧悬浮框

    在bootstrap中,可利用popover插件实现右侧悬浮框,该插件用于提供一个扩展视图,设置元素中的“data-placement”属性就可以设置悬浮框的显示方向,语法为“”。 本教程操作环境:Windows10系统、bootstrap…

    2025年3月11日
    200
  • aria在bootstrap里是啥意思

    在bootstrap中,aria是“可访问的富互联网应用程序”的意思,是“Accessible Rich Internet Application”的缩写,用于增强网页在残障辅助阅读设备上的识别读取,可弥补html和js可访问性方面的不足。…

    2025年3月11日
    200
  • bootstrap怎么设置固定定位

    在bootstrap中,可以利用Affix插件设置固定定位,该插件可以通过自定义属性data对任何元素进行固定定位,语法为“”。 本教程操作环境:Windows10系统、bootstrap3.3.7版、DELL G3电脑 bootstrap…

    2025年3月11日
    200

发表回复

登录后才能评论