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

头像
Queen
    阅读 10 分钟
    2

    Bootstrap —— 栅格系统布局

    图片描述

    栅格系统简介

    响应式设计核心思想：

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

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

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

    bootstrap围绕响应式进行设计

    图片描述

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

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

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

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

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

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

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

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

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

    图片描述

    注意文档上的字：

    使用单一的一组.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-*

    并且记住这句话：

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

    图片描述

    • xs < 768px

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

    图片描述

    • sm ≥ 768px

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

    图片描述

    • 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>

    图片描述

    • 在当前列的范围内，以左为基础向右偏移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>

    图片描述

    继续加入一行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>

    图片描述

    • 继续添加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>

    图片描述
    图片描述
    上图是定义容器在不同分辨率下的占比示意

    • 小分辨率下，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容器里添加内容，如图。
    图片描述

    通过检查元素可知，所有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）号容器得以另起行并向左排列。

    清除浮动后如图：

    图片描述

    • 不明白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定义的容器，如将.container换为别的class。
      如：ID

    bootstrap
    Queen
    139 声望20 粉丝
    « 上一篇
    初涉Bootstrap——简介
    下一篇 »
    初涉Bootstrap —— 排版基础

    引用和评论

    推荐阅读
    头像
    《JavaScript程序设计》—— 标准对象 Object

    Queen阅读 2k

    头像
    如何为在线客服系统的 Web Api 后台主程序添加 Bootstrap 启动页面

    曹旭升阅读 500

    头像
    高效团队协作软件：如何优化团队的工作流程和资源管理？

    瘦瘦的企鹅阅读 51

    头像
    如何通过 Python 实现一个消息队列，为在线客服系统与海外运营的APP对接

    曹旭升

    0 条评论
    得票最新