第一章 Bootstrap简介

一、Bootstrap简介

　　Bootstrap是基于 HTML、CSS、JAVASCRIPT 的前端框架，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。

版本

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

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

从 Less 迁移到 Sass
改进网格系统
缺省弹性框支持
Dropped wells, thumbnails, and panels for cards
合并所有 HTML resets 到一个新的模块中：Reboot
全新自定义选项
不再支持 IE8
重写所有的 JavaScript 插件
改进工具提示和 popovers 的自动定位
改进文档
其他大量改进

二、使用配置

　　中文官网：www.bootcss.com ，该网站包含Bootstrap的各个版本的在线文档、以及各种相关的插件

　　英文官网：https://getbootstrap.com/

　　在http://v3.bootcss.com/getting-started/中，可以下载Bootstrap，

下载压缩包之后，将其解压缩到任意目录即可看到以下目录结构：

bootstrap/

├── css/

│   ├── bootstrap.css

│   ├── bootstrap.min.css

│   ├── bootstrap-theme.css

│   └── bootstrap-theme.min.css

├── js/

│   ├── bootstrap.js

│   └── bootstrap.min.js

└── fonts/

    ├── glyphicons-halflings-regular.eot

    ├── glyphicons-halflings-regular.svg

    ├── glyphicons-halflings-regular.ttf

    └── glyphicons-halflings-regular.woff

这是最基本的Bootstrap组织形式：未压缩版的文件可以在任意web项目中直接使用。我们提供了压缩(bootstrap.min.*)与未压缩 (bootstrap.*)的CSS和JS文件。字体图标文件来自于Glyphicons。

包内容

基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
CSS：Bootstrap 自带以下特性：全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。
组件：Bootstrap 包含了十几个可重用的组件，其中包括以下组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等。
JavaScript 插件：Bootstrap包含了十几个自定义的jQuery 插件。其中包括：模式对话框、标签页、滚动条、弹出框等。
定制：您可以定制Bootstrap的组件、LESS 变量和jQuery 插件来得到您自己的版本。

使用要点

1.项目中配置bootstrap

　　引用jquery-1.9.1.js，bootstrap.min.js，bootstrap.css

2.IIS 添加mime类型 .woff

　　application/x-font-woff

　　注意：VS发布后确保bootstrap下的文件都有拷贝过去，如果没有，请手动拷贝，否则出现图标不显示等问题

代替方案：使用web.config配置

  <system.webServer>

    <staticContent>

      <remove fileExtension=".woff" />

      <remove fileExtension=".woff2" />

      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />

      <mimeMap fileExtension=".woff2" mimeType="application/font-woff" />

    </staticContent>

  </system.webServer>

3.插件推荐

　　树形插件：https://gist.github.com/clayzermk1/3317341#file-bootstrap-listtree-css

4.图标 Font Awesome

　　http://www.bootcss.com/p/font-awesome/

5. Visual Studio 和 bootstrap

　　在vs2013发布之后，创建mvc的项目自带了bootstrap库，然而版本库是.net Framework4.5以上，如果使用.NET 4.0 是不包含bootstrap的

参考文章：

https://baike.baidu.com/item/Bootstrap/8301528?fr=aladdin