Bootstrap下载地址:http://www.bootcss.com/ (响应式框架)
Swiper 下载地址:http://www.swiper.com.cn/ (轮播框架)
一.引用:
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=no">//为了兼容手机端
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="css/swiper.css">
<link rel="stylesheet" href="css/animate.min.css">
<!-- 如果要使用Bootstrap的JS插件,则必须引入jQuery --> <script src="js/jquery-2.2.3.min.js"></script> <!-- Bootstrap的JS插件 --> <script src="js/bootstrap.min.js"></script> <script src="js/jquery.unveilEffects.js"></script> <script src="js/swiper.animate1.0.2.min.js"></script> <script src="js/jquery.hovertreescroll.js"></script> <script src="js/swiper.min.js"></script>
注:1.引入js时必须先引入jquery 因为大部分控件都是基于jquery
2.如果需要更改框架原有样式,请把自己开发的css放在后边
二.bootstrap框架使用
开发文档见:http://v3.bootcss.com/
1. bootstrap栅格将页面一行分为12格,高度为自适应,如需固定高度请自己设置css
bootstrap根据不同尺寸设备将属性分为lg md xs sm四种 ,如果需要针对不同尺寸优化可以使用自带的样式,也可以通过media query进行自行修改如@media(max-width:@screen-xs-max){ ...}