引入bootstrap的方法

如果你是一名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文件中，减小文件数量与其大小，这正是网站优化非常重要的一点。