Bootstrap的安装和使用和jQuery差不多,可以进入官网下载页里去查看几种下载方式,为了方便起见,我们只推荐使用cdn和npm(或bower)两种方式,但是考虑到网络状况和对源码的阅读检查,先使用npm下载到本地,然后再去找到需要引用的文件是我们首推的方式。 再Win+R键后输入“cmd”或者“powershell”后进入到命令行模式,输入以下命令安装Bootstrap的第3版。 npm install -g bootstrap@3 或使用淘宝镜像安装: cnpm install -g bootstrap@3
使用npm下载完成之后的Bootstrap的目录大致如下:
而我们需要的是dist这个目录里面的东西
不过一般情况下我们都不太会去使用它的js文件,而只会使用它css相关的东西,我们来看看css和fonts里相关的东西。
<css目录内容>
<fonts目录内容>
对于css目录来讲,我们只需要boostrap.css这个文件。而boostrap.min.css是上线选择的版本,由于我们可能会涉及到后期定制,这两个版本可能都不是我们的最终上线版本。带.map的叫做“资源映射”文件,而其它带有theme字样的是主题文件,这些我们都不需要。
fonts目录里面这些文件都是“字体图标”文件,虽然文件比较多,但对同一个浏览器来讲只会去使用其中的一个文件,不同的浏览器支持的格式会有所差别,在这里我们就不用去深究了。
为了让项目最小化,并且要让项目的文件目录竞购更加容易管理,一般我们只需要单独将boostrap.css这个文件和整个fonts目录都放在我们项目中存放“第三方”文件的文件夹里(个人习惯将该文件夹命名为“plugin”),并且替换一下boostrap.css里的“../fonts/”为“./fonts/”即可(替换后前面会少一个点“.”表示相对目录为当前目录)
现在我们需要通过资源管理器或者任意的代码编辑器新建一个基本的项目结构:
在代码编辑器内展开的基本文件结构如图:
然后在我们的index.html文件中引用相关资源:
接下来我们只要打开Boostrap第三版的文档,点击导航“全局CSS样式”(可点击跳转),然后点击右侧导航中的“按钮”→“预定义样式”,然后点击代码右上角的“copy”按钮,回到编辑器标签内粘贴刚才复制的代码,然后运行该页面即可看到代码效果。
<最终效果>
如果在浏览器内看到这些按钮的样式生效了,那恭喜你,你对Bootstrap的引用已经成功了。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。