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

这是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

bootCDN引用的bootstrap前端框架套件和示例相关推荐

Bootstrap前端框架学习（一）：Bootstrap在Vue项目中的安装及可视化布局
Bootstrap前端框架学习(一):Bootstrap在Vue项目中的安装及可视化布局 node.js的安装 bootstrap的安装 bootstrap快速布局 node.js的安装我们需要安装 ...
html5前端开发框架模板,HTML5中50个免费的Bootstrap前端框架模板
原标题:HTML5中50个免费的Bootstrap前端框架模板毫无疑问,Bootstrap模板的受欢迎程度依然如雨后春笋般迅速增长,这股力量就在不久前还被低估了呢,Bootstrap前端框架基于最新 ...
bootstrap 按钮样式单选效果_【20201117】Bootstrap前端框架学习笔记
1. 介绍 1.1 介绍 Bootstrap是一个免费的web前端框架,它将HTML.CSS.Javascript结合到一起,制定了一系列的前端开发规则,使设计网页就像搭积木一样简单. 今天我们就跟着 ...
Bootstrap 前端框架制作响应式网站
放假突然兴起,想学点前端框架,制作一个页面玩玩(PS:一直做后端,怕忘了前端的知识,所以补一补).说做就做,花了一天的时间,谷歌开发者模式,仿制别人公司的页面(希望不会被查),做了个响应式小网页,可以 ...
二、JavaWeb基础(BootStrap前端框架)
一 .BootStrap概念概述一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JavaScript 的,它简洁 ...
50个极好的bootstrap前端框架
转载出处http://sudasuta.com/bootstrap-admin-templates.html 越来越多的设计师和前端工程师开始用bootstrap来作为网页项目的框架,在这一次的免费设 ...
Bootstrap - 前端框架
Bootstrap介绍 2011年8月,Twitter的设计师Mark Otto和Jacob Thornton发布了一个前端开发工具:Bootstrap.2012年2月,Bootstrap 2.0发布 ...
吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：禁用按钮
<!DOCTYPE html> <html><head><meta charset="utf-8"> <title>菜鸟 ...
吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：让按钮看起来像个链接 (仍然保留按钮行为)...
<!DOCTYPE html> <html><head><meta charset="utf-8"> <title>菜鸟 ...
吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：按钮组
<!DOCTYPE html> <html> <head><meta charset="utf-8"> <title>B ...

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

bootCDN引用的bootstrap前端框架套件和示例相关推荐

最新文章

热门文章