14,前端-animate.css-jquery插件介绍-@media媒体查询-移动端单位-bootstrap

时间 2019-11-20

标签前端 animate.css animate css jquery 插件介绍 media 媒体查询移动单位 bootstrap 栏目 CSS 繁體版

原文原文链接

前端-animate.css-jquery插件介绍-@media媒体查询-移动端单位-bootstrapjavascript

jqueryUI官网css

https://jqueryui.com/html

jqueryUI 中文网：前端

http://www.jqueryui.org.cn/html5

官网demo：java

https://www.oschina.net/project/tag/273/jqueryjquery

Jquery UIwebpack

网址:www.jqueryui.org.cn/git

animate的使用,github

1,网址:https://daneden.github.io/animate.css/,点下面的:View on GitHub

2,进另外一个网址,https://github.com/daneden/animate.css

下载源码;

http://www.jqueryui.org.cn/demo/5719.html

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
<body>
    <div class="animated bounce delay-2s">
        bounce
    </div>

    <button>动画版</button>
    <div id="active">
        示例
    </div>
    <script src="jquery.js"></script>
    <script>
        $(function(){
            $('button').click(function(event) {

                $('#active').addClass('animated bounceOutLeft delay-2s');
            });

        })

    </script>
</body>
</html>

animate,示例代码

拔网页,

网址:http://www.jq22.com/

选择一个要用的插件

1,右键-查看源代码-搜索:iframe-找到以下的一行代码

2,把src里面的地址打开-右键-审查元素-source-按照文件目录结构在磁盘建文件夹-把相应的内容拷贝到对应的文件夹里.

移动端及响应式

m站,通常就是移动端站

响应式页面

为何作响应式页面

由于电脑、平板、手机的屏幕是差距很大的，假如在电脑上写好了一个页面，在电脑上看起来没问题，可是若是放到手机上的话，那可能就会乱了.之前的解决办法，能够再专门为手机定制一个页面，当用户访问的时候，判断设备是手机仍是电脑，若是是手机就跳转到相应的手机页面，例如访问百度,手机访问www.baidu.com就会跳转到m.baidu.com，到如今的开发了一种自适应写法.

缘由

CSS3的@media查询

使用 @media 查询，你能够针对不一样的屏幕大小定义不一样的样式。 @media 能够针对不一样的屏幕尺寸设置不一样的样式，特别是若是你须要设置设计响应式的页面，@media 是很是有用的。当你重置浏览器大小的过程当中，页面也会根据浏览器的宽度和高度从新渲染页面，这对调试来讲是一个极大的便利。

@media mediaType and|not|only (media feature) {
     /*CSS-Code;*/
}

媒体类型（mediaType ）类型有不少，在这里不一一列出来了，只列出了经常使用的几个。

screen：用于电脑屏幕，平板电脑，智能手机等。（最经常使用） speech 应用于屏幕阅读器等发声设备媒体功能

media feature：

1.max-width:定义输出设备中的页面最大可见区域宽度

　　2.min-width:定义输出设备中的页面最小可见区域宽度

响应式页面,

设置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，由于咱们不但愿用户放大缩小页面）

min-width,就是最小宽度是设置值时,才显示设置的样式

max-width:就是能显示设置的最大宽度,超过此宽度就再也不显示设置的样式,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <style>

    /*屏幕宽度小于800px,显示蓝色,800-1199px显示绿色,1200以上显示红色,*/
        @media screen and (min-width: 1200px){
            body{
                background-color: red;
            }
        }

        @media screen and (min-width:800px) and (max-width: 1199px){
            body{
                background-color: green;
            }    
        }
        
        @media screen and (max-width: 800px){
            body{
                background-color: blue;
            }
        }
    </style>
</head>
<body>   
</body>
</html>

示例代码

加载兼容文件JS

由于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]-->

设置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最新的渲染模式。

移动端单位介绍

W3C文档把尺寸单位划分为两类：相对长度单位和绝对长度单位

然而相对长度单位按照不一样的参考元素，又能够分为字体相对单位和视窗相对单位

字体相对单位有：em、ex、ch、rem；

视窗相对单位则包含：vw、vh、vmin、vmax几种

绝对定位则是固定尺寸，它们采用的是物理度量单位：cm、mm、in、px、pt以及pc。但在实际应用中，咱们使用最普遍的则是em、rem、px以及百分比（%）来度量页面元素的尺寸。

px: 绝对（固定）单位
缺点：任何状况下都是固定值，会致使布局在不一样尺寸下的设备错位

%：相对定位（会有影响发生变化）相对于父级（自身）大小进行定位
缺点：能肯定范围的仍是比较好计算的，对于不太好肯定值得地方很差使用百分比，而且会致使变形，高度通常很差控制

em: 相对定位（会有影响发生变化） em=当前字体大小
缺点：会根据当前容器字体大小发生变化，假如每一个容器字体大小不一致，那么计算会很是麻烦

rem
r==root
em=字体大小 font-size
rem 相对单位
只依赖于html字体大小

动态的修改根元素的font-size：

须要经过js去控制：

/*得到页面宽度后动态修改html上的fontsize
* 320为iphone5设计稿下的页面宽度，以下设置后页面的页面在iphone5等宽屏幕上html
* 的font-size会变为20px，即 1rem = 100px    1px=0.05rem
* 因此设置元素尺寸的时候，若是测量设计稿 15px  则需设置尺寸为 (0.05*15)rem = 0.75rem   
*/


!(function(doc, win) {
    var docEle = doc.documentElement,
        evt = "onorientationchange" in window ? "orientationchange" : "resize",
        fn = function() {
            var width = docEle.clientWidth;
            console.log(width)
            width && (docEle.style.fontSize = 20 * (width / 320) + "px");
        };
     
    win.addEventListener(evt, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);
 
}(document, window));

作响应式须要引入的文件

示例代码

<!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">
        <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: 30px;*/
                overflow: hidden;
            }
            body{
                width: 100%;
                height: 100%;
                overflow: auto;
            }
            .head-box{
                width: 100%;
                height: 4rem;
                background-color: red;
                position: absolute;
                top: 0;
                left: 0;    
            }
            .list{
                margin-top: 4rem;
                font-size: 1.5rem;
            }
            
            .list .item{
                float: left;
                width: 7rem;
                height: 7rem;
                border: 1px solid black;
                margin: 0.25rem;
                
            }
            
            
            
        </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>
        </ul>
        
    </body>
    <script src="./js/resize.js"></script>
</html>

View Code

Bootstrap学习

对前端的项目进行压缩的工具备:glup,webpack

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、javascript 的，它简洁灵活，使得 Web 开发更加快捷。

它用于开发响应式布局、移动设备优先的 WEB 项目

CSS语言的分类:

css,正常的前面的学的css语言,

less:能够定义变量,等等,后缀名为.less的文件,浏览器不认识,须要进行再编译,转译成css,浏览器才能识别,

sass,sass跟less相似,

Bootstrap的下载

Bootstrap第一步，先将生成环境的Bootstrap下载下来。而后将下载，而后引入到本身建好的当前目录中

1,http://www.bootcss.com/-Bootstrap3中文文档-起步(在导航栏找)-下载-(用于生产环境的 Bootstrap)-解压到本地.

可使用cdn资源
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- 能够引入本身下载的bootstrap -->
<link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">

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 重置样式库。

1,reset.css,,

2,Normalize.css,

布局容器

Bootstrap 须要为页面内容和栅格系统包裹一个 .container 容器。咱们提供了两个做此用处的类。注意，因为 padding 等属性的缘由，这两种容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

<div class="container">
  ...
</div>

.container-fluid 类用于 100% 宽度，占据所有视口（viewport）的容器。

<div class="container-fluid">
  ...
</div>

栅格系统

详情见网址,

https://v3.bootcss.com/css/#grid

练习代码

<!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 --> 
    <!-- 使用cdn -->
    <!-- <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> -->
    <!-- 能够引入本身下载的bootstrap -->
    <link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：经过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起做用 -->

    <!-- 若是想在IE下支持响应式,须要把下面的if段代码解注, -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->


  </head>
  <body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6">
                使用单一的一组 .col-md-* 栅格类，就能够建立一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一块儿的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。全部“列（column）必须放在 ” .row 内。
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                使用单一的一组 .col-md-* 栅格类，就能够建立一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一块儿的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。全部“列（column）必须放在 ” .row 内。
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                使用单一的一组 .col-md-* 栅格类，就能够建立一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一块儿的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。全部“列（column）必须放在 ” .row 内。
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                使用单一的一组 .col-md-* 栅格类，就能够建立一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一块儿的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。全部“列（column）必须放在 ” .row 内。
            </div>
        </div>
    </div>

    <!-- jQuery (Bootstrap 的全部 JavaScript 插件都依赖 jQuery，因此必须放在前边) -->
    <!-- <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> -->
    <!-- 加载 Bootstrap 的全部 JavaScript 插件。你也能够根据须要只加载单个插件。 -->
    <!-- <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
  </body>
</html>

练习代码

不要修改bootstrap内部的类名,

有些代码不知道起什么做用,能够采起注释掉来观察注释掉先后的变化,来肯定代码的做用,

练习代码

<!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 --> 
    <!-- 使用cdn -->
    <!-- <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> -->
    <!-- 能够引入本身下载的bootstrap -->
    <link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：经过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起做用 -->

    <!-- 若是想在IE下支持响应式,须要把下面的if段代码解注, -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->


  </head>
  <body>

    <!-- <nav class="navbar navbar-default"> -->
    <nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">路飞学城</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">首页<span class="sr-only">(current)</span></a></li>
        <li><a href="#">课程</a></li>
        
      </ul>
      <form class="navbar-form navbar-right">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>

        此处能够进行修改,
        <button type="submit" class="btn btn-info">登陆</button>
        <button type="submit" class="btn btn-default">注册</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
    <table class="table">
        <tr>
            <td>ID</td>
            <td>name</td>
            <td>age</td>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>29</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>25</td>
        </tr>
    </table>

    <!-- jQuery (Bootstrap 的全部 JavaScript 插件都依赖 jQuery，因此必须放在前边) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的全部 JavaScript 插件。你也能够根据须要只加载单个插件。 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

练习代码