起步
导入：
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"> <script src="js/jquery-3.3.1.js"></script> <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
屏幕适配
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
响应式布局
.wrapper {
height: 60px;
background-color: yellow;
}
/*if (dw<600) {}*/
@media (max-width: 600px) {
.wrapper {
width: auto;
}
}
/*if (dw>900) {}*/
@media (min-width: 900px) {
.wrapper {
width: 850px;
}
}
/*if (dw>600 and dw < 900) {}*/
@media (min-width: 600px) and (max-width: 900px) {
.wrapper {
width: 600px;
}
}
/*if (dw>1000) {}*/
@media (min-width: 1000px) {
.wrapper {
width: 990px;
}
}
/*if (dw>1200) {}*/
@media (min-width: 1200px) {
.wrapper {
width: 1200px;
}
}
栅格系统
''' bs将父级等分12等分提供给子级使用 父级默认用padding: 15px, 用.row的margin: -15px来抵消 四个屏幕尺寸: .col-xs- .col-sm- .col-md- .col-lg- 偏移 .col-xs-offset- .col-sm-offset- .col-md-offset- .col-lg-offset- '''
swiper
<link rel="stylesheet" href="swiper/swiper.css">
<body>
<!--swiper的轮播图结构,可以取官网案例复制-->
<div class="swiper-container">
...
</div>
</body>
<script src="swiper/swiper.js"></script>
<script>
// 一定要声明Swiper对象
new Swiper('.swiper-container', {
// 所需参数key:value
});
</script>
