响应式与bootstrap
一.单双击问题
<body>
<button>按钮</button>
<script src="./jQuery.js"></script>
<script>
$(function () {
// 先做两次单击 一次双击 中间间隔 小于500ms
var timer = null;
$('button').click(function(event) {
console.log(timer);
clearTimeout(timer);
// 定时器 300ms 一次性定时器
timer = setTimeout(function(){
console.log('单机了');
}, 500);
});
$('button').dblclick(function(event) {
console.log(timer);
clearTimeout(timer);
timer = setTimeout(function(){
console.log('双击了');
}, 499);
});
})
</script>
</body>
对于一次双击,会在页面中打印两次单击和一次双击的问题,解决办法是,两次单机的时间间隔小于500毫秒,视为一次双击
在双击的第一次点击中,会开启一个定时器,等待500毫秒后输出'单机了',但是在这500毫秒中,又点击了一次按钮
单击事件的函数清了上一次单机的定时器,重新开启一个定时器,同时,双击事件的函数,清了这次的定时器.
二.animate.css(css3的动画库) animate.css库的网址:https://github.com/daneden/animate.css <head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
<style>
div{
height: 200px;
width: 200px; }
</style>
</head>
<body>
<!--循环执行-->
<h1 class="animated bounce infinite delay-2s">哈哈</h1>
<!--提供的效果 两秒内执行结束-->
<div class="box animated zoomIn infinite delay-2s"></div>
</body> 两张使用流程图片 三.jQueryUI jQueryUI的网址:http://www.jqueryui.org.cn/ 流程图 <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 排序（Sortable） - 默认功能</title>
<!--如果 链接的cdn资源过慢,下载后放到本地去使用-->
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<!--引用时一定要引入相应版本的jQuery,否则可能出现兼容性问题-->
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
</style>
<script>
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
</script>
</head>
<body> <ul id="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
</body>
</html>
单纯的赋复制代码,就可以实现相应的功能,把代码改成自己需要的样子,插入到项目的相应位置即可 四.移动端响应式(在不同的页面尺寸上对应不同的样式)
定义和使用
使用 @media 查询，你可以针对不同的屏幕大小定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式，
特别是如果你需要设置设计响应式的页面，@media 是非常有用的。 当你重置浏览器大小的过程中，页面也会根据浏览器的
宽度和高度重新渲染页面，这对调试来说是一个极大的便利。
@media mediaType and|not|only (media feature) {
/*CSS-Code;*/
}
媒体类型（mediaType ） 类型有很多，在这里不一一列出来了，只列出了常用的几个。
screen： 用于电脑屏幕，平板电脑，智能手机等。（最常用） speech 应用于屏幕阅读器等发声设备 媒体功能
media feature：
1.max-width:定义输出设备中的页面最大可见区域宽度
2.min-width:定义输出设备中的页面最小可见区域宽度
始编写响应式页面
准备工作1：设置Meta标签
首先我们在使用 @media 的时候需要先设置下面这段代码，来兼容移动设备的展示效果：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
这段代码的几个参数解释：
width = device-width：宽度等于当前设备的宽度
initial-scale：初始的缩放比例（默认设置为1.0，即代表不缩放）
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
准备工作2：加载兼容文件JS(ie8以下的才需要用)
因为IE8既不支持HTML5也不支持CSS3 @media ，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
准备工作3：设置IE渲染方式默认为最高(可选) 现在有很多人的IE浏览器都升级到IE9以上了，所以这个时候就有又很多诡异的事
情发生了，例如现在是IE9的浏览器，但是浏览器的文档模式却是IE8 为了防止这种情况，我们需要下面这段代码来让IE的文档渲染模式永远都是最新的
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
ps:这段代码后面加了一个chrome=1，如果用户的电脑里安装了 chrome，就可以让电脑里面的IE不管是哪个版本的都可以使
用Webkit引擎及V8引擎进行排版及运算，如果没有安装，就显示IE最新的渲染模式。
例:(根据文档的宽度,改变body的背景颜色)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
<style>
@media screen and (min-width: 1200px){
body{
background-color: red;
}
}
@media screen and (max-width: 1200px) and (min-width: 800px){
body{
background-color: #4376ff;
}
}
@media screen and (max-width: 800px){
body{
background-color: #ffc585;
}
}
</style>
</head>
<body>
</body>
</html>
五.移动端单位的介绍
字体相对单位有：em、ex、ch、rem； px: 绝对（固定）单位
缺点：任何情况下都是固定值，会导致布局在不同尺寸下的设备错位 %：相对单位（会有影响发生变化）相对于父级（自身）大小进行定位
缺点：能确定范围的还是比较好计算的，对于不太好确定值得地方不好使用百分比，并且会导致变形，高度一般不好控制 em: 相对单位 （会有影响发生变化） em=当前字体大小
缺点：会根据当前容器字体大小发生变化，假如每个容器字体大小不一致，那么计算会非常麻烦 rem:相对单位 只依赖于html字体大小 需要通过js去控制： 例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
<title>移动端布局</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
.clearfix:after{
content: '';
display: block;
clear: both;
}
html{
width: 100%;
height: 100%;
font-size: 100px;
overflow: hidden;
}
body{
width: 100%;
height: 100%;
overflow: auto;
}
.head-box{
width: 100%;
height: 0.4rem;
background-color: red;
position: absolute;
top: 0;
left: 0;
}
.list{
margin-top: 0.4rem;
font-size: 16px;
} .list .item{
float: left;
width: 1rem;
height: 1rem;
border: 1px solid black;
margin: 0.1rem;
}
</style>
</head>
<body> <header class="head-box">
<div class="head-top"></div>
<div class="head-bottom"></div>
</header> <ul class="list clearfix">
<li class="item">1111111</li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
</body>
</html> 动态改变HTML的fontsize:
!(function(doc, win) {
//获取HTML对象
var docEle = doc.documentElement,
//三元运算符
evt = "onorientationchange" in window ? "orientationchange" : "resize",
fn = function() {
//获取HTML文档的宽度
var width = docEle.clientWidth;
console.log(width);
//动态设置HTML的fontsize
width && (docEle.style.fontSize = 20 * (width / 320) + "px");
};
//只要文档或窗口发生改变是,执行fn回调函数
win.addEventListener(evt, fn, false);
// 每次加载时都重新计算一下页面尺寸,执行fn回调函数
doc.addEventListener("DOMContentLoaded", fn, false);
//自执行函数
}(document, window));
只要在HTML文档的最后引入此文件,就可以达到无论设备尺寸如何,都会显示我们想要的那种效果
六.Boostrap框架
Bootstrap支持移动设备优先
也就是说使用Bootstrap可以在移动设备上运行。为了确保适当的绘制和触屏缩放，需要在<head>之中添加viewport元数据标签
<meta name="viewport" content="width=device-width, initial-scale=1">
在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用
缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Bootstrap重置样式
为了增强跨浏览器表现的一致性，我们使用了 Normalize.css，这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库。
布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的
原因，这两种 容器类不能互相嵌套。
.container 类用于固定宽度并支持响应式布局的容器。
<div class="container">
...
</div>
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
<div class="container-fluid">
...
</div>
栅格系统 图 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下
Bootstrap 栅格系统的工作原理： 栅格参数 使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这
一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。 例:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title> <!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6">
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
</div>
</div>
</div> <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
响应式与bootstrap的更多相关文章
- 响应式布局 Bootstrap
github介绍 (1)简单灵活可用于架构流行的 用户界面和交互接口 的html.css.javascript工具集 (2)基于html5.css3的bootstrap,具有大量的诱人特征: 友好的学 ...
- web响应式之bootstrap的基础用法。
1/首先必须在head里面引用视窗viewport,以保证之后可以响应式分布 <!--meta:vp 响应式布局--> <meta name="viewport" ...
- 响应式框架Bootstrap
概念:Bootstrap将会根据你的屏幕的大小来调整HTML元素的大小 -- 强调 响应式设计的概念. 通过响应式设计,你无需再为你的网站设计一个手机版的.它在任何尺寸的屏幕上看起来都会不错. Boo ...
- 响应式及Bootstrap
一丶CSS3的@media 查询 使用 @media 查询,你可以针对不同的屏幕大小定义不同的样式. @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@med ...
- fcc 响应式框架Bootstrap 练习2
text-primary 属性值使标题直接变成了红色,text-center使标题直接居中 <h2 class="text-primary text-center"> ...
- 响应式布局 Bootstrap（01）
1.是什么?Bootstrap,来自 Twitter,是目前最受欢迎的前端框架,Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷 Boot ...
- 10套免费的响应式布局 Bootstrap 模版
1. Cardio Cardio是我最喜欢的一个轻量级模板.它几乎可以很少的修改的用于任何类型的业务. 2. Evento Evento 是一个事件引导广告模板的形状.它是设计精美和注意细节. 3. ...
- 响应式框架Bootstrap栅格系统
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8&qu ...
- 响应式(2)——bootstrap的响应式
<meta name="viewport" content="width=device-width,user-scalable=no"/> < ...
随机推荐
- vue 一些webpack的配置详解
最近一直在忙着做项目 本来想养成一个经常跟新博客的习惯 , 但是实在是太难了 , 每天加班到10点多 .8点能下班都是最好的了 , 小公司真不好待呀 分享一下最近半年的vue心得吧 我的项目是在他的基 ...
- for, for..in, in, for...of的区别
for是ES5里做数组循环里最常用的 for (var i = 0; i < array.length; i++) { // todo } for...in是ES5里用来遍历对象属性用的 var ...
- 判断软件的闲置时间（使用Application.OnMessage过滤所有键盘鼠标消息）
GetLastInputInfo是检测系统输入的,应用到某个程序中不合适! 此问题有二种解法来监控输入消息: 1.用线程级HOOK,钩上MOUSEHOOK与KEYBOARDHOOK 2.在Applic ...
- WinForm - 无边框窗体自定义移动
为了界面的好看,有时候需要将窗体FormBorderStyle属性设为None,这样就可以根据自己的喜欢来设计界面.但这样窗体无法进行移动的.而且默认的窗体(FormBorderStyle=Sizab ...
- TCP的三次握手和四次挥手【经典】
参考:http://blog.csdn.net/cmm0401/article/details/77865479
- 1.在windows下安装rabbitMQ
a .RabbitMQ是用erLang语言写的,所以我们在安装rabbitMQ之前要先安装erLang. 要安装最新版本的请分别前往 www.erlang.org和www.rabbitmq.com网站 ...
- 给WPF示例图形加上方便查看大小的格子之完善版本
原文:给WPF示例图形加上方便查看大小的格子之完善版本 去年10月份, 我曾写过一篇"给WPF示例图形加上方便查看大小的格子"的BLOG(http://blog.csdn.net/ ...
- python 教程 第二十一章、 扩展Python
第二十一章. 扩展Python /* D:\Python27\Lib\Extest-1.0\Extest2.c */ #include <stdio.h> #include <std ...
- 在React开发中遇到的问题——数组引用赋值
在React开发中遇到了一个问题: 需求是在一个选择组件中选择数据mydata数组,确定后将mydata数组返回到父组件,再次打开该选择组件时,从父组件获取之前选择的数据mydata并显示为已选择. ...
- 漫谈 KVC 与 KVO
KVC 与 KVO 无疑是 Cocoa 提供给我们的一个非常强大的特性,使用熟练可以让我们的代码变得非常简洁并且易读.但 KVC 与 KVO 提供的 API 又是比较复杂的,绝对超出我们不经深究之前所 ...