首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Bootstrap 3:隐藏比平板电脑小的设备上的元素,而不使用2类引导

Bootstrap是一个流行的前端开发框架,它提供了一套用于快速构建响应式网站和Web应用程序的工具和组件。Bootstrap 3是Bootstrap框架的旧版本,它提供了一些隐藏在小型设备上的元素的方法,而不使用2类引导。

在Bootstrap 3中,可以使用CSS类来隐藏在小型设备上不需要显示的元素。具体来说,可以使用以下CSS类来实现隐藏:

  1. .hidden-xs:隐藏在超小型设备(小于768px宽度)上的元素。
  2. .hidden-sm:隐藏在小型设备(大于等于768px宽度,小于992px宽度)上的元素。
  3. .hidden-md:隐藏在中型设备(大于等于992px宽度,小于1200px宽度)上的元素。
  4. .hidden-lg:隐藏在大型设备(大于等于1200px宽度)上的元素。

使用这些CSS类,可以根据设备的屏幕宽度来隐藏不需要显示的元素,从而实现在不同设备上的元素隐藏效果。

以下是一些示例应用场景:

  1. 在移动设备上隐藏某些不适合小屏幕显示的元素,以提高用户体验。
  2. 在响应式设计中,根据设备的屏幕大小隐藏或显示特定的内容。
  3. 在开发响应式网站时,根据设备的屏幕宽度隐藏或显示不同的导航菜单。

腾讯云提供了一些与Bootstrap相关的产品和服务,例如:

  1. 云服务器(CVM):提供可扩展的虚拟服务器实例,可用于部署和运行基于Bootstrap的网站和应用程序。
  2. 内容分发网络(CDN):加速网站和应用程序的内容分发,提高访问速度和用户体验。
  3. 云数据库MySQL版:提供可靠的MySQL数据库服务,用于存储和管理与Bootstrap相关的数据。

以上是关于Bootstrap 3隐藏在小型设备上的元素的答案,希望能对您有所帮助。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Bootstrap响应式工具

以下是Bootstrap提供响应式断点:xs(超屏幕):适用于移动设备,屏幕宽度小于576px。sm(屏幕):适用于平板设备,屏幕宽度大于等于576px。...md(中等屏幕):适用于小型笔记本电脑平板设备,屏幕宽度大于等于768px。lg(大屏幕):适用于大型笔记本电脑和台式机,屏幕宽度大于等于992px。...通过在类名中使用这些断点,开发者可以根据不同屏幕尺寸应用特定样式或布局。显示/隐藏Bootstrap提供了一些用于控制元素在不同屏幕尺寸下显示或隐藏类。...这些类可以根据需要在不同断点添加或移除。以下是Bootstrap提供显示/隐藏类:.d-none:在所有断点隐藏元素。....d-{breakpoint}-none:在指定断点隐藏元素,例如.d-sm-none在屏幕隐藏元素。.d-{breakpoint}-block:在指定断点以块级元素显示元素。.

2.2K40

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

bootstrap hidden-xs 表示 当屏幕时候 隐藏site-bg-dl <div class="site-bg-dl...(min-width: 1200px) { ... } /*默认*/ @media (min-width: 980px){...} /* <em>平板</em><em>电脑</em>和<em>小</em>屏<em>电脑</em>之间<em>的</em>分辨率 */ @media (min-width...,实现内容对<em>设备</em><em>的</em>显示和<em>隐藏</em> class <em>设备</em> .visible-xs 额外<em>的</em><em>小</em><em>设备</em>(小于 768px)可见 .visible-sm 小型<em>设备</em>(768 px 起)可见 .visible-md 中型<em>设备</em>(...768 px 到 991 px)可见 .visible-lg 大型<em>设备</em>(992 px 及以上)可见 .hidden-xs 额外<em>的</em><em>小</em><em>设备</em>(小于 768px)<em>隐藏</em> .hidden-sm 小型<em>设备</em>(768 px...起)<em>隐藏</em> .hidden-md 中型<em>设备</em>(768 px 到 991 px)<em>隐藏</em> .hidden-lg 大型<em>设备</em>(992 px 及以上)<em>隐藏</em> 打印类 <em>使用</em>这些切换打印内容 class 打印 .visible-print

8K30

Jump Start Bootstrap 第1章

例如,在链接元素() 使用btn类,它将看起来像一个按钮,使用btn-primary可以把链接显示成暗蓝色按钮。...它组件兼容各种设备,包括移动设备平板电脑和桌面设备,以及许多新CSS和JavaScript插件。...开发人员可以创建一个单一设计,让它可以工作在任何类型设备:移动设备平板电脑、智能电视和个人电脑。 响应式网页通常是流畅,他们根据屏幕大小来调整自己,并且与移动设备触控界面兼容。...让我们假设我们使用Bootstrap来创建桌面布局。我们已经使用网格系统来创建响应式设计,这样布局就会自动调整以适应平板电脑和移动设备。 在平板设备,布局将如图所示。...广告已经被隐藏在标题部分,并且标志已经居中了。布局非常完美。 ? 在智能手机视图中,如图所示,我们可以看到标题部分继续遵循平板电脑样式,但内容部分发生了重大变化。

3.5K40

BootStrap应用开发学习入门

响应式设计(重点): Bootstrap 响应式 CSS 能够自适应于台式机、平板电脑和手机; BootStrap包含内容(主要包含): 基本结构:Bootstrap 提供了一个带有网格系统、链接样式...CSS 是移动设备优先,媒体查询是针对于平板电脑、台式电脑。...渐进增强:随着屏幕大小增加添加元素 (2) meta 源标签 viewport meta 标签 为了让 Bootstrap 开发网站对移动设备友好,确保适当绘制和触屏缩放: <meta name...; 官方文档描述: Bootstrap 包含了一个响应式、移动设备优先固定网格系统,可以随着设备或视口大小增加适当地扩展到 12 列。....clearfix #清除浮动 .show #强制元素显示 .hidden #强制元素隐藏 .sr-only #除了屏幕阅读器外,其他设备隐藏元素 .sr-only-focusable

17.4K20

bootstrap快速入门笔记(二)-栅格系统,响应式类

元素设置 padding,也就间接为“行(row)”所包含“列(column)”抵消掉了padding 3.栅格类适用于与屏幕宽度大于或等于分界点大小设备 .col-md-*此为栅格类 二,媒体查询.../* 超屏幕(手机,小于 768px) */ /* 没有任何媒体查询相关代码,因为这在 Bootstrap 中是默认(还记得 Bootstrap 是移动设备优先吗?)...中屏 某些列可能会出现别的列高情况。...超屏幕手机 (<768px)屏幕平板 (≥768px)中等屏幕桌面 (≥992px)大屏幕桌面 (≥1200px) .visible-xs-* 可见 隐藏 隐藏 隐藏 .visible-sm-...可见 隐藏 .visible-print 类也是存在,但是从 v3.2.0 版本开始建议使用

1.1K30

BootStrap应用开发学习入门

响应式设计(重点): Bootstrap 响应式 CSS 能够自适应于台式机、平板电脑和手机; BootStrap包含内容(主要包含): 基本结构:Bootstrap 提供了一个带有网格系统、链接样式...CSS 是移动设备优先,媒体查询是针对于平板电脑、台式电脑。...渐进增强:随着屏幕大小增加添加元素 (2) meta 源标签 viewport meta 标签 为了让 Bootstrap 开发网站对移动设备友好,确保适当绘制和触屏缩放: <meta name...; 官方文档描述: Bootstrap 包含了一个响应式、移动设备优先固定网格系统,可以随着设备或视口大小增加适当地扩展到 12 列。....clearfix #清除浮动 .show #强制元素显示 .hidden #强制元素隐藏 .sr-only #除了屏幕阅读器外,其他设备隐藏元素 .sr-only-focusable

14.5K30

Jump Start Bootstrap 第2章

但在大型显示器如何呢?在上面的代码中,我们没有指定该元素在大型显示器表现。进一步Bootstrap将自动沿用在超显示器指定布局。...因此,我们代码中元素将在所有设备跨越12格。...因此,我们重新设计了用于平板模式线框,如图所示 ? 在这个设计中,我们看到标题看起来与桌面模式相同。下面的帖子现在被包含在一个两栏布局中,不是三个。接下来,我们需要在移动设备查看相同网站。...与桌面显示器不同,平板电脑可以用两种模式观看:竖屏-肖像(Portrait)和横屏-景观(Landscape);平板电脑景观模式被认为是中等大小显示器(屏幕宽度为992px);我们已经使用了colmd-md...这样,我们有两种用于平板布局:一种是横向模式三栏布局,一种是竖屏模式两栏布局。 移动设备设计 和平板电脑一样,移动设备也可以在风景和人像模式下观看。

2.9K40

「Shiny」应用程序布局指南

collapsable 当浏览器宽度小于940像素(对于在较小触摸屏设备查看很有用)时,自动将导航元素折叠为菜单。...固定系统默认占用940像素固定宽度,当引导响应式布局启动时(例如在平板电脑),可能会假定其他宽度。 以下部分是官方Bootstrap 3网格系统文档翻译,其中HTML代码被 R 代码取代。...这是因为 fluid 网格使用百分不是像素来设置宽度。考虑以下页面布局: ?...如果启动响应特性是启用(它们在 Shiny 中是默认情况),那么网格也将适应为724px或1170px宽,这取决于你视窗(例如,当在平板电脑)。...响应布局 Bootstrap 网格系统支持响应式CSS,它使您应用程序能够自动调整其布局,以在不同大小设备查看。响应式布局包括以下内容: 修改网格列宽。 在必要之处堆砌不是浮动组件。

6.9K32

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

设备划分情况: 小于768为超屏幕(手机) 768~992之间设备平板) 992~1200中等屏幕(桌面显示器) 大于1200宽屏设备(大桌面显示器) 1.2...bootstrap里面父容器版心尺寸划分 超屏幕(手机,小于 768px):设置宽度为 100% 屏幕(平板,大于等于 768px):设置宽度为 750px 中等屏幕(桌面显示器,大于等于...3.x.x:目前使用最多,稳定,但是放弃了IE6-IE7。对 IE8 支持但是界面效果不好,偏向用于开发响应式布局、移动设备优先WEB 项目。...超屏幕(手机)=768px 中等屏幕(桌面显示器)>=992px 宽屏设备(大桌面显示器)>=1200px .container 最大宽度 自动(100%) 750px...,利用媒体查询功能,并使用这些工具类可以方便针对不同设备展示或隐藏页面内容。

4K20

响应式布局

响应式布局 原理 使用媒体查询针对不同宽度设备进行布局和样式设置,从而适配不同设备。...设备 尺寸区间 手机 <768px 平板 [768px, 992px) 桌面显示器 [992px, 1200px) 大桌面显示器(电脑) >=1200px 响应式布局容器 响应式布局需要一个父级作为布局容器...常用响应式尺寸划分: 设备 尺寸区间 宽度设置 手机 <768px 100% 平板 [768px, 992px) 750px 桌面显示器 [992px, 1200px) 970px 大桌面显示器(电脑...使用步骤 下载 Bootstrap 把会用到文件夹放到要用站点文件夹下 另外,要防止低版本 ie 没办法用 h5、css3 新东西,导致出问题,html 骨架需要加点料。...-- 直接把列分成列,会出现列无法铺满原来列,因为元素会有padding值 --> <div class="col-md-6" style="background-color

2.9K10

移动开发之响应布局

移动开发之响应布局 1.响应式开发 1.1 响应式开发原理 就是使用媒体查询针对不同宽度设备进行布局和样式设置,从而适配不同设备目的。...设备划分 尺寸区间 超屏幕(手机) <768px 设备平板) >=768px ~ <992px 中等屏幕(桌面显示器) >=992x ~ <1200px 宽屏设备(大桌面显示器) >=1200px...超屏幕(手机)=768px 中等屏幕(桌面显示器)>=992px 宽屏设备(大桌面显示器)>=1200px .container最大宽度 自动(100%) 750px...简单理解就是一个列内再分成若干份列。我们可以通过添加一个新.row元素和一系列.col-sm-元素到已经存在.col-sm-元素内。...,利用媒体查询功能,并使用这些工具类可以方便针对不同设备展示或隐藏页面内容。

2.2K20

Bootstrap实用手册

什么是响应式网页 Responsive Web Page,响应式网页/自适应网页,即一个页面既可以在 PC 浏览器中浏览,也可以在手机、平板中浏览,并且配合不同设备有不同响应结果,响应式网页特点:...视口宽度:要与设备宽度一致 (2). 视口缩放倍率:设置为 1,即不缩放 (3)....MEDIA-TYPE:媒体类型 ①. all:默认值,所有设备 ②. screen:电脑屏幕,智能手机,平板电脑 ③. tv:电视设备 (3)....可以在一个 div 中指定在不同屏幕下宽度占,相同可简写为一个 语法: 释义:在 xs 中 占 9...对使用字体图标的选择器进行声明 ? (3). 使用方法:必须保证是空元素 ? 20. Bootstrap 组件 - 按钮组.btn-group (1). 基本按钮 ? (2).

5.9K20

移动开发-响应式

移动开发-响应式布局 响应式开发原理: 使用媒体查询针对不同宽度设备进行布局和样式设置,从而适配不同设备 设备划分 尺寸区间 超屏幕 (手机) < 768px 设备 (平板) >= 768px...以上来自2020年数据 Bootstrap 使用: 控制权在框架本身,使用者要按照框架所规定某种规范进行开发 <!...Bootstrap提供了一套响应式、移动设备优先流式栅格系统,随着屏幕或视口 (viewport) 尺寸增加,系统会自动分为最多12列 栅格选项参数: 超屏幕 (手机) 右侧 响应式工具: 类名 超屏 中屏 大屏 .hidden-xs 隐藏 可见 可见 可见 .hidden-sm 可见 隐藏 可见 可见....hidden-md 可见 可见 隐藏 可见 .hidden-lg 可见 可见 可见 隐藏 为了加快对移动设备友好页面开发工作,利用媒体查询功能,并使用这些工具类可以方便针对不同设备展示或隐藏页面内容

2.4K20

网页布局几种方式有哪些_做网页建议用哪种布局

bootstrap 栅格系统是通过一系列行和列组合来创建页面布局,它栅格系统最大分为12份: 不过 版本bootstrap3bootstrap4 实现栅格系统方式不一样, bootstrap3...然后 CSS 代码不能使用绝对大小,即不能指定像素 px 宽度,只能使用相对大小 em 或者 %百分、rem等。...要匹配足够多屏幕大小,工作量不小,而且页面中会出现隐藏元素操作,这样代码就比较冗余,加载时间加长,此外设计也需要多个版本。...自适应对页面的屏幕适配实在一定范围,比如:pc 端 > 1024px; 平板 768 ~ 1024px; 手机端 < 768px; 响应式是一套页面同时兼容在 pc 端、平板和手机端各个不同视口,不是为每个终端做一个特定版本...弹性布局(rem/em布局)   弹性布局跟流布局很像,网页宽度固定,使用 em 或 rem 单位进行相对布局,避免了使用像素 px 布局在高分辨率下几乎无法辨识缺点,相对%百分更加灵活,同时可以支持浏览器字体大小调整和缩放等正常显示

3K20

超大触摸屏设计7大注意事项

以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单原型设计工具。 随着科技快速发展,触摸屏设计应用无处不在,它们不仅仅使用于手机和平板,也在台式电脑使用。...与屏幕相比,大屏幕滑动触发可能需要更夸张一些,因此点击可能会需要更大手指压力。 在超大屏幕设备中,过多滑动设计对用户来说似乎不大友好,因为反复下滑动操作可能会导致手臂疲劳。...用户在公共场所中使用大屏设备,并不意味着他们希望其他人知道自己在做什么,特别是在输入一些重要信息时。屏幕越大,其他人就越有可能看到用户输入内容。...思考一下:在公共场所,许多超大屏或者设备(如可移动信息亭或大型平板电脑)都是便携式。这会涉及到设备对互联网访问,以及网络连接是否能正常工作。...使用描述性小提示,如“触摸这里开始”,来引导用户完成整个过程。虽然这样思维元素可能看起来过于明显,但是如何使用界面并不是用户应该深入研究问题,不如让它变得容易点。

1.4K70

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

1.0 响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度设备进行布局和样式设置,从而适配不同设备目的。...设备划分情况: 小于768为超屏幕(手机) 768~992之间设备平板) 992~1200中等屏幕(桌面显示器) 大于1200宽屏设备(大桌面显示器) 1.2...父容器版心尺寸划分 超屏幕(手机,小于 768px):设置宽度为 100% 屏幕(平板,大于等于 768px):设置宽度为 750px 中等屏幕(桌面显示器,大于等于 992px):...3.x.x:目前使用最多,稳定,但是放弃了IE6-IE7。对 IE8 支持但是界面效果不好,偏向用于开发响应式布局、移动设备优先WEB 项目。...,利用媒体查询功能,并使用这些工具类可以方便针对不同设备展示或隐藏页面内容。

3.4K31

大屏时代生态变迁,看平板手机拇指热键与界面布局

大屏手机填补了传统触屏手机与平板电脑之间空白地带,有些大屏手机屏幕甚至达到7英寸之巨,因此也获得了一个略显蹩脚绰号——平板手机。 ? 这类设备虽然有着巨大身形,但人们仍然会将其作为手机使用。...因此,对平板手机而言,我们首先应该聚焦仍是单手持机操作情况。 这里有个挺有意思现象:同是单手持机操作状态,平板手机上拇指热区面积却普通手机上。...或许你还记得,同是在单手操作状态下,平板手机拇指热区面积实际普通手机更小,不过这两者形状及位置类似,因此一些基本设计原则也是相通。...我们在设备遇到诸如CSS兼容性局限或页面元素与浏览器自身布局冲突等一系列问题,在平板手机中依然存在。...人们使用屏幕巨大手机,代表他们有着巨人般手,手势应该围绕手指进行设计,不是围绕屏幕。 整体移动。界面中多数元素是静态,需要我们自己伸手触及。

2.3K10

Bootstrap 响应式实用工具

Bootstrap 提供了一些辅助类,以便更快地实现对移动设备友好开发。这些可以通过媒体查询结合大型、小型和中型设备,实现内容对设备显示和隐藏。...需要谨慎使用这些工具,避免在同一个站点创建完全不同版本。响应式实用工具目前只适用于块和表切换。...超屏幕手机 (<768px) 屏幕平板 (≥768px) 中等屏幕桌面 (≥992px) 大屏幕桌面 (≥1200px) .visible-xs-* 可见 隐藏 隐藏 隐藏 .visible-sm-...但是从 v3.2.0 版本开始不再建议使用。除了 相关元素特殊情况外,它们与 .visible-*-block 大体相同。 打印类 下表列出了打印类。使用这些切换打印内容。...调整浏览器窗口大小,或者在不同设备加载实例,测试响应式实用工具类。

46120

BootStrap初始

Bootstrap 是 2011 年八月在 GitHub 发布开源产品。 为什么要用Bootstrap 移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库移动设备优先样式。...响应式设计:Bootstrap 响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计内容详见 Bootstrap 响应式设计。...在Bootstrap出现之前: 命名:重复、复杂、无意义(想个名字费劲) 样式:重复、冗余、规范、不和谐 页面:错乱、规范、不和谐 在使用Bootstrap之后: 各种命名都统一并且规范化。...因此,在元素应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小设备 , 并且针对屏幕设备覆盖栅格类。...因此,在元素应用任何 .col-lg-* 不存在, 也影响大屏幕设备

4.6K10

JS:用rem来做响应式开发

电脑商城昨晚做完了,今天赶着做手机端,提到手机端网站第一个想到就是要 适应不同手机屏幕宽度,保证在不同手机上都能正常显示给用户,我之前做这类网站都是无脑引进bootstrap。...(我现在知道尚浅)目前我了解有 1.百分法: 顾名思义,页面的元素margin,padding,width,height,等等都用%来计算,CSS中百分百指是什么,指的是父元素,所有百分都是这样...2.媒体查询: 这个是css3中给出,我们要解决问题是适应手机屏幕,这个媒体查询正是为解决这个问题而生,媒体查询功能就是为不同媒体设置不同css样 式,这里“媒体”包括页面尺寸,设备屏幕尺寸等...(min-width:768) {/平板中样式/} pc:@media screen and (min-width:992px){/电脑中样式/} ......} 注意这里有一个坑,当你把这个demo拿到谷歌浏览器里面验证时候,你会发现开始这3个div会随着你浏览器窗口缩小缩小,到达某个值后就不动了,原因是谷歌浏览器默认支持html

6.1K10

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券