Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。由 Twitter 的 Mark Otto 和 Jacob Thornton 合作开发的一套HTML、CSS和JS框架。Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。用过HTML5和CSS3的人都知道，现在一些高大上的网站都少不了html5和css3。而Bootstrap正式基于这些设计出来的，它为我们封装好了现成的CSS样式合集。供咱们直接引用。
初次接触，大家可以把它理解为一推css样式合集即可。
Bootstrap 内置样式非常漂亮，而且够用。与其把网站搞得花里胡哨，不如一切从简。Bootstrap 在 reset 浏览器样式之余，又添加了类 Twitter 的页面元素，咱们要做的只是使用，肆无忌惮地、放心地用，不用琢磨这个行高、计算那个宽度、让不小心忘记定义的页面元素尴尬地显示在页面上。因为这些Twitter 已经为咱们考虑设计好了，
而且出自 Twitter 之手，毕竟经受了亿万用户的考验，外加 Twitter 强大的设计团队的支持，更让这套框架显得与众不同。
当然Bootstrap的好处不止如此，不然Bootstrap也不会一经发布，就迅速红遍大江南北。
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
最主要的一点原因，它不仅好，而且是开源的。
（关于响应式设计这块是咱们web开发者将来所必所面对的，因为随着各种移动设备的不断发展，手机平板的盛行。这些移动设备大有成为主流之势。所以咱们必须要跟上潮流，搞好PC网站的同时也必须要考虑让网站适应其他终端。 ）
这一部分主要说明一下Bootstrap的环境安装，文件结构，并且通过一个demo演示如何使用Bootstrap。
首先下载Bootstrap的最新版本： http://v3.bootcss.com/getting-started/#download
Bootstrap 提供了两种形式的压缩包，在下载下来的压缩包内可以看到以下目录和文件，这些文件按照类别放到了不同的目录内，并且提供了压缩与未压缩两种版本。
下载压缩包之后，将其解压缩到任意目录即可看到以下（压缩版的）目录结构：
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── 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
└── glyphicons-halflings-regular.woff2
上面展示的就是 Bootstrap 的基本文件结构：这里提供了编译好的 CSS 和 JS (bootstrap.) 文件，还有经过压缩的 CSS 和 JS (bootstrap.min.) 文件。同时还提供了 CSS 源码映射表(bootstrap.*.map) ，可以在某些浏览器的开发工具中使用。同时还包含了来自 Glyphicons 的图标字体，在附带的 Bootstrap 主题中使用到了这些图标。
关于压缩版和未经压缩版，使用的时候引用其中一个即可。
Demo
下面是使用了Bootstrap的html代码，给按钮添加了一些Bootstrap样式。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 按钮选项</title>
<!-- 添加对Bootstrap的引用 -->
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>
</body>
</html>
演示效果：
可以看到上面的html代码中没有写任何其他的css代码，完全是引用Bootstrap的按钮样式。其中关键代码部分： class=”btn btn-default” btn：继承圆角灰色按钮的默认外观。 btn-default是默认/标准按钮的样式。 要想更换其他的样式就更好其他的类即可，比如btn-danger 是危险按钮。这些样式都在bootstrap.min.css文件中写好的一些样式，大家可以打开文件浏览一下。
就这样在不知不觉中就完成了对Bootstrap的使用，其他控件也都是不同的一些class。在使用的时候注意经常查看官方文档，收获会很多。
另外，在引用Bootstrap的时候还需要特别注意一点：那就是jquery.min.js和bootstrap.min.js文件的引用顺序，
因为Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 必须在 Bootstrap 之前引入。
关于Bootstrap的介绍先说这么多，我也是第一次接触到这个框架。但是通过这一个月的学习和使用情况来看，这套框架的确是有许许多多的优点，上手快、大大提高网页前段的设计效率、和质量等等。能够帮助我们以最短的时间搭建出一个高大上的网站。
后续会推出一些在项目具体使用过程中所遇问题的博客，敬请期待。
原文地址：http://blog.csdn.net/u010028869/article/details/43838049
