一、Bootstrap 介绍与环境配置：

Bootstrap 是一个基于HTML、CSS、JavaScript 的简洁、直观、功能强大的前端开发框架，可使Web开发更加快捷。

1、Bootstrap 简介

Bootstrap 框架包含如下内容:

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

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

   组件:Bootstrap包含了十几个可重用的组件，用于创建图像、下拉菜单导航、警告框、弹出框等。

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

   随着移动设备的普及，如何让用户通过移动设备浏览网站并获得良好的视觉效果，已经是一个不可避免的问题了。Bootstrap的响应式Web设计能够自适应于台式计算机、平板电脑和手机。
Bootstrap 框架目前使用较广的是版本2、3和4,其中2的最新版本是 2.3.23 的最新版本是3.3.7，4的最新版本是4.3.0。在2018年1月下旬，Bootstram团队发布了 Bootstrap4 正式版。本章使用的 Bootstrap 框架版本为常用的 3.3.7。

2.Bootstrap 环境配置

可以在 Bootstrap 中文网下载 Bootstrap 框架的 3.3.7 版本：

Bootstrap 提供了两种形式的压缩包。
  用于生产环境的预编译版是编译并压缩后的CSS、JavaScript和字体文件，不包含文档和源码文件，可以直接用于生产环境。下载后解压的目录结构见图 

图展示的就是Bootstrap的基本文件结构。Bootstrap框架提供了编译好的CSS和JavaScript(bootstrap.)文件，还有经过压缩的CSS和JavaScriptbootstrap.min.)文件;还提供了CSS源码射表(bootstrap.*.map)，可以在某些浏览器的开发工具中使用;同时还包含了来自Glyphicons的图标字体，在附带的 Bootstrap 主题中使用到了这些图标。

2.实施：

  创建一个 Wcb项目目录,将下载的 Bootstrap 预编译版压缩包解压后的 cssjs和fonts三个目录复制到项目目录下。

  在项目目录下新建一个index.htm! 文件，按照下面的要求配置成使用Bootstrap 架的本 HTML 模板。
①Bootstrap 需要使用标准的 html5 文档结构，见图：

②)Boolsrap 是以第2章介绍的jQuery 为基础的,在模板的 body 底部中也要引入对应的 jQuery:

③ 在文档中需要加入对正 浏览器版本的检查，如果是正9以下的浏览器需要在 head 部分引入其他的两个,js 文件以便兼容:

④ bootstrap.min.css 是全局的样式表文件，将它添加到文档的 head 部分:

⑤ bootstrap.minjs是脚本文件，也将它添加到文档的 body 底部

下面是完整的 index.html 文档源码：

二、Bootstrap 框架解析：

  Bootstrap 自带以下特性:全局的CSS 设置、定义基本的HTML元素样式可扩展的 class，以及一个先进的栅格系统。Bootstrap 提供的响应式、移动设备优先的流式栅格系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多 12 列。

1.全局样式表

设置全局CSS样式;基本的HTML元素均可以通过class设置样式并得到增强效果;还有先进的栅格系统。
Bootstrap使用到的某些HTML元素和CSS属性需要将页面设置为HTMLS文档类型。在项目中的每个页面都要参照下面的格式进行设置。

Bootstrap 排版、超链接样式设置了基本的全局样式。分别如下所述：

为body 元素设置 background-color: #fff。
使用@font-family-base、@font-size-base 和@line-height-base 变量作为排版的基本参数。
  为所有超链接设置了基本颜色@link-coor，并且当链接处于:hover 状态时才添加下画线。这些样式都能在 scaffolding.less 文件中找到对应的源码。
  Bootstrap 需要为页面内容和栅格系统包裹一个.container容器，此处提侠了两个做此用处的类。注意，由于padding 等属性的原因，这两种容器类不能互相嵌套。
①).container 类用于固定宽度并支持响应式布局的容器：

②.container-fluid 类用于 100%宽度，占据全部视口(viewport)的容器：

2.栅格系统：

在平面设计中，栅格是一种由一系列用于组织内容的相交的直线(垂直的水平的)组成的结构(通常是二维的)，广泛应用于打印设计中的设计布局和大容结构。在网页设计中,它是一种用于快速创建一致的布局和有效地使用HTML和 CSS 的方法。

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列，见图：

栅格系统通过一系列包含内容的行和列来创建页面布局。下面列出了Bootstrap 栅格系统是如何工作的:
  行必须放置在.containerclass内，以便获得适当的对齐(Alignment)和
内边距(Padding)。
  使用行来创建列的水平组。
的全局样式。分别如下所述
长巨M
  内容应该放置在列内，且唯有列可以是行的直接子元素。
预定义的网格类，比如.row和.col-xs-4，可用于快速创建栅格布局。
  列通过内边距(Padding)来创建列内容之间的间隙。该内边距是通过.rows上的外边距(Margin)取负实现的，表示第一列和最后一列的行偏移。

  栅格系统是通过指定想要横跨的12个可用的列来创建的。例如，要创建3个相等的列，则使用3个.col-xs-4。
下面是 Bootstrap 网格的基本结构:

 

除此之外，Bootstrap 提供的响应式、移动设备优先的流式栅格系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多 12 列。这里就不举例说明了！

 三、 Bootstrap 组件：

Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等。

1.下拉菜单

下拉菜单是用于显示链接列表的可切换、有上下文的菜单，见图：
 

下拉菜单包含一个触发器和一个菜单，触发器用一个按钮button 实现，菜单使用类为 dropdown-menu的无序列表ul，它包含多个菜单项。触发器和菜单元素都要放在一个类为 dropdown 的 div 里.

为下拉菜单添加一条分隔线，用于将多个超链接分组。

下面是详细代码:

2.按钮组

通过按钮组容器把一组按钮放在同一行里，见图

3.导航和导航条

Bootstrap中的导航组件都依赖同一个.nav类，状态类也是共用的。改变修饰类可以改变样式。

(1)标签页

注意.nav-tabs 类依赖.nav 基类，见图：

(2)胶囊式标签页

HTML标记与标签页相同，但使用,nav-pills类，见图：

  胶囊是标签页，也是可以垂直方向堆叠排列的，只需添加.nav-stacked类即可，见图：

4.面包屑和分页：

(1)面包屑导航(Breadcrumbs)

 面包屑导航是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置，见图 ：

Bootstrap中的面包屑导航是一个简单的带有.breadcrumb class的无序列表分隔符会通过CSS(bootstrap.min.css)中下面所示的class 自动被添加:

(2)分页

为网站或应用提供带有展示页码的分页组件，可以使用简单的翻页组件，见图：

链接在不同情况下可以定制，可以给不能点击的链接添加.disabled 类、给当前页添加.active 类，见图：

分页组件一定制超链接：

5.标签与徽章：

(1)标签：

标签可用于计数、提示或显示页面上其他的标记，使用class.label来显示标签，见图：

标签：

用下面的任何一个类即可改变标签的外观，见图：

标签外观类型：

(2)徽章：

徽章用来给链接、导航等元素嵌套<spanclass="badge">元素，可以很醒目地展示新的或未读的信息条目，见图：

徽章：

以上为数据可视化Bootstrap的部分使用！