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 相关文章推荐
Javascript实现计算个人所得税
May 10 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
Mar 08 Javascript
js变量提升深入理解
Sep 16 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
Nov 01 Javascript
微信小程序 动态绑定事件并实现事件修改样式
Apr 13 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
Jul 07 Javascript
捕获未处理的Promise错误方法
Oct 13 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
Mar 13 Javascript
Vue在页面数据渲染完成之后的调用方法
Sep 11 Javascript
Javascript中绑定click事件的四种方式介绍
Oct 26 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
Nov 30 Javascript
vue3种table表格选项个数的控制方法
Apr 14 Vue.js
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
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
PHP registerXPathNamespace()函数讲解
2019/02/03 PHP
JavaScript去除空格的几种方法
2006/10/03 Javascript
jQuery 添加/移除CSS类实现代码
2010/02/11 Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
2012/08/14 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
JS ES6中setTimeout函数的执行上下文示例
2017/04/27 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
详解操作虚拟dom模拟react视图渲染
2018/07/25 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
javascript实现页面的实时时钟显示示例
2020/08/06 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
利用PHP实现递归删除链表元素的方法示例
2020/10/23 Javascript
[01:10:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第一场 3月4日
2021/03/11 DOTA
基于scrapy的redis安装和配置方法
2018/06/13 Python
Windows 下更改 jupyterlab 默认启动位置的教程详解
2020/05/18 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
python设置中文界面实例方法
2020/10/27 Python
GAP美国官网:美国休闲时尚品牌
2016/08/26 全球购物
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
C语言50道问题
2014/10/23 面试题
2014年银行员工年终自我评价
2014/09/19 职场文书
机动车登记业务委托书
2014/10/08 职场文书
机关党员三严三实心得体会
2014/10/13 职场文书
大学生年度个人总结
2015/02/15 职场文书
2015年电话销售工作总结范文
2015/04/20 职场文书
证婚人致辞精选
2015/07/28 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书
中国现代文学之经典散文三篇
2019/09/18 职场文书
python实现Nao机器人的单目测距
2021/09/04 Python
自动在Windows中运行Python脚本并定时触发功能实现
2021/09/04 Python
React Fragment介绍与使用详解
2021/11/11 Javascript