开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Bootstrap的两种引入方式，本地方式和CDN方式

Bootstrap 是世界上最流行、最广泛使用的前端框架之一，提供了用于构建响应式、移动设备优先的web应用程序的基础CSS样式和JavaScript插件。以下是在本地文件和CDN（内容分发网络）中引入Bootstrap的两种常用方法，以及如何将Bootstrap导入您的项目中：

本地方式引入Bootstrap

要通过本地方式引入Bootstrap，您需要在HTML文件的<head>标签中添加以下代码：

<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

将上述代码保存在HTML文件的<head>标签中，并将../node_modules/bootstrap/改为实际的bootstrap模块的目录。例如，如果bootstrap库位于/Users/YOUR_USER/node_modules/bootstrap/，则需要将其替换为../bootstrap/.

使用CDN方式引入Bootstrap

使用CDN的方式可以使您的网站更快、更稳定地加载Bootstrap，并将Bootstrap库放在CDN服务器上。CDN引入Bootstrap的基本语法如下：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

如果CDN提供商支持，您可以使用CDN引入Bootstrap。当您使用CDN时，请更改链接路径为实际的bootstrap模块目录。

这两种方法都可以用来引入Bootstrap库。选择哪种方法取决于您的项目需求、您所使用的硬件设备或服务器速度要求。通常情况下，本地方式引入Bootstrap比较稳定，而CDN方式可以更快地提供所需的文件，但是存在一些潜在的CDN提供商不支持的文件。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

最新jQuery引用google地址外部文件(jquery 1.2.6至jquery1.7.2)

鉴于google不能打开，推荐使用bootsprap的CDN jquery：http://www.bootcdn.cn/jquery/ bootsprap：http://www.bootcdn.cn/bootstrap/ 其他：http://www.bootcdn.cn/ ps：CDN默认没有http: 开头，没有服务器的需要加上，不然找不到路径。 //--------------------------------------------------- 以下内容需要 google 可以打开 -------

Bootstrap里的文件分别代表什么意思及其引用方法

*bootstrap.css 是完整的bootstrap样式表，未经压缩过的，可供开发的时候进行调试用 *bootstrap.min.css 是经过压缩后的bootstrap样式表，内容和bootstrap.css完全一样，但是把中间不必要的空格之类的东西都删掉了，所以文件大小会比bootstrap.css小，可以在部署网站的时候引用，如果引用了这个文件，就没必要引用bootstrap.css了，下面的文件同样。

00

Axios 简单使用指南

Axios 是一个开源的基于 promise 的 HTTP 请求库，一般常用于浏览器和 node.js 中。它能够在具有相同代码库的浏览器和 nodejs 中同时运行，在服务器侧，它利用服务器端原生的 node.js http 模块，而在客户端侧（一般是浏览器），则使用的是 XMLHttpRequest。

02

前端入门24-响应式布局（BootStrap）声明正文-响应式布局（BootStrap）

BootStrap 目前已经出了 4 个版本，每个版本都有对应的官网教程，先来看看不同版本里的宣传语：

02

Java入门006~springboot+freemarker+bootstrap快速实现管理后台

好了，下面就来讲解，如何使用springboot+freemarker+bootstrap快速实现管理后台表格数据的展示。

02

Bootstrap使用及环境搭建详解

官网：https://getbootstrap.com/ 中文网：http://www.bootcss.com/

02

Bootstrap框架的简单使用

Bootstrap 是由 Twitter 公司开发维护的简洁、直观、强悍的前端开发 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果，让web开发更迅速、简单。

01

【Java 进阶篇】Bootstrap 快速入门

Bootstrap 是一个流行的开源前端框架，它使网页开发更加容易和高效。无论您是一个有经验的开发者还是一个初学者，本文将带您深入了解 Bootstrap，从基础概念到实际示例，以帮助您快速入门这个强大的工具。

01

Bootstrap环境安装

注意:在使用bootstrap的时候引入文件<link rel="stylesheet" src="bootstrap的css文件路径">,外部引入方式引入css的方法引入就OK.但是如果用到bootstrap的js文件,需要提前移入jquery,bootstrap的js文件是基于jquery的.因此需要提前引入jq文件在引入bootstrap.

04

报表系统练手(2) -- DataTables的使用（1）

有不同的页面主题风格：Base,bootstrap 3,jquery UI, Foundation, Semantic UI.

01

thinkphp5学习路程八前端页面美化bootstrap的使用

怎么说呢？当接触一项新技术的时候当然会不懂，我觉得最主要的原因是不熟悉，万事开头难，当你去看久了用多了你会发现就那样，又或许会想当初为啥学习那么久才懂，应该大家都有这种感受，而现在我抱着其实什么都不难的心去学习，去自己找新鲜的东西去接触，哪怕我这个地方一点都不懂，但那有什么关系呢？在自己还用不到的时候去出丑不丢人，而到了你需要或者说刚刚用到的时候你会发现自己很熟练了，这就让学习不再那么难了，提前接触，真的很重要，不懂不会没关系，时间久了就刚刚好了~~~

01

【微前端】single-spa 到底是个什么鬼

说起微前端框架，很多人第一反应就是 single-spa[1]。但是再问深入一点：它是干嘛的，它有什么用，可能就回答不出来了。

02

BootStrap

为了增强跨浏览器渲染的一致性，我们使用了 Normalize.css，这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库

01

前端网站容灾-CDN主域重试方案

引言对外网站前端静态资源一般都会部署在 CDN 上， CDN 可以减少资源请求时间，进而减少页面首屏时间。然而是否想过，有一天 CDN 也会被封禁而无法访问，不用怀疑，触不及防我们就会遇到。这个问题的严重程度导致网站统一一片白花花，真是空空如也啊~ , 对待网络问题，可以用 PWA 做离线加载，但是由于 PWA 的兼容性问题，并不能兼顾到所有设备，考虑是否有其它方式保证网站的正常访问呢？既然 CDN 无法访问，我们还有主域，当 CDN 域名请求失败时，尝试将资源向主域进行请求，则可保证大概率的资源

01

django搭建简易网站

python3 manage.py startapp 应用名　　　　#这里manage.py是创建完成django项目后产生的文件

04

09Vue.js快速入门-Vue入门之Vuex实战

根据用户输入的文本，撰写一篇技术文章的摘要，总结文章的核心内容并给出相关建议和结论。

09

Font Awesome 一套绝佳的图标字体库和CSS框架

在bootstrap框架的使用中，字体图标必不可少，Font Awesome 一套绝佳的图标字体库和CSS框架，值得学习。网址：http://fontawesome.dashgame.com/

03

弱弱地写了一篇前端教程

分享一篇最近学习总结的前端表格制作教程，先看下方截图，具体演示的功能虽然简单，不过很有实际意义，主要涵盖表格展示数据、删除数据、修改数据、分页、模态窗等常见功能，其中也涉及一些样式的调整，比如隔行变色，此类文章网上很多很多，我也看过不少，但是网上文章都存着一个问题：很多文章代码写的很笼统，跳跃性比较大，你可能哪怕有一个地方看不懂，不知道怎么修改，程序就运行不起来，得不到想要的表格效果和功能，而此篇文章，我会尽可能详细介绍我做的功能的每一步是怎么得来的，并且本文源码也完全开源分享，运行中如果有任何问题，也欢迎留言提一些建议

01

bootstrap表格

条纹表格.table-striped(作用在table的class类名),实现隔行换色

02

Vue01介绍+数据双向绑定+生命周期+什么是BootCDN+代码示例

共性：不管是前端到后端，还是后端到前端，使用传统的方式都必须首先拿到页面的Document元素，只有拿到了页面元素才能进行后续操作

02

【ASP.NET Core 基础知识】--MVC框架--Views和Razor语法

在ASP.NET Core的MVC（Model-View-Controller）框架中，View 扮演着呈现用户界面的角色。View负责展示应用程序的数据给用户，并接收用户的输入。它与Model和Controller协同工作，通过模型绑定从Controller获取数据，然后使用Razor语法或其他视图引擎将数据呈现为用户可见的HTML。

02

python自动化之BeautifulReport显示异常的解决方案

真的，大家相信我，领导也要相信我，昨天下午我下班前运行之后报告还是很完美的，非常好的。

01

前端构建工具 webpack 笔记

1、需求：封装 utils 包，校验手机号长度和验证码长度，在 src/index.js 中使用并打包观察

01

细说ASP.NET Core静态文件的缓存方式

我们在优化Web服务的时候，对于静态的资源文件，通常都是通过客户端缓存、服务器缓存、CDN缓存，这三种方式来缓解客户端对于Web服务器的连接请求压力的。

02

Bootstrap入门

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 [1] 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

03

Tailwind 与 Bootstrap 的区别和使用入门

我们知道，从 Laravel 8 开始，自带前端脚手架代码默认兼容 Tailwind CSS 框架，取代了之前的 Bootstrap CSS 框架。那么 Tailwind 是什么？它与 Bootstrap 有什么区别？如何在 HTML 页面中使用？学院君将在这篇教程中给大家简单介绍下。

04

Vue——入门详解+案例

MVVM，一种更好的UI模式解决方案，MVVM通过数据双向绑定让数据自动地双向同步

02

CDN加速逐步进入HTTPS时代

在之前的域名数字证书安全漫谈系列文章中，讲到了跟数字证书有关的安全问题，如假冒证书、劫持、钓鱼攻击等。今天，来谈谈跟数字证书有关的另外一个话题，那就是HTTPS该如何加速的问题。

03

JS字符串中的第一个字母大写（两种方法）

一个非常常见的操作是将字符串的第一个字母大写。虽然许多编程语言都有一种本地方法来实现这一点，但 JS 需要做一些工作。

06

Django之模板层

在一个项目里面有一个专门放模板的文件夹Templates，有一个专门放视图的文件views，而且我们大多给浏览器响应的都应该是一个完整的页面，也就是读取的是一个HTML文件，然后再返回给浏览器。但我们在写HTML文件时，里面关于要从数据库拿数据，或者经常更改的地方又不能写死了，此时就需要用到模板语法了，在HTML文件中写上模板语法，然后在views读取HTML文件时，再对HTML文件中模板语法进行解析，替换。这样即完成解耦，又实现代码的复用性。

03

Bootstrap 4/3 页面基础模板与兼容旧版本浏览器

Bootstrap 3 与 4 差别很大，目录文件结构、所引入的内容也不同，这里说说一下 Bootstrap 引入的文件、网页模板和兼容性问题。本网站刚刚搭建好，正好发一下文章原来测试网站。

03

css加载会造成阻塞吗

可能大家都知道，js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？接下来，我就来对css加载对DOM树的解析和渲染的影响做一个测试。

06

bootstrap table表格的点击详情按钮操作

bootstrap table表格的点击详情按钮的时候只改变当前按钮的状态其余不变

02

03 整合IDEA+Maven+SSM框架的高并发的商品秒杀项目之web层

项目源代码：https://github.com/nnngu/nguSeckill ---- 前端交互流程设计对于一个系统，需要产品经理、前端工程师和后端工程师的参与，产品经理将用户的需求做成一个开

05

css加载会造成阻塞吗

可能大家都知道，js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？接下来，我就来对css加载对DOM树的解析和渲染的影响做一个测试。

02

Bootstrap入门学习（一）——简介、下载

Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合，它使用了最新的浏览器技术，给你的Web开发提供了时尚的版式，表单，buttons，表格，网格系统等等。中文官网地址：http://www.bootcss.com/

03

5.栅格系统

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yx7xPxw0-1594451881727)(D:\bootstrap\Bootstrap入门.assets\image-20200711135751305.png)]

03

bootstrap笔记（一）——布局容器和排版样式

一般习惯于把引用的jquery.js 和 boostrap.js <body></body>标签中，bootstrap.css放在<style></style>标签中。

02

数往知来：一次浏览器兼容工作中的知识点分析

显然，这是一个bootstrap样式的后台单页应用，用react实现了组件化、用mobx管理状态、引入了fetch等promise异步工具，并且使用了一些日期选择和富文本编辑器插件等第三方库

01

Bootstrap Table表格分页的使用及分页数据（Excel）导出

1:引入Bootstrap Table表格插件相关链接：这里直接拿来用就可以了，如果要下载到本地，可以自行去官网下载。

03

【ChatGPT】WordPress如何删除某用户ID下某一时间段的帖子？

因为我用的是WordPress博客，然后搭建的子比主题，有时候需要删除大量的垃圾贴和水帖，所以我直接问ChatGPT如何实现这个功能，我们首先需要告诉他怎么去实现这个功能，比如我删除帖子的SQL代码是：

04

前端UI框架小汇总

IT派 - {技术青年圈} 持续关注互联网、大数据、人工智能领域移动端UI框架 Mint UI（饿了么团队）中文官网：http://mint-ui.github.io/#!/zh-cn 描述

05

sao气十足的网页特效，让你的网页“动”起来

不知道大家在浏览网站和博客的时候有没有见到过非常有意思的页面特效呢？今天大师兄就带给大家几个有趣的特效，而且不用写代码，引入就能使用

03

简单优化前端工程几种方式（上篇）

如果A网站和B网站, 同时使用了https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js的资源, 在访问其他网站A时, 浏览器会缓存jquery.min.js资源文件, 访问网站B时,就可以免于下载jquery.min.js的文件, 这样既节省了服务器流量, 又提升了资源加载的速度, 一举两得~

03

python web开发 Bootstrap框架基础

popper.js cdn：https://unpkg.com/@popperjs/core@2 jquery.js https://code.jquery.com/jquery-3.6.0.js

03

hexo-优化-网站访问加速

加速hexo项目访问速度，可采用CDN加速的方式进行，亦或是参考采用多线部署+域名映射的方式进行构建。针对图片资源问题，可借助图床服务构建图片资源存储。

01

解读bootstrap v4 sass设计

00

解读bootstrap v4 sass设计

首先关于bootstrap从v3的less转到v4的sass的十万个为什么，这里暂且不表（计划会另起一篇文章对比less，sass，postcss）。

01

Bootstrap速学教程之简要介绍

Bootstrap是Twitter推出的一个用于前端开发的开源工具包，由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架，不用请UI设计师也能开发出中规中矩的网页，并且最重要的是支持html5、css3移动端自适应，现在很多所谓的三合一五合一网站是基于bootstrap搭建的。　　我们来看一个简单的例子 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta

08

BeautifulReport报告页面展示异常解决方法

那就只能从源头查起来，先看了看BeautifulReport的源码，就是常规的给模板文件赋值

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭