每日一bootstrap 栅格

Bertha 。 2022-08-21 02:08 169阅读 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 条评论，169人围观）

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

相关阅读

相关 Bootstrap栅格布局

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（r

谁践踏了优雅/ 2023年07月19日 14:29/ 0 赞/ 30 阅读

相关 Bootstrap-栅格系统

Bootstrap-栅格系统 1.栅格系统简介 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口(viewport)尺寸的增加，系统

不念不忘少年蓝@/ 2023年06月18日 14:52/ 0 赞/ 18 阅读

相关 bootstrap栅格系统

全局css样式设置全局 CSS 样式；基本的 `HTML` 元素均可以通过 `class` 设置样式并得到增强效果；还有先进的栅格系统。 bootstrap为响应式

快来打我*/ 2023年06月10日 05:26/ 0 赞/ 6 阅读

相关 bootstrap栅格布局

首先，我们要为页面内容和栅格系统包裹一个 `.container` 容器： <div class="container"> ... </div>

一时失言乱红尘/ 2023年02月08日 12:59/ 0 赞/ 17 阅读

相关每日一bootstrap 栅格

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

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

相关 Bootstrap栅格系统

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

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

相关 bootstrap栅格系统

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

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

相关 BootStrap_03 栅格布局

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

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

相关 Bootstrap 栅格系统

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

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

相关 bootstrap栅格系统总结

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

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