响应式页面-@media介绍, 移动端单位介绍 Bootstrap学习 Bootstrap的插件

时间 2019-11-21

标签响应页面 media 介绍移动单位 bootstrap 学习插件栏目无线繁體版

原文原文链接

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

    <div class="animated fadeInLeftBig delay-2s">bounce</div>
    <button>动画吧</button>
    
    <div id='active'>
        小明
    </div>
    <script src="../day57/jquery.js"></script>
    <script src="index.js"></script>

    </script>
    <script>
        
        $(function(){
            
            $('button').click(function(event) {
                /* Act on the event */
                $('#active').addClass('animated bounceOutLeft delay-2s');
            });

        });
    </script>
</body>
</html>

animate.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title></title>
    <style>
        
        /*最大1200px*/
        @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: yellow;
            }
        }
    </style>
</head>
<body>

    
</body>
</html>

@media.html

<!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{
               /* font-size: 20px;*/

                /*1rem=20px*/

            }
           /* html{
                width: 100%;
                height: 100%;
               
                overflow: hidden;
            }*/
            body{
                width: 100%;
                height: 100%;
                /*overflow: auto;*/
                padding-top: 80px;
            }
            .head-box{
                width: 100%;
                height: 80px;
                background-color: red;
                position: fixed;
                top: 0;
                left: 0;    
                z-index: 9999;
            }
            .list{
                
                font-size: 14px;
            }
            
            .list .item{
                float: left;
                width: 1rem;
                height: 1rem;
                border: 1px solid black;
                margin: 0.1rem;
                
            }

            /*
            移动端单位 
            相对单位和绝对单位px
            相对单位
            em:相对于当前盒子的设置的字体;
            20px = 1em

            rem:相对于html的字体大小;

            */
            
            
            
        </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>
        
        <div></div>
        <div></div>
    </body>
    <script src="./resize.js"></script>
</html>

移动端单位介绍

<!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="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">

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

    </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.html

<!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="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">

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

栅格系统

<!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="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">

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

    <style>
      .active{
        /*background-color: black;*/
      }
    </style>
  </head>
  <body>
    <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="#">首页</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-success">登陆</button>
        <button type="submit" class="btn btn-danger">登陆</button>


      </form>
     
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">表格</h3>
            </div>
            <div class="panel-body">
              <table class="table table-striped table-bordered table-hover">
                <tr>
                  <td>#</td>
                  <td>name</td>
                  <td>age</td>
                </tr>
                 <tr>
                  <td class="success">1</td>
                  <td class="warning">张三</td>
                  <td>18</td>
                </tr>
                 <tr>
                  <td>2</td>
                  <td class="danger">李四</td>
                  <td>20</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">表单</h3>
            </div>
            <div class="panel-body">
              <form>
  <div class="form-group">
    <label for="exampleInputEmail1">用户名</label>
    <input type="text" class="form-control" id="exampleInputEmail1" placeholder="请输入用户名">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
 
 
  <button type="submit" class="btn btn-success">Submit</button>
</form>
            </div>
          </div>
        </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>

全局的css样式

01 响应式页面-@media介绍,

咱们为何要写自适应的页面（响应式页面）

众所周知，电脑、平板、手机的屏幕是差距很大的，假如在电脑上写好了一个页面，在电脑上看起来不错，可是若是放到手机上的话，那可能就会乱的一塌糊涂，这时候怎么解决呢？之前，能够再专门为手机定制一个页面，当用户访问的时候，判断设备是手机仍是电脑，若是是手机就跳转到相应的手机页面，例如百度的就是，手机访问www.baidu.com就会跳转到m.baidu.com，这样作简直就是费力不讨好的活，因此聪明的程序员开发了一种自适应写法，即一次开发，到处显示！这究竟是一个什么样的神器东西呢，接下来就揭晓它的神秘面纱。javascript

CSS3 的 @media 查询

定义和使用

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

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

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

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

media feature：html5

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

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

开始编写响应式页面

准备工做1：设置Meta标签ios

首先咱们在使用 @media 的时候须要先设置下面这段代码，来兼容移动设备的展现效果：css3

<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既不支持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最新的渲染模式。

代码示例：

一、若是文档宽度大于等于 1170px 则应用花括号内的样式——修改body的背景颜色(background-color):

@media screen and (min-width: 1170px) {
    body {
        background-color:lightblue;
    }
}

从上面的代码能够看出，媒体类型是屏幕（screen），使用一个 and 链接后面的媒体功能，这里写的是 max-width:300px ，也就是说，当屏幕的最大宽度大于于等于 1170px 的时候，就应用花括号里面的样式。

2.若是文档宽度大于等于 992px 则应用花括号内的样式——修改body的背景颜色(background-color):

@media screen and (min-width: 992px) {
    body {
        background-color:red;
    }
}

三、当文档宽度大于等于 768px 而且小于等于992px （ width >=768 && width <=992）的时候显示的样式

@media screen and (min-width:768px) and (max-width:992px) {
    /* CSS 代码 */
}

须要注意的是：

不要被 min-width 和 max-width 所迷惑，初学者很容易误觉得 min-width 的意思是小于xxx的时候才应用，然而这就陷入误区了，其实它的意思是：当设置了 min-width 的时候，文档的宽度若是小于设置的值，就不会应用这个区块里的CSS样式，因此 min-width 它才能实现大于等于设置的值得时候，才会应用区块里的CSS样式，max-width 也是如此。

02-移动端单位介绍

前言

在页面总体布局中，页面元素的尺寸大小（长度、宽度、内外边距等）和页面字体的大小也是重要的工做之一。一个合理设置，则会让页面看起来井井有条，重点鲜明，赏心悦目。反之，一个不友好的页面尺寸和字体大小设置，则会增长页面的复杂性，增长用户对页面理解的复杂性；甚至在当下访问终端（iPhone、iPad、PC、Android…）层出不穷的今天，适应各式各样的访问终端，将成为手中的一块“烫手的山芋”。因此在近几年，“九宫格”式的“流式布局”再度回归。为了提供页面布局，及其它的可维护性、可扩展性，咱们尝试将页面元素的大小，以及字体大小都设置为相对值，再也不是孤立的固定像素点。使其能在父元素的尺寸变化的同时，子元素也能随之适应变化。以及结合少许最新CSS3的@media查询，来实现“响应式布局”，bootstrap这类CSS框架大势兴起。

然而在CSS中，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>

03-Bootstrap学习

1、Bootstrap的介绍

凡是使用过Bootstrap的开发者，都不在意作这么两件事情：复制and粘贴。哈哈~，是的使用Bootstrap很是简单，可是在复制粘贴以前，须要先对Bootstrap的用法一一熟悉以后咱们才开始干活！

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

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

2、Bootstrap的下载

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

2.2点到起步中的基本模板

将看到的整段代码复制粘贴到建好的index.html文件中

官网明确表示：
使用此给出的这份超级简单的HTML模板，或者修改这些实例。咱们强烈建议你对这些实例按照本身的需求进行修改，而不要简单的复制、粘贴

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>

栅格系统

栅格系统的鼻祖是 https://960.gs/.

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增长，系统会自动分为最多12列

栅格系统用于经过一系列的行（row）与列（column）的组合来建立页面布局，你的内容就能够放入这些建立好的布局中。下面就介绍一下 Bootstrap 栅格系统的工做原理：

栅格参数

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

一些常使用网站

阿里巴巴图标库网站：

若是想作图表，那能够去官网：http://echarts.baidu.com/或者https://chartjs.bootcss.com/

PS:仍是那句话，使用Bootstrap很是简单，根据项目的需求适当去官网复制粘贴，而后根据需求更改本身的内容，若是想修改本身的样式，能够添加类，按照以前我们学习css同样的方式，给它相应的样式

04-Bootstrap的插件

一、下拉菜单

代码以下：

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <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>
</div>

aria-haspopup :true表示点击的时候会出现菜单或是浮动元素； false表示没有pop-up效果。

aria-expanded:表示展开状态。默认为undefined, 表示当前展开状态未知。其它可选值：true表示元素是展开的；false表示元素不是展开的

aria-labelledby：当想要的标签文本已在其余元素中存在时，可使用aria-labelledby，并将其值为全部读取的元素的id。以下：

当ul获取到焦点时，屏幕阅读器是会读：“选择您的职位”

data-toggle: 表示什么事件类型发生

二、模态框

代码以下：

<h2>建立模态框</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">删除</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">是否删除</h4>
        </div>
        <div class="modal-body">你肯定要删除吗？</div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-danger">肯定</button>
        </div>
    </div>
    <!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>

在模态框中须要注意两点：

第一是.modal，用来把 <div>的内容识别为模态框。
第二是.fade class。当模态框被切换时，它会引发内容淡入淡出。
aria-labelledby="myModalLabel" ，该属性引用模态框的标题。
属性 aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止（好比点击在相关的按钮上）。
<div class="modal-header"> ，modal-header 是为模态窗口的头部定义样式的类。
class="close"，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式。
data-dismiss="modal"，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。
class="modal-body"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的主体设置样式。
class="modal-footer"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的底部设置样式。
data-toggle="modal"，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。

经过js控制模态框弹出

代码以下：

    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div class="panel panel-success">
                        <div class="panel-heading">
                            <div class="panel-title">

                            </div>

                        </div>
                        <div class="panel-body">
                            <h2>建立模态框</h2>
                            <!-- 按钮触发模态框 -->
                            <button class="btn btn-primary btn-lg" data-toggle="modal" id="delete">删除</button>
                            <!-- 模态框（Modal） -->
                            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                            <h4 class="modal-title" id="myModalLabel">是否删除</h4>
                                        </div>
                                        <div class="modal-body">你肯定要删除吗？</div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                            <button type="button" class="btn btn-danger">肯定</button>
                                        </div>
                                    </div>
                                    <!-- /.modal-content -->
                                </div>
                                <!-- /.modal -->
                            </div>
                        </div>
                    </div>
                </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>
        <script type="text/javascript">
            $(function(){
                //经过jquery控制模态框弹出
                $('#delete').click(function(){
                    $('#myModal').modal({
                        keyboard:false
                    })
                })

            })
        </script>
    </body>

三、滚动监听

代码以下：

<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy">
            <span class="sr-only">切换导航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
            <a class="navbar-brand" href="#">luffy</a>
        </div>
        <div class="collapse navbar-collapse bs-js-navbar-scrollspy">
            <ul class="nav navbar-nav">
                <li>
                    <a href="#ios">iOS</a>
                </li>
                <li>
                    <a href="#svn">SVN</a>
                </li>
                <li class="dropdown">
                    <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Java
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1">
                        <li>
                            <a href="#jmeter" tabindex="-1">jmeter</a>
                        </li>
                        <li>
                            <a href="#ejb" tabindex="-1">ejb</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#spring" tabindex="-1">spring</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div data-spy="scroll" data-target="#navbar-example" data-offset="0" style="height:200px;overflow:auto; position: relative;">
    <h4 id="ios">iOS</h4>
    <p>iOS 是一个由苹果公司开发和发布的手机操做系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操做系统是用在苹果电脑上，iOS 是苹果的移动版本。
    </p>
    <h4 id="svn">SVN</h4>
    <p>Apache Subversion，一般缩写为 SVN，是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年建立。可是如今它已经发展为 Apache Software Foundation 的一个项目，所以拥有丰富的开发人员和用户社区。
    </p>
    <h4 id="jmeter">jMeter</h4>
    <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。
    </p>
    <h4 id="ejb">EJB</h4>
    <p>Enterprise Java Beans（EJB）是一个建立高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（好比 JBOSS、Web Logic 等）的 J2EE 上。
    </p>
    <h4 id="spring">Spring</h4>
    <p>Spring 框架是一个开源的 Java 平台，为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。
    </p>
    <p>Spring 框架最初是由 Rod Johnson 编写的，在 2003 年 6 月首次发布于 Apache 2.0 许可证下。
    </p>

</div>

经过javascript 调用滚动监听，选取要监听的元素，而后调用.scrollspy()函数

$('.navbar-header').scrollspy('.bs-js-navbar-scrollspy')

像后面还介绍了：

　　 0.手风琴效果
data-toggle="collapse" 添加到您想要展开或折叠的组件的连接上。

　　href 或 data-target 属性添加到父组件，它的值是子组件的 id。

data-parent 属性把折叠面板（accordion）的 id 添加到要展开或折叠的组件的连接2

弹出框
警告框
轮播

经过 data 属性：使用 data 属性能够很容易控制轮播（Carousel）的位置。
属性data-slide接受关键字prev或next，用来改变幻灯片相对于当前位置的位置
使用data-slide-to来向轮播传递一个原始滑动索引，data-slide-to="2" 将把滑块移动到一个特定的索引，索引从 0 开始计数。
data-ride="carousel"属性用于标记轮播在页面加载时就开始动画播放

上面是经常使用Bootstrap插件，相关代码都在Bootstrap的官网上。你们自行copy必定要演示

响应式页面-@media介绍, 移动端单位介绍 Bootstrap学习 Bootstrap的插件

01 响应式页面-@media介绍,

咱们为何要写自适应的页面（响应式页面）

CSS3 的 @media 查询

定义和使用

开始编写响应式页面

02-移动端单位介绍

前言

03-Bootstrap学习

1、Bootstrap的介绍

2、Bootstrap的下载

Bootstrap支持移动设备优先

Bootstrap重置样式

布局容器

栅格系统

栅格参数

04-Bootstrap的插件

一、下拉菜单

二、模态框

经过js控制模态框弹出

三、滚动监听

Bootstrap支持移动设备优先