安装与配置

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

打开命令行工具,Windows 可以使用 Powershell ,Mac 用户可以打开终端 .. 进入到一个你想保存项目的地方 .. cd ~/desktop ..

创建一个目录 .. mkdir ninghao-bootstrap .. 再进入到这个目录的里面 .. 下面我们可以使用 git 去克隆一份 Bootstrap 的仓库 .. 输入 git clone .. 这里添加一个 -b 选项,指定一下要克隆的分支, 比如这里我们需要的是 v4-dev 这个分支 .. 也就是正在开发的第四个版本的 Bootstrap .. 后面加上 bootstrap 仓库的远程的地址 ..

git clone -b v4-dev https://github.com/twbs/bootstrap.git

完成以后,进入到 bootstrap 这个目录的下面 ... 再去安装一下需要的一些东西 .. 输入 npm install ... 再执行一下 bower install ..

然后我们可以监视 Bootstrap 这个项目里的文件的变化 .. 输入 grunt watch .. 这样如果你修改了 Bootstrap 项目里的一些文件,这个任务会自动重新为你编译一下 Bootstrap ,编译好的东西会放在 dist 这个目录的下面 ..

再用编辑器打开我们创建的 ninghao-bootstrap 这个目录 .. 新建一个 html 文件 ... 命名为 index.html ..

添加一个基本的 html 的模板 .. 注意这里有一个 viewport 的 meta 标签,它可以让页面在移动设备上正常显示 ..

这个 ie=edge 是专门为 IE 浏览器准备的一个标签,意思是告诉 IE 浏览器,使用你最新的技术去显示这个页面 ...

这里我们再去链接一下 bootstrap 的样式表 .. 输入 link .. 位置是在 bootstrap/dist/css/bootstrap.css ..

在这个 body 标签结束的位置上,再去把需要的 javaScript 链接过来 .. 一个是 jQuery .. 位置是在 bootstrap/bower_components/jquery/dist/jquery.min.js ..

另起一行 .. 再把链接 bootstrap 的 js 文字 .. 位置是 bootstrap/dist/js/bootstrap.js ... 现在我们就准备好了 Bootstrap 项目需要的东西,你可以在这个 html 文档里面去使用 Bootstrap 了。

下面我们再用 browser-sync 去创建一个服务器,然后监视几个文件的变化 .. 进放到 ninghao-bootstrap 这个目录的下面 .. browser-sync start --server 创建一个服务器 .. --no-notify ,不通过 .. 再用一个 --files 选项,设置一下要监视的文件 .. index.html .. 还有 bootstrap/dist/css/bootstrap.css ..

browser-sync start --server --no-notify --files 'index.html, bootstrap/dist/css/bootstrap.css'

现在,你可以在编辑器里编辑文档,保存以后,浏览器会自动更新变化 ...

安装与配置《 Bootstrap 4 新功能 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点