Boostrap初探 | Asuhe = Born in poverty, died of numbness

# Boostrap 简介

Boostrap 是一套基于 HTML、CSS 和 Javascript 的的响应式前端框架。简单来说就是一套预先定义好的 css 文件和 js 文件，当我们需要使用时在 html 页面中用 link 标签引入我们需要的文件，然后使用即可。

# Boostrap 的使用

Boostrap 的使用极其简单，我们只需要根据它定义好的类名，在我们要引入样式的标签上添加它给的类名就可以使用了。若默认样式不满足我们的需求，我们可以自己使用选择器更改对应属性。

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器，它提供了两个作此用处的类：container 类和 container-fluid 类，container-fluid 类一般用于移动端页面开发。这个.container 容器被预定好响应式样式，当我们定义这个类时，引入的 Boostrap 文件会对其进行一系列初始化操作。

# container 和 container-fluid 的区别

# container 类

响应式布局的容器固定宽度
大屏 (>=1200px) 宽度定为 1170px
中屏 (>=992px) 宽度定为 970px
小屏 (>=768px) 宽度定为 750px
超小屏 (100%)

# container-fluid 类

流式布局容器百分百宽度
占据全部视口（viewport）的容器

# 栅格系统

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

它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。

当我们使用栅格系统时都是通过使用一系列 row 和 column 来进行布局操作。例如携程的移动端页面

这种布局我们可以用 flex 布局，也可用栅格系统快速制作。

container 里页面已经被分为十二等份，而这个页面中我们可以很容易知道，先将页面份为三列，再在第二列与第三列中分为上下两行。栅格系统中我们 html 可以这样写

	<div class="row">
	//col-sm-4 即让我们三个盒子各自分到了四份空间
	<div class="col-sm-4 column1"></div>
	<div class="col-sm-4 column2"></div>
	<div class="col-sm-4 column3"></div>
	</div>

当我们需要进行行切分时，html 中可以这样写

	//row-cols-2 让我们的盒子再次按行切分为两行
	<div class="row">
	//col-sm-4 即让我们三个盒子各自分到了四份空间
	<div class="col-sm-4 column1"></div>
	<div class="col-sm-4 row-cols-2">
	<div class="col">Column</div>
	<div class="col">Column</div>
	</div>
	<div class="col-sm-4 row-cols-2">
	<div class="col">Column</div>
	<div class="col">Column</div>
	</div>
	</div>

如上我们在 row 盒子里可以得到一个 3 * 2 布局

前端