前端移动开发布局_响应式bootstrap

知识导航：

响应式开发原理
bootstrap介绍及基本使用（先主要介绍样式css部分）

1.响应式开发原理

利用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的

设备的划分：

小于768的为超小屏幕（手机）
768~992之间的为小屏设备（平板）
992~1200的中等屏幕（桌面显示器）
大于1200的宽屏设备（大桌面显示器）

响应式布局容器

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

它的原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，进而控制里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

即：利用媒体查询动态设置父亲盒子的大小，然后通过给父盒子添加样式控制其内部盒子的排列

一般父容器版心的尺寸划分：

超小屏幕（手机，小于 768px）：设置宽度为 100%
小屏幕（平板，大于等于 768px）：设置宽度为 750px
中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px

2. bootstrap介绍及基本使用

Bootstrap简介

Bootstrap 来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于HTML、CSS 和 js的，它简洁灵活，使得 Web 开发更加快捷。

基本使用

导入结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css">
</head>
<body>
    
</body>
</html>

注意除了链入bootstrap的css文件，别忘了加上那句条件注释。兼容低版本浏览器

Bootstrap 为我们预先定义好了许多样式，我们只需在它上面进行修改即可。当然首先我们需要它到底预定了哪些样式
这里我就不做多解释了。因为太多了。可以去它的中文网进行观看网址bootcss.com

扫描二维码关注公众号，回复： 10472210 查看本文章

bootstrap布局容器

上面讲到响应式布局需要容器，故这里bootstrap为我们提供了俩个此类型的类
（本质就是提前为我们写好了css）
.container

响应式布局的容器固定宽度
大屏 ( >=1200px) 宽度定为 1170px
中屏 ( >=992px) 宽度定为 970px
小屏 ( >=768px) 宽度定为 750px
超小屏 (100%)

.container-fluid

流式布局容器百分百宽度
占据全部视口。

检验一下效果：
源码：
在这里插入图片描述
效果：

bootstrap栅格系统

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局
在这里插入图片描述
值得注意的：

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
行（row）可以去除父容器作用15px的边距
xs-extra small：超小； sm-small：小； md-medium：中等； lg-large：大；
列（column）大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列
每一列默认有左右15像素的 padding

接下来看代码实现：

先看效果：
在这里插入图片描述
主要代码：

<style>
        .container .row {
            border: 1px solid yellow;
        }
        
        div[class^=col] {
            height: 300px;
            background-color: red;
            border: 1px solid green;
        }
    </style>


<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-3">你好啊</div>
            <div class="col-lg-3"></div>
            <div class="col-lg-3"></div>
            <div class="col-lg-3"></div>
        </div>
    </div>

</body>

我写文字是演示一下上面说的每一列默认有左右15像素的 padding，同时我们可以注意到过了大屏幕的尺寸之后列盒子宽度成了容器盒子的100%。故我们应该在其他屏幕情况下也分配上其所占row的份数。即：

	<div class="row">
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">你好啊</div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"></div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"></div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"></div>
        </div>

接下来思考我们所设置的份数超过了12会咋样呢？

            <div class="col-lg-4 col-md-3 col-sm-3 col-xs-3">你好啊</div>
            <div class="col-lg-7 col-md-3 col-sm-3 col-xs-3"></div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"></div>
            <div class="col-lg-4 col-md-3 col-sm-3 col-xs-3"></div>

大屏下份数超了12，它会怎么显示呢看效果
在这里插入图片描述
可见它另起了一行。且一行只能放12份，第三个便放不开了掉了下去

再思考总份数小于12了呢
还是看大屏幕下

            <div class="col-lg-2 col-md-3 col-sm-3 col-xs-3">你好啊</div>
            <div class="col-lg-2 col-md-3 col-sm-3 col-xs-3"></div>
            <div class="col-lg-2 col-md-3 col-sm-3 col-xs-3"></div>
            <div class="col-lg-2 col-md-3 col-sm-3 col-xs-3"></div>

效果：
在这里插入图片描述

栅格嵌套

简单理解就是一个列内再分成若干份小列。
就是在列中再来个row，row中再放列
举个栗子：

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-3 ">
                <div class="row">
                    <div class="col-lg-6">子列1</div>
                    <div class="col-lg-6">字列2</div>
                </div>
            </div>
            <div class="col-lg-3 "></div>
            <div class="col-lg-3 "></div>
            <div class="col-lg-3 "></div>
        </div>
    </div>

</body>

效果：
在这里插入图片描述

列偏移

使用.col-lg-offset-类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。
首先看可以做到的效果：
在这里插入图片描述
关键代码：(就是让它向右偏移4份)

    <div class="container">
        <div class="row">
            <div class="col-lg-4"></div>
            <div class="col-lg-4 col-lg-offset-4"></div>
        </div>
    </div>

列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。
举个栗子：
源码：

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-4 ">01</div>
            <div class="col-lg-4 col-lg-offset-4 col-lg-pull-1">02</div>
        </div>
    </div>
</body>

效果图：
在这里插入图片描述
可见右面盒子被往左拉回一份的距离。同理put就是把盒子从左向右推

接下来我们就可以实现俩个盒子互换位置了。即将01推8份，02拉8份

    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-lg-push-8">01</div>
            <div class="col-lg-4 col-lg-offset-4 col-lg-pull-8">02</div>
        </div>
    </div>

效果：
在这里插入图片描述

响应式工具

为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。

首先看这些类名及其含义：
在这里插入图片描述
举个栗子：

    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 hidden-lg">1</div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 hidden-md">2</div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 hidden-sm">3</div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 hidden-xs">4</div>
        </div>
    </div>

效果图：
注意看标号，大屏下1号隐藏，中屏下2号隐藏…
在这里插入图片描述