笔记大全

bootstrap需要引用哪些文件

更新时间：2023-12-23

引用CSS文件

要使用Bootstrap样式，需要在HTML文件头部引用Bootstrap的CSS文件。Bootstrap提供两种CSS的引用方式，分别是CDN和本地引用。

CDN引用方式（推荐）：

<!-- 压缩版本 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<!-- 完整版本 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.css">

本地引用方式（需要下载Bootstrap样式文件）：

<!-- 压缩版本 -->
<link rel="stylesheet" href="bootstrap.min.css">
<!-- 完整版本 -->
<link rel="stylesheet" href="bootstrap.css">

引用JavaScript文件

Bootstrap的部分组件需要引用JavaScript文件才能产生动态效果。Bootstrap提供两种JavaScript的引用方式，分别是CDN和本地引用。

CDN引用方式（推荐）：

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

本地引用方式（需要下载相应的JavaScript文件）：

<script src="jquery.min.js"></script>
<script src="popper.min.js"></script>
<script src="bootstrap.min.js"></script>

引用字体文件

Bootstrap的图标和字体采用自定义的图标字体，需要引用字体文件才能调用。需要注意的是，如果你不引用字体文件，则不会显示图标和字体效果。

CDN引用方式：

<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

本地引用方式（需要下载字体文件）：

<link href="font-awesome.min.css" rel="stylesheet">

说明

Bootstrap的CSS文件中包括了LESS源文件，在实际开发中，可以直接使用LESS源文件进行样式的定制。

除了Bootstrap的CSS、JavaScript和字体文件外，我们还需要在HTML页面中添加一些特定样式和脚本，以实现Bootstrap提供的功能。在引用Bootstrap文件和添加特定样式和脚本后，我们的HTML代码应该如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>页面标题</title>
  <link rel="stylesheet" href="bootstrap.min.css">
  <link href="font-awesome.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    内容区域
  </div>
  <script src="jquery.min.js"></script>
  <script src="popper.min.js"></script>
  <script src="bootstrap.min.js"></script>
</body>
</html>

c语言编程笔录