《深入理解Bootstrap》读书笔记(一)

时间:2022-01-01 09:14:47

栅格系统

实现原理

通过定义容器大小,平分12份,再调整内外边距,最后结合媒体查询。

通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 栅格系统是如何工作的:

1、行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding)。

2、使用行来创建列的水平组。

3、内容应该放置在列内,且唯有列可以是行的直接子元素。

4、预定义的网格类,比如 .row 和 .col-xs-4,可用于快速创建网格布局。LESS 混合类可用于更多语义布局。

5、列通过内边距(padding)来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距(margin)取负,表示第一列和最后一列的行偏移。

6、网格系统是通过指定想要横跨的十二个可用的列来创建的。例如,要创建三个相等的列,则使用三个 .col-xs-4。

媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件,则应用相应的样式。

Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。下面的媒体查询在 LESS 文件中使用,用来创建 Bootstrap 栅格系统中的关键的分界点阈值。

/* 超小设备(手机,小于 768px) */
/* Bootstrap 中默认情况下没有媒体查询 */
/* 小型设备(平板电脑,768px 起) */
@media (min-width: @screen-sm-min) { ... }
/* 中型设备(台式电脑,992px 起) */
@media (min-width: @screen-md-min) { ... }
/* 大型设备(大台式电脑,1200px 起) */
@media (min-width: @screen-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) { ... }

媒体查询有两个部分,先是一个设备规范,然后是一个大小规则。在上面的案例中,设置了下列的规则:

让我们来看下面这行代码:

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

对于所有带有 min-width: @screen-sm-min 的设备,如果屏幕的宽度小于 @screen-sm-max,则会进行一些处理。

基本用法

列组合

可以通过更改数字来合并列。

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

它的实现是通过左浮动和宽度百分比,源码如下:

  .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%;
}

列偏移

使用.col-md-offset-*就可以实现将列偏移到右侧,这些类会把一个列的左外边距(margin-left)增加 * 列,其中 * 范围是从 1 到 11。

但是,.col-xs-* 类不支持偏移,但是它们可以简单地通过使用一个空的单元格来实现该效果。

列嵌套

为了在内容中嵌套默认的网格,请添加一个新的 .row,并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列,这组列个数不能超过12(其实,没有要求你必须占满12列)。

在下面的实例中,布局有两个列,第一列又嵌套了一个新行,并且偏移到了中间位置。

<div class="container">
<div class="row">
<div class="col-md-8" style="background-color: lavender">第一层第一列:col-md-8
<div class="row" >
<div class="col-md-6 col-md-offset-3" style="background-color: lavenderblush">第二层col-md-6并且偏移至中间</div>
</div>
</div>
<div class="col-md-4" style="background-color: yellow">第一层第二列:col-md-4</div>
</div>
</div>

列排序

列排序就是改变列的方向,改变左右浮动然后设置浮动的距离。使得我们可以很容易地以一种顺序编写列,然后以另一种顺序显示列。

可以通过.col-md-push-* 和 .col-md-pull-* 来实现,其中 * 范围是从 1 到 11。

列排序运行效果如图:

《深入理解Bootstrap》读书笔记(一)

可以理解为:人是在网页的最左边,然后要把col-md-3拉(pull)过来,把col-md-9推(push)过去。

响应式栅格

下表总结了栅格系统如何跨多个设备工作:

《深入理解Bootstrap》读书笔记(一)

跨设备组合定义

我们会遇到一种样式在其他尺寸的设备中是不起作用的。所以要在一个元素上应用不同类型的样式,也就是给一个元素添加多个类名,以适配不同尺寸的屏幕。

    <div class="row">
<div class="col-sm-12 col-md-8" style="background-color: lavenderblush">col-sm-12 col-md-8</div>
<div class="col-sm-6 col-md-4" style="background-color: lavenderblush">col-sm-6 col-md-4</div>
</div>
<br>
<div class="row">
<div class="col-sm-6 col-md-4" style="background-color: lavenderblush">col-sm-6 col-md-4</div>
<div class="col-sm-6 col-md-4" style="background-color: lavenderblush">col-sm-6 col-md-4</div>
<div class="col-sm-6 col-md-4" style="background-color: lavenderblush">col-sm-6 col-md-4</div>
</div>
<br>
<div class="row">
<div class="col-sm-6" style="background-color: lavenderblush">col-sm-6</div>
<div class="col-sm-6" style="background-color: lavenderblush">col-sm-6</div>
</div>

清除浮动

    <div class="row">
<div class="col-sm-3 col-xs-6" style="background-color: red">div1:col-sm-3 col-xs-6 div1:col-sm-3 col-xs-6 div1:col-sm-3 col-xs-6</div>
<div class="col-sm-3 col-xs-6" style="background-color: red">div2:col-sm-3 col-xs-6</div>
<div class="col-sm-3 col-xs-6" style="background-color: green">div3:col-sm-3 col-xs-6</div>
<div class="col-sm-3 col-xs-6" style="background-color: green">div4:col-sm-3 col-xs-6</div>
</div>

上述代码在超小型设备中并没有显示出我们想要的每行两个div的效果。这是因为所有的col-样式都是左浮动的,第三个div开始换行的时候,由于第一个div高度过高,所以第三个就在右边紧挨着显示了。

为了解决这个问题,就要用到clearfix样式。

源码中clearfix如下:

.clearfix:before,
.clearfix:after{
display: table;
content: " ";
}
.clearfix:after{
clear:both;
}

利用clearfix清除浮动后,再添加一个visible-xs样式,使得只有在超小型屏幕中才有这种效果。

    <div class="row">
<div class="col-sm-3 col-xs-6" style="background-color: red">div1:col-sm-3 col-xs-6 div1:col-sm-3 col-xs-6 div1:col-sm-3 col-xs-6</div>
<div class="col-sm-3 col-xs-6" style="background-color: red">div2:col-sm-3 col-xs-6</div>
<div class="clearfix visible-xs">清除浮动,设置额外的小设备可见</div>
<div class="col-sm-3 col-xs-6" style="background-color: green">div3:col-sm-3 col-xs-6</div>
<div class="col-sm-3 col-xs-6" style="background-color: green">div4:col-sm-3 col-xs-6</div>
</div>

Bootstrap 提供了一些辅助类,以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备,实现内容对设备的显示和隐藏。

需要谨慎使用这些工具,避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换。

《深入理解Bootstrap》读书笔记(一)