前 言
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap在JQuery的基础上进行了更为个性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。让前端开发更快速、简单。
基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
CSS：Bootstrap 自带以下特性：全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。
JavaScript 插件：Bootstrap包含了十几个自定义的jQuery 插件。可以直接包含所有的插件，也可以逐个包含这些插件。
定制：可以定制Bootstrap的组件、LESS 变量和jQuery 插件来得到自己的版本。
1、Bootstrap 基本模板
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <!--让浏览器使用最新的IE内核进行渲染页面--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--设置视口宽度等于当前设备宽度，默认缩放比为1--> <meta content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 101 Template</title> <!-- 导入Bootstrap核心CSS文件 --> <link href="https://www.jb51.net/css/bootstrap.css"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!-- ①<!--[if lt IE 9]>…… <![endif]- ->这一对标签用于检测当前浏览器的版本，lt表示小于，gt表示大写。所以这句话作用是，当浏览器版本低于IE9执行。 ②html5shiv：解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题。 ③respond.min:让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。 --> <!--[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> <script src="https://www.jb51.net/js/jquery-3.1.1.js"></script> <!-- 导入BootStrap的JS插件 ①如果不使用BootStrap提供的JS插件，则这个JS文件无需导入； ②BootStrap的JS插件功能依赖JQuery，因此这个JS必须在JQuery之后导入； --> <script src="https://www.jb51.net/js/bootstrap.min.js"></script> </body> </html>
拷贝并粘贴上面的 HTML 代码，这就是一个最简单的 Bootstrap 页面了。一定要注意，Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 必须在 Bootstrap 之前引入。
2、组件
Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件：
下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等。
2.1字体图标
bootstrap默认提供了二百多个图标。我们可以通过span标签来使用这些图标：
<h3>图标</h3> <span></span> <span></span> <span></span> <span></span>
让我们来看一下效果：
2.2按钮
<button></button>标签用于创建按钮，bootstrap提供了丰富的按钮样式。按钮除了有默认的大小外，bootstrap还提供三个参数来调整按钮的大小，分别是：btn-lg、btn-sm和btn-xs。
<h3>按钮</h3> <button type="button">按钮</button> <button type="button">primary</button> <button type="button">success</button> <button type="button">info</button> <button type="button">warning</button> <button type="button">danger</button> <h3>按钮尺寸</h3> <button type="button">按钮</button> <button type="button">primary</button> <button type="button">success</button> <button type="button">info</button> <h3>把图标显示在按钮里</h3> <button type="button"><span></span> 按钮</button>
效果：
2.3下拉菜单
下拉菜单是最常见的交互之一，bootstrap为我们提供了漂亮的样式。