想在项目里使用 Bootstrap，最简单的方法就是直接在项目的页面上链接 Bootstrap 样式表，Bootstrap 的 JavaScript 插件，还有插件依赖的 jQuery 跟 popper ...

一些组件的显示还有定位会用到 popper，比如下拉菜单，工具提示这些组件。

先打开命令行工具 .. 进入到某个地方 .. 比如我的桌面上 .. cd ~/desktop .. 创建一个目录 .. 名字可以是 ninghao-bootstrap-4 .. 进入到这个目录的下面 .. cd ninghao-bootstrap-4

再用编辑器打开这个目录 ..

新建一个 html 文档 .. 名字是 index.html .. 里面添加一个基本的 html 文档的结构 .. 修改一下文档的标题 .. Ninghao Bootstrap

在项目里使用 Bootstrap，我们得先把 Bootstrap 的样式链接到页面上 ... 这里我们直接使用在 CDN 上的 Bootstrap .. https://unpkg.com/bootstrap@4.0.0-beta.2/dist/css/bootstrap.css

这里我用的是 bootstrap 4 的 beta2 这个版本，以后发布正式版的 Bootstrap 以后，你可以修改一下这里用的 Bootstrap 的版本 ..

脚本

Bootstrap 里的交互功能需要用到 jQuery .. 所以可以先得在页面上嵌入一个 jQuery .. 我们可以把脚本放在 body 结束标签的上面 .. 也可以放在 head 里面 .. 这里我为了好看一点，把脚本都放在 head 标签里 .. https://unpkg.com/jquery@3.2.1/dist/jquery.js

Bootstrap 还需要用到一个 popper.js ... 再嵌入这个版本 .https://unpkg.com/popper.js@1.12.6/dist/umd/popper.js

然后我们再嵌入 Bootstrap 自带的脚本文件 ... https://unpkg.com/bootstrap@4.0.0-beta.2/dist/js/bootstrap.js

自定义

下面再去创建一个自定义的样式文件 .. 名字是 style.css .. 然后再创建一个自定义的脚本文件 .. 名字是 script.js..

在页面上再链接一下这个 style.css ...

然后再把 script.js 也嵌入到页面上 ...

注意嵌入脚本的时候这些脚本文件的顺序非常重要... 我们得先嵌入 jquery，然后是 popper ，接着才是 bootstrap 这个脚本，因为 bootstrap 里的脚本需要用到 jquery 还有 popper ..

最后我们再嵌入自定义的脚本文件 ...

本地服务器

现在我们就准备好了一个简单的 Bootstrap 项目 ... 在浏览器上打开项目下面的 index.html ，就可以去预览项目了 ..

为了更方便点我们可以再给项目创建一个本地的服务器，在浏览器上打开这个服务器的地址，编辑项目里的文件，可以自动刷新页面，预览对项目的修改 ..

回到命令行 ... 先创建一个 package.json 文件 .. 执行一下 yarn init -y ..

再安装一个工具 .. browser-sync .. yarn add browser-sync ..

我们可以使用这个工具去为项目创建本地服务器 ..

回到编辑器 .. 打开项目下面的 packge.json .. 里面可以先添加一个 scripts .. 它里面再添加一个 start .. 对应的值就是要执行的命令 .. 执行一下 . ./node_modules/.bin/browser-sync start --server --no-notify --files='index.html, *.css, *.js'

保存一下文件 .. 再回到命令行 .. 执行一下 yarn start .. 或者 npm start ..

这样会用我们为项目安装的 browser-sync 这个工具去创建一个本地服务器 ... 并且会自动在浏览器上打开服务器的地址 ..

下面我们就可以在项目下面的这个 index.html 文档里去练习使用 Bootstrap 这套框架了 .. 保存文件以后，会自动刷新页面 ..