前端进阶开发实战教程，使用Bootstrap实现博客平台网站响应式布局详解（一）

一、引言响应式布局是我们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="http://img.readke.com/220411/0050534334-0.jpg">< /script> < script src="http://img.readke.com/220411/005053A29-1.jpg">< /script>

2、然后我们开始按照上面的分析进行整体布局：

< !--顶部导航栏--> < nav class="container-fluid navbar navbar-default" role="navigation"> < div class="container"> < div class="navbar-header"> < a class="navbar-brand" href="http://www.srcmini.com/#">BLOG< /a> < /div> < ul class="nav navbar-nav navbar-left"> < li>< a href="http://www.srcmini.com/#">发现< /a>< /li> < li>< a href="http://www.srcmini.com/#">动态< /a>< /li> < li>< a href="http://www.srcmini.com/#">问答< /a>< /li> < /ul>< ul class="nav navbar-nav navbar-right"> < li>< a href="http://www.srcmini.com/#">写文章< /a>< /li> < li>< a href="http://www.srcmini.com/#">注册< /a>< /li> < li>< a href="http://www.srcmini.com/#">登录< /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="http://www.srcmini.com/#">隐私政策< /a> < /li> < li class="item"> < a class="link" href="http://www.srcmini.com/#">帮助< /a> < /li> < li class="item"> < a class="link" href="http://www.srcmini.com/#">联系我们< /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实现博客平台网站响应式布局详解（一）

文章图片
如果你此时查看一下移动端的页面，会发现似乎还可以，或者可能还有些问题。这个就是重点了，什么是响应式？响应式是给移动用户提供友好的界面，以上不属于，bootstrap是不会为你自动调整的。你依然需要按照开发移动APP界面那样做页面布置。
下面我们开始分页面各部分内容进行详细实现，并同时实现对应的响应式需求。
三、页面内容模块实现细节1、顶部导航栏PC端的导航栏在上面搭建时，需要的样式和内容基本完成，现在我们需要做的是，面向移动端的页面进行相应的设计。
对于导航栏响应式目前采用的是另一种方式：通过新增内容实现，这是因为发现在原布局上进行修改比较麻烦。一般来说，对于任何情况，你都可以通过新增内容实现，你甚至可以全部重写，当然并不推荐这么做，最好的是保持页面主要内容不变来修改，这里是说明新增内容是响应式里常用的一种手法。
头部新增如下：

< !--响应式头部--> < div class="container header-responsive visible-xs clearfix"> < div class="left pull-left"> < a class="logo" href="http://www.srcmini.com/#">BLOG< /a> < li >< a href="http://www.srcmini.com/#">发现< /a>< /li> < /div>< ul class="right pull-right"> < li>< a href="http://www.srcmini.com/#">注册< /a>< /li> < li>< a href="http://www.srcmini.com/#">登录< /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实现博客平台网站响应式布局详解（一）
前端进阶开发实战教程，使用Flexbox模仿Github项目详情页实现响应式布局详解（二）
【前端进阶开发实战教程，使用Bootstrap实现博客平台网站响应式布局详解（一）】如何更容易地快速学会网格布局？响应式网格布局高阶实战：模仿SegmentFault首页（三）