Bootstrap概述

一，简介
Bootstrap是基于HTML,CSS,Javascript开发的简洁，直观，强悍的前端开发框架，使得web开发更加的快捷。

二，特性

1. 构成
   a，基本结构：bootstrap提供一个带有网格系统，链接样式，背景的基本栅栏结构
   b，CSS：含有一个优秀的栅栏布局和全局CSS样式
   c，组件：bootstrap包含了丰富的组件库，里面涵盖了web开发常见的几十种组件
   d，Javascript插件：bootstrap包含了十几个自定义的javascript插件
   e，定制：可以进行组件和变量之间的定制升级，从而得到自己想要的版本，这样可以极大提高开发的灵活性。

2. 功能
   响应式，开发快捷，组件丰富，简单灵活

   响应式web开发是让用户通过不同尺寸的浏览器获得良好是觉得一种方法。（兼容不同的终端）
   

三，响应式开发流程

1. 将bootstrapt文件拷贝到项目中
2. 添加meta标签
3. 引用bootstrapt.css文件

四，响应式布局结构
在Bootstrapt中最重要的属性就是viewport,这个属性可以控制网页在不同终端显示的效果。
viewport重要属性：
width：宽度
initial-scale:设置页面的初始缩放值，为一个浮点数
minimum-scale:允许用户设置的最小缩放值
maximum-scale:允许用户设置的最大缩放值
height：高度
user-scalable：是否允许用户进行缩放（yes 或者 no）

	以上属性都是通过<meta>标签来设置的，例如：
	<meta name="viewport" content="width=device-width,inital-scale=1">

五，设计响应式网站

	终端的页面宽度：
		pc端：1280px,1440px,1920px......
		ipad:768px,834px,1024px......
		移动端:320px,375px,414px......

实现响应式布局还会用到CSS的media媒体查询，media媒体查询可以让我们根据设备显示器的特性（如视口宽度，屏幕比例，设备方向）为其设定CSS样式。media媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成，在media媒体查询中，可用于检测的媒体特性有width，height和color等。使用media媒体查询可以在不改变页面内容的情况下，为特定输出设备定制显示效果。

media媒体查询的方法：
1.作为css外链引入
<link rel="stylesheet media="screen and (min-width:600px)" href="style.css" type="text/css" />
2.直接在css中使用
@media screen' and (min-width-width:600px) and (max-width:900px){css属性：css属性值}

六，栅格化布局
栅格化布局实际上就是网格（使用栅格化布局之后，页面是行和列组合的）

容器：”行（row）“必须包含在”。container（固定宽度：不会自动占满整行）“或”.container-fluid(宽度：自动占满整行）“中，一边为其赋予合适的排列（alignment）和内补（padding）。
rem：实际上是设置列的高度的属性，rem的值是整数，代表的高度是rem值*字体像素的大小

七，水平布局和垂直布局
水平布局：justify-content-类型

justify-content-start:起始位置对齐
justify-content-center：居中对齐
justify-content-end：结束位置对齐
justify-content-around：两边等间距分散对齐
justify-content-between：两边不留间距分散对齐

垂直布局：align-items-类型（类型：start，center，end）

混合布局：align-self-类型

八，栅格排序和偏移
排序：order-数值（根据数值的大小熊小到大排序）
偏移：offset-数字