文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Bootstrap 3隐藏-*不适用于中等大小的窗口

Bootstrap是一种流行的前端开发框架，它提供了丰富的CSS和JavaScript组件，用于快速构建响应式网站和Web应用程序。

在Bootstrap 3中，我们可以使用特殊的CSS类来隐藏元素，其中包括"hidden-xs"、"hidden-sm"、"hidden-md"和"hidden-lg"。这些类允许我们根据屏幕大小隐藏特定的元素。

  • "hidden-xs"类用于隐藏在Extra Small（非常小）屏幕上的元素，通常是手机屏幕。
  • "hidden-sm"类用于隐藏在Small（小）屏幕上的元素，通常是平板电脑屏幕。
  • "hidden-md"类用于隐藏在Medium（中等）屏幕上的元素，通常是较大的平板电脑或小型笔记本电脑屏幕。
  • "hidden-lg"类用于隐藏在Large（大）屏幕上的元素，通常是台式机电脑屏幕或大型笔记本电脑屏幕。

这些隐藏类可用于创建响应式设计，以便在不同的设备上呈现不同的内容或布局。例如，您可能希望在较小的屏幕上隐藏某些元素，以便节省空间或提供更好的用户体验。

对于中等大小的窗口，Bootstrap 3的隐藏类可能不适用。在这种情况下，您可以考虑使用媒体查询或其他自定义CSS来根据特定的窗口大小隐藏或显示元素。

腾讯云提供了一系列与前端开发相关的产品和服务，例如云服务器、对象存储、内容分发网络（CDN）等，可以帮助开发者轻松构建和托管响应式网站和Web应用程序。您可以访问腾讯云的官方网站了解更多信息和产品介绍：https://cloud.tencent.com/

相关搜索:粘滞表格不适用于不同大小的窗口窗口高度不适用于浏览器调整大小Angular Material TextArea自动调整大小不适用于bootstrap 4用于变换的动画不适用于bootstrap 4减小Bootstrap 3中的dropdown大小Ionic 3网格大小不适用于较小屏幕溢出:隐藏；不适用于嵌套的divBootstrap折叠不适用于Ajax创建的内容Bootstrap ColorPicker不适用于动态创建的元素Python Turtle -矩形不适合相同大小的窗口删除bootstrap 3弹出窗口上的底部阴影Bootstrap突然不适用于我的React JS项目Bootstrap工具提示不适用于动态生成的元素Bootstrap折叠不适用于嵌套的无序列表Bootstrap -如何停止图像重叠在较小的窗口大小？复杂背景不适用于背景大小的封面js中的内联样式不适用于新窗口用于引导的超大模式，窗口大小为90%无法隐藏Bootstrap 3x上的子菜单Bootstrap模式不适用于fullPage.js的函数`scroll`
相关搜索:
页面内容是否对你有帮助？
有帮助
没帮助

相关·内容

Bootstrap 响应式实用工具

Bootstrap 提供了一些辅助类，以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。...需要谨慎使用这些工具，避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换。...超小屏幕手机 (中等屏幕桌面 (≥992px) 大屏幕桌面 (≥1200px) .visible-xs-* 可见 隐藏 隐藏 隐藏 .visible-sm-...隐藏 可见 可见 .hidden-md 可见 可见 隐藏 可见 .hidden-lg 可见 可见 可见 隐藏 从 v3.2.0 版本起，形如 .visible-*-* 的类针对每种屏幕大小都有了三种变体...调整浏览器的窗口大小，或者在不同的设备上加载实例，测试响应式实用工具类。

48520

    • 移动开发-响应式

    原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化 也可以根据实际情况自己定义划分 Bootstrap 简介...：停止维护,兼容性好,代码不够简洁，功能不够完善 3.4.1：稳定, 但放弃了IE6-IE7，对IE8支持但是界面效果不好,偏向用于开发响应式布局、移动设备优先的Web项目 4.6.1 ：最新版，目前还不是很流行...--解决ie9以下浏览器对 css3 Media Query 的不识别 --> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js...可见 可见 可见 .hidden-sm 可见 隐藏 可见 可见 .hidden-md 可见 可见 隐藏 可见 .hidden-lg 可见 可见 可见 隐藏 为了加快对移动设备友好的页面开发工作，利用媒体查询功能...，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容 Bootstrap 其他 (按钮、表单、表格) 可参考 Bootstrap 文档 本节单词： Bootstrap container container-fluid

    2.4K20

    移动开发之响应布局

    1.2 响应式布局容器 响应时需要一个父级作为布局容器，来配合子集元素来实现变化效果 原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面的子元素的排列方式和大小，从而实现不同屏幕下...=1200px）：宽度设置为1170px 2.container-fluid类 流式布局容器 百分百宽度 占据全部视口(ciewport)的容器 适合于单独做移动开发 3.Bootstrap...，container的宽度不同，我们再把containei划分为12等份 3.2栅格选项参数 栅格系统用于通过一系列的行（row）与列(column)的组合来创建页面布局，你的内容就可以放入这些创建好的布局中...，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。...类名 超小屏 小屏 中屏 大屏 .hidden-xs 隐藏 可见 可见 可见 .hidden-sm 可见 隐藏 可见 可见 .hidden-md 可见 可见 隐藏 可见 .hidden-lg 可见 可见

    2.2K20

    bootstrap快速入门笔记（二）-栅格系统，响应式类

    元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding 3.栅格类适用于与屏幕宽度大于或等于分界点大小的设备 .col-md-*此为栅格类 二，媒体查询.../* 超小屏幕（手机，小于 768px） */ /* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？）...{ ... } /* 大屏幕（大桌面显示器，大于等于 1200px） */ @media (min-width: @screen-lg-min) { ... } 还有max-width：将 CSS 的影响限制在更小范围的屏幕大小之内...超小屏幕手机 (中等屏幕桌面 (≥992px)大屏幕桌面 (≥1200px) .visible-xs-* 可见 隐藏 隐藏 隐藏 .visible-sm-...可见 隐藏 可见 可见 .hidden-md 可见 可见 隐藏 可见 .hidden-lg 可见 可见 可见 隐藏 从 v3.2.0 版本起，形如 .visible-*-* 的类针对每种屏幕大小都有了三种变体

    1.1K30

    移动端WEB开发之响应式布局

    原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。...bootstrap里面父容器版心的尺寸划分 超小屏幕（手机，小于 768px）：设置宽度为 100% 小屏幕（平板，大于等于 768px）：设置宽度为 750px 中等屏幕（桌面显示器，大于等于...3.x.x：目前使用最多,稳定,但是放弃了IE6-IE7。对 IE8 支持但是界面效果不好,偏向用于开发响应式布局、移动设备优先的WEB 项目。...栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。...可见 隐藏 与之相反的是visible-xs， visible-sm， visible-md， visible-lg ，是显示某个页面内容 bootstrap其他（如按钮、表单、表格等）请参考bootstrap

    4.1K20

    Bootstrap响应式工具

    以下是Bootstrap提供的响应式断点：xs（超小屏幕）：适用于移动设备，屏幕宽度小于576px。sm（小屏幕）：适用于平板设备，屏幕宽度大于等于576px。...md（中等屏幕）：适用于小型笔记本电脑和平板设备，屏幕宽度大于等于768px。lg（大屏幕）：适用于大型笔记本电脑和台式机，屏幕宽度大于等于992px。...显示/隐藏类Bootstrap提供了一些用于控制元素在不同屏幕尺寸下显示或隐藏的类。这些类可以根据需要在不同的断点上添加或移除。...以下是Bootstrap提供的显示/隐藏类：.d-none：在所有断点上隐藏元素。.d-{breakpoint}-none：在指定断点上隐藏元素，例如.d-sm-none在小屏幕上隐藏元素。....通过使用这些显示/隐藏类，可以根据不同屏幕尺寸来控制元素的可见性，从而实现更好的响应式布局。宽度调整类Bootstrap还提供了一些宽度调整类，用于根据需要在不同屏幕尺寸上调整元素的宽度。

    2.3K40

    bootstrap笔记（五）——栅格参数

    col-md-数字： xs：手机设备大小 sm:平板设备大小 md:笔记本设备大小 lg:台式电脑设备大小 数字：代表着在一行12列中所占的单元格数。...如：col-lg-3，代表着在一行12列中所占的3列（col-lg-1）。 当设备窗口大小调到浏览器最大时容器大小（width:1170），占据3个列。...当设备窗口大小调到浏览器最大时容器大小（width:970），占据1个列。这是因为容器大小的改变时，在用于容器的编排，所以处于在sm的范围内将占据一行作为一列。...如果是大屏幕 一行显示6列 说明每一列将占据2个单元格 col-lg-2 如果是中等屏幕 一行显示4列 说明每一列将占据3个单元格 col-md-3 如果是小屏幕 一行显示3列 说明每一列将占据4...--需求： 如果是大屏幕 一行显示6列 col-lg-2 如果是中等屏幕 一行显示4列 col-md-3 如果是小屏幕 一行显示3列 col-sm-4

    1.5K40

    前端|利用模态框（Modal）实现弹窗效果

    使用模态窗口的时候，一般会用到某种触发器，常用的是按钮或链接。 二、模态框（Modal）简单介绍 模态框在bootstrap中是一个插件，所以也可以单独引用插件，但是这就需要引用modal.js。...但是在本文中还是介绍用bootstrap的写法。...class="modal-body"，用于为模态窗口的主体设置样式。class="modal-footer"，用于为模态窗口的底部设置样式。...class="modal-content"是用来设置模态框是显示还是隐藏。data-dismiss="modal"，用于关闭模态窗口。class="modal-dialog"是用来设置弹出框居中的。...默认情况下弹出框的宽度比较小，不适合要求，bootstrap中提供了modal-dialog的三个选项，大、默认、小（modal-lg最大，默认中，modal-sm最小）。

    5.8K30

    移动端WEB开发之响应式布局

    原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。...3.x.x：目前使用最多,稳定,但是放弃了IE6-IE7。对 IE8 支持但是界面效果不好,偏向用于开发响应式布局、移动设备优先的WEB 项目。...-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> Bootstrap 101 Template ​ 用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。...，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。

    3.4K31

    javaWeb核心技术第六篇之BootStrap

    概述: Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。...1.8+) 3.导入BootStrap的js 4.设置视口(支持移动设备) 中等屏幕时占4份,在小屏时占6份,在超小屏时占12份 img2:中等屏幕时占4份,在小屏时隐藏,在超小屏时占12份 超链接:中等屏幕时占4份,在小屏时占6份,在超小屏时占...--下div: 左div:中等屏幕时占2份,小屏和超小屏隐藏 图片 右div:中等屏幕时占10份,小屏和超小屏占12份 middle div:中等屏幕时占6份,小屏和超小屏隐藏...--下div: 左div:中等屏幕时占2份,小屏和超小屏隐藏 图片 右div:中等屏幕时占10份,小屏和超小屏占12份 middle div:中等屏幕时占6份,小屏和超小屏隐藏

    1.3K10

    Winforms 可能遇到的 1000 个问题 去掉最大化和最小化按钮使用系统的图标禁止用户修改窗口大小隐藏标题栏的图标

    参见 https://stackoverflow.com/a/4868459/6116637 禁止用户修改窗口大小 只需要设置 FormBorderStyle 为 FixedSingle 就可以让用户无法拖动窗口大小...，通过 SizeGripStyle 可以防止用户拖动右下角按钮修改窗口 SizeGripStyle = SizeGripStyle.Hide; FormBorderStyle...修改这个值 SizeGripStyle.Hide 让用户无法修改窗体大小 ?...具体请看 https://stackoverflow.com/a/5416394/6116637 隐藏标题栏的图标 在 Form 类内修改 ShowIcon 可以修改图标 public...欢迎转载、使用、重新发布，但务必保留文章署名林德熙（包含链接： https://lindexi.gitee.io ），不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。

    1.8K10

    第124天：移动web端-Bootstrap轮播图插件使用

    Bootstrap JS插件使用 > 对于Bootstrap的JS插件，我们只需要将文档实例中的代码粘到我们自己的代码中 > 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Carousel...，最终背景图片的大小是300\*600 　　　　* 因为背景图的较小边为100，将100放大到目标容器300的宽度，放大了3倍，最终结果300\*600 （3） contain 　　　　+...< 768; // 判断屏幕属于大还是小 3 // 根据大小为界面上的每一张轮播图设置背景 4 // $('#main_ad > .carousel-inner > .item') // 获取到的是一个...具体的操作 3 } 4 $(window).on('resize', 窗口变化后执行的函数名); 5 ``` 6 7 - 这个事件只会在窗口尺寸发生变化后执行，但是我们需要一开始时执行一次 trigger...函数是让window对象立即出发一次 $(window).on('resize', 窗口变化后执行的函数名).trigger('resize'); 3、小图片不需要使用背景的方式 　　- 小图如果还是使用背景的方式

    6.3K40

    【JQuery】扩展BootStrap入门——知识点讲解(二)

    栅格 2.1 简述栅格系统 2.2 栅格系统的特点及入门案例 2.3 栅格屏幕尺寸设置 2.4 设置屏幕尺寸时的注意事项 2.5 列偏移 3. 响应式工具 4. 列表（美工知识：了解） 1. ...布局容器 BootStrap 必须需要至少一个布局容器，才能为页面内容进行封装和方便的样式控制。 相当于一个画板。...栅格 2.1 简述栅格系统 为了方便在布局容器中进行网页的布局操作。 BootStrap 提供了一套专门用于响应式开发布局的栅格系统。...列元素的占用列数，定义列元素的大小 示例 1 ：一个元素占一行 代码准备： 效果 1： 示例 2 ：三个元素平分一行 代码准备： 效果 2： 注： 一个 row...代码准备： 3. 响应式工具 为针对性地在移动页面上展示和隐藏不同的内容， bootStrap 提供响应式工具。

    80420

    面试官：CSS 面试题集锦

    使用visibility:hidden来隐藏内容 visibility:hidden和display:none可以隐藏的内容几乎一样，但唯一区别是它虽然隐藏了内容，但被隐藏掉的内容仍旧占据空间，这段隐藏了内容却保留空间的位置会在网页中显示为空白...下面就简单介绍一下Bootstrap栅格系统的工作原理： 网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询...要注意的是这个是个大概的说法，每个特定的元素能包含的元素也是特定的，所以具体到个别元素上，这条规律是不适用的。 比如 P 元素，只能包含inline元素，而不能包含block元素。...它的特殊之处在于它不用像absolute疯狂“找爸爸”，它天生参照于浏览器窗口！当为对象设置固定定位后，该对象即处于浏览器窗口画面中的固定位置，无视文档长短、窗口大小和滚条滚动。...尽量少使用绝对宽度 3.相对大小的字体,字体也不能使用绝对大小（px），只能使用相对大小（em）或者高清方案（rem），rem不局限字体大小，而前面的width也可以使用，代替百分百。

    3.3K30

    css页面自适应屏幕大小_html图片自适应屏幕

    的 hidden-xs 表示 当屏幕小的时候 隐藏site-bg-dl 其他 响应式布局：响应式工具不能用于table元素，而且 本身就不支持 响应式布局需要在处添加如下语句： 的手机及分辨率更小的设备 */ @media (max-width: 480px) { ... } 响应式布局辅助class： 以下这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏...）可见 .visible-lg 大型设备（992 px 及以上）可见 .hidden-xs 额外的小设备（小于 768px）隐藏 .hidden-sm 小型设备（768 px 起）隐藏 .hidden-md....hidden-print 只对浏览器可见 不可打印 实例：调整浏览器的窗口大小，或者在不同的设备上加载实例，测试响应式实用工具类 <!

    8.1K30

    Web前端学习笔记之BootStrap

    它支持响应式布局，并且在V3版本之后坚持移动设备优先。 为什么要使用Bootstrap？...Bootstrap下载 官方地址：https://getbootstrap.com 中文地址：http://www.bootcss.com/ 我们使用V3版本的Bootstrap，我们下载的是用于生产环境的... 显示与隐藏 ... ......用到的技术： CSS3@media查询 用于查询设备是否符合某一特定条件，这些特定条件包括屏幕尺寸、是否可触摸、屏幕精度、横屏竖屏等信息。..."（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分

    2.8K20
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券