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

Bootstrap 响应式实用工具

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

45920
您找到你想要的搜索结果了吗？
是的
没有找到

移动开发-响应式

原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化 也可以根据实际情况自己定义划分 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 可见 <em>隐藏</em> 可见 可见 .hidden-md 可见 可见 <em>隐藏</em> 可见 .hidden-lg 可见 可见 可见 <em>隐藏</em> 为了加快对移动设备友好<em>的</em>页面开发工作，利用媒体查询功能...，并使用这些工具类可以方便<em>的</em>针对不同设备展示或<em>隐藏</em>页面内容 <em>Bootstrap</em> 其他 (按钮、表单、表格) 可参考 <em>Bootstrap</em> 文档 本节单词： <em>Bootstrap</em> 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 的影响限制在更小范围的屏幕大小之内...超小屏幕手机 (<768px)小屏幕平板 (≥768px)中等屏幕桌面 (≥992px)大屏幕桌面 (≥1200px) .visible-xs-* 可见 隐藏 隐藏 隐藏 .visible-sm-...可见 隐藏 可见 可见 .hidden-md 可见 可见 隐藏 可见 .hidden-lg 可见 可见 可见 隐藏 从 v3.2.0 版本起，形如 .visible-*-* 的类针对每种屏幕大小都有了三种变体

1.1K30

Bootstrap响应式工具

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

2.2K40

移动端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

4K20

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

col-md-数字： xs：手机设备大小 sm:平板设备大小 md:笔记本设备大小 lg:台式电脑设备大小 数字：代表着在一行12列中所占的单元格数。...如：col-lg-3，代表着在一行12列中所占的3列（col-lg-1）。 当设备窗口大小调到浏览器最大时容器大小（width:1170），占据3个列。...当设备窗口大小调到浏览器最大时容器大小（width:970），占据1个列。这是因为容器大小的改变时，在<970px时，lg参数将不再适用于容器的编排，所以处于在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

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

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

3.4K31

前端|利用模态框（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.3K30

javaWeb核心技术第六篇之BootStrap

概述: Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。...1.8+) 3.导入BootStrap的js 4.设置视口(支持移动设备) <meta name="viewport" content...--img1:中等屏幕时占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.7K10

第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.2K40

【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 提供响应式工具。

77020

面试官：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元素，而且 本身就不支持 响应式布局需要在处添加如下语句： <meta name="viewport" content="width...横向放置<em>的</em>手机及分辨率更小<em>的</em>设备 */ @media (max-width: 480px) { ... } 响应式布局辅助class： 以下这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备<em>的</em>显示和<em>隐藏</em>...）可见 .visible-lg 大型设备（992 px 及以上）可见 .hidden-xs 额外<em>的</em>小设备（小于 768px）<em>隐藏</em> .hidden-sm 小型设备（768 px 起）<em>隐藏</em> .hidden-md....hidden-print 只对浏览器可见 不可打印 实例：调整浏览器<em>的</em><em>窗口</em><em>大小</em>，或者在不同<em>的</em>设备上加载实例，测试响应式实用工具类 <!

8K30

Web前端学习笔记之BootStrap

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

2.8K20

Web-第五天 BootStrap学习

提供的两个容器如下： .container 类用于固定宽度并支持响应式布局的容器。 ......行使用的样式“.row”，列使用样式“col-*-*” 内容应当放置于“列（column）”内 列大于12时，将另起一行排列 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类...-- 设置one div，中等屏幕和超小屏幕显示 设置two div，小屏幕和超大屏幕隐藏 --> one <div class...-- 1.整个topbar划分比例：1:2:1 2.中间区域只在“大屏幕”和“中等屏幕”显示 3.整个区域在“超小屏幕”英寸 --> <div class="container topbar hidden-xs...-- 1.大屏幕显示所有分类 2.<em>中等</em>屏幕<em>隐藏</em>部分分类，提供“更多” <em>3</em>.超小屏幕<em>隐藏</em>所有分类，以“汉堡按钮”显示 --> <nav class="navbar navbar-default

5.1K50
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

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

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

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

    领券