文章导读：

随着CSS3和HTML5的流行，我们的WEB页面不仅需要更人性化的设计理念，而且需要更酷的页面特效和用户体验。作为开发者，我们需要了解一些宝贵的CSS  UI开源框架资源，它们可以帮助我们更快更好地实现一些现代化的界面，包括一些移动设备的网页界面风格设计。

接下来就是要详解Bootstrap框架：首先，我们要知道为什么使用框架的原理。CSS框架是一系列CSS文件的集合体，包含了基本的元素重置，页面排版，网络布局，表单样式，通用规则等代码块。使用CSS框架，可以简化工作，提高工作效率。

形态：

目前使用较广的是版本2和3，其中2的最新版本的是2.3.2，3的最新版本是3.3.7。

在2017年8月下旬，Bootstrap四周岁之际，Bootstrap团队发布了Bootstrap 4 alpha版，4的最主要变化包括以下方面：

从 Less 迁移到 Sass

改进网格系统

缺省弹性框支持

Dropped wells, thumbnails, and panels for cards

合并所有 HTML resets 到一个新的模块中：Reboot

全新自定义选项

不再支持 IE8

重写所有的 JavaScript 插件

改进工具提示和 popovers 的自动定位

改进文档

其他大量改进

1、什么是bootstrap？------->>前端最流行的UI库

Bootstrap，来自Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

2、我们为什么要使用Bootstrap框架，而不使用其他CSS框架？

移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。

浏览器支持：    所有的主流浏览器都支持 Bootstrap。

容易上手：        只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。

响应式设计：     Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

它为开发人员创建接口提供了一个简洁统一的解决方案。

它包含了功能强大的内置组件，易于定制。

它还提供了基于 Web 的定制。

它是开源的。

3、Bootstrap包的内容

3.1、基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。

-------------->>>Bootstrap 基本结构部分详细讲解。

3.2、CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。

-------------->>>这将在Bootstrap CSS部分详细讲解。

3.3、组件：Bootstrap 包含了十几个可重用的组件，用于下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等。根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。

-------------->>>这将在布局组件部分详细讲解。

3.4、JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。

-------------->>>这将在Bootstrap 插件部分详细讲解。

3.5、定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

4、我们看下使用Bootstrap的利弊：

优点：

以前手写的一些框架东西，都写入一个方法里面，直接引用（因为在开发中，经常会遇到这样的情况，比如一个轮播特效我们要写四遍，每个人样式不一样）

a) 提高开发效率。

b) 规范名称定义，便于维护。

c) 规范项目开发流程

d)css代码更清晰、简单。html代码更合理。

e) 大规模项目中可以减少用户下载

 缺点：

a) 学习成本提高。你需要了解整个框架，需要阅读框架的文档。

b)css框架对于一个小项目等页面来说很臃肿。框架中可能有大部分你用不到的代码。

c)可能会无法帮助你的技术提高。太依赖框架，以至于很难排除bug。包括框架中本身就带的bug。

d) 选择自己需要的框架与开发框架都很痛苦。写到后面发现越来越不灵活，越来越臃肿。

举个简单的例子：（走一下基本流程）

1、在js创建两个文件夹，app代表自己写的样式，lib代表引入的样式

关于引用：

---------------->>>在后面的学习中，先引用jQuery,再引用bootstrap，不然出错

ps：下面的例子很明显实在官网下载的样式，我们引入过来，这时候你在写link的时候，就会有提示

ps：我想告诉大家的是当我们引入bootscript的时候，我们在布局页面的时候，像一些框架的div命名方面，已经写好了，不信的话我们在后面接着测试

2、利用内置的div标签，看一看简单的效果怎么样

在网页上可以看见，这有个特点，page-header是居中的，不管怎么缩小，都保持页面的居中效果

实际上，是标签container的问题，它默认的是布满全屏的80%

3、换个标签看一看效果怎么样

布满全屏标签：container-fluid

ps：fluid  不固定的

注意的是，我们是可以通过cdn进行在线访问的，效果是一样的。在此不再进行测试，效果是一摸一样