初涉Bootstrap —— 栅格系统介绍极其用法

2019年9月14日 202次阅读 来源: Queen

Bootstrap —— 栅格系统布局

《初涉Bootstrap —— 栅格系统介绍极其用法》

栅格系统简介

响应式设计核心思想：

  • 响应式设计：页面的设计与开发应当根据用户的行为以及设备环境（系统平台，屏幕尺寸、屏幕定向等）进行相应的响应和调整，具体的实践方式由多方面决定，包括弹性网络布局、图片使用等。

  • 无论用户在平板上还是pc上应该能够自动切换分辨、图片尺寸及相关脚本等，以适应不同设备。

  • 响应式设计是就一个网站能够兼容多个终端，而不是为每个终端都适配一个版本。

bootstrap围绕响应式进行设计

《初涉Bootstrap —— 栅格系统介绍极其用法》

可以看到，bootstrap栅格系统把屏幕分为四种（均指横向分辨率）：

– extra small —— 超小屏幕（手机）： xs < 768px

此分隔方案下容器最大宽度：自动

– small —— 小屏幕（平板）： sm ≥ 768px

此分隔方案下容器最大宽度：750px

– middle —— 中等屏幕（桌面显示器）： md ≥ 992px

此分隔方案下容器最大宽度：970px

– large —— 大屏幕（大桌面显示器） ： lg ≥ 1200px

此分隔方案下容器最大宽度：1170px

《初涉Bootstrap —— 栅格系统介绍极其用法》

注意文档上的字：

使用单一的一组.com-md-*栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕上变为水平排列。所有列（column）必须放在row内。

  • 系统自动把屏幕rowsegment成12份col，每份得到的分辨率与显示器屏幕大小有关，成正比。

  • 如上图：指定Class时，尾部的数字即表示这一column占总row的栏数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Starter Template for Bootstrap</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <style type="text/css">
        .container div {
            border: solid 1px black;
        }
        .col-xs-4 {
            font-weight: bold;
        }
    </style>
    <body>
        <div class="test"></div>
        <div class="container">
            <div class="container">
                <div class="row">
                    <div class="col-md-1">col-md-1</div>
                    <div class="col-md-1">col-md-1</div>
                    <div class="col-md-1">col-md-1</div>
                    <div class="col-md-1">col-md-1</div>
                    <div class="col-md-1">col-md-1</div>
                    <div class="col-md-1">col-md-1</div>
                    <div class="col-md-1">col-md-1</div>
                    <div class="col-md-1">col-md-1</div>
                    <div class="col-md-1">col-md-1</div>
                    <div class="col-md-1">col-md-1</div>
                    <div class="col-md-1">col-md-1</div>
                    <div class="col-md-1">col-md-1</div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-sm-8">col-sm-6</div>
                    <div class="col-md-6 col-sm-4">col-sm-6</div>
                </div>
                <div class="row">
                    <div class="col-xs-4">col-xs-4</div>
                    <div class="col-xs-4">col-xs-4</div>
                    <div class="col-xs-4">col-xs-4</div>
                </div>
            </div>
        </div>
    </body>
</html>

第一行row设置中等分辨率.col-md-*

第二行row设置中等分辨率.col-md-*和小分辨率.col-sm-*

第三行row只设置超小分辨率.col-xs-*

并且记住这句话：

手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕上变为水平排列

《初涉Bootstrap —— 栅格系统介绍极其用法》

  • xs < 768px

  • 屏幕处于超小分辨率，第三行按照超小分辨率规则进行绘制，而其他行未设置小于.col-md-*时col的规则。所以会堆叠起来，变为水平排列。

《初涉Bootstrap —— 栅格系统介绍极其用法》

  • sm ≥ 768px

  • 屏幕处于小分辨率，第三行不变（未设置小分辨率规则），第二行由于设置了小分辨率.col-sm-*所以将会按照规则绘制成8/12 and 6/12

《初涉Bootstrap —— 栅格系统介绍极其用法》

  • md ≥ 992px

  • 当屏幕处于中等分辨率下，则堆叠元素不再起作用。将按照中等分辨率12等分默认规则进行绘制，第一行row的.col铺散开，并且，第二行row设置了.col-md-*即中等分辨率绘制规则，则两份column将按照6/12和6/12规则绘制。

  • 哪怕处于中等分辨率，或者以上，对于只设置超小分辨率规则的.col-xs-*也会起作用，所以第三行row依旧是按照3组4/12规则进行绘制 ——— 小分辨率向上兼容大分辨率

媒体查询

  • 媒体查询是进行响应式设计的核心要素，其功能非常强大

  • Bootstrap主要用到min-width,max-width以及and语法，用于在不同的分辨率下设置不同的css样式

    @media (max-width: 767px) {
        /*小于 767px 这里的样式生效*/
    }
    @media (min-width: 768px) and (max-width: 991px) {
        /*在768px ~ 991px之间  这里的样式生效*/
    }
    @media (min-width: 1200px) {
        /*大于 1200px 这里的样式生效*/
    }

栅格系统用法

列偏移

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Starter Template for Bootstrap</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <style type="text/css">
        div {
            border: 1px black solid ;
        }
    </style>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-4">col-md-4</div>
                <div class="col-md-4">col-md-4</div>
                <div class="col-md-4">col-md-4</div>
            </div>
            <div class="row">
                <div class="col-xs-6">col-xs-6</div>
                <div class="col-xs-6">col-xs-6</div>
            </div>
            <div class="row">
                <div class="col-md-3 col-md-offset-3">col-md-3</div>
                <div class="col-md-2 col-md-offset-2">col-md-2</div>
            </div>
        </div>
    </body>
</html>

《初涉Bootstrap —— 栅格系统介绍极其用法》

  • 在当前列的范围内，以左为基础向右偏移x/12,x表示offset后缀数字

  • 第三个row中，使用了col-md-offset-*列偏移

  • 偏移基点不是基于row的，比如.col-md-2偏移2格是基于.col-md-3来移动

列嵌套

        <div class="row">
            <div class="col-md-8">
                <div class="row">
                    <div class="col-md-6">col-md-6</div>
                    <div class="col-md-6">col-md-6</div>
                </div>
            </div>
            <div class="col-md-4">4</div>
        </div>

《初涉Bootstrap —— 栅格系统介绍极其用法》

继续加入一行row，代码可以看到，在原本8等分容器的基础上继续拆分成了2个6等分的容器，这很好理解。

列排序

            <div class="row">
                <div class="col-md-3 col-md-push-5">col-md-3</div>
                <div class="col-md-2 col-md-pull-2">col-md-2</div>
            </div>

《初涉Bootstrap —— 栅格系统介绍极其用法》

  • 继续添加Test,可以看到两个新的功能,push and pull

  • .col-md-push-*字面意思是“推”，可理解为向左推，自然就往右移动了。

  • .col-md-pull-*与push相反，字面意思“拉”，在原来的位置基础上，向左”拉”，容器向左移动。

  • 两个属性之间互不干涉，可以重合。

跨设备组合定义

        <div class="row">
            <div class="col-md-8 col-xs-6 col-sm-3">8-3-6</div>
            <div class="col-md-4 col-xs-6 col-sm-6">4-6-6</div>
        </div>

  • 适配了三种不同的分辨率下的容器组合

清除浮动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Starter Template for Bootstrap</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <style type="text/css">
        div {
            border: 1px black solid ;
        }
    </style>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
                <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
                <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
                <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
            </div>
        </div>
    </body>
</html>

《初涉Bootstrap —— 栅格系统介绍极其用法》
《初涉Bootstrap —— 栅格系统介绍极其用法》
上图是定义容器在不同分辨率下的占比示意

  • 小分辨率下，3/12排一行

  • 超小分辨率下，6/12排两行（第一行占满，自动float:left）

PS：关于浮动与清除可看这位前端大神杨元博客、端友radom和z-one：

– CSS浮动(float,clear)通俗讲解

– 最优浮动闭合方案（这是我们推荐的）

– 清除浮动的几种方案极其方案优劣比较

        <div class="container">
            <div class="row">
                <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3  (1)
                    sdfsdfsdflsjfsl;dfjsdl;kj
                    sdfsdfsdflsjfsl;dfjsdl;kj
                </div>
                <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3  (2)</div>
                <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3  (3)</div>
                <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3  (4)</div>
            </div>
        </div>

然后我们给每个col容器编号，并在编号为1的col容器里添加内容，如图。
《初涉Bootstrap —— 栅格系统介绍极其用法》

通过检查元素可知，所有col块都设置了float：left，（1）中添加内容后内容后容器高度扩大到第二行位置，使得原本应该在左边的（3）容器无法左对齐，这时需要清除浮动。



    <body>
        <div class="container">
            <div class="row">
                <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3  (1)
                    sdfsdfsdflsjfsl;dfjsdl;kj
                    sdfsdfsdflsjfsl;dfjsdl;kj
                </div>
                <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3  (2)</div>
                <div class="clearfix visible-xs"></div>
                <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3  (3)</div>
                <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3  (4)</div>
            </div>
        </div>
    </body>

  • 在（3）容器的标签之前添加： <div class="clearfix visible-xs"></div>，此代码含义为：只在超小分辨率的情况下（前提），清除左右的浮动元素，则（3）号容器得以另起行并向左排列。

清除浮动后如图：

《初涉Bootstrap —— 栅格系统介绍极其用法》

  • 不明白clearfix功能，可以向其添加文本内容，并将1234容器重置回原来的内容，看看具体实现。

    <body>
    <div class="container">
        <div class="row">
            <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3  (1)</div>
            <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3  (2)</div>
            <div class="clearfix visible-xs">ss</div>
            <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3  (3)</div>
            <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3  (4)</div>
        </div>
    </div>
</body>

    《初涉Bootstrap —— 栅格系统介绍极其用法》

  • 另外，如果处于小分辨率以上，则是另外一种方法和方案，注意代码适用范围

禁止响应式布局

  • 不使用Bootstrap定义的容器，如将.container换为别的class。
    如：ID

    原文作者：Queen
    原文地址: https://segmentfault.com/a/1190000009152563
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞