每日一bootstrap 栅格

Bertha 。 2022-08-21 02:08 162阅读 0赞

最近写bootstrap少了，老是忘记，所以决定每天从基础开始一点点敲敲，bootstrap很好学，看着官网的API都敲一遍就会了  
一下都是我的一下体会什么的，希望可以帮到大家~~  
今天敲了敲栅格，栅格只要搞清楚栅格把屏幕分成12个分区，有xm，sm，md，lg四大屏幕尺寸，再敲一敲就可以掌握

首先先看一下栅格如何分为12个区的，我的样式比官网的丑点- -~~还有一点官网特意强调了，我们使用的row行必须包裹在container和container-fluid下，区别一会看图讲解

<div class="container">
                <div class="row">
                  <div class="col-md-1 row_style">.col-md-1</div>
                  <div class="col-md-1 row_style">.col-md-1</div>
                  <div class="col-md-1 row_style">.col-md-1</div>
                  <div class="col-md-1 row_style">.col-md-1</div>
                  <div class="col-md-1 row_style">.col-md-1</div>
                  <div class="col-md-1 row_style">.col-md-1</div>
                  <div class="col-md-1 row_style">.col-md-1</div>
                  <div class="col-md-1 row_style">.col-md-1</div>
                  <div class="col-md-1 row_style">.col-md-1</div>
                  <div class="col-md-1 row_style">.col-md-1</div>
                  <div class="col-md-1 row_style">.col-md-1</div>
                  <div class="col-md-1 row_style">.col-md-1</div>
                </div>
                <div class="row">
                  <div class="col-md-8 row_style">.col-md-8</div>
                  <div class="col-md-4 row_style">.col-md-4</div>
                </div>
                <div class="row">
                  <div class="col-md-4 row_style">.col-md-4</div>
                  <div class="col-md-4 row_style">.col-md-4</div>
                  <div class="col-md-4 row_style">.col-md-4</div>
                </div>
                <div class="row">
                  <div class="col-md-6 row_style">.col-md-6</div>
                  <div class="col-md-6 row_style">.col-md-6</div>
                </div>
            </div>

![这里写图片描述][20160310103240067]

<div class="container-fluid">
                <div class="row">
                  <div class="col-md-1 row_style">.col-md-1</div>
                  <div class="col-md-1 row_style">.col-md-1</div>
                  <div class="col-md-1 row_style">.col-md-1</div>
                  <div class="col-md-1 row_style">.col-md-1</div>
                  <div class="col-md-1 row_style">.col-md-1</div>
                  <div class="col-md-1 row_style">.col-md-1</div>
                  <div class="col-md-1 row_style">.col-md-1</div>
                  <div class="col-md-1 row_style">.col-md-1</div>
                  <div class="col-md-1 row_style">.col-md-1</div>
                  <div class="col-md-1 row_style">.col-md-1</div>
                  <div class="col-md-1 row_style">.col-md-1</div>
                  <div class="col-md-1 row_style">.col-md-1</div>
                </div>
                <div class="row">
                  <div class="col-md-8 row_style">.col-md-8</div>
                  <div class="col-md-4 row_style">.col-md-4</div>
                </div>
                <div class="row">
                  <div class="col-md-4 row_style">.col-md-4</div>
                  <div class="col-md-4 row_style">.col-md-4</div>
                  <div class="col-md-4 row_style">.col-md-4</div>
                </div>
                <div class="row">
                  <div class="col-md-6 row_style">.col-md-6</div>
                  <div class="col-md-6 row_style">.col-md-6</div>
                </div>
            </div>

![这里写图片描述][20160310103414288]

首先可以看出，每行都被分成12个分区，其次这两份代码唯一的区别就是外部容器一个是container，一个是container-fluid，第一个是固定宽度，居中在网页中间，第二个是百分比宽度，宽度为100%，根据情况我们可以选择不同的容器。。

下一个例子是栅格的平移。也很简单  
直接上代码

<div class="row">
              <div class="col-md-4 row_style">.col-md-4</div>
              <div class="col-md-4 col-md-offset-4 row_style">.col-md-4 .col-md-offset-4</div>
            </div>
            <div class="row">
              <div class="col-md-3 col-md-offset-3 row_style">.col-md-3 .col-md-offset-3</div>
              <div class="col-md-3 col-md-offset-3 row_style">.col-md-3 .col-md-offset-3</div>
            </div>
            <div class="row">
              <div class="col-md-6 col-md-offset-3 row_style">.col-md-6 .col-md-offset-3</div>
    </div>

![这里写图片描述][20160310103801587]  
我们可以计算一下第一行占据了多少个区4+4+4=12，正好占满一行，记住一点就是，无论何时都分为12个，无论你平移还是嵌套，嵌套下面说。

下面说的是嵌套，一句话记住12个区，为什么呢，结合图和代码看得更清楚

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

![这里写图片描述][20160310104124807]

第一层我分为了8+4为12 是一整行，而他们的嵌套我分为了6+6=12和8+4=12，也就是说嵌套里面也分为了12个区。。所以说无论何时都是12个区  
上面有一个row\_style的样式是方便看得更清楚  
代码如下，用的方法比较笨- -

.row_style{ background-color: #ccc; border: 1px solid #000; margin-top:10px; }

[20160310103240067]: /images/20220731/e423865e641f405a939615c334286b51.png
[20160310103414288]: /images/20220731/280fd78b08024af482995dedc7c0db78.png
[20160310103801587]: /images/20220731/8a85a8981e254a3f951e0c1173a5f7d7.png
[20160310104124807]: /images/20220731/5c44fdd985274476a78fdc0ada512ac7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，162人围观）

还没有评论，来说两句吧...

相关阅读

相关每日一bootstrap 栅格

最近写bootstrap少了，老是忘记，所以决定每天从基础开始一点点敲敲，bootstrap很好学，看着官网的API都敲一遍就会了一下都是我的一下体会什么的，希望可以帮到

Bertha 。/ 2022年08月21日 02:08/ 0 赞/ 163 阅读

相关 Bootstrap栅格系统

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统 > 一.移动设备优先 > H5项目中，meta用于设置屏幕和设备等宽以及是否运行用户缩放及缩放比例的问

我不是女神ヾ/ 2022年06月12日 03:59/ 0 赞/ 265 阅读

相关 bootstrap栅格系统

注意：最后加起来是12列 <div class="row"> <div class="col-md-1">.col-md-1</div> <d

川长思鸟来/ 2022年05月28日 11:13/ 0 赞/ 259 阅读

相关 bootstrap 栅格系统自动隐藏

[bootstrap 栅格系统自动隐藏][bootstrap _] 1 [Container][] 顾名思义[Container][]是栅格系统最外层的class，直

我不是女神ヾ/ 2022年05月12日 12:58/ 0 赞/ 294 阅读

相关 Bootstrap入门--栅格系统

在Bootstrap的学习中，栅格系统的使用可谓是十分重要了。使用栅格系统布局实际上可以简单理解为 “加强版的表格(table)布局”。根据Bootstrap官方文档的描述

Love The Way You Lie/ 2022年04月12日 08:50/ 0 赞/ 347 阅读

相关 BootStrap_03 栅格布局

bootstrap – 一个标签中，同时有 col-xs , col-sm , col-md , col-lg .col-xs- 超小屏幕手机 (<768px) .co

不念不忘少年蓝@/ 2022年04月04日 07:56/ 0 赞/ 360 阅读

相关 Bootstrap之栅格系统

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

灰太狼/ 2021年12月10日 04:13/ 0 赞/ 284 阅读

相关 Bootstrap 栅格系统

1、简介 Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义

逃离我推掉我的手/ 2021年11月30日 01:06/ 0 赞/ 376 阅读

相关 bootstrap栅格系统总结

<div class="container"> <div class="row"> <div class="col-xs- col-sm-

迈不过友情╰/ 2021年10月01日 10:58/ 0 赞/ 461 阅读

相关前端Bootstrap——CSS 栅格

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

向右看齐/ 2021年07月25日 19:12/ 0 赞/ 458 阅读