srcmini一、引言
响应式布局是我们WEB项目的重要需求，提供友好的移动优先界面，能为项目获取更多流量。作为前端开发者必备的开发技术，我们有必要重点地学习更多的相关技术，掌握好响应式设计，在工作项目开发中才能出于更有利的地位。当然这里仅限于页面布局的讨论，前端的另一块内容是关于JavaScript渲染页面的相关技术。
Boostrap是目前最热门的前端组件库，提供响应式设计的支持，能够快速开发WEB项目界面。我们平时可能用过bootstrap，但是真的懂得响应式吗？
在这里我们要清楚，bootstrap并不能代表响应式，不能说用bootstrap开发的就是响应式网站。因为如果你没有好好利用bootstrap，那么界面一样会设计得非常糟糕的。实现响应式界面并不需要bootstrap，我们用原生的媒体查询+CSS Grid/Flexbox也可以做到。它是一个比较完善的工具包，提供强大的响应式栅格系统，以及大量的组件，为我们省去了很多重复的工作。
二、构架分析
本文主要是利用bootstrap，设计一个响应式布局的博客网站首页，整体内容包括顶部导航栏，底部版权信息，中间是页面内容主体，包括左边文章列表内容，右边侧边栏。
PC端各部分内容的对齐方式如下：
1、顶部导航栏：LOGO和相关导航左对齐，登录注册按钮右对齐；
2、底部版权信息：左对齐；
3、内容主体部分：左边文章列表左对齐，右边侧边栏也是左对齐。
移动端各部分内容和对齐方式如下：
1、顶部导航栏：LOGO左对齐，登录注册按钮右对齐；
2、底部版权信息：左对齐；
3、内容主体部分：文章列表居中，侧边栏隐藏。
在确定好项目需求后，我们最好确定网页的主要内容，以及主要内容的布局定位，另外一个就是内容对齐方式了。尽量确定好所需的全局元素，后面详细布局才不至于过于混乱。无论是前端还是后端开发，没有明确的方向，会把项目搞得很糟糕。
1、首先，新建html文档，在头部<head>中添加：
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
2、然后我们开始按照上面的分析进行整体布局：
<!--顶部导航栏-->
<nav class="container-fluid navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">BLOG</a>
</div>
<ul class="nav navbar-nav navbar-left">
<li><a href="#">发现</a></li>
<li><a href="#">动态</a></li>
<li><a href="#">问答</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">写文章</a></li>
<li><a href="#">注册</a></li>
<li><a href="#">登录</a></li>
</ul>
</div>
</nav>
<!--主体内容-->
<div class="container">
<div class="row">
<!--文章列表-->
<div class="col-md-9 main">
</div>
<!--侧边栏-->
<div class="col-md-3 sidebar">
</div>
</div>
</div>
<!--页尾-->
<footer class="container-fluid">
<div class="container">
<div class="row">
<ul class="col-md-9 footer">
<li class="item">
<a class="link">© 2019 Blog, Inc.</a>
</li>
<li class="item">
<a class="link" href="#">隐私政策</a>
</li>
<li class="item">
<a class="link" href="#">帮助</a>
</li>
<li class="item">
<a class="link" href="#">联系我们</a>
</li>
</ul>
</div>
</div>
</footer>
3、简单调整一下CSS样式，让整个布局大体按照我们需要的展示出来：
html{
font-size: 12px;
}
body{
background-color: #f5f5f5;
}
@media (min-width: 1200px) {
.container{
max-width: 960px;
}
}
@media (min-width: 768px){
.navbar-nav>li>a {
padding-top: 20px;
padding-bottom: 20px;
}
}
/*顶部导航栏*/
.navbar{
margin-bottom: 30px;
}
.navbar-default{
background-color: white;
font-size: 1.33rem;
border-bottom: none;
}
.navbar-default .navbar-nav>li>a {
color: #007fff;
}
.navbar-brand{
padding-top: 20px;
padding-bottom: 20px;
}
.navbar-default .navbar-brand{
color: #007fff;
}
/*顶部导航栏*/
/*文章列表*/
.main{
height: 800px;
background-color: #ff8ea4;
}
/*文章列表*/
/*侧边栏*/
.sidebar{
height: 400px;
background-color: #83bdff;
}
/*侧边栏*/
/*页尾*/
.footer{
background-color: white;
list-style: none;
display: flex;
margin-bottom: 0;
}
.footer .link{
display: inline-block;
padding: 40px 15px 30px 0;
text-decoration: none;
font-size: 1.1rem;
border-top: #e1e4e8;
}
/*页尾*/
4、大体效果如下：
如果你此时查看一下移动端的页面，会发现似乎还可以，或者可能还有些问题。这个就是重点了，什么是响应式？响应式是给移动用户提供友好的界面，以上不属于，bootstrap是不会为你自动调整的。你依然需要按照开发移动APP界面那样做页面布置。
下面我们开始分页面各部分内容进行详细实现，并同时实现对应的响应式需求。
三、页面内容模块实现细节
1、顶部导航栏
PC端的导航栏在上面搭建时，需要的样式和内容基本完成，现在我们需要做的是，面向移动端的页面进行相应的设计。
对于导航栏响应式目前采用的是另一种方式：通过新增内容实现，这是因为发现在原布局上进行修改比较麻烦。一般来说，对于任何情况，你都可以通过新增内容实现，你甚至可以全部重写，当然并不推荐这么做，最好的是保持页面主要内容不变来修改，这里是说明新增内容是响应式里常用的一种手法。
头部新增如下：
<!--响应式头部-->
<div class="container header-responsive visible-xs clearfix">
<div class="left pull-left">
<a class="logo" href="#">BLOG</a>
<li ><a href="#">发现</a></li>
</div>
<ul class="right pull-right">
<li><a href="#">注册</a></li>
<li><a href="#">登录</a></li>
</ul>
</div>
然后再修改一下样式，实际上显得有些麻烦，效果如下：
2、主体内容
对于主体内容，在移动端上，我们可以直接使用bootstrap的类隐藏侧边栏：
<div class="col-md-3 sidebar hidden-xs">而文章内容就是这个网页的主要内容了，一般来说在设计响应式的时候，最好不要对这个元素进行新增操作。这里在设计移动端的时候仅仅是稍微修改了一些样式：
这个效果还存在一些细节问题，不过与响应式无关，而底部版权声明的实现也是非常简单，就不多说了。
四、项目源码下载
github立即吃瓜：https://github.com/onnple/blog_responsive
五、结语
本文完成得比较仓促，有错误地方请大家指出。
另外，这里移动端的设计在实际设计中，我们还会设计一个底部导航栏，类似于微信QQ底部的那种页面切换导航，可以通过新增内容的方式添加。
还有一个，使用bootstrap设计其实不大好控制，还需要非常熟练才行，而使用媒体查询和Grid或Flexbox反而更好设计。
Bootstrap还是很重要的，总不能只是使用它的控件，而没有用到它的核心布局系统，下次我们再尝试从不同角度理解和使用bootstrap。
响应式布局实战教程推荐：
前端进阶开发实战教程，使用Bootstrap实现博客平台网站响应式布局详解（一）
评论前必须登录！
注册