2022年02月19日发布Bootstrap的栅格系统

xhjyxxw

2024-02-29 帮助0人

知行礼动

大家好，今日小科来聊聊一篇关于2022年02月19日整理发布：一起看看Bootstrap中的栅格系统的文章，现在让我们往下看看吧！

Bootstrap提供了一个具有移动设备优先级的响应性流式网格系统。随着屏幕或视口尺寸的增加，系统会自动分成多达12列。网格系统没有官方的定义，但是根据网上的各种描述，可以这样定义，规则的网格阵列可以指导和规范网页中的布局和信息分布。本文将详细介绍Bootstrap网格系统。

网格系统的实现原理很简单，只需定义容器的大小，将其平均分成12份(也有24份或32份，但最常见的是12份)，然后调整内外边距，最后结合媒体查询，就制成了一个功能强大的响应式网格系统。Bootstrap框架中的网格系统是将容器分成12个相等的部分。

网格系统用于通过一系列行和列的组合来创建页面布局，内容可以放入这些创建的布局中。下面是Bootstrap网格系统的工作原理：

1.“行”必须包含在中。集装箱(固定宽度)或。容器-流体(100%宽度)给它适当的对齐和填充。

div class='容器'

div /div

/div2。通过“行”在水平方向创建一组“列”

3.内容要放在“列”里，只有“列”可以是“行”的直接子元素

4.预定义的类，如。划船。col-xs-4可用于快速创建网格布局。Bootstrap源代码中定义的Mixin也可以用来创建语义布局。

div class='容器'

div class='row '

div class='col-md-4 '。col-md4/div

div class='col-md-8 '。col-MD-8/分区

/div

/div5。设置“column”的padding属性以在列之间创建一个分隔符。通过为。行元素来偏移。container元素中，填充间接针对“行”中包含的“列”进行偏移。

6.网格系统中的列通过指定从1到12的值来表示它们所跨越的范围。例如，可以使用三个创建三个等宽的列。col-xs-4。

div class='容器'

div class='row '

div class='col-md-4 '。col-md4/div

/div

/div7。如果一个“行”中包含的“列”大于12，那么冗余“列”所在的元素将作为一个整体排列在另一行中。

8.网格类适用于屏幕宽度大于或等于分界点大小的设备，覆盖了小屏幕设备的网格类。因此，应用任何。col-md-* grid class to elements适用于屏幕宽度大于或等于分界点大小的设备，涵盖了小屏幕设备的grid class。因此，任何。应用于elements的col-lg-*不存在，同样影响大屏设备。

相关建议：《bootstrap教程》

媒体查询在网格系统中，我们在Less或Sass文件中使用以下媒体查询来创建分界点的临界阈值。

/*小屏幕(平板，768像素或更高)*/

@ media(min-width : @ screen-sm-min){.}

/*中等屏幕(桌面显示器，992像素或更高)*/

@ media(min-width : @ screen-MD-min){.}

/*大屏幕(大型桌面显示器，1200像素或更高)*/

@media(最小宽度： @scree

n-lg-min) { ... }

　　我们偶尔也会在媒体查询代码中包含 max-width 从而将 CSS 的影响限制在更小范围的屏幕大小之内

@media (max-width: @screen-xs-max) { ... }@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }@media (min-width: @screen-lg-min) { ... }

　　通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的

　　lg英文是large，表示大的；md英文是middle，表示中等的；sm英文是small，表示小的；xs英文是extra small，表示特小的。与衣服尺码也是对应的

基本用法

　　网格系统用来布局，其实就是列的组合

　　列组合简单理解就是更改数字来合并列（原则：列总和数不能超12），有点类似于表格的colspan属性

　　实现列组合方式非常简单，只涉及两个CSS两个特性：浮动与宽度百分比

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { float: left; }.col-md-12 { width: 100%; } .col-md-11 { width: 91.66666667%; } .col-md-10 { width: 83.33333333%; } .col-md-9 { width: 75%; } .col-md-8 { width: 66.66666667%; } .col-md-7 { width: 58.33333333%; } .col-md-6 { width: 50%; } .col-md-5 { width: 41.66666667%; } .col-md-4 { width: 33.33333333%; } .col-md-3 { width: 25%; } .col-md-2 { width: 16.66666667%; } .col-md-1 { width: 8.33333333%; }<div class="container"> <div class="row"> <div class="col-xs-4">.col-xs-4</div> <div class="col-xs-8">.col-xs-8</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 class="row"> <div class="col-xs-3">.col-xs-3</div> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-3">.col-xs-3</div> </div></div>

【流式布局容器】

　　将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局

.container-fluid { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;}列偏移

　　使用列偏移非常简单，只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，在列元素上添加“col-md-offset-4”，表示该列向右移动4个列的宽度

　　实现原理非常简单，利用十二分之一(1/12)的margin-left。有多少个offset，就有多少个margin-left

.col-md-offset-12 { margin-left: 100%; } .col-md-offset-11 { margin-left: 91.66666667%; } .col-md-offset-10 { margin-left: 83.33333333%; } .col-md-offset-9 { margin-left: 75%; } .col-md-offset-8 { margin-left: 66.66666667%; } .col-md-offset-7 { margin-left: 58.33333333%; } .col-md-offset-6 { margin-left: 50%; } .col-md-offset-5 { margin-left: 41.66666667%; } .col-md-offset-4 { margin-left: 33.33333333%; } .col-md-offset-3 { margin-left: 25%; } .col-md-offset-2 { margin-left: 16.66666667%; } .col-md-offset-1 { margin-left: 8.33333333%; } .col-md-offset-0 { margin-left: 0; }

　　不过有一个细节需要注意，使用”col-md-offset-*”对列进行向右偏移时，要保证列与偏移列的总数不超过12，不然会致列断行显示

<div class="container"> <div class="row"> <div class="col-xs-4">.col-xs-4</div> <div class="col-xs-4 col-xs-offset-4">.col-xs-4 .col-xs-offset-4</div> </div> <div class="row"> <div class="col-xs-2">.col-xs-2</div> <div class="col-xs-4 col-xs-offset-4">.col-xs-4 .col-xs-offset-4</div> <div class="col-xs-4">.col-xs-4</div> </div></div>

列排序

　　列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-*”和“col-md-pull-*” (其中星号代表移动的列组合数)。

　　Bootstrap仅通过设置left和right来实现定位效果

.col-md-pull-12 { right: 100%; } .col-md-pull-11 { right: 91.66666667%; } .col-md-pull-10 { right: 83.33333333%; } .col-md-pull-9 { right: 75%; } .col-md-pull-8 { right: 66.66666667%; } .col-md-pull-7 { right: 58.33333333%; } .col-md-pull-6 { right: 50%; } .col-md-pull-5 { right: 41.66666667%; } .col-md-pull-4 { right: 33.33333333%; } .col-md-pull-3 { right: 25%; } .col-md-pull-2 { right: 16.66666667%; } .col-md-pull-1 { right: 8.33333333%; } .col-md-pull-0 { right: 0; } .col-md-push-12 { left: 100%; } .col-md-push-11 { left: 91.66666667%; } .col-md-push-10 { left: 83.33333333%; } .col-md-push-9 { left: 75%; } .col-md-push-8 { left: 66.66666667%; } .col-md-push-7 { left: 58.33333333%; } .col-md-push-6 { left: 50%; } .col-md-push-5 { left: 41.66666667%; } .col-md-push-4 { left: 33.33333333%; } .col-md-push-3 { left: 25%; } .col-md-push-2 { left: 16.66666667%; } .col-md-push-1 { left: 8.33333333%; } .col-md-push-0 { left: 0; }<div class="container"> <div class="row"> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> </div></div>

列嵌套

　　为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12

<div class="container"> <div class="row"> <div class="col-xs-8"> 我的里面嵌套了一个网格 <div class="row"> <div class="col-xs-6">col-xs-6</div> <div class="col-xs-6">col-xs-6</div> </div> </div> <div class="col-xs-4">col-xs-4</div> </div> <div class="row"> <div class="col-xs-4">.col-xs-4</div> <div class="col-xs-8"> 我的里面嵌套了一个网格 <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></div>

复杂应用

　　在bootstrap中，.col-xs-应用于(<768px)的情况，.col-sm-应用于(≥768px and <992px)的情况，.col-md-应用于(≥992px and <1200px)的情况，.col-lg-应用于(≥1200px)的情况

　　而.col-xs-、.col-sm-、.col-md-、.col-lg-是可以用混合使用的

　　比如，要实现≥992px的时候分四列一排，(≥768px and <992px)的时候两列一排，(<768px)的时候一列一排

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"><style>.row div{border:1px solid black;} </style></head><body><div> <div> <div class="col-md-3 col-sm-6">aaa</div> <div class="col-md-3 col-sm-6">bbb</div> <div class="col-md-3 col-sm-6">ccc</div> <div class="col-md-3 col-sm-6">ddd</div> </div></div></body></html>

显示隐藏

为了加快对移动设备友好的页面开发工作，利用媒体查询功能并使用下面这些工具类可以方便的针对不同设备展示或隐藏页面内容

　　形如.visible-*-*的类针对每种屏幕大小都有三种变体，每个针对 CSS 中不同的display属性，如下所示

　　因此，以超小屏幕（xs）为例，可用的 .visible-*-* 类是：.visible-xs-block、.visible-xs-inline 和 .visible-xs-inline-block

　　比如，要实现≥992px时存在三列，(≥768px and <992px)的时候存在两列，(<768px)的时候只存在一列　

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"><style>.row div{border:1px solid black;} </style></head><body><div> <div> <div class="col-md-4 col-sm-6">aaa</div> <div class="col-md-4 col-sm-6 hidden-xs">bbb</div> <div class="col-md-4 hidden-sm hidden-xs">ccc</div> </div></div></body></html>

这篇好文章是转载于：知行礼动