Bootstrap引入核心文件（即搭建一个Bootstrap框架）

最新推荐文章于 2025-06-10 15:20:19 发布

weixin_43751710

最新推荐文章于 2025-06-10 15:20:19 发布

阅读量2.3k

点赞数 2

分类专栏：前端（bootstrap）文章标签： Bootstrap 搭建引入

前端（bootstrap）专栏收录该内容

20 篇文章

订阅专栏

博客介绍了Bootstrap引入核心文件的方法，包括cdn引入（无需下载）和本地引入（需注意路径），还提及可从官网下载本地文件，给出了目录结构示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Bootstrap引入核心文件

一、cdn引入（不必下载）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<!--声明文档兼容模式，表示使用IE浏览器的最新模式-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--Responsive layout：响应式布局-->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>蜗壳</title>

	<!-- 引入Bootstrap核心样式文件 -->
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
	
<!-- 引入jQuery核心js文件 -->
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 引入BootStrap核心js文件 -->
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

二、本地引入（注意路径）

目录结构为：（bootstrap本地文件在下图bootstrap文件夹下，可从官网下载）

home.html文件如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<!--声明文档兼容模式，表示使用IE浏览器的最新模式-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--Responsive layout：响应式布局-->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>蜗壳</title>

	<!-- 引入Bootstrap核心样式文件 -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
	
<!-- 引入jQuery核心js文件 -->
<script src="bootstrap/js/jquery-1.11.0.min.js"></script>
<!-- 引入BootStrap核心js文件 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>