bootstrap响应式布局之阿里百秀

响应式布局

移动端布局技术选型
-流式布局（百分比布局）
-flex弹性布局
-rem适配布局
-响应式布局

响应式就是页面布局会随着屏幕大小变化响应，做出不同的布局模式。
相应不同设备（手机，PAD，PC）
开发原理：使用媒体查询针对不同宽度的设备进行布局和样式的设置
设备划分为：
-超小屏幕（手机） < 768px
-小屏设备（平板） (>=)768px - 992px(<)
-中等屏幕（桌面显示器） (>=)992px - 1200px(<)
-宽屏设备（大桌面显示器） >= 1200px

响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果

常用尺寸划分(稍小一些居中对齐)
-超小屏幕（手机） 100%
-小屏设备（平板） 750px
-中等屏幕（桌面显示器） 970px
-宽屏设备（大桌面显示器） 1170px

Bootstrap

2.xx停止维护，兼容性好，代码不够简洁，功能不够完善
3.xx目前使用最多，稳定，但是放弃了IE6-IE7，对IE8支持但是截面效果不好，偏向于开发响应式布局
移动设备优先的web项目
4.xx最新版，目前不流行

使用四部曲：
1.创建文件夹结构（bootstrap3 dist目录下）
2.创建html骨架
3.引入相关样式文件
4.书写内容

bootstrap预先定义了父容器的类 .container
.container 响应式开发
.container-fluid 流式布局容器百分百宽度，占据全部视口，适合单独做移动端开发

栅格系统（grid systems），即网格系统，指将页面布局划分为等宽的列，通过列数的定义来模块化页面布局
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

页面展示：

pc端

ipad

手机端

index.html

<!DOCTYPE html>
<html lang="zh_CN">
<head><meta charset="UTF-8"><!-- 要求当前网页使用IE浏览器最高版本的内核来渲染 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 设置视口，视口宽度和设备一致，用户不能自行缩放 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- HTML5 shim 和 Respond.js 是为了让 IE9以下 支持 HTML5 元素和媒体查询（media queries）功能 IE8本地打开时布局无效--><!--[if lt IE 9]><script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script><script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script><![endif]--><title>Document</title><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><link rel="stylesheet" href="css/index.css"><!-- 分析：中、大屏幕一致，小屏幕，超小屏特殊先使用col-md-*(pc端)，再根据小屏超小屏设定布局样式-->
</head>
<body><div class="container"><div class="row"><header class="col-md-2"><div class="logo"><a href=""><!--===== 1.进入超小屏幕，logo里的图片隐藏，显示文字 =====--><img src="./images/logo.png" alt="" class="hidden-xs"><span class="visible-xs">阿里百秀</span></a></div><div class="nav"><ul><!--===== 2.进入小屏，超小屏幕时同行显示 li浮动，宽20% 使用媒体查询css =====--><!-- 图标使用bootstrap提供的组件里的Glyphicons字体图标 --><li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li><li><a href="#" class="glyphicon glyphicon-picture">自然汇</a></li><li><a href="#" class="glyphicon glyphicon-phone">科技湖</a></li><li><a href="#" class="glyphicon glyphicon-eye-open">奇趣事</a></li><li><a href="#" class="glyphicon glyphicon-filter">美食街</a></li></ul></div></header><article class="col-md-7"><!-- 新闻 --><!-- bootstrap清除浮动的类：clearfix --><div class="news clearfix"><!--===== 3.进入超小屏，第一个li占一行，其余每行两个 =====--><ul><li><a href="#"><img src="data:images/news-1.jpg" alt=""><p>22个中国最美瀑布，你去过哪一个</p></a></li><li><a href="#"><img src="data:images/news-2.jpg" alt=""><p>25个世界最迷人的城堡</p></a></li><li><a href="#"><img src="data:images/news-3.jpg" alt=""><p>闪耀的沙雕作品，转瞬即逝却仍然经典</p></a></li><li><a href="#"><img src="data:images/news-4.jpg" alt=""><p>26大世界上至今无解的自然怪象</p></a></li><li><a href="#"><img src="data:images/news-5.jpg" alt=""><p>《变形金刚4》那些你不知道的制作幕后</p></a></li></ul></div><!-- 发表 --><div class="publish"><!-- 小屏以上比例不变 使用col-sm-* --><div class="row"><!-- bootstrap css 排版 标题...(和html标签可能不太一样);辅助类...(文字样式) --><div class="col-sm-8"><h3>研究表明：大麻可能有效治疗癌症</h3><!--===== 4.进入超小屏，只显示标题和阅读量，修改标题字号 =====--><div class="hidden-xs"><p class="text-muted">发布于 2014-08-08 21:42</p><p>一说到大麻（Marinol），估计大家都深恶痛绝，因为毒品给太多家庭带来悲剧，带来太多犯罪，毁了那么多人的一生，所以各个国家也严厉打击。但是，有研究表明大麻可能可以有效地治疗癌症。 哈佛大学进行了一项 研究 ，研究人员用老鼠做实验，测试了化学THC（四</p></div><p class="text-muted">阅读(127) 评论(35) 赞(28)<span class="hidden-xs">标签：大麻 疾病 癌症 科学发现</span></p></div><div class="col-sm-4 pic hidden-xs"><img src="data:images/news-1.jpg" alt=""></div></div><div class="row"><!-- bootstrap css 排版 标题...(和html标签可能不太一样);辅助类...(文字样式) --><div class="col-sm-8"><h3>研究表明：大麻可能有效治疗癌症</h3><!--===== 4.进入超小屏，只显示标题和阅读量，修改标题字号 =====--><div class="hidden-xs"><p class="text-muted">发布于 2014-08-08 21:42</p><p>一说到大麻（Marinol），估计大家都深恶痛绝，因为毒品给太多家庭带来悲剧，带来太多犯罪，毁了那么多人的一生，所以各个国家也严厉打击。但是，有研究表明大麻可能可以有效地治疗癌症。 哈佛大学进行了一项 研究 ，研究人员用老鼠做实验，测试了化学THC（四</p></div><p class="text-muted">阅读(127) 评论(35) 赞(28)<span class="hidden-xs">标签：大麻 疾病 癌症 科学发现</span></p></div><div class="col-sm-4 pic hidden-xs"><img src="data:images/news-1.jpg" alt=""></div></div><div class="row"><!-- bootstrap css 排版 标题...(和html标签可能不太一样);辅助类...(文字样式) --><div class="col-sm-8"><h3>研究表明：大麻可能有效治疗癌症</h3><!--===== 4.进入超小屏，只显示标题和阅读量，修改标题字号 =====--><div class="hidden-xs"><p class="text-muted">发布于 2014-08-08 21:42</p><p>一说到大麻（Marinol），估计大家都深恶痛绝，因为毒品给太多家庭带来悲剧，带来太多犯罪，毁了那么多人的一生，所以各个国家也严厉打击。但是，有研究表明大麻可能可以有效地治疗癌症。 哈佛大学进行了一项 研究 ，研究人员用老鼠做实验，测试了化学THC（四</p></div><p class="text-muted">阅读(127) 评论(35) 赞(28)<span class="hidden-xs">标签：大麻 疾病 癌症 科学发现</span></p></div><div class="col-sm-4 pic hidden-xs"><img src="data:images/news-1.jpg" alt=""></div></div><div class="row"><!-- bootstrap css 排版 标题...(和html标签可能不太一样);辅助类...(文字样式) --><div class="col-sm-8"><h3>研究表明：大麻可能有效治疗癌症</h3><!--===== 4.进入超小屏，只显示标题和阅读量，修改标题字号 =====--><div class="hidden-xs"><p class="text-muted">发布于 2014-08-08 21:42</p><p>一说到大麻（Marinol），估计大家都深恶痛绝，因为毒品给太多家庭带来悲剧，带来太多犯罪，毁了那么多人的一生，所以各个国家也严厉打击。但是，有研究表明大麻可能可以有效地治疗癌症。 哈佛大学进行了一项 研究 ，研究人员用老鼠做实验，测试了化学THC（四</p></div><p class="text-muted">阅读(127) 评论(35) 赞(28)<span class="hidden-xs">标签：大麻 疾病 癌症 科学发现</span></p></div><div class="col-sm-4 pic hidden-xs"><img src="data:images/news-1.jpg" alt=""></div></div></div></article><aside class="col-md-3"><a href="#" class="banner"><img src="data:images/zgboke.jpg" alt=""></a><a href="#" class="hot"><span class="btn btn-primary">热搜</span><h4 class="text-primary">欢迎加入中国博客联盟</h4><p>这里收录了国内各个领域的优秀博客，是一个全人工编辑的的开放式博客联盟交流和展示平台......</p></a></aside></div></div>
</body>
</html>

index.css

/* 根据设计稿修改container最大宽度 */
@media screen and (min-width:1260px){.container{width:1260px;}
}
ul{list-style: none;margin:0;padding:0;
}
a{color:#666;text-decoration: none;
}
a:hover{text-decoration: none;
}
body{background-color: #f5f5f5;
}
.container{background-color: #fff;
}
/* header */
header{padding-left:0!important;
}
.logo{background-color: #429ad9;
}
.logo a img{/* width:100%; *//* 1.修改添加为以下属性 */max-width:100%;/*logo图片不缩放*/display: block;margin:0 auto;
}
.logo a span{display: block;height: 50px;line-height: 50px;color:#fff;font-weight: border;font-size:16px;text-align: center;
}/*=== 2 ===*/
@media screen and (max-width:991px){.nav li{float:left;width:20%;}article{margin-top: 10px;}
}
@media screen and (max-width:767px){.nav li a{font-size: 12px;height: 40px;line-height: 40px;}/* === 3 === */.news ul li{width:50%;}.news ul li:nth-child(1){width:100%;}/* === 4 === */.publish h3{font-size:14px;}
}
.nav{background-color: #eee;border-bottom: #ccc;
}
.nav a{display: block;height:50px;line-height: 50px;/* margin-left:15%; */text-align: center;font-size:16px;
}
.nav li:hover{background-color: #fff;
}
.nav a::before{vertical-align: middle;margin-right:5px;
}/* acticle */
.news li{/* border:1px solid red; */width:25%;float:left;height:128px;padding-right:10px;margin-bottom:10px;font-size: 12px;
}
.news li:nth-child(1){width:50%;height:266px;font-size:16px;
}
.news li a{position: relative;display: block;width:100%;height:100%;
}
.news li a img{width:100%;height:100%;
}
.news li a p{width:100%;height:41px;position: absolute;bottom: 0;left: 0;background-color: rgba(0,0,0,.5);font-size:12px;color:#fff;z-index:10;margin-bottom:0;font-size: 1em;padding:5px 10px;
}.publish{border-top:1px solid #ccc;
}
.publish .row{border-bottom: 1px solid #ccc;
}
.publish .pic{margin-top: 20px;
}
.publish .pic img{width:100%;
}/* aside */
aside{padding:0!important;margin: 0;
}
aside .banner img{width: 100%;
}
aside .hot{display: block;margin-top:20px;padding:0 20px;border:1px solid #ccc;
}
aside .hot span{border-radius: 0;pointer-events: none;/*设置按钮不能点击*/margin-bottom: 10px;
}
aside .hot p{font-size:12px;
}

基于pc端设计页面，再根据ipad、手机端和pc端的差异进行响应式布局（代码中有标示1-4）

进入小屏，中间和右侧挤到下方，图片根据宽度100%进行同比例放大会占据很大屏幕，所以设置max-width=100%阻止图片放大，设置背景颜色和图片居中；进入超小屏，图片隐藏显示背景和文字。
进入小屏，导航栏从左侧垂直排列变为中间水平排列，进入超小屏调整字号和高度。
进入超小屏，大图和小图由横向排列变为纵向排列，调整百分比。
进入超小屏，只显示标题和阅读量，修改标题字号。

（还有一些内外边距没有处理）