《Bootstrap开发精解:原理、技术、工具及最佳实践》一2.1 在HTML文件中包含Bootstrap-阿里云开发者社区

开发者社区> 华章出版社> 正文
登录阅读全文

《Bootstrap开发精解:原理、技术、工具及最佳实践》一2.1 在HTML文件中包含Bootstrap

简介:

本节书摘来自华章出版社《Bootstrap开发精解:原理、技术、工具及最佳实践》一书中的第2章,第2.1节,作者[美] 亚拉文·谢诺伊(Aravind Shenoy)乌尔里希·索松(Ulrich Sossou),更多章节内容可以访问云栖社区“华章计算机”公众号查看

2.1 在HTML文件中包含Bootstrap

首先,我们到官方网站(http://getbootstrap.com/)下载Bootstrap,并将它包含在自己的HTML文件中,暂时不需要对它进行定制。
访问网站后,请单击Download Bootstrap(下载Bootstrap)按钮(如图2-1所示),文件将会以ZIP格式下载。这个ZIP文件包含了Bootstrap CSS、JavaScript和字体文件,目录结构如下所示:
image

请解压Bootstrap.zip文件并将其中的内容复制到项目的目录中,下一步就是在HTML文件中包含CSS和JavaScript文件。
我们看看如果要在HTML文件中使用Bootstrap,文件的结构应该是什么样的。
image

这段代码执行后的输出结果如图2-2所示。

image

我们来讨论一下这段代码,弄清楚它是如何工作的。
在上面的示例代码中,在

部分,Bootstrap CSS被链接到这个HTML文件中。在Bootstrap的CSS后面紧跟着的是一个自定义的CSS文件,该文件可以为我们覆盖Bootstrap的样式。从中还可以看到,我们使用了标签。当网页在本地(通过磁盘的文件系统)打开的时候,text/html部分会告诉网页浏览器该文档属于哪种类型,让浏览器知道如何进行解析,而charset=UTF-8这个值则告诉网页浏览器应该使用哪种字符编码显示网页上的字符,这样浏览器就不会使用平台的默认编码。接着,我们又在部分链接了jQuery和JavaScript文件。此外,我们还加上了HTML shiv元素的链接,以及对respond.js文件的链接,从而对IE和媒体查询提供支持。respond.js提供了一个便捷轻量的脚本,使那些不支持CSS3媒体查询的浏览器(特别是IE6~IE8)支持响应式网页设计。
仔细查看前面的代码,可以看到我们使用了Bootstrap的压缩版本,即bootstrap.min.js和bootstrap.min.css,来减小文件大小,使得网站的加载速度更快。你也可以根据自己的喜好,先在开发阶段使用完整的版本,然后在试运行时使用压缩的版本。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: