bootstrap和swiper的使用

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){
  ...}