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脚本
Dec 12 Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
Jan 08 Javascript
获取非最后一列td值并将title设为该值的方法
Oct 30 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
Apr 29 Javascript
在HTML中插入JavaScript代码的示例
Jun 03 Javascript
jQuery Ajax实现跨域请求
Jan 21 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
Feb 17 Javascript
JavaScript html5 canvas实现图片上画超链接
Oct 20 Javascript
JavaScript中变量提升与函数提升经典实例分析
Jul 26 Javascript
Vue实现滑动拼图验证码功能
Sep 15 Javascript
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
vue 解决setTimeOut和setInterval函数无效报错的问题
Jul 30 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/03/04 星际争霸
PHP var_dump遍历对象属性的函数与应用代码
2010/06/04 PHP
ajax在joomla中的原生态应用代码
2012/07/19 PHP
php比较多维数组中值的大小排序实现代码
2012/09/08 PHP
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
PHP简单实现二维数组的矩阵转置操作示例
2017/11/24 PHP
laravel7学习之无限级分类的最新实现方法
2020/09/30 PHP
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
2013/06/26 Javascript
JavaScript分页功能的实现方法
2015/04/25 Javascript
javascript运动详解
2015/07/06 Javascript
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
2016/01/12 Javascript
Angularjs实现搜索关键字高亮显示效果
2017/01/17 Javascript
JavaScript输入框字数实时统计更新
2017/06/17 Javascript
简单的Vue异步组件实例Demo
2017/12/27 Javascript
微信小程序实现留言板(Storage)
2018/11/02 Javascript
深入理解Node内建模块和对象
2019/03/12 Javascript
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
Python编程中字符串和列表的基本知识讲解
2015/10/14 Python
Python用list或dict字段模式读取文件的方法
2017/01/10 Python
基于并发服务器几种实现方法(总结)
2017/12/29 Python
Linux系统(CentOS)下python2.7.10安装
2018/09/26 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
对pandas通过索引提取dataframe的行方法详解
2019/02/01 Python
wxpython+pymysql实现用户登陆功能
2019/11/19 Python
python 操作excel表格的方法
2020/12/05 Python
汇集了世界上最好的天然和有机美容产品:LoveLula
2018/02/05 全球购物
女性时尚在线:IVRose
2019/02/23 全球购物
莫斯科高科技在线商店:KremlinStore
2019/03/13 全球购物
英国的一家创新礼品和小工具零售商:Menkind
2019/08/24 全球购物
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
办公室个人总结
2015/02/28 职场文书
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP
解决pycharm下载库时出现Failed to install package的问题
2021/09/04 Python
Nginx动静分离配置实现与说明
2022/04/07 Servers