本文共 1781 字，大约阅读时间需要 5 分钟。
参考：
bootstrap是基于jQuery的前端CSS框架 预定于好了各种CSS类 相当于API接口，直接调用即可使用css样式，方便前端开发。
这个相信大部分的前端框架都可以搞定 但是Bootstrap还可以让你轻松创建响应式设计，这什么概念？
意思就是 不同设备终端如 PC,手机,平板都可以完美显示页面，而不会因为你设备的原因造成显示不全，需要拖动滑动按钮来查看其他部分 。
为什么使用bootstrap？
它的优点是 自适应大小，响应功能 自动调节自身来适用你的设备，是不是很棒。
不仅如此，bootstrap还是
移动优先，是核心框架的一部分而且浏
览器兼容性:Bootstrap兼容所有现代浏览器（Chrome，Firefox，Internet Explorer，Safari和Opera）
知道了这么多bootstrap的优点，是不是觉得还是有必要学习一波。
如何使用bootstrap？
两个方法：
-
下载到本地
然后引用就行 具体操作下面会介绍
可以看到有三个供下载 第一个是已经预编译好的 css模板直接使用到任何 web 项目中
第二个是源码 可以根据自己需求定制css模板
源码中
dist/目录包含了上面所说的预编译 Bootstrap 包内的所有文件。docs/包含了所有文档的源码文件 -
使用 BootCDN 提供的免费 CDN 加速服务
使用Bootstrap CDN的一个优点： 许多用户在访问其他站点时已经从MaxCDN下载了Bootstrap。因此，它会在访问您的网站时从缓存中加载，从而加快加载速度。此外，大多数CDN将确保一旦用户向其请求文件，它将从离它们最近的服务器提供，这也导致更快的加载时间。
注意：因为bootstrap是基于jQuery的框架, 插件全部依赖 jQuery,所以引用bootstrap的js时候 需要先引用jquery的js一般使用压缩版 意思就是带min的文件
bootstrap.min.* 等
创建一个简单web页面
第一步.bootstrap是使用html5的
所以需要引用html5文档
在开头就指定了语言和编码格式
第二步：回到开头提到的 移动优先，旨在对移动设备做出响应就需要在meta标签中添加标记
该width=device-width部分设置页面的宽度以跟随设备的屏幕宽度（这取决于设备）。
initial-scale=1浏览器首次加载页面时，该部分设置初始缩放级别,确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
那如果 我想禁止缩放 能做？别说，还真可以
viewport meta标签添加user-scalable=no可以禁用其缩放功能
通常情况下，maximum-scale=1.0与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕
第三步：容器
Bootstrap还需要一个包含元素来包装网站内容。
有两个容器类可供选择：
- 的
.container类提供了一个响应固定的宽度容器 意思就是随着窗体的改变 网站内容margion大小跟着改变 - 的
.container-fluid类提供了一个全宽度的容器，跨越视口的整个宽度 没有margion
注意：容器不可嵌套（您不能将容器放在另一个容器中）。
是不是还是没懂什么是容器？ 参考
根据上面三步就可以构造一个简单web页面
Hello World My First Bootstrap Page
This is some text.
注意点：
X-UA-Compatible属性不懂的话可以参考
可以直接使用CDN而不用本地下载的bootstrap文件
class=”container”使用了容器包装网站内容，但是容器不可嵌套（您不能将容器放在另一个容器中）
基本的bootstrap搭建知识大致如上，后续还会了解更多以及运用bootstrap各 种元素来搭建一个完整的网站 ，跟着我一起学习吧，新手一个，如有错误， 欢迎指出，一起进步。