引用bootstrap的代码必要的文件

最新推荐文章于 2025-02-27 11:48:41 发布

lskaixin

最新推荐文章于 2025-02-27 11:48:41 发布

阅读量736

点赞数 2

文章标签： bootstrap jquery html

本文链接：https://blog.csdn.net/ls08250907/article/details/120456749

版权

这篇博客介绍了Bootstrap的基本概念，它是一个流行的前端开发框架，由Twitter的设计师开发。内容详细阐述了如何从Bootstrap官网下载或在线引入相关文件，特别强调在引入JS文件前需先引入jQuery，并给出了基本的HTML模板示例。

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

引用bootstrap代码的时候它“不行”？

在这里插入图片描述

一、bootstrap简介

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包，是一个CSS/HTML框架。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。

Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

在这里插入图片描述

二、首先进入bootstrap官网，可以看到有几种下载引入代码的方式

在这里插入图片描述

1.可以选择下载Bootstrap
下载后解压可看到 css是样式文件夹，里面包含了所有构造样式类，js是基于jQuery的行为文件夹，font用于存储图标。使用的时候再将需要的文件引入,需要注意的是在引入js文件前需要先引入jQuery的js文件，请注意，Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 必须在 Bootstrap 之前引入，就像在基本模版中所展示的一样。

在 bower.json 文件中列出了 Bootstrap 所支持的 jQuery 版本。

引用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="res/css/bootstrap.min.css">
    <!-- 这里写自己的css样式 -->
</head>
<body>
 
<script src="js/jquery-3.4.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- 注意 这里引用自己的js，因为优先级问题 -->
</body>
</html>

2.为了兼容手机端，在自己编写的html文件里还需要添加一条

<meta name="viewport" content="width=device-width,initial-scale=1.0">

在bootstrap中文文档中，有很多已经编写完成，使用时直接调用类即可。

3.如果不想下载bootstrap,也可以直接在线引入网络链接，

至少需要引入三个文件

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js">

在这里插入图片描述

以下是基本模板

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
 
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
 
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>
 
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>

在这里插入图片描述