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