前端学习之Bootstrap入门 网格系统

Bootstrap官方文档 https://v3.bootcss.com/getting-started/#download
Bootstrap入门 https://www.runoob.com/bootstrap/bootstrap-tutorial.html

Bootstrap 包的内容

• 基本结构：Bootstrap提供了一个带有网格系统、链接样式、背景的基本结构
• CSS：Bootstrap自带一下特性 全局的CSS设置、定义基本的HTML元素样式、可扩展的class，以及一个先进的网格系统
• 组件：Bootstrap包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等
• JavaScript插件：Bootstrap包含了十几个自定义的jQuery插件。
• 定制：可以定制Bootstrap的组件、LESS变量和jQuery插件来得到自定义版本

基本的全局显示

Bootstrap使用​​body {margin: 0;}​​来移除body的边距。

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-szie: 14px;
  line-height: 1.428571429;
  color: #333333;
  background-color: #ffffff;
}

第一条规则设置body的默认字体样式为"Helvetica Neue", Helvetica, Arial, sans-serif。第二条规则设置文本的默认字体大小为14像素。第三条规则默认的行高度为1.428571429。第四条规则设置默认的文本颜色为 #333333。最后一条规则设置默认的背景颜色为白色。

Bootstrap 3的container class用于包裹页面上的内容，通过下面代码，将container的左右外边距(margin-right、margin-left)交由浏览器决定，由于内边距(padding)是固定宽度，默认情况下容器是不可嵌套的。

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}
.container:before,
.container:after {
  display: table;
  content: " ";
}

设置display为table，会创建一个匿名的table-cell和一个新的块格式化上下文。:before伪元素防止上边距崩塌，:after伪元素清除浮动。

网格系统

在平面设计中，网格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的结构（通常是二维的）。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中，它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的方法。Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行与列的组合来创建页面布局，内容就可以放入这些创建好的布局中。

Bootstrap网格的基本结构：

• “行row”必须包含在.container（固定宽度）或.container-fluid（100%宽度），通过**“行”在水平方向创建一组“列”。内容应当放置于“列”内，并且只有“列”可以作为“行”的直接子元素**。
• 类似.row和.col-xs-4这种预定义的类，可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。
• 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4来创建。如果一“行”中包含了的“列”大于12，多余的“列”所在的元素将被作为整体另起一行排列。
• 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何​​.col-md-*​​​栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖山各类。因此，在元素上应用任何​​.c0l-lg-*​​不存在，也影响大屏幕设备。
• 通过为“列(column)”设置padding属性，从而创建列与列之间的间隔。通过为.row元素设置负值margin从而抵消掉为.container元素设置的padding，也就间接为“行”所包含的“列”抵消了padding。

栅格类的使用

使用单一的一组​​.col-md-*​​栅格类，就可以创建一个基本的栅格系统，由于指定的是中等屏幕(>=992px)，在手机和平板设备上是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上才会变为水平排列。

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

由于没有指定col-xs-和col-sm， 在手机和平板设备上是堆叠在一起的（超小屏幕到小屏幕这一范围），如下图所示

在桌面（中等）屏幕设备上才会变为水平排列，就如同代码中指定的一样，各个div占不同大小的栅格。

如果不希望小屏幕设备上所有列都堆叠在一起，使用针对超小屏幕定义的类​​.col-xs-*​​

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

针对小屏幕下的代码可以看出，一“行”中包含了的“列”大于12，多余的“列”所在的元素将被作为整体另起一行排列。

通过使用针对平板设备的​​.col-sm-*​​类，对代码进行完善。

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

比较完善的举例：