bootstrap系列之响应式布局及相关的visible-sm、hidden-xs等的使用

最新推荐文章于 2022-11-20 18:26:46 发布
最新推荐文章于 2022-11-20 18:26:46 发布
阅读量3.7k 收藏 10
点赞数 2
分类专栏： Bootstrap 框架

响应式布局：响应式工具不能用于table元素，而且本身就不支持

响应式布局需要在<head>处添加如下语句：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

在css中添加如下内容 可以分别定制不同屏幕的显示样式：

/* 大屏幕 ：大于等于1200px*/
@media (min-width: 1200px) { ... }

/*默认*/
@media (min-width: 980px){...}

/* 平板电脑和小屏电脑之间的分辨率 */
@media (min-width: 768px) and (max-width: 979px) { ... }
 
/* 横向放置的手机和竖向放置的平板之间的分辨率 */
@media (max-width: 767px) { ... }
 
/* 横向放置的手机及分辨率更小的设备 */
@media (max-width: 480px) { ... }

响应式布局辅助class：
class.png


以下这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏

class设备
.visible-xs额外的小设备（小于 768px）可见
.visible-sm小型设备（768 px 起）可见
.visible-md中型设备（768 px 到 991 px）可见
.visible-lg大型设备（992 px 及以上）可见
.hidden-xs额外的小设备（小于 768px）隐藏
.hidden-sm小型设备（768 px 起）隐藏
.hidden-md中型设备（768 px 到 991 px）隐藏
.hidden-lg大型设备（992 px 及以上）隐藏

打印类

使用这些切换打印内容

class打印
.visible-print额外的小设备（小于 768px）可见
.hidden-print小型设备（768 px 起）可见

实例：调整浏览器的窗口大小，或者在不同的设备上加载实例，测试响应式实用工具类

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 响应式实用工具</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
  
<div class="container" style="padding: 40px;">
   <div class="row visible-on">
      <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <span class="hidden-xs">特别小型</span>
         <span class="visible-xs">✔ 在特别小型设备上可见</span>
      </div>
      <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <span class="hidden-sm">小型</span>
         <span class="visible-sm">✔ 在小型设备上可见</span>
      </div>
      <div class="clearfix visible-xs"></div>
      <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <span class="hidden-md">中型</span>
         <span class="visible-md">✔ 在中型设备上可见</span>
      </div>
      <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <span class="hidden-lg">大型</span>
         <span class="visible-lg">✔ 在大型设备上可见</span>
      </div>
</div>
  
</body>
</html>

测试结果：

visible-lg
visible-lg.png
visible-xs
visible-xs.png

风神.NET
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap响应式布局
03-19
1. CSS 相邻兄弟选择器 + 相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。 相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。 2. 手机字体图标：`content: '\e958';` 电话字体图标：`content: '\e942';` 3. bootstrap最外层伸缩容器：`class="container"` 4. bootstrap伸缩布局并居中：`d-flex justify-content-center align-items-center` 5. `jQuery.data(element,[key],[value])`：在元素上存放数据,返回jQuery对象。 例如：在index界面中 ```javascript <div class="carousel-item active" data-sm-img="images/slide_01_900x410.jpg" data-lg-img="images/slide_01_2000x410.jpg"></div> <div class="carousel-item" data-sm-img="images/slide_02_900x410.jpg" data-lg-img="images/slide_02_2000x410.jpg"></div> <div class="carousel-item" data-sm-img="images/slide_03_900x410.jpg" data-lg-img="images/slide_03_2000x410.jpg"></div> ``` 在 js中，可以通过 ```javascript $('.carousel-item').data('lg-img') ``` 获取路径值。 6. bootstrap中圆角`rounded-circle` 7. 可以使用`order-*`调整显示顺序 8. 伸缩布局两步走`container+row` ```javascript <div class="container"> <div class="row"> *** </div> </div> ``` 9. 可以利用`offset`设置偏移量调整位置 10. 将jQuery对象转换为js对象可以直接通过下标取 11. 轮播图可以通过`.carousel('prev')`和`.carousel('next')`触发前后滑动事件 12. jQuery中缩小元素查找范围 ```javascript let $ul = $("#lk_product .nav"); let $allLis = $(".nav-item", $ul); ```
基于BootStrap响应式布局的实现案例1-（基础版）
10-09
基于BootStrap响应式布局的实现案例1-（基础版） 每组中都有 3 张效果图，分别是一个响应式网页在大屏、中屏和小屏上的显示效果，要求按小组序号 对 7 取余加 1 指定的题号完成相应效果图的响应式网页，要求网页效果图中样式 重复的部分要编写 jQuery 代码通过读取 json 文件来动态生成 HTML 元素并 插入到网页中。 要求实验报告中给出该网页所有源码。 注：以下为各组实验题效果图的来源网址，必要时可以访问查看。 1. https://www.stanford.edu/news/ 2. https://www.stanford.edu/events/ 3. https://www.stanford.edu/campus-life/ 4. https://mapmycustomers.me/blog/ 5. https://mapmycustomers.me/blog/tag/ebooks/ 6. https://mapmycustomers.me/about-us/ 7. https://www.timecamp.com/en/industries/
Bootstrap（三）
dengfengling999的博客
11-20 734
创建html页面，把上面模板代码复制进去：加代码这是移动端需要添加的。visible-xs：隐藏显示，当屏幕宽度小于等于xs的时候显示、visible-sm：隐藏显示，当屏幕宽度小于等于ms的时候显示、hidden-xs：当屏幕达到指定的宽度隐藏起来。它是一个流体容器，去掉：fluid。点击组件，选择导航条。
HDSYSCMS开发模版使用笔记bootstrap5手机适配隐藏显示布局,有时候真抓狂
qq506651142的专栏
11-20 1147
在开发www.wbox.top 记录下bootstrap5 visible-xs布局样式能让人抓狂有时候 Show/hide for breakpoint and down: hidden-xs-down(hidden-xs) =d-none d-sm-block hidden-sm-down(hidden-sm hidden-xs) =d-none d-md-block hidden-md-down(hidden-md hidden-sm hidden-xs) =d-none ...
响应式移动Web测试题
HHppGo的博客
06-30 696
下列选项中对bootstrap中的能让元素只在小屏设备隐藏的类是( B )A： hidden-xsB： hidden-smC： hidden-mdD： hidden-lg下列选项中能清除父容器左右15px内边距的类是( D )A： containerB： col-md-1C： container-fluidD： row下列关于bootstrap的使用描述错误的是( C )A： Bootstrap下载的包里面有css，js，font文件夹B： 这个是针对低版本ie浏...
bootstrap3的visible-*
跬步科技 的专栏
11-25 985
响应式工具 通过使用这些工具class可以根据屏幕和不同的媒体查询显示或隐藏页面内容，加速针对移动设备的开发。 尝试使用这些class并避免创建同一个网站的不同版本，从而能够完善不同设备上的显示效果。响应式工具目前只是针对块级元素， 不支持inline元素和表格元素。 可用的class 通过单独或联合使用以下列出的class，可以针对不同屏幕尺寸隐藏或显示页面内容。
bootstrap-table visible 属性隐藏列 在下拉选中还有显示 动态隐藏某列
Sunny__wei的博客
06-10 2362
需求 有时我们需要根据权限，动态隐藏bootstrap-table表格中某列，在使用 visible 隐藏时，列还是会出现在下来选中 现象如下： $table.bootstrapTable({ data: data, showColumns:true, striped:true, columns: [[{title: title,halign:"center",align:"center",colspan:.
Bootstrap系列之可见性（Visibility）
老__L的博客
06-03 728
可见性（Visibility）
蓝色简洁宽屏响应式布局整站模板-bootstrap css3
11-10
蓝色简洁宽屏响应式布局整站模板_蓝色 简洁 宽屏 响应式 响应式布局 整站 设计 展示 相册 bootstrap css3.rar
projeto-bootstrap-parallax:前端-使用Bootstrap + Parallax创建响应式静态页面
05-14
项目：使用Bootstrap + Parallax创建响应式统计页面该项目的目的是创建一个静态页面，使用BootStrap + Parallax通过滚动覆盖图像。使用的工具引导程序： 在引导站点上使用了CDN链接。JQUERY： 使用Jquery使用Animate...
Bootstrap禁用响应式布局的实现方法
11-30
不过正所谓“萝卜青菜各有所爱”，如果你想要使用Bootstrap开发自己的项目却又恰巧不太喜欢响应式布局（或者你所设计的页面布局不允许你使用响应式技术），那么你可以通过以下方式禁用响应式布局。 移除标签 禁用第...
如何使用Bootstrap4显示和隐藏元素
XW-DESIGN
03-12 1421
为了更快地进行移动设备开发，请使用响应式显示类来按设备显示和隐藏元素。避免创建相同站点的完全不同版本，而是相应地为每个屏幕大小隐藏元素。要隐藏元素，只需使用 .d-none 类或其中一个 .d-{sm,md,lg,xl}-none 类进行任何响应式屏幕变化。要仅在给定的屏幕尺寸间隔上显示元素，您可以将一个 .d-*-none 类与一个 .d-*-* 类组合在一起，例如， .d-none .d-md-block .d-xl-none 将隐藏所有屏幕尺寸的元素，中型和大型设备除外。 Sho
Bootstrap笔记2
mintsolace的博客
08-18 98
栅格系统 Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin用于生成更具语义的布局。 简介： 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。 工作原理： （1）“行（row）”必须包含在.cont...
Vue学习日记36
NLP工程化
02-10 685
1.p:last-child 解析： [1]:last-child选择器用来匹配父元素中最后一个子元素 [2]p:last-child等同于p:nth-last-child(1) 2.基于断点的隐藏类 解析：import ‘element-ui/lib/theme-chalk/display.css’; [1]hidden-xs-only：当视口在xs尺寸时隐藏 [2]hidden-sm-only：当视口在sm尺寸时隐藏 [3]hidden-sm-and-down：当视口在sm及以下尺寸时隐藏 [4]hid
Bootstrap3响应式工具(visible、hidden)
胡图图不糊涂的博客
04-07 980
以下的都是Bootstrap的less源码 一、visible-xs、visible-sm、visible-md、visible-lg(显示) ①visible调用responsive-invisibility（）混合 ②媒体查询当屏幕小于等于768px时，调用responsive-visibility（）混合 （xs、sm、md、lg异曲同工） responsive-invisibility...
Bootstrap 响应式实用工具——visible-xs、visible-sm、hidden-xs、hidden-sm等
热门推荐
老蔡学代码
09-22 1万+
Bootstrap 提供了一些帮助器类，以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。 需要谨慎使用这些工具，避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换。 Class 设备 .visible-xs 额外的小设备（小于 768px）可见 .visible-sm
前18大旋转修整器企业占据全球87%的市场份额.docx
最新发布
05-06
前18大旋转修整器企业占据全球87%的市场份额
electron如何使用bootstrap实现响应式布局
03-12
可以使用Bootstrap的CSS框架来实现响应式布局，具体步骤如下： 1. 在HTML文件中引入Bootstrap的CSS文件和JavaScript文件。 2. 在HTML文件中使用Bootstrap的网格系统来布局页面，可以使用容器、行和列来实现。 3. 使用Bootstrap的CSS类来设置页面元素的样式，如文字、颜色、背景等。 4. 使用Bootstrap的组件来实现页面的功能，如导航栏、表格、表单等。 5. 使用Bootstrap的JavaScript插件来增强页面的交互性，如模态框、轮播图、下拉菜单等。 总之，使用Bootstrap可以快速、简单地实现响应式布局，提高页面的用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值