BootStrap

如何使用BootStrap开发响应式网页？

一、简介

BootStrap是由twitter公司开发维护的前端UI框架，它提供了大量编写好的CSS样式，允许开发者结合一定HTML结构及JavaScript，快速编写功能完善的网页及常见交互效果。

（Bootstrap中文网）

二、使用步骤

１、引入：BootStrap提供的CSS代码

<link rel="stylesheet" href="./bootstrap-3.3.7/css/bootstrap.css">

２、调用类：使用BootStrap提供的样式

３、container：响应式布局版心类

三、BootStrap栅格系统

1、栅格化是指将整个网页的宽度分成若干等份，BootStrap3默认将网页分成12等份

	超小屏幕	小屏幕	中等屏幕	大屏幕
响应断点	<768px	>=768px	>=992px	>=1200px
别名	xs	sm	md	lg
类前缀	col-xs-*	col-sm-*	col-md-*	col-lg-*

２、.container是BootStrap中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度居中

３、.container-fluid同样是BootStrap中专门提供的类名，所有应用该类名的盒子，宽度均为100%

４、分别使用.row和.col类名定义栅格布局的行和列

⚠️container类自带间距15px；row类自带间距-15px

四、BootStrap---全局CSS样式美化标签

1、美化内容类：常用按钮、图片等

２、布局类：常用表单、辅助类等

五、BootStrap---组件

1、Glyphicons字体图标的使用步骤

• HTML页面引入BootStrap样式文件
• 准备字体文件（注意路径）
• 空标签调用对应类名：glyphicon；图标类

六、BootStrap---插件

如何使用BootStrap插件实现常见的交互效果？

1、引入BootStrap样式

２、引入js文件：jQuery.js + BootStrap.min.js

3、复制HTML结构，并适当调整结构或者内容

七、BootStrap---定制

1、在导航栏中找到定制

2、输入目标变量值

3、编译并下载，使用定制后的框架