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 相关文章推荐
最简单的jQuery程序 入门者学习
Jul 09 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 Javascript
AlertBox 弹出层信息提示框效果实现步骤
Oct 11 Javascript
JQuery实现用户名无刷新验证的小例子
Mar 22 Javascript
JavaScript删除指定子元素代码实例
Jan 13 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
angularjs利用directive实现移动端自定义软键盘的示例
Sep 20 Javascript
解决vue keep-alive 数据更新的问题
Sep 21 Javascript
Vue中的验证登录状态的实现方法
Mar 09 Javascript
js getBoundingClientRect使用方法详解
Jul 17 Javascript
解决Layui数据表格的宽高问题
Sep 28 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
php操作XML、读取数据和写入数据的实现代码
2014/08/15 PHP
php中current、next与reset函数用法实例
2014/11/17 PHP
PHP答题类应用接口实例
2015/02/09 PHP
php 从指定数字中获取随机组合的简单方法(推荐)
2017/04/05 PHP
js+FSO遍历文件夹下文件并显示
2007/03/07 Javascript
JavaScript 变量基础知识
2009/11/07 Javascript
jquery photoFrame 图片边框美化显示插件
2010/06/28 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
2010/09/03 Javascript
jqgrid 简单学习笔记
2011/05/03 Javascript
JavaScript中number转换成string介绍
2014/12/31 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
2015/02/28 Javascript
jQuery实现进度条效果代码
2015/12/17 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
2016/01/23 Javascript
JavaScript几种数组去掉重复值的方法推荐
2016/04/12 Javascript
jQuery ajaxForm()的应用
2016/10/14 Javascript
微信小程序开发入门基础教程
2017/04/19 Javascript
mac下的nodejs环境安装的步骤
2017/05/24 NodeJs
React教程之Props验证的具体用法(Props Validation)
2017/09/04 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
Python使用MYSQLDB实现从数据库中导出XML文件的方法
2015/05/11 Python
PyTorch上实现卷积神经网络CNN的方法
2018/04/28 Python
python广度优先搜索得到两点间最短路径
2019/01/17 Python
Jupyter Notebook的连接密码 token查询方式
2020/04/21 Python
python json.dumps() json.dump()的区别详解
2020/07/14 Python
新加坡第一的杂货零售商:NTUC FairPrice
2020/12/05 全球购物
什么是Linux虚拟文件系统VFS
2012/01/31 面试题
护理工作感言
2014/01/16 职场文书
考试不及格的检讨书
2014/01/22 职场文书
家长对学生的评语
2014/04/18 职场文书
远程培训的心得体会
2014/09/01 职场文书
滞留工资返还协议书
2014/10/19 职场文书
西部计划志愿者工作总结
2015/08/11 职场文书
Python+Appium新手教程
2021/04/17 Python
Vue实现tab导航栏并支持左右滑动功能
2021/06/28 Vue.js
详解Spring Security如何在权限中使用通配符
2022/06/28 Java/Android