这个视频我们先来看一下基于 Bootstrap 的项目要用到的基本的 HTML 文档的结构。先在项目的目录下面新建一个 html 文档 ... 命名为 index.html ...

如果为 Brackets 编辑器安装了 emmet 插件的话，可以这样去创建一个基本的 html 文档的结构 ... 输入一个 ! 号，再按一下 tab 键 ...

给我们创建的是一个 html 5 的文档结构，doctype 是文档的类型 ，html 表示这是一个 html 类型的文档 ... 在 html 5 的标准里面，可以使用这样的简单的文档声明。

在 html 标签里面的这个 lang 属性，表示的是这个文档里面使用的语言 ... en 表示英文，如果文档里面用的是简体中文，可以把它改成 zh-hans ... 如果是繁体中文，它的值应该是 zh-hant ...

下面的这个 meta 标签，设置了这个文档里面的字符的编码格式用的是 UTF-8 ...

再修改下 title，页面的标题 ... Bootstrap - 文档的基本结构

Viewport

Bootstrap 3 是一款移动优先的前端架构，也就是首先考虑的是在移动设备上应用的样式，然后才是桌面设备 ... 这就要求页面必须要是响应式的，所以，我们需要再添加一个 viewport 的 meta 标签 ... 关于这个标签的详细的介绍，你可以参考宁皓网的 响应式网页设计 这个课程。

Brackets 编辑器的 emmet 插件，有一个快捷方式可以插入这个标签 ... 输入 meta:vp ，再按一下 tab 键 ...

这个 meta 标签的 name 属性是 viewport ，在 content 属性里面，指定了具体的行为，Bootstrap 只要求使用这里面的基本的两个，一个是 width=device-width ，宽度等于设备的宽度 ... 还有 initial-scale=1.0 ，初始的缩放级别是 1 倍。

其它的都是可选的，比如 user-scalable=no，如果你不想让用户在移动设备上缩放你的页面，可以加上它。后面的 maximum-scale 还有 minimum-scale 设备了页面的最大还有最小的缩放的级别。

如果你不在乎用户是否能不能缩放你的页面，可以把这几个设置去掉。只留下 widh=device-width，还有 initial-scale=1.0 。

compat

下面，我们再去为 IE 浏览器添加一个 meta 标签。同样 emmet 插件提供了一个简写形式 ... meta:compat ...

content 里面，设置成 IE=edge ...

<meta http-equiv="X-UA-Compatible" content="IE=edge">

这行代码的作用就是告诉 IE 浏览器用最新的引擎去渲染这个页面。

样式表

接下面再去把 Bootstrap 的样式表链接到页面上 ... 输入一个 link ... 按一下回车键 ... 设置一下样式表的地址 ... 是在 lib 下面的 bootstrap 里面的 css 这个目录下面的 bootstrap.min.css ... 这个样式表是编译好的并且压缩之后的一个 Bootstrap 样式表。里面包含了所有 Bootstrap 架构需要的样式。比如网格系统的样式，按钮的样式，表格，表单的样式等等。

自定义样式

除了要用到 Bootstrap 架构里的样式，我们还需要去添加点自己的样式，这些样式可以放在一个样式表 ... 在这里，先去新建一个目录 ... 命名为 css ，在这个目录下面，新建一个样式表 ... 命名为 style.css ...

回到 html 文档 ... 把这个自定义的样式表也链接到页面上 ...

脚本

Bootstrap 还包含了一些 JavaScript 插件，可以为页面添加一些交互的功能。 在 body 结束的标签的上面，可以去把它嵌入到页面上。 首先要嵌入的是 jQuery ，因为 Bootstrap 的 JavaScript 插件需要用到它 ..

script:src ... jQuery 是在 lib 这个目录的下面 ...

另起一行。再去链接 Bootstrap 的 JavaScript 插件。它是在 lib 下面的 bootstrap ，js 这个目录里面，就是这个 bootstrap.min.js ，它是压缩之后的版本 ...

总结

现在，我们就准备好了 Bootstrap 需要的基本的 HTML 文档的结构 。在后面视频里要做的所有的练习，都可以基于这个文档的结构 ...