打开项目里的 index.html 这个文档 .. 在这个文档里我们可以去练习使用 Bootstrap 里面的组件 .. 先去掉 body 标签里面的东西 ..

这些东西是我们在学习 Bootstrap 布局的时候添加的 ..

先添加一个包装，上面加上 component 还有 demo 这两个自定义的 css 类 .. 然后打开自定义的样式表 .. 去设置一下 component.demo 的样式 .. 可以添加一个内边距 .. 大小是 50 像素 ..

在这个 component demo 包装的里面，我们可以去学习使用 Bootstrap 的组件 ..

另外有些组件可能会有一些行为，配置使用这些行为要用一点 JavaScript ..

打开我们页面上的自定义的脚本 .. script.js ..

在这个自定义的脚本里面，可以先去监听一下页面的 ready 事件 .. 用 jQuery 找到 document .. 用一下 ready 这个方法 .. 监听一下页面的 ready 事件 ..

里面给它一个回调参数 .. 可以用一个箭头函数 ..

在这个函数的主体里面，我们可以去配置使用 Bootstrap 的组件 ..

编辑器

在我们的 Atom 编辑器上可以再去安装一个插件 .... 打开编辑器的设置 .. command + ; .. Install ... 搜索一下 bootstrap

然后去安装一下这个 atom-bootstrap4 .. 这个插件里面定义了一些跟 Bootstrap 框架相关的代码片断 ..

可以帮助我们去创建 Bootstrap 组件 ..

control + alt + command L ，刷新一下编辑器 ..

比如现在我需要一个简单的网格系统，输入 grid .. 按一下 tab .. 这样就会得到一个 Bootstrap 的网格布局 ...