个性化阅读
专注于IT技术分析

前端进阶开发实战教程,使用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="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、大体效果如下:

响应式设计PC端页面效果图

如果你此时查看一下移动端的页面,会发现似乎还可以,或者可能还有些问题。这个就是重点了,什么是响应式?响应式是给移动用户提供友好的界面,以上不属于,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">

而文章内容就是这个网页的主要内容了,一般来说在设计响应式的时候,最好不要对这个元素进行新增操作。这里在设计移动端的时候仅仅是稍微修改了一些样式:

bootstrap响应式设计最终效果图

这个效果还存在一些细节问题,不过与响应式无关,而底部版权声明的实现也是非常简单,就不多说了。

四、项目源码下载

github立即吃瓜:https://github.com/onnple/blog_responsive

五、结语

本文完成得比较仓促,有错误地方请大家指出。

另外,这里移动端的设计在实际设计中,我们还会设计一个底部导航栏,类似于微信QQ底部的那种页面切换导航,可以通过新增内容的方式添加。

还有一个,使用bootstrap设计其实不大好控制,还需要非常熟练才行,而使用媒体查询和Grid或Flexbox反而更好设计。

Bootstrap还是很重要的,总不能只是使用它的控件,而没有用到它的核心布局系统,下次我们再尝试从不同角度理解和使用bootstrap。

响应式布局实战教程推荐:

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

前端进阶开发实战教程,使用Flexbox模仿Github项目详情页实现响应式布局详解(二)

如何更容易地快速学会网格布局?响应式网格布局高阶实战:模仿SegmentFault首页(三)

赞(0)
未经允许不得转载:srcmini » 前端进阶开发实战教程,使用Bootstrap实现博客平台网站响应式布局详解(一)

评论 抢沙发

评论前必须登录!