bootCDN引用的bootstrap前端框架套件和示例

最新推荐文章于 2023-10-19 18:39:50 发布

weixin_30627341

最新推荐文章于 2023-10-19 18:39:50 发布

阅读量408

点赞数

文章标签：前端框架 javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/qingsong/p/11159813.html

版权

这是bootCDN上引用的bootstrap前端框架套件，由多个框架组合而成，方便平时学习和测试使用。生产环境要仔细琢磨一下，不要用开发版，而要用生产版。bootCDN的地址是：https://www.bootcdn.cn/ ，是由bootstrap中文网提供的CDN前端加速服务。

<!DOCTYPE html>
<html>
    <head>
        <title>站点标题</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- jquery -->
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <!-- 含有popper的bootstrap -->
        <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
        <!-- 动画 -->
        <script src="https://cdn.bootcss.com/wow/1.1.2/wow.min.js"></script>
        <link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css">
        <!-- 开发版vue，有错误信息 -->
        <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
        <!-- 生产版vue，没有错误信息 -->
        <!-- <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> -->
        <!-- 图表 -->
        <link rel="stylesheet" href="https://cdn.bootcss.com/Chart.js/2.8.0-rc.1/Chart.min.css">
        <script src="https://cdn.bootcss.com/Chart.js/2.8.0-rc.1/Chart.bundle.min.js"></script>
        <!-- 矢量字体图标 -->
        <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
<body>
    <div class="container">
        <!-- 动画示例 -->
        <h1 class="animated infinite bounce">动画效果示例</h1>
        <hr>
        <!-- 图标示例 -->
        <p>矢量图标示例：<i class="fa fa-user-o fa-3x"></i></p>
        <hr>
        <!-- vue示例 -->
        <div id="app" class="alert alert-success">
            vue示例：
            <p>{{message}}</p>
        </div>
        <hr>
        <!-- 图表示例 -->
        chart图表示例：
        <canvas id="myChart" width="400" height="400"></canvas>
    <div>
    <script>
        //vue示例
        var vm = new Vue({
            el: app,
            data:{
                 message: "hello Vue!"
            }
        });
        
        //chars.js图表示例
        var ctx = document.getElementById("myChart").getContext("2d");
        var data = {
                /// 表现在X轴上的数据，数组形式
                     labels : ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
                 /// 第一条线
                     datasets : [
                     {
                         label: '第一组数据示例',
                             /// 曲线的填充颜色
                                 fillColor : "rgba(220,0,0,1)",
                             /// 填充块的边框线的颜色
                                 strokeColor : "rgba(220,0,0,1)",
                             /// 表示数据的圆圈的颜色
                                 pointColor : "rgba(220,220,220,1)",
                             /// 表示数据的圆圈的边的颜色
                                 pointStrokeColor : "#f00",
                                 data : [65.5,59.2,90,81,56,55,40],
                                 backgroundColor: [
                                     'rgba(153, 102, 255, 0.6)',
                                     'rgba(153, 102, 255, 0.6)',
                                     'rgba(153, 102, 255, 0.6)',
                                     'rgba(153, 102, 255, 0.6)',
                                     'rgba(153, 102, 255, 0.6)',
                                     'rgba(153, 102, 255, 0.6)',
                                     'rgba(153, 102, 255, 0.6)'
                                 ]
             },
             /// 第二条线
             {
                 label: '第二组数据示例',
                         fillColor : "rgba(151,187,205,0.5)",
                         strokeColor : "rgba(151,187,205,1)",
                         pointColor : "rgba(151,187,205,1)",
                         pointStrokeColor : "#fff",
                         data : [28,48,40,18,86,27,100],
                         backgroundColor: [
                                     'rgba(255, 99, 132, 0.6)',
                                     'rgba(255, 99, 132, 0.6)',
                                     'rgba(255, 99, 132, 0.6)',
                                     'rgba(255, 99, 132, 0.6)',
                                     'rgba(255, 99, 132, 0.6)',
                                     'rgba(255, 99, 132, 0.6)',
                                     'rgba(255, 99, 132, 0.6)'
                                 ]
                 }
             ]
         }
        /// 创建对象，生成图表，type为bar是柱状图，为line是折线图
        var myLineChart = new Chart(ctx, {
            type: 'bar',
            data: data,
                options: {
                    scales: {
                        yAxes: [{
                            tension: 0,
                        }]
                    }
                }
             });

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

其中动画类型由于种类不多，就列在下面吧：

bounce
flash
pulse
rubberBand
shake
headShake
swing
tada
wobble
jello
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp

转载于:https://www.cnblogs.com/qingsong/p/11159813.html

weixin_30627341

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootCDN引用的bootstrap前端框架套件和示例

这是bootCDN上引用的bootstrap前端框架套件，由多个框架组合而成，方便平时学习和测试使用。生产环境要仔细琢磨一下，不要用开发版，而要用生产版。bootCDN的地址是：https://www.bootcdn.cn/ ，是由bootstrap中文网提供的CDN前端加速服务。<!DOCTYPE html><html> <head&...
复制链接

扫一扫