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 ...
随机推荐
- Java8的Stream API使用
前言 这次想介绍一下Java Stream的API使用,最近在做一个新的项目,然后终于可以从老项目的祖传代码坑里跳出来了.项目用公司自己的框架搭建完成后,我就想着把JDK版本也升级一下吧(之前的项目, ...
- Flash完美跨域访问的方法
先,你要确定以下几点,否则可能无法实现: 1.你要跨到哪个域,你必须能管理那域上文件,因为这里要放一个通行文件. 2.你的Flash如果只有SWF,那不一定能实现,因为有时,Flash的AS中,要加入 ...
- 配置/更改vue项目中的资源路径
打开 build/webpack.base.conf.js ,在module.exports .resolve.alias下自定义: alias: { 'vue$': 'vue/dist/vue.e ...
- 开源项目（7）Opencv日常之Homography
参考教程 https://blog.csdn.net/liuphahaha/article/details/50719275 什么是Homography 在图1中有两张书的平面图,两张图分别有四个相对 ...
- OpenCV 学习笔记（10）HSV颜色空间及颜色空间转换（RGB-HSV）
1.1 颜色空间介绍 RGB 颜色空间是大家最熟悉的颜色空间,即三基色空间,任何一种颜色都可以由该三种 颜色混合而成.然而一般对颜色空间的图像进行有效处理都是在 HSV 空间进行的,HSV(色 调 H ...
- make命令与Makefile（转载）
概述博客内容包含linux下make命令的使用与makefile的书写规则等,希望通过本文档使读者对make命令makefile文件有进一步了解,由于鄙人经验学识有限文档中会有描述不准确以及理解偏差, ...
- pipelinewise 学习一 docker方式安装
pipelinewise 没有提供基于pip 包的模式进行安装,而且推荐使用docker 以及源码的方式 以下是一个使用docker运行的方式 安装 git clone https://githu ...
- 下拉选择的blur和click事件冲突了
当写个下拉选择框时我们希望当input失去焦点时,下拉框消失,或者当选择下拉框中的内容的同时将内容填入input并且使下拉框消失. 这时候我们会想到blur和click,单独使用的时候是没有问题的,但 ...
- LCA的多种求法（超详细！！！）
倍增求LCA (1)树上倍增法 预处理 设f[x,k]表示x的2^k辈祖先,即从x向根节点走2^k步到达的节点.特别地,若该节点不存在,则令f[x,k]=0.f[x,0]就是x的父节点.可以得出f[x ...
- vsftp上传553 Could not create file错误解决
可以正常连接,可是上传文件是提示553 Could not create file无法创建文件. 权限不足,从根目录开始检查保证每个文件夹都有777的权限,就可以正常上传.