Bootstrap——栅格系统Grid

最新推荐文章于 2023-01-21 12:46:17 发布

Kong_十六

最新推荐文章于 2023-01-21 12:46:17 发布

阅读量827

点赞数 1

分类专栏： Bootstrap前端框架文章标签： less bootstrap chrome css html

本文链接：https://blog.csdn.net/qq_42383764/article/details/104295715

版权

Bootstrap前端框架专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Bootstrap是一款移动优先的UI前端框架。它的核心是移动设备优先、响应式布局。

响应式布局的核心又是媒体查询。

Bootstrap的下载

在使用Bootstrap时要首先去官网上下载Bootstrap的压缩包。

下载的时候可以根据自己的需要下载不同版本的。

第一个是只有CSS、JS和fonts的文件没有源码，可以直接使用。

第二个是Bootstrap的源码和源文档（Less版本）。

第三个是Bootstrap的源码和源文档（Sass版本）。

个人的话下载的是第二个，因为之前了解了一下Less预编译，还是很强大的。

还有一点要注意：

在引入Bootstrap之前一定要先引入Jquery。

栅格系统

官方解释

栅格系统的最重要的三个概念：容器、行、列

栅格系统中的容器

容器分为两种：流体容器、固定容器

                流体容器：container-fluid（类名）

                    width：100%（直接取父级的百分百）

                固定容器：container（类名）

                    固定容器有三个阈值，不同的阈值对应不同的终端，这就体现了响应式布局

                        阈值 width

                        1200（>=1200）大屏（PC端）         1170px（1140+槽宽）

                        992  (<1200)  中屏（PC） 970px（940+槽宽）

                        768  (<992)   小屏（平板） 750px（720+槽宽）

                        默认 (768)     移动端（手机） auto

【Bootstrap中槽宽（gutter）默认为30px】

栅格参数

其实就是如何运用栅格系统做也页面的。它的本质就是响应式布局，响应式布局就是一套代码跑三端（PC端、平板、移动端）

栅格中的行

使用行直接调用.row这个类。

一行中含有12列，当列数超过12时会自动在下一行显示；列数小于12时会空出相应的位置。

栅格中的列

栅格系统中最复杂的就是列的操作，如果看过源码的话就知道，对列的操作写了一整个Less文件，其中还用到了递归。

列排序

列排序的本质时对列的左内边距操作

类.col-lg-push-*，对应列的padding-left：左推

类.col-lg-pull-*，对应列的padding-right：右拉

通过使用.col-lg-push-*和 .col-lg-pull-*类就可以很容易的改变列（column）的顺序。

比如两列：一个列向左推4个列的宽度，另一个列向右拉4个列的宽度，就实现了两列顺序的交换。

注意：.col-lg-push-*和.col-lg-pull-*不能为0，至少为1。即.col-lg-push-1、.col-lg-pull-1

列偏移

使用.col-lg-offset-*类可以将列向右侧偏移。这个类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin），

进而实现向右偏移的效果。

注意：列偏移可以为0，即.col-*-offset-0

列嵌套

嵌套就是列里面可以嵌套行

下面给出实例

<!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>栅格</title>

    <style>
        .bg_color{
            background-color: pink;
            
        }
        .bg_color > div{
            border: 1px solid;
            height: 100px;
        }
        .center{
            margin: 100px auto;
        }
        .bg_color_in div{
            height: 80px;
            border: 1px solid;
        }
    </style>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
      <!-- 这里是容器
            容器分为两种：流体容器、固定容器
                流体容器：container-fluid
                    width：100%
                固定容器：container
                    固定容器有三个阈值，不同的阈值对应不同的终端，这就体现了响应式布局
                        阈值                                 width
                        1200（>=1200） 大屏（PC端）         1170px（1140+槽宽） 槽宽默认为30px
                        992  (<1200)  中屏（PC）            970px（940+槽宽）
                        768  (<992)   小屏（平板）          750px（720+槽宽）
                        默认 (768)     移动端（手机）           auto
    
    -->
    <div class="container center">
        <!-- 这里是行
            行默认是一行有12列，如果有多余的列则换到下一行显示
        
        -->
        <div class="row bg_color">
            <div class="col-lg-3">col-lg-3</div>
            <div class="col-lg-3">col-lg-3</div>
            <div class="col-lg-3">col-lg-3</div>
            <div class="col-lg-3">col-lg-3</div>
            <!-- 列排序
                   类名中含push：‘推’ ，是对left操作 
                                padding-left
                   类名中含pull： ‘拉’，是对right的操作
                                padding-right

                   原本显示的是左边在左边，右边栏在右边，把左边栏推走col-lg-push-6，
                   右边栏拉走col-lg-pull-6，二者就交换位置了。
                   这就实现了列排序
            -->
            <div class="col-lg-6 col-lg-push-6">col-lg-6左换位置</div>
            <div class="col-lg-6 col-lg-pull-6">col-lg-6右换位置</div>

            <!-- 列偏移
                    类名中含offset：是对margin操作
                            通过margin-left实现列的偏移
            -->
            <div class="col-lg-4">col-lg-4</div>
            <div class="col-lg-4 col-lg-offset-4">col-lg-4偏移了4个列的宽度  </div>
            <!-- 列嵌套
                    就是在列里面再嵌套一个行，同样是12列的
            -->
            <div class="col-lg-6">col-lg-6OUT
                <div class="row bg_color_in">
                    <div class="col-lg-6">col-lg-6IN</div>
                    <div class="col-lg-6">col-lg-6IN</div>
                </div>
            </div>
            <div class="col-lg-6"></div>
        </div>
    </div>


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>

必须要知道的：

为了维护槽宽的规则：列两边必须有15px的padding值

为了使列嵌套行不破坏布局：行的两边必须有-15px的margin值

为了使容器可以包裹行：容器两边必须有15px的padding值

栅格就介绍到这里啦！

有兴趣的同学可以看看栅格的源码，还是很有挑战的，Less文件中有很多对变量的操作。

之前我用Bootstrap写了一个小的综合案例，也可以看一下啊Bootstrap综合案例。

Kong_十六

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap——栅格系统Grid

Bootstrap是一款移动优先的UI前端框架。它的核心是移动设备优先、响应式布局。响应式布局的核心又是媒体查询。在使用Bootstrap时要首先去官网上下载Bootstrap的压缩包。下载的时候可以根据自己的需要下载不同版本的。第一个是...
复制链接

扫一扫