Bootstrap 是一款简洁，强悍的前端开发框架

今天给大家介绍一款简洁、直观、强悍的前端开发框架Bootstrap，它是一款最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

本篇文章将从一下内容展开介绍：

Bootstrap介绍

版本以及如何下载

基本模板（如何使用）

布局容器

栅格系统

响应式栅格系统以及其他功能

响应式工具类

01

Bootstrap介绍

Bootstrap是由美国Twitter公司的设计师Mark Otto和Jacob Thornton合作共同基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目。

它最大的特点就是拥有自己定义的特殊类名，只要调用此类名就可以实现功能，也不会受到标签的影响。它是UI框架，具有自己的界面风格，可以预制样式，使界面统一。相对于其他插件来说功能强大，解决了单一功能的缺陷，它集成网页开发当中的常用插件（比如 轮播图，导航栏，弹出框等）。也是一款响应式布局框架，移动设备优先使用的Web项目。

02

版本以及如何下载

版本号

2.x 兼容IE 6 7 8

3.x 兼容IE 8 去适配移动端 偏向移动端 只是功能兼容 css3的属性不兼容

4.x 最近发布稳定版 市面上主流使用的版本3.3.7

下载：

03

基本模板

这上面已经写的很清楚了，但我还是要把一些重要的再说一遍

1. 它是基于jQuery的一个插件库并且版本号要高于1.9.1，所以要先引入 jQuery，再引入bootstrap.js 文件。

2. 三个meta标签必须要先引入，优先解析。

3.

这几句话的意思为，如果小于IE9就执行这两行执行的代码，大于IE9则不行。

4. 文档类型必须是html格式，中文简体的环境下才可运行。

04

布局容器

布局容器可分为两类：一类是响应式容器主要用于移动端，另一种则是流式容器。之前小编也已经说过bootstrap由自己独自的类名从而实现的功能，响应式容器是由类名.container实现的，而流式容器是由类名.container-fluid实现的。比如

05

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

响应式容器会默认有15px的内边距，而行也就是类名.row可以解决这个问题。

在这里要给大家介绍一下也就是现在常见的屏幕大小种类，在Bootstrap中用xs

来代表超小屏，sm代表小屏，md代表中屏，lg代表大屏，意思为只要是见到xs

就认为这是超小屏，sm是小屏。

图示为：

06

响应式栅格系统其他功能

1. 嵌套功能

图示为

2. 偏移 col-md-offset-4 往右偏移 几等份 使用的是margin会占空间的

偏移前：

偏移后：向右偏移三等份

3. 排序

col-md-push-9 往后推 left定位 不会占位

col-md-pull-3 往前拉 right定位 不会占位

排序后

07

响应式工具类

这里主要是由两个类名控制.visible-s s代表屏幕大小标识即xs, ms, md, lg

.visible-xs代表在超小屏显示。.hidden-ss也代表屏幕大小标识.hidden-xs即代表在超小屏小隐藏。