Bootstrap框架的了解和使用（一）
前 言
Bootstrap
什么是 Bootstrap？Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的。它简洁灵活，使得 Web 开发更加快捷。
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。
| 一、Bootstrap特点 |
1、移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
2、浏览器支持：所有的主流浏览器都支持 Bootstrap。IE、火狐、欧朋、谷歌、Safari….
3、上手简单：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
4、响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
| 二、Bootstrap包含的内容 |
1、基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
2、CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。
3、组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。
4、JavaScript：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。
注意：想要自己自定需要的Bootstrap内容， Bootstrap支持定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
| 三、Bootstrap的使用和配置 |
1、Bootstrap的下载:
您可以从http://v3.bootcss.com/上下载 Bootstrap 的最新版本。当您点击这个链接时，您将看到如下所示的网页：
2、Bootstrap的配置
Bootstrap的使用和其他的插件导入方式是一样的。Bootstrap是用Link标签导入和一些相关设置。附上导入代码和解释。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <!--让浏览器使用最新的IE内核进行渲染页面--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--设置视口宽度等于设备宽度，默认缩放比为1--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 101 Template</title> <!-- 导入Bootstrap核心CSS文件 --> <link href="css/bootstrap.css" rel="stylesheet"> <!-- ①<!--[if lt IE 9]> ..... <![endif]- -> 这一对标签用于检测当前浏览器的版本，所以这句话的作用是，当浏览器版本低于IE9执行 ②html5shiv：解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题。 ③respond.min:让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。 --> <!--大于是：gt，小于是：lt--> <!--[if lt IE 9]> <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>你好，世界！</h1> <!-- 导入JQuery --> <script src="js/jquery-3.1.1.js"></script> <!--导入BootStrap的JS插件 ①如果不使用BootStrap提供的JS插件功能，则这个JS文件无需导入 ②BootStrap的JS插件功能依赖JQuery，因此这个JS必须在JQuery之后导入。 --> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
运行结果：
| 四、Bootstrap的CSS样式 |
CSS的样式在各个浏览器上的浏览效果会有一些差异，为了各个浏览器的一致性。Bootstrap框架重新定义了一些CSS样式和一些新增的标签样式，让使用这个框架的网页在各个浏览器能呈现统一的效果，更方便大家的使用。下面我就为大家带来一些常见的CSS样式和使用，方便大家了解