Bootstrap 响应式实用工具实例详解


Posted in Javascript onMarch 29, 2017

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

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

Bootstrap 响应式实用工具实例详解

实例

下面的实例演示了上面所列举的帮助器类的用法。调整浏览器的窗口大小,或者在不同的设备上加载实例,测试响应式实用工具类。

<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>
</div>

Bootstrap 响应式实用工具实例详解

以上所述是小编给大家介绍的Bootstrap 响应式实用工具实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 分栏效果实现代码
Aug 29 Javascript
javaScript复制功能调用实现方案
Dec 13 Javascript
JS合并数组的几种方法及优劣比较
Sep 19 Javascript
javascript实现简单查找与替换的方法
Jul 22 Javascript
详解js的事件代理(委托)
Dec 22 Javascript
bootstrap滚动监控器使用方法解析
Jan 13 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
Nov 27 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
Mar 09 Javascript
vue项目中使用百度地图的方法
Jun 08 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
Apr 27 Javascript
原生javascript如何实现共享onload事件
Jul 03 Javascript
jQuery日程管理控件glDatePicker用法详解
Mar 29 #jQuery
利用js查找数组中指定元素并返回该元素的所有索引示例
Mar 29 #Javascript
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 #jQuery
jQuery实现的手风琴侧边菜单效果
Mar 29 #jQuery
详解如何使用Vue2做服务端渲染
Mar 29 #Javascript
js实现华丽的九九乘法表效果
Mar 29 #Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
Mar 29 #Javascript
You might like
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
php设计模式  Command(命令模式)
2011/06/17 PHP
PHP对象递归引用造成内存泄漏分析
2014/08/28 PHP
php flush无效,IIS7下php实时输出的方法
2016/08/25 PHP
PDO::setAttribute讲解
2019/01/29 PHP
PHP执行普通shell命令流程解析
2020/08/24 PHP
xtree.js 代码
2007/03/13 Javascript
JavaScript 入门·JavaScript 具有全范围的运算符
2007/10/01 Javascript
jQuery 表格工具集
2010/04/25 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
2010/11/11 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
12行javascript代码绘制一个八卦图
2015/04/02 Javascript
JavaScript框架是什么?怎样才能叫做框架?
2015/07/01 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
2017/02/28 Javascript
js实现一键复制功能
2017/03/16 Javascript
JS数组去重(4种方法)
2017/03/27 Javascript
TypeScript类型声明书写详解
2019/08/28 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
vant中的toast层级改变操作
2020/11/04 Javascript
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
探索Python3.4中新引入的asyncio模块
2015/04/08 Python
TensorFlow实现非线性支持向量机的实现方法
2018/04/28 Python
python编写猜数字小游戏
2019/10/06 Python
利用4行Python代码监测每一行程序的运行时间和空间消耗
2020/04/22 Python
专门经营化妆刷的美国彩妆品牌:Sigma Beauty
2017/09/11 全球购物
Clarks西班牙官方在线商店:clarks鞋
2019/05/03 全球购物
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
考试作弊被抓检讨书
2014/01/10 职场文书
销售内勤岗位职责
2014/04/15 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书
go goroutine 怎样进行错误处理
2021/07/16 Golang