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 相关文章推荐
学习YUI.Ext 第二天
Mar 10 Javascript
详细讲解JS节点知识
Jan 31 Javascript
Jquery 的扩展方法总结
Oct 01 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
Sep 18 Javascript
使用node.js 制作网站前台后台
Nov 13 Javascript
javascript 判断页面访问方式电脑或者移动端
Sep 19 Javascript
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
vuejs手把手教你写一个完整的购物车实例代码
Jul 06 Javascript
Vue自定义指令使用方法详解
Aug 21 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 Javascript
webpack HappyPack实战详解
Oct 08 Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 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 Socket 编程模拟Http post和get请求
2014/11/25 PHP
PHP抓取淘宝商品的用户晒单评论+图片+搜索商品列表实例
2016/04/14 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
2013/08/07 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
2013/09/22 Javascript
javascript date格式化示例
2013/09/25 Javascript
js实现的彩色方块飞舞奇幻效果
2016/01/27 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
Node.js中看JavaScript的引用
2017/04/22 Javascript
angular4中引入echarts的方法示例
2019/01/29 Javascript
微信小程序开发实现的IP地址查询功能示例
2019/03/28 Javascript
javascript防抖函数debounce详解
2019/06/11 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
Vue的自定义组件不能使用click方法的解决
2020/07/28 Javascript
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
Python yield 小结和实例
2014/04/25 Python
举例介绍Python中的25个隐藏特性
2015/03/30 Python
Python代码调试的几种方法总结
2015/04/15 Python
python脚本设置超时机制系统时间的方法
2016/02/21 Python
Python利用IPython提高开发效率
2016/08/10 Python
python爬取cnvd漏洞库信息的实例
2019/02/14 Python
Python搭建代理IP池实现获取IP的方法
2019/10/27 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
小学红领巾中秋节广播稿
2014/01/13 职场文书
超市国庆节促销方案
2014/02/20 职场文书
品质口号大全
2014/06/17 职场文书
干部四风问题整改措施思想汇报
2014/10/13 职场文书
2014年内勤工作总结
2014/11/24 职场文书
公司介绍信范文
2015/01/31 职场文书
销售助理岗位职责
2015/02/11 职场文书
审查起诉阶段律师意见书
2015/05/19 职场文书
匿名信格式范文
2015/05/27 职场文书
Java版 单机五子棋
2022/05/04 Java/Android
TS 类型收窄教程示例详解
2022/09/23 Javascript