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 相关文章推荐
MooTools 页面滚动浮动层智能定位实现代码
Aug 23 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
Aug 02 Javascript
js获取电脑分辨率的思路及操作
Nov 22 Javascript
javascript实现下雪效果【实例代码】
May 03 Javascript
详解angular中如何监控dom渲染完毕
Jan 03 Javascript
Vue.js结合bootstrap实现分页控件
Mar 10 Javascript
浅谈Angular2 模块懒加载的方法
Oct 04 Javascript
vue生成token保存在客户端localStorage中的方法
Oct 25 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
Jan 08 Javascript
angular实现页面打印局部功能的思考与方法
Apr 13 Javascript
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
解决Vue打包后访问图片/图标不显示的问题
Jul 25 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 类型转换函数intval
2009/06/20 PHP
基于php常用函数总结(数组,字符串,时间,文件操作)
2013/06/27 PHP
ci检测是ajax还是页面post提交数据的方法
2014/11/10 PHP
PHP实现获取并生成数据库字典的方法
2016/05/04 PHP
laravel实现上传图片的两种方式小结
2019/10/12 PHP
javascript 常用代码技巧大收集
2009/02/25 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
js怎么覆盖原有方法实现重写
2014/09/04 Javascript
dreamweaver 8实现Jquery自动提示
2014/12/04 Javascript
利用js实现禁止复制文本信息
2015/06/03 Javascript
jQuery实现多级联动下拉列表查询框
2016/01/18 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
nodejs 实现钉钉ISV接入的加密解密方法
2017/01/16 NodeJs
canvas实现简易的圆环进度条效果
2017/02/28 Javascript
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
微信小程序实现收藏与取消收藏切换图片功能
2018/08/03 Javascript
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
2018/12/20 Javascript
浅谈Vue中render中的h箭头函数
2019/11/07 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
2020/10/29 Javascript
Django高级编程之自定义Field实现多语言
2019/07/02 Python
python使用pyecharts库画地图数据可视化的实现
2020/03/25 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
python中函数返回多个结果的实例方法
2020/12/16 Python
canvas实现滑动验证的实现示例
2020/08/11 HTML / CSS
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
爱尔兰最大的体育零售商:Life Style Sports
2019/06/12 全球购物
OSPF有什么优点?为什么OSPF比RIP收敛快?
2013/02/13 面试题
小型女装店的创业计划书
2014/01/09 职场文书
四年级学生期末评语
2014/12/26 职场文书
女性健康知识讲座通知
2015/04/23 职场文书
关于保护环境的建议书
2019/06/24 职场文书
浅谈python数据类型及其操作
2021/05/25 Python
mysq启动失败问题及场景分析
2021/07/15 MySQL
在js中修改html body的样式
2021/11/11 Javascript