响应式布局
一、响应式开发
/* 通过媒体查询来设定容器的宽度大小 */
@media screen and (max-width: 767px) {
.container {
width: 100%;
}
}
@media screen and (min-width: 768px) {
.container {
width: 750px;
}
}
@media screen and (min-width: 992px) {
.container {
width: 970px;
}
}
@media screen and (min-width: 1200px) {
.container {
width: 1170px;
}
}
二、bootstrap前端开发框架
三、bootstrap栅格系统
例如:
<div class="container">
<div class="row">
<!-- 一共有四个盒子 共12等份 因此每个盒子占3份-->
<div class="col-lg-3">1</div>
<div class="col-lg-3">2</div>
<div class="col-lg-3">3</div>
<div class="col-lg-3">4</div>
</div>
<div class="row">
<!-- 一共有四个盒子 共12等份 并且可以设置不同的屏幕尺寸所占的份数-->
<div class="col-lg-6 col-md-4">1</div>
<div class="col-lg-2 col-md-4">2</div>
<div class="col-lg-2 col-md-4">3</div>
<div class="col-lg-2 col-md-4">4</div>
</div>
</div>
注意:如果相加小于12份,则占不满container,如果大于12份,多余的的列会另起一行显示
列嵌套
列偏移:相当于margin-left
列排序
显示与隐藏
案例:阿里百秀
静态网站:阿里百秀项目