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中如何传递参数如click(),change()等具体实现
Apr 28 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
Sep 23 Javascript
js限制input标签中只能输入中文
Jun 26 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
Nov 18 Javascript
Vue.js组件tab实现选项卡切换
Mar 23 Javascript
vue loadmore 组件滑动加载更多源码解析
Jul 19 Javascript
如何更好的编写js async函数
May 13 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
Sep 02 Javascript
JS数组splice操作实例分析
Oct 12 Javascript
js 将多个对象合并成一个对象 assign方法的实现
Sep 24 Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 02 Javascript
vue编写简单的购物车功能
Jan 08 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的开发框架的现状和展望
2007/03/16 PHP
PHP中获取变量的变量名的一段代码的bug分析
2011/07/07 PHP
PHP 文件编程综合案例-文件上传的实现
2013/07/03 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
PHP实现链式操作的原理详解
2016/09/16 PHP
PHP实现新型冠状病毒疫情实时图的实例
2020/02/04 PHP
JavaScript中获取未知对象属性的代码
2011/04/27 Javascript
js 调用百度地图api并在地图上进行打点添加标注
2014/05/13 Javascript
jQuery实现图片预加载效果
2015/11/27 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
Angular中$state.go页面跳转并传递参数的方法
2017/05/09 Javascript
Vue.js学习教程之列表渲染详解
2017/05/17 Javascript
IE8中jQuery.load()加载页面不显示的原因
2018/11/15 jQuery
Vue+Element实现表格编辑、删除、以及新增行的最优方法
2019/05/28 Javascript
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
sharp.js安装过程中遇到的问题总结
2020/04/02 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
基python实现多线程网页爬虫
2015/09/06 Python
python实现决策树、随机森林的简单原理
2018/03/26 Python
使用PyInstaller将python转成可执行文件exe笔记
2018/05/26 Python
Python3实现统计单词表中每个字母出现频率的方法示例
2019/01/28 Python
Python学习笔记之读取文件、OS模块、异常处理、with as语法示例
2019/06/04 Python
python SVD压缩图像的实现代码
2019/11/05 Python
在Tensorflow中实现梯度下降法更新参数值
2020/01/23 Python
Bootstrap 学习分享
2012/11/12 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
人力资源管理专业学生自我评价
2013/11/20 职场文书
保安部任务及岗位职责
2014/02/25 职场文书
好听的队名和口号
2014/06/09 职场文书
企业宣传标语
2014/06/09 职场文书
党支部特色活动方案
2014/08/20 职场文书
暂住证明怎么写
2015/06/19 职场文书
教师节作文之小学四年级
2019/09/03 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
导游词之湖州-太湖
2019/10/11 职场文书