Bootstrap简述

栅格系统

栅格系统(Grid Systems)，即网格系统，它是一种清晰、工整的设计风格，用固定的格子进行网页布局。栅格系统最早应用于印刷媒体上，一个印刷版面上划分了若干个格子，非常方便排版。

后来，棚格系统被应用于网页布局中，使用响应式栅格系统进行页面布局时，可以让一个网页在不同大小的屏幕上，呈现出不同的结构。

例如~在小屏幕设备上有某些模块将按照不同的方式排列或者被隐藏

栅格系统的行和列

Bootstrap栅格系统是指将页面布局划分为等宽的列。随着屏幕或视口尺寸的增加，系统会自动分为1~12列。

• 栅格系统用于通过一系列的行（row)与列(column）的组合来创建页面布局。

• 开发者可以将内容放入这些创建好的布局中，然后通过列数的定义来模块化页面布局。

• 栅格系统页面的内容可以放入这些创建好的布局容器中，并且会根据父元素盒子（布局容器)尺寸的大小进行适当地调节，从而达到响应式页面布局的效果。

栅格系统的基本使用方式

1.Bootstrap棚格系统为不同屏幕宽度定义了不同的类,直接为元素添加类名即可。

2.行必须包含在布局容器中，以便为其赋予合适的排列和内补。

3.通过行可以在水平方向创建一组列并且只有列可以作为行的直接子元素。

4.行使用样式.row，列使用样式.col--，内容应当放置于列内，列大于12时，将会另起一行排列。

栅格系统的类前缀

栅格系统提供了基本的前缀，用于在不同宽度的屏幕中实现不同的排列方式，列的类名可以写多个，也就是可以同时设置.col-、.col-sm-、.col-md-、.co-/g-和.col-xl*类名。当同时使用这些类的时候，它会根据当前屏幕的大小来使相应的类生效，实现在不同屏幕下展示不同的页面结构。

	超小屏幕<576px	平板≥576px	桌面显示器≥768px	大桌面显示器≥992px	超大桌面显示器≥1200px
.container最大容器宽度	(自动)100%	540px	720px	960px	1140px
类前缀	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-

使用类前缀设置列的宽度

由于栅格系统就是默认将父元素分成12等份，所以可根据占据的份数来设置子元素的宽度，在设置列的宽度时，只需要在不同的类前缀后面加上栅格数量即可。

• col-栅格的数量(设置超小设备);

• col-sm-栅格的数量(设置平板);

• col-md-栅格的数量(设置桌面显示器);

• col-lg-栅格的数量(设置大桌面显示器);

• col-xl-栅格的数量(设置超大桌面显示器);

offset列偏移

栅格系统:使用.offset-md-类将列向右侧偏移

主要是通过使用offset-md-获取到当前元素并且增加了当前元素左侧的边距(margin）来实现的。

md可以使用sm、xl和lg等替代，分别表示在不同屏幕下设置列的偏移。

布局容器

容器是Bootstrap中最基本的布局元素，容器用于在其中容纳、填充一些内容，以及有时需要使内容居中。

在实现Bootstrap页面布局容器之前,需要了解设备屏幕的尺寸。

屏幕大小	常见宽度范围
超小屏幕	<576px
平板	≥576px
桌面显示器	≥768px
大桌面显示器	≥992px
超大桌面显示器	≥1200px

Bootstrap带有3个不同的容器，具体如下:

.container容器

它在每个响应断点处设置了一个max-width最大宽度，.container设置容器居中显示

.container-fluid容器

它在每个响应断点处设置布局容器的宽度为100%，.container-fluid类设置容器始终占据视口100%

.container-(breakpoint}容器

它在每个响应断点处设置布局容器的宽度为100%，直到达到指定的断点为止。

组件

组件是一个抽象的概念，是对数据和方法的简单封装。用面向对象思想来说，将一些符合某种规范的类组合在—起就构成了组件，通过组件可以为用户提供某些特定的功能。

组件是构成页面中独立结构单元，是对结构的抽象，它主要以页面结构形式存在，可复用性很强。组件的使用并不复杂，每个组件拥有自己的作用域，每个组件区域之间独立工作，并且互不影响。组件可以有自己的属性和方法。不同组件之间也具有基本的交互功能，能够根据业务逻辑来实现复杂的项目功能。

特点：

• 组件可以复用，提高开发效率

• 模块化

• 降低代码之间的耦合程度

• 代码更容易维护和管理

依赖文件

bootstrap组件依赖于Bootstrap框架，所以首先要引用bootstrap.min.css再引入jQuery文件，最后引入bootstrap.bundle.min.js，注意先后顺序，jQuery文件在bootstrap.bundle.min.js之前引入