Bootstrap(引入)环境安装

最新推荐文章于 2025-09-25 18:14:42 发布

原创最新推荐文章于 2025-09-25 18:14:42 发布 · 8.1k 阅读

14 ·

CC 4.0 BY-SA版权

BootStrap 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在HTML文件中引入Bootstrap框架，包括本地引入和通过CDN引入两种方式，并讲解了一个常见的初学者陷阱及其解决方法。

先你应该知道Bootstrap是一个前端框架，Bootstrap 让前端开发更快速、简单，简单的来说就是更加方便的布局web页面，不用开发者在一个一个块的去拼凑界面了。

既然bootStrap是一个前端框架，那么从这里就知道你应该在哪里使用它,就是在我们的html文件里面引入它,

这里有两种引入方式，

一，下载bootStrap到本地，从本地引入,

二，利用免费的CDN，你可以用BootStrap官网的免费CDN，或者其他的例如百度的静态资源库的 CDN 服务（简单的来说就是网址）

首先说第一种方式，百度BootStrap去官网下载

一般都提供了3种下载包，如下图

一般推荐下载第一种，用于生产环境的BootStrap包（预编译的 Bootstrap）

当您下载了 Bootstrap 的已编译的版本，解压缩 ZIP 文件，您将看到下面的文件/目录结构：

Bootstrap 源代码（如果您下载了 Bootstrap 源代码，那么文件结构将如下所示：）

，然后就是把下载的包复制到你的项目里，然后根据你的的路径引入就行

，引入的文件和从cdn引入的文件一样

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="本地路径/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="本地路径/jquery/1.11.3/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="本地路径/bootstrap/3.3.5/js/bootstrap.min.js"></script>

这里jquery文件是必须引入的，而且务必在bootstrap之前引入,

第二种方式，则更为简单了，使用CDN直接引入，你不懂CDN没关系，你就理解它是一个免费的服务器，而你要引入的文件放在这个服务器上，你直接用网址引用就行

</pre>这是BootStap官网提供的CDN</p><p style="text-align: left;"><span style="font-size:18px;">下面是其他的推荐的CDN</span></p><p style="text-align: left;"><span style="font-size:18px;"><img src="https://img-blog.youkuaiyun.com/20151229094724020?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /></span></p><p style="text-align: left;"><span style="font-size:18px;"></span><pre name="code" class="html"><!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">

<!-- 可选的Bootstrap主题文件（一般不使用） -->
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css"></script>

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

你都可以用

这样你的环境就好了，下面说一个小小的BUG，无论你是在官网学习，还是其他的网站学习BootStrap,你环境安装好之后它都会给你一个模板，叫你复制代码，就是一个简单的BootStrap页面了，如下图

你把代码全部copy,然后运行是对的，页面会出现你好“世界，而且和基本的html5页面的字体是不一样的，这就是BootStrap的样式了，但是如果你继续在body里面添加内容，或者你再复制一些BootStrap的示例代码，添加进来，你会发现并没有什么卵用，样式会乱了，那么这是什么问题喃，请看上图，人家说了的

我们强烈建议你对这些实例按照自己的需求进行修改，而不要简单的复制、粘贴。

所以你只需要新建一个html文件，然后引入BootStrap就行了，你只需要在新建的文件中添加如下代码就行了

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>