杭州网站建设
本内容完全由佚站互联成员原创并且免费提供交流学习,如有转载,请注明出处。

如果你是一名web前端开发工程师或者网页设计师,那么肯定对Bootstrap这个框架早有耳闻,甚至一些web后端工程师也会常常借助Bootstrap的力量来构筑自己心目中理想的web应用。
而在去年年底推出的Bootstrap3更是追随了响应式布局扁平化设计的web开发与设计潮流,让我们感受到了它所带来的无穷魅力。
我们会通过接下来一系列的Bootstrap教程,让Bootstrap初学者们一步步掌握Bootstrap的使用方式,在本次教程中,我们将会讲解,如何在你的项目中引入Bootstrap方法,当然,为了与国际接轨,我们还是以Bootstrap3为例,一步步展开。

官网下载压缩包

完整压缩包可以到Bootstrap官网下载,或者直接到我们的文章结尾处下载,下载解压缩以后我们会获得如下的文件目录:
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff
从这个目录结构我们可以看到css、js文件以及fonts文件都已经包含进来了,将这个文件目录放入你的项目ui文件夹下。

在HTML文件中引入

为了符合搜索引擎优化规则,我们引入最核心的压缩文件即可,其中包括bootstrap.min.css、bootstrap-theme.min.css以及bootstrap.min.js。

bootstrap.min.css文件中涵盖了所有Bootstrap的核心样式,包括按钮、导航栏、布局等等元素。

bootstrap-theme.min.css文件包含所有Bootstrap2的样式,如果你想在Bootstrap3的框架中使用Bootstra2的样式,那么就可以将该文件在bootstrap.min.css之后引入,从而覆盖前者的扁平化样式。

bootstrap.min.js文件中包含了所有Bootstrap3中的js交互以及逻辑代码,必须引入。

所以我们可以在项目的公用头文件模块调用如下代码: <!-- 引入已经压缩的css文件 --><linkrel="stylesheet"href=“/ui/css/bootstrap.min.css"><!-- 如果你想采用Bootstrap2的样式,那么引入该压缩css文件 --><linkrel="stylesheet"href=“/ui/css/bootstrap-theme.min.css"><!-- 引入已经压缩的js文件 --><script src=“/ui/js/bootstrap.min.js"></script>在这之后就可以在你的项目中调用对应的Bootstrap样式以及JS模块了。

注意点补充

值得注意的是,如果你先前使用过Bootstrap2,就会发现Bootstrap3的压缩包里缺少了bootstrap-responsive.css文件以及增加了bootstrap-theme.min.cs文件。
后者的作用我们在之前已经解释了,前者是在Bootstrap2中起到一个实现响应式技术的作用,而在Bootstrap3中,将其整合到了Bootstrap.min.css文件中,减小文件数量与其大小,这正是网站优化非常重要的一点。
这篇引入Bootstrap方法入门教程先写到这,之后我们会陆续推出一系列Bootstrap教程文章,有兴趣的朋友可以持续关注我们。

网盘下载

佚站互联 YEAHZAN,杭州网站建设 创新团队。本文版权所有,转载时请注明出处。

对此文章有疑问?可以留言提问,或者通过 在线联系 我们来获得帮助。