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
bootCDN引用的bootstrap前端框架套件和示例的更多相关文章
- 基于springboot+bootstrap+mysql+redis搭建一套完整的权限架构【六】【引入bootstrap前端框架】
https://blog.csdn.net/linzhefeng89/article/details/78752658 基于springboot+bootstrap+mysql+redis搭建一套完整 ...
- CI框架如何在主目录application目录之外使用uploadify上传插件和bootstrap前端框架：
19:29 2016/3/10CI框架如何在主目录application目录之外使用uploadify上传插件和bootstrap前端框架:项目主路径:F:\wamp\www\graduationPr ...
- BootStrap前端框架
BootStrap前端框架 Bootstrap 教程:http://www.runoob.com/bootstrap/bootstrap-tutorial.html BpptStrap操作手册:htt ...
- Bootstrap前端框架快速入门专题
1.Bootstrap简介 Bootstrap,出自自 Twitter,是目前最受欢迎的前端框架. Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的前端框架,它简洁灵活,使得 W ...
- bootstrap 前端框架学习笔记
下面是一个基于 bootstrap 前端架构的最最基本的模板: (这里添加慕课网的学习笔记.) 1.认识一下 bootstrap 带来的优雅效果: 代码: <!DOCTYPE html> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：引用（Blockquote）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：设定引用右对齐
<!DOCTYPE html> <html> <head> <title>菜鸟教程(runoob.com)</title> <meta ...
- bootstrap前端框架使用总结分享
1.bootstrap 排版 全局样式style.css: 1.移除body的margin声明 2.设置body的背景色为白色 3.为排版设置了基本的字体.字号和行高 4.设置全局链接颜色,且当链接处 ...
- Bootstrap 前端框架 遇到的问题 解决方案
bootstrap实现导航栏的响应式布局,当在小屏幕.手机屏幕浏览时自动折叠隐藏 直接放代码,更容易理解.下次可以套这个代码 <!DOCTYPE html> <html> &l ...
随机推荐
- php72w-common conflicts with php-common-5.4.16-46.el7.x86_64
安装PHP的BC扩展时,报的错. 使用的命令为 yum install php-bcmath 输出错误: --> Processing Conflict: php72w-common--.w7. ...
- javascript:location=location;">刷新</a>
<a href="javascript:location=location;">刷新</a>
- 重构之字段改名 UML行为图 用例图 时序图&协作图 状态图&活动图 依恋情结
简单的使用一下字段改名 为什么使用字段改名: 你在一个软件上做的工作越多,对这个软件的数据的理解就越深刻,你需要把这些理解融入到代码中.利用名字的解释作用,让代码更容易被理解. 如何找到该变量的所 ...
- hook杂思-面向函数编程
hook:方法拦截 以函数单元为编程对象: 在编译时或运行时进行函数单元的替代.修改.功能添加操作: 所有的操作都不是在原始编码时完成的: 函数单元作为参量.操作对象.编码对象存在于机制中: 机制: ...
- Virtual DOM的渲染机制--猜测
一个node的状态发生变化: 会对当前结点和子节点的数据全部进行更新: 然后进行dom比较: 比较完毕后一次性提交: 相对于以前的渲染方式: 每一个node的数据发生变化,都会产生一次渲染提交: 以上 ...
- ansible 批量部署准备工作
Ansible:自动化运维工具,基于Python开发 功能{ 批量系统配置 批量程序部署 批量运行命令等等 } 准备工作: 一.操作主机安装epel源 和 ansible工具 yum -y insta ...
- 11.04Test
11.04Test 查看请点个赞 转载请注明出处(~不然~) 题目 描述 做法 \(BSOJ5143\) 要求给\(M\)个通道染色,使得同色通道不能相交 转为矛盾模型,\(2-sat\)or二分图染 ...
- 洛谷P3834题解
若想要深入学习主席树,传送门. Description: 给定数列 \(\{a_n\}\) ,求闭区间 \([l,r]\) 的第 \(k\) 小的数. Method: 先对数据进行离散化,然后按照权值 ...
- SpringMVC相关试题
1.下列相关Spring自动装配的说法中,错误的是( ). (选择一项) A:在Spring配置文件中,可以通过<bean>元素的autowire属性指定自动装配方式B: autowire ...
- mfs分布式文件系统，分布式存储，高可用（pacemaker+corosync+pcs），磁盘共享（iscsi），fence解决脑裂问题
一.MFS概述 MooseFS是一个分布式存储的框架,其具有如下特性:(1)通用文件系统,不需要修改上层应用就可以使用(那些需要专门api的dfs很麻烦!).(2)可以在线扩容,体系架构可伸缩性极强. ...