发表于： 2019-11-15 21:19:47
1 959
一、今天完成的事情
bootstrap包含了一个强大的移动优先的网格系统，他是基于一个12列的布局、有5种响应尺寸（对应不同的屏幕），支持sass mixins自由调用，并结合自己预定义的css、js，用来创建各种形状和尺寸的布局。
机制原理：
bootstrap的网格系统使用一系列的div容器的行、列来布局和对齐内容，不同于旧版3.0，新版是完全基于flexbox流式布局构建的，完全支持响应式标准。下面的实例，可以让我们深入了解网格如何组合在一起。
三分之一空间占位：
上面的例子使用bootstrap预定义的栅格系统，演示了在.container容器内建立了三个的等宽的列，并且分别兼容在small（极窄宽度网页）、medium（中等宽度网页）、large（宽网页）、extra large（超宽网页）四种设备类型-即无论网页宽度如何，这三个列都是恒在呈现的。
让我们慢慢来揭开他的工作原理：
1、栅格系统提供了集中内容居中、水平填充网页内容的方法，使用.container （严格意义上也包括.container-fluid，后文相同不再备注）应答网页宽度，或使用.container-fluid使网页能够以100%宽度呈现在所有的浏览器窗口或设备尺寸上。
换一个说法就是：.container 实现固定的宽度并居中呈现，.container-fluid实现全宽度，并和其他网格实现对齐
2、行（.row）是列（.col-*）的横向组合和父容器（它们有效组织在.row下），每列都有水平的padding值，用于控制它们之间的间隔，同时在负边距的行上抵消，从而实现列中的所有内容在视觉上是左侧对齐的体验。
3、网页开发者的呈现内容必须放置在列（.col-*）中，而且只有列可以是行的直接子元素，否则都是违法的（不可以在.col-*以上添加呈现内容）。
4、这一切都要感谢flexbox流失布局，从而使我们不需要指定列的宽度（旧版bootstrap3是采用严格宽度定义来实现的）就能实现网页自动等宽排列，比如我们在.container中置入初始化的四个.col-sm就能实现各自25%宽度并左对齐形成一行的排列
5、应该注意到.col-*后面有不同的数字，如.col-sm-4或.col-xl-12，这些css类后面的数字用于表明定义div空间想要占用列的数量，每行最多有12列。如果你想用三个等宽的列，则取12的三分之一，即
.col-sm-4就是正确的
6、.col-*的width属性（即列宽）是用百分比来表现和定义的，所以他们总是流式的，其尺寸大小受父元素的定义影响（这正是flex布局的特征），子元素的宽比和排列受父元素定义。
7、列具有水平padding定义，用于创建列与列之间的间隙。
8、.row上带有margin-left：-15px；marg-right：-15px；属性，你可以在.row上上定义.no-gutters属性，从而消除这个属性，是页面不会额外宽出30px，即<div class="row no-gutters"…>
9、总共有五个栅格等级，每个响应式分界点隔出一个等级：特小.col、小.col-sm-*、中.col-md-*、大.col-lg-*、特大（大，特大也可以被称为宽，超宽）.col-xl-*
10、栅格断电的媒体查询基于宽度的最小值，意味着它们应用到某一等级以及这一等级上的所有（如.col-sm-4的定义可以在小型、中型、宽、超宽设备上呈现，但不适用于能在超小型.col-sx上呈现）
11、用户不需要自行定义网格，可以直接使用系统预定义的栅格类（如.col-4）或采用sass mixins来进行更多的语义标记满足开发需要
注意：flexbox布局虽然很先进，但也有一定的限制和错误，如无法使用某些html元素作为弹性容器。
栅格选项：
bootstrap使用ems或者rems来定义大多数属性的规格大小，px用于全局层面网格断点和容器宽度（因为浏览器和设备的宽度是以像素px为单位，且不会随字体的大小而变化）
通过一个简单的表格查看bootstrap的网格系统在各种屏幕和设备上的细节约定。
1、在bootstrap中，屏幕的大小是真正的“断点”，即如果只定义一个屏幕规格即可向上覆盖所有设备，向下如果没有定义则默认为12栅格占位
2、实践中，一个<div class="col"></div>或<div class="col-N"></div>代表手机断点。
自动布局列
利用栅格断点特性进行排版，可以简化列的大小。而不需要批定显式的列宽，如强制写为：.col-sm-6
等宽布局：
下面的例子，展示了一行两列与一行三列的布局，从xs（如上表所见，实际上并不存在xs这个空间命名，是以.col表示）到xl（即.col-xl-*）所有设备上都是等宽并占满一行，只要简单的应用.col就可以完成
等宽列可以分成多行，但是有一个Safari旧版浏览器的flexbox错误，阻止它在没有显示flex-basis或border（影响到边框效果）。
bootstrap非官方的一个实例，已经介绍了两种解决方法，但如果是最新Safari浏览器下，则不需要这样做。
下面是等宽列两行的处理方法，引用w-100进行切割分行：
设置一列宽度：
在flexbox的布局上，拥有很多现代特征，比如自动布局和列宽处理。你可以在一行多列的情况下，特别指定一列并进行宽度定义，同时其他列自动调整大小。
可变宽度的弹性空间
使用 col-｛breakpoint｝-auto断点方法，可以实现根据其内容的自然宽度来对列进行大小调整
等宽多行
创建跨多个行的等宽列，方法是插入.w-100要将列拆分为新行。通过混合.w-100一些还可以影响一些显示状态效果，如按钮排序等。
.w100似乎与.clearfix有时可以达到同样的网页效果。
响应式的class选择器
bootstrap的栅格系统包括五种宽带预定义，用于构建复杂的响应布局，你可以根据需要定义在特小.col、小.col-sm-*、中.col-md-*、大.col-lg-*、特大.col-xl-*五种屏幕（设备）下的样式
覆盖所有设备
如果要一次性定义从最小设备到最大设备相同的网格系统表现，请使用.col和.col-*类。后者是用于指定特定大小的（如.col-6），否则使用.col就可以了。
水平堆砌
使用单一的.col-sm-*类方法，可以创建一个基本的网格系统，此时如果没有指定其他媒体查询断点宽度，这个栅格系统是成立的，而且会随着屏幕变窄成为超小屏幕.col-后，自动成为每列一行、水平堆砌。改变网页屏幕宽度你可以在下面例子看到效果。
混合布局
设计师们当然不会简单的把各个屏幕下的栅格都做成一样，那将是单调乏味的，所以你可以根据需要对每一个列进行不同的设备定义。下方实例展示了原理：
沟槽
可以通过特定于断点的填充和负边距实用程序类来响应地调整装订线。要更改给定行中的装订线，请在.row上配置负边距实用程序，并在.col上配对匹配填充实用程序。可能需要调整.container 或.contain-fluid父级以避免不必要的溢出，再次使用匹配的填充实用程序。
这是一个在大（lg）断点及以上定制bootstrap网格的示例。我们使用.px-lg-5增加了.col填充，在父.row上使用.mx-lg-n5进行了抵消，然后使用.px-lg-5调整了.container包装。
二、明天要做的事情
把bootstrap看完，尽量任务八开个头
三、遇到的困难
个别布局还没有理解，需要把代码敲出来看看实际的样子
四、收获
大概知道了什么是栅格布局，栅格布局的简单
返回列表
评论