bootstrap响应式工具使用详解


Posted in Javascript onNovember 29, 2017

本文实例为大家分享了bootstrap响应式工具的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>响应式工具</title>
  <link rel="stylesheet" type="text/css" href="../CSS/bootstrap.css" rel="external nofollow" >
  <script src="../JS/jquery-3.2.1.min.js"></script>
  <script src="../JS/bootstrap.js"></script>

  <style type="text/css">
    .tips1{width: 30px;height: 300px;background: black}
    .tips2{width: 30px;height: 200px;background: #ddd}
  </style>

</head>
<body style="height: 800px;">

  <!-- <div class="container">
    <div class="row">
       只有在lg分辨率以上的才会显示,否则是不会显示的 
      <div class="col-lg-6 visible-lg-inline-block">col-lg-6</div>
      <div class="hidden-sm hidden-xs">aaaaaaa</div>
    </div>
  </div>
 -->

  <div class="container-fluid">
    <div class="row"><!-- 消除最右边的空隙 -->
      <div class="tips1 pull-right visible-lg-block"></div>
      <!-- pull-right:右浮动 pull-left:左浮动-->
      <div class="tips2 hidden-lg affix"></div><!-- affix固定定位 -->
    </div>
  </div>


</body>
</html>
<!-- 
响应式工具:针对不同的设备展示或隐藏页面的内容
可见类:
  visible-[lg/md/sm/xs]-[inline/block/inline-block]
隐藏类:
  hidden-[lg/md/sm/xs]
浮动:[pull/push]-[right/left]
固定定位:affix
打印类:
  visible-print-[block/inline]:只有在使用打印功能的时候才会显示
  hidden-print:本来是显示内容的,当使用打印功能的时候会隐藏内容
 -->

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JSON.parse 解析字符串出错的解决方法
Jul 08 Javascript
js定时调用方法成功后并停止调用示例
Apr 08 Javascript
javascript中eval函数用法分析
Apr 25 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
Aug 21 Javascript
3种js实现string的substring方法
Nov 09 Javascript
常见JS验证脚本汇总
Dec 01 Javascript
js模糊查询实例分享
Dec 26 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
Feb 14 Javascript
浅谈Vue SPA 首屏加载优化实践
Dec 15 Javascript
如何使用less实现随机下雪动画详解
Jan 02 Javascript
JavaScript闭包与作用域链实例分析
Jan 21 Javascript
小程序Scroll-view上拉滚动刷新数据
Jun 21 Javascript
JavaScript的setter与getter方法
Nov 29 #Javascript
解析Vue 2.5的Diff算法
Nov 28 #Javascript
javascript+css3开发打气球小游戏完整代码
Nov 28 #Javascript
9种改善AngularJS性能的方法
Nov 28 #Javascript
JS异步函数队列功能实例分析
Nov 28 #Javascript
浅谈vue,angular,react数据双向绑定原理分析
Nov 28 #Javascript
JS+HTML+CSS实现轮播效果
Nov 28 #Javascript
You might like
一台收音机,让一家人都笑逐颜开!
2020/08/21 无线电
PHP简单系统数据添加以及数据删除模块源文件下载
2008/06/07 PHP
PHP性能优化工具篇Benchmark类调试执行时间
2011/12/06 PHP
php 生成唯一id的几种解决方法
2013/03/08 PHP
PHP微信企业号开发之回调模式开启与用法示例
2017/11/25 PHP
PHP保留两位小数的几种方法
2019/07/24 PHP
ThinkPHP5分页paginate代码实例解析
2020/11/10 PHP
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
2014/08/30 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
javascript检测两个数组是否相似
2015/05/19 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
js实现上传图片及时预览
2016/05/07 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
2016/11/22 Javascript
JavaScript仿支付宝6位数字密码输入框
2016/12/29 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
Nodejs--post的公式详解
2017/04/29 NodeJs
解决select2在bootstrap modal中不能正常使用的问题
2018/08/09 Javascript
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
Python实现PS图像调整颜色梯度效果示例
2018/01/25 Python
Python 使用with上下文实现计时功能
2018/03/09 Python
python采集微信公众号文章
2018/12/20 Python
python Socket网络编程实现C/S模式和P2P
2020/06/22 Python
Python存储读取HDF5文件代码解析
2020/11/25 Python
CSS3 伪类选择器 nth-child()说明
2010/07/10 HTML / CSS
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
行政工作个人的自我评价
2014/02/13 职场文书
《一株紫丁香》教学反思
2014/02/19 职场文书
工作过失检讨书
2014/02/23 职场文书
2014年国庆节活动总结
2014/08/26 职场文书
开展批评与自我批评发言材料
2014/10/17 职场文书
培训计划通知
2015/07/15 职场文书
二胎满月酒致辞
2015/07/29 职场文书
MySQL表的增删改查(基础)
2021/04/05 MySQL
Python的这些库,你知道多少?
2021/06/09 Python