Bootstrap是Twitter推出的一个用于前端开发的开源工具包，由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架，不用请UI设计师也能开发出中规中矩的网页，并且最重要的是支持html5、css3移动端自适应，现在很多所谓的三合一五合一网站是基于bootstrap搭建的。
我们来看一个简单的例子
<!DOCTYPE html><!-- html5格式 --> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签放在最前面，其他内容跟随其后！ --> <meta name="description" content="这是描述"> <title>这是标题</title> <!-- 新 Bootstrap 核心 CSS 文件 cdn加速 --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- 可选的Bootstrap主题文件（一般不用引入） --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> <!-- 导航栏 --> <nav class="navbar"> <div class="container"> </div> </nav> <!-- 主题内容 --> <div class="container"> </div> </body> </html>
笔记：
1.Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。
2.Bootstrap 不支持 IE 古老的兼容模式。为了让 IE 浏览器运行最新的渲染模式下，建议将此 <meta> 标签加入到你的页面中 IE=edge
3.Bootstrap 3 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。可选设置（viewport）设置 meta 属性为 user-scalable=no可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感 觉。
4.jquery用1.*版本，2.0版本不支持ie6/7/8
5.<nav>是bootstrap中内置的导航样式，pc端可以展示完整的一行，移动端会收缩到右上角的菜单menu中
6.内容主体div可以用container，有固定宽度并支持响应式布局的容器，container-fluid用于 100% 宽度