Bootstrap

一、起步

1起步

1.1概念

1.Bootstrap是Twitter开发的UI框架，快速的制作WEB页面，BootStrap中包含写好的样式，写好的js
2.Bootstrap依赖于jQuery
3.类似于Bootstrap这样的UI框架很多很多。。。。

	妹子UI的网址：https://amazeui.shopxo.net/getting-started/?_ver=2.x

1.2BootStrap的版本

2.x.x
3.x.x
4.x.x
BootStrap的网址：https://www.bootcss.com/

1.3目录结构

-css
--bootstrap.css
-js
--bootstrap.js
-fonts字体文件

二、全局样式

2.1栅格系统

把父元素分为12份，通过设置元素占多少份来决定宽度

1.row表示行，.col-*-*表示列：列一定嵌套在行内
2.如果一行放不下列元素，会自动换行
3.列元素还可以再去分列

1.row是行，把父元素分成了12份，col-- n的范围是（1-12）。
建议在写列之前套一个行 ，因为它用了浮动的原理，在row上做了清除浮动的样式。

2.如果大于12份，会自动换行

3.列元素可以在套列元素


4.想要文本之间有间隔可以再套一个div（为item设置一个内边距）

2.2列偏移和列排序

1.列偏移 类名 col--offset- 实现列元素向右偏移，原理：通过设置margin-left

效果图

效果图

2.列排序 类名 col--push/pull- 推：push 向右偏移 拉：pull 向左偏移
原理：通过定位实现

2.3响应式

响应式页面断点（阈值）：
768px;     
992px;
1200px;

1.实现响应式布局（对于不同的屏幕网页有不同的显示效果）

	超小屏幕	小屏幕	中等屏幕	大屏幕
视口宽度范围内	<768px	min-width:768px	min-width:992px	min-width:1200px
container宽度	100%	750px	970px	1170px
列的类名	col-xs-	col-sm-	col-md-	col-lg-

2.让视口的宽度等于移动端设备的宽度，用于做响应式布局。

3.移动优先：设置某种宽度屏幕下，元素所占的份数，较大宽度的情况也按照该设置。
如：设置col-md-6表示中等屏幕和大屏幕都是占6份，小屏幕和超小屏幕占领12份。

eg:不同的视口适配不同的份数

eg:移动优先

2.4表格

添加给table元素
1.基础类名：table
2.条纹效果：table-striped
3.边框效果: table-bordered
4.鼠标悬停效果 table-hover 
添加给tr或td或th
5.背景颜色设置
   active 灰色
   success 绿色
   info  蓝色
   warning 黄色
   danger 红色

1）基础table，效果

2）条纹效果：table-striped

3）边框效果: table-bordered

4）鼠标悬停效果 table-hover

5）颜色设置

2.5表单

1）基本样式
.form-group  类名
.form-control 类名用于输入框，textarea和select（让框和文字独占一行变成块级元素）
.checkbox   / .checkbox-inline    用于复选框
.radio  / .radio-inline    用于单选按钮
2）水平排列的表单
a.需要给form添加类form-horizontal,表单就内置栅格系统
b.form-group元素相当于行，里面的元素可以分占列多少份
c.label添加了类control-label

最原始的form表单
form-control

from-group

下拉选项


水平的表单

2.6按钮

1.基本类名
 .btn
 2.各种颜色的按钮
   .btn-default 白色
   .btn-primary 深蓝色
   .btn-success 绿色
   .btn-info   蓝色
   .btn-warning  黄色
   .btn-danger  红色
   .btn-link   超链接的样式
   3.任何一个元素设置了相关的类名，都会成为按钮的样式
   4.按钮的尺寸
   	.btn-lg    大按钮
   	默认是中等按钮
   	.btn-sm 小按钮
   	.btn-xs  超小按钮
   	5.块级的按钮
   	   .btn-block

2.7辅助类

   1.颜色设置
   		.text-muted	灰色
		.text-primary 深蓝色
		.text-success  绿色
		.text-info    蓝色
		.text-warning   黄色
		.text-danger  红色
	2.背景颜色
	.bg-primary
	.bg-success
	.bg-info
	.bg-warning
	.bg-danger

2.8响应式工具类

.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg

.visible-(xs/sm/md/lg-block/inline)-(block/inline)