首先最重要的,bootstrap只需要引用 bootstrap.css bootstrap.js jquery.js 这三个文件,很方便,栅格系统用起来可以直接实现自适应。(bootstrap.min.css bootstrap.min.js 这两个只是被压缩过,打开以后是一坨,但是其他的基本功能并没有什么变化。)
引用了上面三个文件以后,死活也不能实现boostrap中的样式,查了半天最后才解决:
你存放css js文件的路径不能出现中文,然后html文件的名字中不能出现引号(之前不小心打上去了)。下面是我写的用echart画两个自适应的表格:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="C:\Users\ming\Desktop\new\css\123.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<div id="main1" style="background-color: #dedef8;height:200px;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
</div>
</div>
<div class="col-md-6">
<div id="main2" style="background-color: #dedef8;height:200px;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"></div>
</div>
</div>
</div>
<script src="C:\Users\ming\Desktop\new\js\jquery-2.2.4.min.js"></script>
<script src="C:\Users\ming\Desktop\echarts.common.min.js"></script>
<script src="C:\Users\ming\Desktop\new\js\bootstrap.min.js"></script>
<script>
var temp1 = [{"text":"zmx"},{"y1":"ml"},{"y2":"kg"},{"name1":"hello"},{"name2":"world"}]
var data1=[{X:"1",Y:"0"},{X:"2",Y:"20"},{X:"3",Y:"40"},{X:"4",Y:"60"},{X:"1",Y:"80"},{X:"1",Y:"100"}]
var data2=[{X:"1",Y:"10"},{X:"1",Y:"20"},{X:"1",Y:"30"},{X:"1",Y:"50"},{X:"1",Y:"70"},{X:"1",Y:"90"}]
</script>
<script type="text/javascript" src=C:\Users\ming\Desktop\new\js\2222.js></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main1'));
var option = setchart2(temp1,data1,data2);
myChart.setOption(option);
echarts.init(document.getElementById('main2')).setOption(setchart2(temp1,data1,data2));
</script>
</body>
</html>