BootStrap---实现响应式布局

上一篇文章简单的介绍了一下BootStrap入门介绍，我们知道了BootStrap框架对于同一套代码在PC端和移动端页面展示能够进行自动适配，从而给予良好的用户体验，这也就是响应式布局。下面看一下具体是如何实现的。

栅格系统

因为PC端和移动端（如手机）的分辨率不同，原来的一套代码你在PC端上展示出来可能很完美，但是你使用手机浏览器访问该页面的时候，可能有些地方展示不全，需要你手动左滑右滑。这样一来，用户体验也就大打折扣了。

而BootStrap框架能够自动根据设备类型来自动调整页面布局，其依赖的就是栅格系统。什么是栅格系统？
栅格系统就是将一个页面分为等宽的12个列，也可以简单理解为就是将页面的一行分解为12个等宽的格子，通过指定元素占几个格子从而控制页面布局。
使用栅格系统的步骤：

定义容器，相当于<table>（分为.container （固定宽度）和 .container-fluid （100% 宽度））
定义行，相当于<tr>。行的定义使用的是row的样式。
定义元素,指定元素在不同的设备上所占的格子的数量。
在BootStrap的中文网中，有对栅格系统的详细介绍。从下图中我们可以知道，在栅格系统中分为了4中不同分辨率的设备，没中设备有一个不同的类前缀，这样根据我们项目中对于设备的需求不同而采用不同的类前缀进行定义。

下面我们简单的写一个栅格系统的实现案例。

栅格系统案例

我们直接在上一篇文章所修改的html基础模板上面进行修改页面代码。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.3.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>

    <!--添加一个style样式-->
    <!--2像素  黑色  实线的边框-->
    <style>
        .inner{
            border: 2px black solid;
        }
    </style>

</head>
<body>
        <!--1.首先定义一个容器（可用）container或者container-fluid  -->
         <div class="container-fluid">
             <!--2.定义行-->
             <div class="row">
                 <!--3.定义元素,指定设备类型和占格数量  这里以普通电脑为例-->
                 <!--下面定义一个div占一个格子，12个div就占12个格子-->

                 <!--需求：在电脑上占12个格子，在手机上占6个格子-->
                 <div class="col-lg-1 col-xs-2 inner" >格子</div>
                 <div class="col-lg-1 col-xs-2 inner" >格子</div>
                 <div class="col-lg-1 col-xs-2 inner" >格子</div>
                 <div class="col-lg-1 col-xs-2 inner" >格子</div>
                 <div class="col-lg-1 col-xs-2 inner" >格子</div>
                 <div class="col-lg-1 col-xs-2 inner" >格子</div>
                 <div class="col-lg-1 col-xs-2 inner" >格子</div>
                 <div class="col-lg-1 col-xs-2 inner" >格子</div>
                 <div class="col-lg-1 col-xs-2 inner" >格子</div>
                 <div class="col-lg-1 col-xs-2 inner" >格子</div>
                 <div class="col-lg-1 col-xs-2 inner" >格子</div>
                 <div class="col-lg-1 col-xs-2 inner" >格子</div>
             </div>
         </div>
</body>
</html>

启动项目，看到的页面如下图所示：

BootStrap---实现响应式布局
然后我们拖动页面的边框，将页面缩小之后，发现格子的数量还是12个，但是分为了2行进行展示：

这个案例中，我们使用的是BootStrap提供一两种容器中的一种container-fluid，这种容器官方解释就是栅格宽度为100%，就是栅格会沾满整个屏幕。另外一种容器container是固定宽度，从官方文档中我们就可以看出，此种容器的栅格宽度是比屏幕实际宽度要小一点，也就是说栅格在屏幕上会留白。
BootStrap---实现响应式布局
这里我们可以将代码中的容器由container-fluid改为container，然后重启项目查看一下这种容器的效果：

发现屏幕的两边都留白了一部分，这也就是两种容器最主要的区别。 BootStrap---实现响应式布局

同一套代码，但是却能够根据我们屏幕的分辨率来进行相应的调整适配。这就是我们BootStrap框架带来的便利-----响应式开发。

BootStrap---实现响应式布局

相关推荐