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

时间 2019-11-10

标签 python 学习 day58 day bootstrap 组件 javascript 插件栏目 Python 繁體版

原文原文链接

1、bootstrap组件　　　　　　　　　　　　　　　　　

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

组件和插件的区别？　　　　　　　　　　　　　　　　　　　　　　　　

插件：一个功能，好比js文件css

组件：html css jshtml

组件包含插件前端

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

基本实例　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

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

带标题的面版　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

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

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

举例：git

<!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 插件让它具备了交互性。github

实例　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

将下拉菜单触发器和下拉菜单都包裹在 .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">
                        <!--真正显示进度条长度，是靠width: 60%;这个参数来控制的-->
                        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 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="width: 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="width: 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="width: 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="width: 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="width: 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="width: 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-width: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 {
      width: 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="width: 1536px; margin-right: 30px;">
        <img src="images/chun.jpg" alt="">
      </div>
      <div class="swiper-slide swiper-slide-prev" style="width: 1536px; margin-right: 30px;">
        <img src="images/xia.jpg" alt="">
      </div>
      <div class="swiper-slide swiper-slide-active" style="width: 1536px; margin-right: 30px;">
        <img src="images/qiu.jpg" alt="">
      </div>
      <div class="swiper-slide swiper-slide-next" style="width: 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?^%$

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

1、bootstrap组件

组件和插件的区别？

面版

基本实例

带标题的面版

下拉菜单

实例

输入框组

标签

警告框

可关闭的警告框

进度条

带有提示标签的进度条

根据情境变化效果

动画效果

后台模板网页

图表插件

ECharts

获取 ECharts

引入 ECharts

绘制一个简单的图表

Chart.js

Highcharts

jQuery插件库

Animate.css

swiper

Flex 布局

1、bootstrap组件　　　　　　　　　　　　　　　　　

组件和插件的区别？　　　　　　　　　　　　　　　　　　　　　　　　

面版　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

基本实例　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

带标题的面版　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

下拉菜单　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

实例　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

输入框组　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

标签　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

警告框　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

可关闭的警告框　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

进度条　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

带有提示标签的进度条　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

根据情境变化效果　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

动画效果　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

后台模板网页　　　　　　　　　　　　　　　　　　　

图表插件　　　　　　　　　　　　　　　　　　　　　　

ECharts　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

获取 ECharts　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

引入 ECharts　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

绘制一个简单的图表　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

Chart.js　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

Highcharts 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

jQuery插件库　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

Animate.css 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

swiper　　　　　　　　　　　　　　　　　　　　　　

Flex 布局　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　