第一章 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