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">
<!-- sweetalert弹出框 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.min.js"></script>
<!-- 百度echarts图表 -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0-beta.2/echarts.min.js"></script>
<!-- 百度echarts图表 百度地图 -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0-beta.2/extension/bmap.min.js"></script>
<!-- 百度echarts图表 关系图表 -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0-beta.2/extension/dataTool.min.js"></script>
</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" style="width: 100%;height:400px;"></canvas>
<hr>
百度Echarts图表示例：
<div id="main" style="width: 100%;height:400px;"></div>
<button onclick="msg('delefnc', '操作提示', '来自sweetalert弹出框的提示\n确定要删除文件吗？')" class="btn btn-info">弹出框</button>
<br><br><br>
<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,
}]
}
}
});
/**--------------------------------
* sweetalert模态框的使用
* --------------------------------
*/
msg('delefnc', '操作提示', '来自sweetalert弹出框的提示\n确定要删除文件吗？');
function delefnc(){
alert('删除成功！');
}
/**
* sweetalert 模态弹出消息框
*
* fncName 回调函数名
* title 弹出框的title
* text 弹出框里面的提示文本
* type 弹出框类型
* showCanBtn 是否显示取消按钮
* showCfmBtn 是否显示确定按钮
* cfmBtnColor 确定按钮颜色
* canBtnText 取消按钮文本
* cfmBtnText 确定按钮上面的文档
*/
function msg(fncName = "", title = "操作提示", text = "确定吗？", canBtnText = "取消", cfmBtnText = "确定", type = "warning", cfmBtnColor = "#000080", showCanBtn = true, showCfmBtn = true){
swal({
title: title, //弹出框的title
text: text, //弹出框里面的提示文本
type: type, //弹出框类型 warning
showCancelButton: showCanBtn, //是否显示取消按钮
showConfirmButton: showCfmBtn,
confirmButtonColor: cfmBtnColor,//确定按钮颜色
cancelButtonText: canBtnText,//取消按钮文本
confirmButtonText: cfmBtnText,//确定按钮上面的文档
closeOnConfirm: true
}, function(){
if(!isEmpty(fncName)){
//注意：eval函数属于高危函数，注意防XSS攻击！
eval(fncName + '()');
}
}
)};
/**
* 判断变量是否为空，
* @param {[type]} param 变量
* @return {Boolean} 为空返回true，否则返回false。
*/
function isEmpty(param){
if(param){
var param_type = typeof(param);
if(param_type == 'object'){
//要判断的是【对象】或【数组】或【null】等
if(typeof(param.length) == 'undefined'){
if(JSON.stringify(param) == "{}"){
return true;//空值，空对象
}
}else if(param.length == 0){
return true;//空值，空数组
}
}else if(param_type == 'string'){
//如果要过滤空格等字符
var new_param = param.trim();
if(new_param.length == 0){
//空值，例如:带有空格的字符串" "。
return true;
}
}else if(param_type == 'boolean'){
if(!param){
return true;
}
}else if(param_type== 'number'){
if(!param){
return true;
}
}
return false;//非空值
}else{
//空值,例如：
//(1)null
//(2)可能使用了js的内置的名称，例如：var name=[],这个打印类型是字符串类型。
//(3)空字符串''、""。
//(4)数字0、00等，如果可以只输入0，则需要另外判断。
return true;
}
}
/**--------------------------------
* 百度echarts图表示例
* --------------------------------
*/
var myChart = echarts.init(document.getElementById('main'));
var posList = [
'left', 'right', 'top', 'bottom',
'inside',
'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
];
app.configParameters = {
rotate: {
min: -90,
max: 90
},
align: {
options: {
left: 'left',
center: 'center',
right: 'right'
}
},
verticalAlign: {
options: {
top: 'top',
middle: 'middle',
bottom: 'bottom'
}
},
position: {
options: echarts.util.reduce(posList, function (map, pos) {
map[pos] = pos;
return map;
}, {})
},
distance: {
min: 0,
max: 100
}
};
app.config = {
rotate: 90,
align: 'left',
verticalAlign: 'middle',
position: 'insideBottom',
distance: 15,
onChange: function () {
var labelOption = {
normal: {
rotate: app.config.rotate,
align: app.config.align,
verticalAlign: app.config.verticalAlign,
position: app.config.position,
distance: app.config.distance
}
};
myChart.setOption({
series: [{
label: labelOption
}, {
label: labelOption
}, {
label: labelOption
}, {
label: labelOption
}]
});
}
};
var labelOption = {
show: true,
position: app.config.position,
distance: app.config.distance,
align: app.config.align,
verticalAlign: app.config.verticalAlign,
rotate: app.config.rotate,
formatter: '{c} {name|{a}}',
fontSize: 16,
rich: {
name: {
textBorderColor: '#fff'
}
}
};
option = {
color: ['#003366', '#006699', '#4cabce', '#e5323e'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['Forest', 'Steppe', 'Desert', 'Wetland']
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore: {show: true},
saveAsImage: {show: true}
}
},
xAxis: [
{
type: 'category',
axisTick: {show: false},
data: ['2012', '2013', '2014', '2015', '2016']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Forest',
type: 'bar',
barGap: 0,
label: labelOption,
data: [320, 332, 301, 334, 390]
},
{
name: 'Steppe',
type: 'bar',
label: labelOption,
data: [220, 182, 191, 234, 290]
},
{
name: 'Desert',
type: 'bar',
label: labelOption,
data: [150, 232, 201, 154, 190]
},
{
name: 'Wetland',
type: 'bar',
label: labelOption,
data: [98, 77, 101, 99, 40]
}
]
};
myChart.setOption(option);
</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
