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

時間 2019-11-06

標籤 bootcdn 引用 bootstrap 前端框架示例欄目 Bootstarp 简体版

原文原文鏈接

這是bootCDN上引用的bootstrap前端框架套件，由多個框架組合而成，方便平時學習和測試使用。生產環境要仔細琢磨一下，不要用開發版，而要用生產版。bootCDN的地址是：https://www.bootcdn.cn/ ，是由bootstrap中文網提供的CDN前端加速服務。css

<!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>

其中動畫類型因爲種類很少，就列在下面吧：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前端