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 相关文章推荐
js怎么终止程序return不行换jfslk
May 30 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
May 08 Javascript
JavaScript function 的 length 属性使用介绍
Sep 15 Javascript
JavaScript正则表达式之multiline属性的应用
Jun 16 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
May 05 Javascript
简洁实用的BootStrap jQuery手风琴插件
Aug 31 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
axios全局请求参数设置,请求及返回拦截器的方法
Mar 05 Javascript
Node.js笔记之process模块解读
May 31 Javascript
浅析java线程中断的办法
Jul 29 Javascript
layui表格数据重载
Jul 27 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
php开发文档 会员收费1期
2012/08/14 PHP
深入php函数file_get_contents超时处理的方法详解
2013/06/03 PHP
CakePHP框架Model关联对象用法分析
2017/08/04 PHP
实例:尽可能写友好的Javascript代码
2006/10/09 Javascript
JavaScript DOM 添加事件
2009/02/14 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
2012/04/20 Javascript
document.documentElement的一些使用技巧
2013/04/18 Javascript
向左滚动文字 js代码效果
2013/08/17 Javascript
谈谈对offsetleft兼容性的理解
2015/11/11 Javascript
深入分析Javascript事件代理
2016/01/30 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
2016/02/25 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
2016/10/04 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
2017/06/20 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
2017/08/11 Javascript
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
JavaScript寄生组合式继承实例详解
2018/01/06 Javascript
vue 自定义指令自动获取文本框焦点的方法
2018/08/25 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
VUE实现移动端列表筛选功能
2019/08/23 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
2020/11/12 Javascript
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
Django实现学员管理系统
2019/02/26 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
python中对二维列表中一维列表的调用方法
2020/06/07 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
2013/04/22 HTML / CSS
超市营业员求职简历的自我评价
2013/10/17 职场文书
离婚协议书的书写要求
2014/09/17 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
房屋分割离婚协议书范本
2014/12/01 职场文书
财务部岗位职责
2015/02/03 职场文书
工程质检员岗位职责
2015/04/08 职场文书
2015年勤工助学工作总结
2015/04/29 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
Golang jwt身份认证
2022/04/20 Golang