Bootstrap --手写栅格系统

最新推荐文章于 2022-05-10 15:43:45 发布

Yannnnnm

最新推荐文章于 2022-05-10 15:43:45 发布

阅读量373

点赞数

文章标签： bootstrap

本文链接：https://blog.csdn.net/Yannnnnm/article/details/109402085

版权

本篇文章主要从栅格系统的原理，以及栅格系统的一些应用来说明；

栅格系统原理

我们要了解栅格系统的原理，首先先看看官方文档的解释
官方文档这么解释他：栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局；
我们再来看看官方爸爸解释的原理：
在这里插入图片描述
这里方便大家看我们这里就直接偷了官方的文档解释截图；
官方的话可能不是那么通俗，那么栅格系统的原理到底是什么呢？

我所理解的栅格系统

栅格系统是将一行等分成12份或者24份，分别根据每一行的每一列各自占多少比例；
那么我们这里首先可以引入另外一个概念–布局容器
布局容器又分为两种

.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
我们在使用栅格系统的时候尽量外面包一个布局容器，方便后面布局
正题部分
上面有所过栅格系统相当于将一个完整的部分分成12或者24分，这里我们分成12份，那么分成12份了，我们怎么使用呢，不可能每一次用乘法设置，这里我们就可以用到我们最方便的类，这里我计算了几个常用的部分给大家演示：

        
        .col-1 {
            /* 一行分为12份，每列占1份 */
            width: 8.3333%;
            height: 50px;
        }
        
        .col-2 {
            /* 一行分为12份，每列占2份 */
            width: 16.6667%;
            /*2/12*/
            height: 70px;
        }
        
        .col-3 {
            /* 一行分为12份，每列占4份 */
            width: 25%;
            height: 70px;
        }
        
        .col-4 {
            /* 一行分为12份，每列占3份 */
            /* 3/12 */
            width: 33.3333%;
            height: 50px;
        }
        
        .col-6 {
            /* 一行分为12份，每列占6份 */
            width: 50%;
            height: 30px;
        }
        
        .col-12 {
            /* 一行分为12份，每列占1份 */
            width: 100%;
            height: 70px;
        }

和我上面的注释一样，每一次就相当于分成相应的等分，用12除以相对应的占得比例，用12除以col后面的数字可以算出来一行几列
相对应得各种屏幕上的布局只需要在对应的上面的类上加上相应的类名，以一行放四列为例

超小屏幕
.col--xs-3 
小屏幕
.col-sm-3 
中屏幕
.col-md-3 
大屏幕
.col-lg-3

栅格系统的应用

上面我们简单地介绍了栅格系统的原理，那么我们什么情况下会遇到这种情况呢；
双十一要到了，大家偷偷划水刷到JD的时间肯定也变多了，我们会发现很多部分都可以用栅格系统来实现，由于这里只是简单地来说明一下知识点，所以这里找一小部分来实现
在这里插入图片描述
下面我们来实现上面的左边部分，由于比较简单，这里不在详细叙述每一步的原理，将注释写在代码里面，不会的小朋友们可以对着看一下，或者复制下来，到编辑器看看效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <style>
        .container>.row {
            height: 340px;
            border: 1px solid red;
        }
        
        .ku {
            height: 265px;
            border: 1px solid red;
        }
        
        .tejia {
            line-height: 60px;
            height: 60px;
        }
        
        a {
            width: 100%;
            text-align: center;
            font-size: 10px;
        }
        
        .kuku1 {
            background-color: firebrick;
            height: 265px;
        }
        
        .xx {
            height: 133px;
        }
        
        .hxie {
            background-color: #000;
        }
        
        .bxie {
            background-color: floralwhite;
        }
        
        .rc {
            background-color: greenyellow;
        }
        
        .hg {
            background-color: rebeccapurple;
        }
        
        .rightPage {
            background-color: #345678;
            height: 265px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="container">

        <div class="col-xs-6 leftPage">
            <!-- 一行分成两列 左边的4，右边8 -->
            <div class="row ku">
                <!-- 左边部分的大图 -->
                <div class="col-xs-4 kuku1"></div>
                <div class="col-xs-8">
                    <!--左边右边的部分在分两行 -->
                    <div class="row">
                        <!-- 每一小行分两列 -->
                        <div class="col-xs-6 xx hxie"></div>
                        <div class="col-xs-6 xx bxie"></div>
                    </div>
                    <div class="row">
                        <div class="col-xs-6 xx rc"></div>
                        <div class="col-xs-6 xx hg"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-6 rightPage">
        </div>

    </div>
</body>

</html>