python全栈学习--day58(bootstrap组件,bootstrap JavaScript 插件)

一、bootstrap组件　　　　　　　　　　　　　　　　　

无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。

组件和插件的区别？　　　　　　　　　　　　　　　　　　　　　　　　

插件：一个功能，比如js文件

组件：html css js

组件包含插件

虽然不总是必须，但是某些时候你可能需要将某些 DOM 内容放到一个盒子里。对于这种情况，可以试试面板组件。

基本实例　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

默认的 .panel 组件所做的只是设置基本的边框（border）和内补（padding）来包含内容。

带标题的面版　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的 <h1>-<h6> 标签，添加一个预定义样式的标题。不过，<h1>-<h6> 标签的字体大小将被 .panel-heading 的样式所覆盖。

为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!--适用于移动设备，禁止页面缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <script src='../ajax/js/jquery-3.3.1.min.js'></script>
    <!--<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>-->
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <title>Title</title>
    <style>

    </style>
</head>
<body>

<!--正文-->
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <!--面板-->
            <!--panel-success显示绿色-->
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title">下拉菜单</h3>
                </div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>

        </div>
    </div>
</div>

</body>
</html>

用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性。

实例　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!--适用于移动设备，禁止页面缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <script src='../ajax/js/jquery-3.3.1.min.js'></script>
    <!--<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>-->
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <title>Title</title>
    <style>

    </style>
</head>
<body>

<!--正文-->
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <!--面板-->
            <!--panel-success显示绿色-->
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title">下拉菜单</h3>
                </div>
                <div class="panel-body">
                    <!--下拉菜单实例-->
                    <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>
                </div>
            </div>

        </div>
    </div>
</div>

</body>
</html>

网页访问：

通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 或 .input-group-btn 类，可以给 .form-control 的前面或后面添加额外的元素。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!--适用于移动设备，禁止页面缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <script src='./js/jquery-3.3.1.min.js'></script>
    <!--<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>-->
    <link href="bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <title>Title</title>
    <style>

    </style>
</head>
<body>

<!--正文-->
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <!--面板-->
            <!--panel-success显示绿色-->
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title">下拉菜单</h3>
                </div>
                <div class="panel-body">
                    <!--下拉菜单实例-->
                    <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>
                </div>
            </div>

        </div>
    </div>
</div>

</body>
</html>

网页访问：

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!--适用于移动设备，禁止页面缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <script src='./js/jquery-3.3.1.min.js'></script>
    <!--<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>-->
    <link href="bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <title>Title</title>
    <style>

    </style>
</head>
<body>

<!--正文-->
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-title">
                    <div class="panel-heading">
                        <h3 class="panel-title">标签</h3>
                    </div>
                    <div class="panel-body">
                    <!--标签-->
                    <h5>你有新的短消息<span class="label label-danger">New</span></h5>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

</body>
</html>

访问网页：

警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息。

可关闭的警告框　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

为警告框添加一个可选的 .alert-dismissible 类和一个关闭按钮。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!--适用于移动设备，禁止页面缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <script src='./js/jquery-3.3.1.min.js'></script>
    <!--<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>-->
    <link href="bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <title>Title</title>
    <style>

    </style>
</head>
<body>

<!--正文-->
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <!--面板-->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">标签</h3>
                </div>
                <div class="panel-body">
                    <!--可关闭的警告框-->
                    <div class="alert alert-warning alert-dismissible" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
                        <strong>Warning!</strong> Better check yourself, you're not looking too good.
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

访问网页：

通过这些简单、灵活的进度条，为当前工作流程或动作提供实时反馈。

带有提示标签的进度条　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

将设置了 .sr-only 类的 <span> 标签从进度条组件中移除类，从而让当前进度显示出来。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!--适用于移动设备，禁止页面缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <script src='./js/jquery-3.3.1.min.js'></script>
    <!--<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>-->
    <link href="bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <title>Title</title>
    <style>

    </style>
</head>
<body>

<!--正文-->
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <!--面板-->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">标签</h3>
                </div>
                <div class="panel-body">
                    <!--带有提示标签的进度条-->
                    <div class="progress">
                        <!--真正显示进度条长度，是靠 60%;这个参数来控制的-->
                        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style=" 60%;">
                            60%
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

网页访问：

根据情境变化效果　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

进度条组件使用与按钮和警告框相同的类，根据不同情境展现相应的效果。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!--适用于移动设备，禁止页面缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <script src='../ajax/js/jquery-3.3.1.min.js'></script>
    <!--<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>-->
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <title>Title</title>
    <style>

    </style>
</head>
<body>

<!--正文-->
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <!--面板-->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">标签</h3>
                </div>
                <div class="panel-body">
                    
                    <!--根据情境变化效果-->
                    <div class="progress">
                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style=" 40%">
                            <span class="sr-only">40% Complete (success)</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style=" 20%">
                            <span class="sr-only">20% Complete</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style=" 60%">
                            <span class="sr-only">60% Complete (warning)</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style=" 80%">
                            <span class="sr-only">80% Complete (danger)</span>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

访问网页：

动画效果　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

为 .progress-bar-striped 添加 .active 类，使其呈现出由右向左运动的动画效果。IE9 及更低版本的浏览器不支持。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!--适用于移动设备，禁止页面缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <script src='../ajax/js/jquery-3.3.1.min.js'></script>
    <!--<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>-->
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <title>Title</title>
    <style>

    </style>
</head>
<body>

<!--正文-->
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <!--面板-->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">标签</h3>
                </div>
                <div class="panel-body">

                    <!--动画效果-->
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style=" 45%">
                            <span class="sr-only">45% Complete</span>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

访问网页：

比较重要的组件有：

Glyphicons 字体图标

下拉菜单

按钮式下拉菜单

导航条

徽章

面板

警告框

进度条

最重要的是面板和导航

后台模板网页　　　　　　　　　　　　　　　　　　　

AdminLTE 2 一个基于 bootstrap 的轻量级后台模板

访问网页：

http://adminlte.la998.com/

这里面有很多图表

以后做后台，可以参考这个模板来做。

图表插件　　　　　　　　　　　　　　　　　　　　　　

ECharts　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

ECharts是一款由百度前端技术部开发的,基于Javascript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。

官方地址：

http://echarts.baidu.com/

里面有很多图表

打开教程，链接如下：

http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

获取 ECharts　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

bootcdn下载链接：

https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js

引入 ECharts　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入。

绘制一个简单的图表　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style=" 600px;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

Chart.js　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

Chart.js是一个基于HTML5的简单的面向对象的JavaScript图表库，支持包括IE7和8的所有现代浏览器。

官方地址：

http://www.chartjs.org/

中文文档太少了，这里不多介绍

Highcharts 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

Highcharts 是一个用纯JavaScript编写的一个图表库，能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。

中文文档，非常全。这是许多网站用的最多的一个图表库。比如金融，证券，互联网企业等等。

官方地址：

https://www.hcharts.cn/

查看demo

https://www.hcharts.cn/demo/highcharts

bootcdn下载地址
https://cdn.bootcss.com/highcharts/6.0.7/highcharts.js

举例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>highcharts</title>
    <!--引入highcharts-->
    <script src="js/highcharts.js"></script>
    <!--主题文件-->
    <script src="https://img.hcharts.cn/highcharts/themes/dark-unica.js"></script>
</head>
<body>
<div id="container" style="max-800px;height:400px"></div>
<script>
    var chart = Highcharts.chart('container', {
        title: {
            text: '2010 ~ 2016 年太阳能行业就业人员发展情况'
        },
        subtitle: {
            text: '数据来源：thesolarfoundation.com'
        },
        yAxis: {
            title: {
                text: '就业人数'
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        plotOptions: {
            series: {
                label: {
                    connectorAllowed: false
                },
                pointStart: 2010
            }
        },
        series: [{
            name: '安装，实施人员',
            data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
        }, {
            name: '工人',
            data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
        }, {
            name: '销售',
            data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
        }, {
            name: '项目开发',
            data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
        }, {
            name: '其他',
            data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
        }],
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }
    });
</script>
</body>
</html>

访问网页：

jQuery插件库　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

jQuery插件库-收集最全最新最好的jQuery插件

官方地址：

http://www.jq22.com/

这里有很多插件，比如轮播图，看下面这个链接

http://www.jq22.com/jquery-info18345

查看演示

http://www.jq22.com/yanshi18345

查看网页代码，它真正的效果图是在iframe里面的，打开里面的链接。就是真正的效果网页。

如果有前端技术的，可以模仿copy一下。

ps：右键-->另存为，就可以将网页保持到桌面了。

Animate.css 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

Animate.css 一款强大的预设css3动画库

官方地址：

https://daneden.github.io/animate.css/

选择Specials下的hinge，它会有坠落的效果

打开github地址

https://github.com/daneden/animate.css

这里面有详细说明。

bootcdn下载地址：

https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css

举例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Animate</title>
    <!--引入Animate.css-->
    <link rel="stylesheet" href="css/animate.min.css">
</head>
<body>
<h1 class="animated hinge">Example</h1>
</body>
</html>

网页访问：

注意：如果class添加infinite，它会循环显示效果。否则，只展示一次动画效果。

swiper　　　　　　　　　　　　　　　　　　　　　　

Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件。

官方网址：

http://www.swiper.com.cn/

它可以很快速做出一个轮播图

查看demo演示

http://www.swiper.com.cn/demo/index.html

bootcdn下载地址：

css文件

https://cdn.bootcss.com/Swiper/4.3.0/css/swiper.min.css

js文件

https://cdn.bootcss.com/Swiper/4.3.0/js/swiper.min.js

举例：

<!DOCTYPE html>
<!-- saved from url=(0047)http://www.swiper.com.cn/demo/280-autoplay.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="css/swiper.min.css">

  <!-- Demo styles -->
  <style>
    html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
       100%;
      height: 100%;

    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
  </style>
<style type="text/css" abt="234"></style></head>
<body>
  <!-- Swiper -->
  <div class="swiper-container swiper-container-horizontal">
    <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-3132px, 0px, 0px);">
      <div class="swiper-slide" style=" 1536px; margin-right: 30px;">
        <img src="images/chun.jpg" alt="">
      </div>
      <div class="swiper-slide swiper-slide-prev" style=" 1536px; margin-right: 30px;">
        <img src="images/xia.jpg" alt="">
      </div>
      <div class="swiper-slide swiper-slide-active" style=" 1536px; margin-right: 30px;">
        <img src="images/qiu.jpg" alt="">
      </div>
      <div class="swiper-slide swiper-slide-next" style=" 1536px; margin-right: 30px;">
        <img src="images/dong.jpg" alt="">
      </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 1"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2"></span><span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 3"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 4"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 5"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 6"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 7"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 8"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 9"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 10"></span></div>
    <!-- Add Arrows -->
    <div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide" aria-disabled="false"></div>
    <div class="swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide" aria-disabled="false"></div>
  <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>

  <!-- Swiper JS -->
  <script src="js/swiper.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      spaceBetween: 30,
      centeredSlides: true,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  </script>

</body>
</html>

访问网页，分别展示春，夏，秋，冬的图片，自动切换

Flex 布局　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

简单来说，它能将盒子等比例一排显示，不需要使用float

详细说明，请参考文章

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?^%$

相关阅读:
ssh scp命令详解
 python模块与包
 python参数Sample Code
python 多线程简介
 python virtualenv环境安装(ubuntu)
python pip 代理设置
 mysql资源总结
 mysql索引原理及用法
 Oracle学习笔记：利用user_segments查表的大小
 Oracle学习笔记：dba_tables、all_tables、user_tables区别
原文地址：https://www.cnblogs.com/haowen980/p/9151310.html

python全栈学习--day58(bootstrap组件,bootstrap JavaScript 插件)

一、bootstrap组件

组件和插件的区别？

面版

基本实例

带标题的面版

下拉菜单

实例

输入框组

标签

警告框

可关闭的警告框

进度条

带有提示标签的进度条

根据情境变化效果

动画效果

后台模板网页

图表插件

ECharts

获取 ECharts

引入 ECharts

绘制一个简单的图表

Chart.js

Highcharts

jQuery插件库

Animate.css

swiper

Flex 布局

一、bootstrap组件　　　　　　　　　　　　　　　　　

组件和插件的区别？　　　　　　　　　　　　　　　　　　　　　　　　

面版　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

基本实例　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

带标题的面版　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

下拉菜单　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

实例　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

输入框组　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

标签　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

警告框　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

可关闭的警告框　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

进度条　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

带有提示标签的进度条　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

根据情境变化效果　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

动画效果　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

后台模板网页　　　　　　　　　　　　　　　　　　　

图表插件　　　　　　　　　　　　　　　　　　　　　　

ECharts　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

获取 ECharts　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

引入 ECharts　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

绘制一个简单的图表　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

Chart.js　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

Highcharts 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

jQuery插件库　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

Animate.css 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

swiper　　　　　　　　　　　　　　　　　　　　　　

Flex 布局　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　