开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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提供商不支持的文件。

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

有帮助

没帮助

相关·内容

通过CDN引入jQuery的几种方式

百度 CDN 新浪 CDN 又拍云 CDN Staticfile CDN Microsoft CDN <script src="https

8.7K2 0

vue3.0 cdn方式引入 html 例子

script 部分和vue2相比，简洁了很多 const htmls={ data(){ return{ rhtml:"哈哈哈"...Vue.createApp(htmls).mount("#vue") body 部分然后在head 部分引入你的...vue3.0cdn就可以啦

4K1 0

vue vant cdn引入方式，组件使用样式错乱

问题复现使用的是vant cdn方式引入框架，而非vue-cli 在使用一些组件，如宫格，复制文档的示例代码，但是并不能正常运行，效果如下图。...出现问题的原因在经过一番寻找资料后，最终在github的issue中找到关于该问题的答复： Vue 不支持在 HTML 里直接使用自闭合标签，Vue 官方文档里有说明的，请使用完整的标签在vue...其不同之处就好像书上的一页白纸对比贴有“本页有意留白”标签的白纸。而且没有了额外的闭合标签，你的代码也更简洁。不幸的是，HTML 并不支持自闭合的自定义元素——只有官方的“空”元素。...所以上述策略仅适用于进入 DOM 之前 Vue 的模板编译器能够触达的地方，然后再产出符合 DOM 规范的 HTML。...html规范中对于自闭和标签有强制规范，用户不可自定义新增，所以我们在示例代码中的·van-grid-item·标签不能正常工作。

3.5K1 0

CDN的作用和工作方式

前言许多的个人站长在建站初期会经常看到一个词叫“CDN”，而有些网站简直把它说成了神，那么CDN到底有什么作用以及它的工作方式又是什么呢，让我们往后看。...CDN的关键技术主要有内容存储和分发技术。 ——百度百科上面是一段来自WIKI和百度百科的简介，是不是有点懵？别急，继续往后看。...我们先来说一下加cdn和不加cdn从用户角度来看有什么区别：不加CDN：用户直接从源站（服务器）获取内容，距离（源站）较近的用户往往能获得较好的访问体验而距离（源站）的用户的延迟就会增加访问体验也会变差...此简化方案中的存在的问题如果用户设置错误的dns，可能会导致用户访问比原来慢(比如网通用户设置了电信的DNS）不能判断CDN节点服务器的健康状态和容量状态，可能会把用户定向到不可用的CDN节点由于静态拓扑方法...,可能存在用户访问的CDN节点不是最优化和最快的 …..可能还有其他想不到的….

9820 0

本地存储的方式

localstorage和sessionStorage localstorage定义：数据是持久保存的，除非手动清除。...页面关闭数据还在 sessionStorage定义:为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载保存JSON格式的数据之前，需要把JSON格式的数据转换为字符串，称为序列化...可以使用JSON.stringify()序列化JSON格式的数据为字符串数据。...var stringData = JSON.stringify(jsonObject); 如果把存储的Storage中的数据以JSON格式对象的方式去访问，需要把字符串数据转换为JSON格式的数据，成为反序列化...可以使用JSON.parse()反序列化字符串数据为JSON格式的数据。

971 0

Maven使用本地jar包（两种方式）

有些项目会用到一些Maven库上没有的jar包，这就需要我们自己引入了这种情况有两种办法：第一种方式，在pom文件中引用时使用本地路径：首先把jar包放到项目中：然后在pom文件中引入：...aliyun-java-sdk-core-3.3.1.jar 注意： 1.添加 system 2.systemPath这个路径是jar包的路径...${project.basedir}只是一个系统自己的常量。...第二种方式，使用maven将jar包加入到.m2下的repository路径中 mvn install:install-file -Dfile=jar包的位置 -DgroupId=上面的groupId...-DartifactId=上面的artifactId -Dversion=上面的version -Dpackaging=jar 这种方式需要电脑上安装并配置了maven

1.3K5 0

vue之导入Bootstrap以及jQuery的两种方式

Vue引入bootstrap主要有两种方法方法一：在main.js中引入此方法导入的bootstrap中对于html，body的一些预设置的css样式可能无效。... （cnpm和npm都可以）这样就将jquery安装到了这个项目中。...' 方法二：在index.html中引入一般建议使用此方法引入bootstrap。...：先在static目录下放所需加载的bootstrap文件 ?...然后在index.html中引入 ? 目录路径为你所放位置的路径。（2）远程引入：直接加载远程的bootstrap文件 ?

1.9K5 0

代码包的引入方式

方式1 package main import "fmt" func main(){ fmt.Print() } 方式2 package main import ."...image.png 方式 3 package main import xxx "fmt" func main(){ xxx.Print("ddd") } 方式 4 package main...import _ "fmt" func main(){ } 注意这种方式的意义，当一个包被引入的时候,它的init方法会被执行,有时候,我们只希望执行包的init方式,那么这个_符就很有用了方式...5 package main import ( _ "fmt" _ "os" ) func main(){ } 当我们想要引入多个包的时候,可以使用(),当然你也可以使用单行的形式...,这只是一种简化的方式

5052 0

构建Docker镜像两种方式的比较－Dockerfile方式和S2I方式

S2I是一套工具包和工作流程，用于从源代码构建重复性Docker镜像。 S2I是一个框架，它使写镜像变得简单。它把程序源代码作为输入，生成一个运行已组装应用程序的新镜像并作为输出。...Source-To-Image (S2I) S2I Requirements How to Create an S2I Builder Image 两种构建方式的过程 Talk is Cheap, Show...从上述过程可以看出，S2I方式比Dockerfile方式多了一步，多了两样东西：S2I脚本和镜像(中间)。 S2I脚本介绍 S2I脚本有4种。 assemble: 负责构建程序，即编译、部署程序。...usage: 负责打印构建器镜像的使用说明。 S2I方式的好处关于引入S2I构建镜像的好处，书面类的描述可以参考官方文档，这里谈谈实践下来个人的感受和理解。首先，要了解为什么要引入S2I。...源代码相关编译源代码；部署二进制程序；定义服务启动方式等。引入S2I的目的就是为了分离这两部分的工作。其中环境准备工作交给了构建器镜像，构建器镜像一旦生成将保持不变，可理解为静态部分。

1.4K7 0

Laravel基础-关于引入公共文件的两种方式

，路径为：resources\views index.blade.php article.blade.php layout.blade.php 重点： 1、使用include的方式：一、在views...') //这样的书写方式来引入：目录名称.公共文件名另外，如果在header公共区域中有不同的数据，那么可以使用以下方式来传递数据： //视图中的代码 @include('common.header'...,['page' = '详细页面']) //header.blade.php公共文件中的代码 {{$page}}--公共部分那么，以上会输出：详细页面–公共部分即传递成功 2、使用子视图的方式来引入...三、在views目录下的layout.blade.php中引入主视图文件：采用继承的方式： home主视图里： <div class="container" <!...--@parent-- //parent意为：子模板可以获取主模板里的内容我是layout的替换内容123 @endsection 以上这篇Laravel基础-关于引入公共文件的两种方式就是小编分享给大家的全部内容了

1.3K5 2

JavaScript的引入方式和基本属性

js的引入方式，最常用的有两种： 1、在页面中直接写入： alert("www.w3h5.com"); 2、引入外部js文件：通过 src 引入，此时 script... 动态引入js的四种方式： 1、直接 document.write：但这样会把当前页面全覆写掉 document.write("<script...js到文件中来，就能和原有的js通信了。...; alert("主页面动态加载a.js并取其中的变量：" + str); 引入js的基本属性 1、js引入时会有一个 type 属性，来告诉浏览器引入的是一个js文件，这个属性是默认的，所以不写也可以... async 和 defer 的区别：例如：执行如下代码 <!

2.2K0 0

Flutter的两种本地存储方式之 SharedPreferences（1）

SharedPreferences 存储缓存少量的键值对信息（比如记录用户是否阅读了公告，或是简单的计数），可以使用 SharedPreferences。...SharedPreferences 会以原生平台相关的机制，为简单的键值对数据提供持久化存储，即在 iOS 上使用 NSUserDefaults，在 Android 使用 SharedPreferences...SharedPreferences 的使用方式非常简单方便。不过需要注意的是，以键值对的方式只能存储基本类型的数据，比如 int、double、bool 和 string。...1. pubspec.yaml引入 shared_preferences: 0.5.12+4 2....，以异步的方式对这些操作进行包装 //读取SharedPreferences中key为counter的值 Future _loadCounter() async { SharedPreferences

1.4K4 0

Python下载图片并保存本地的两种方式

一：使用Python中的urllib类中的urlretrieve()函数，直接从网上下载资源到本地，具体代码： import os,stat import urllib.request img_url

9.1K1 0

CSS基础——css 的引入方式

css的三种引入方式行内式内嵌式（内部样式）外链式1....缺点：在多个页面之间的可重用性不够高。3. 外链式将css代码写在一个单独的.css文件中，在标签中使用标签直接引入该文件到页面中。...示例代码:优点：使得css样式与html页面分离，便于整个页面系统的规划和维护，可重用性高...4. css引入方式选择行内式几乎不用内嵌式在学习css样式的阶段使用外链式在公司开发的阶段使用，可以对 css 样式和 html 页面分别进行开发。5....小结css 的引入有三种方式, 分别是行内式、内嵌式、外链式。外链式是在公司开发的时候会使用，最能体现 div+css 的标签内容与显示样式分离的思想，也最易改版维护，代码看起来也是最美观的一种。

1.1K2 0

echarts2 的引入方式

echarts是一款不错的商业级数据图表，目前已更新到echarts3版本，但是由于历史原因，echarts2仍然有比较大的使用占比，之所以讲echarts2的引入方式是因为项目在混合使用echarts2...echarts2有三种引入方式： 1.模块化包引入如果你熟悉模块化开发，你的项目本身就是模块化且遵循AMD规范的，那引入echarts将很简单，使用一个符合AMD规范的模块加载器，如esl.js，只需要配置好...packages路径指向src即可，你将享受到图表的按需加载等最大的灵活性，由于echarts依赖底层zrender，你需要同时下载zrender到本地，可参考demo，你需要配置如下。...，下面就说说方法2这种方式的不好的地方，方法2的缺点就在于暴露出了“var define,require,esl;”这三个全局变量，但是现在有不少插件包括jquery都已经引入了umd规范： (function...amd框架的代码将不能正常工作，所以虽然官网推荐这种方式，个人更喜欢推荐第三种方式。

1.1K2 0

CSS的引入方式和复合选择器

CSS的引入方式样式表优点缺点范围行内样式表书写方便结构样式混写控制一个标签内部样式表部分结构和样式相分离没有彻底控制一个页面外部样式表完全实现结构和样式分离需要引入控制多个页面...**pink（class名）div#gray(id名) 生成的div的类名是有顺序的：p.demo**$***5 生成的标签默认显示几个文字：div{这里写文字} 注意：$是自增的符号快速生成CSS样式...后代选择器可以选择父元素里的子元素 ul li{ width: 300px; } 注意：元素一和元素二必须用空格隔开只要有一层以上的关系就可以用，就像: ...子选择器只选择父元素最近一级的子元素元素1>元素2{样式声明} 注意：元素1和元素2用大于号隔开元素1是父级，元素2是子级，最终选择元素2 3....伪类选择器链接伪类选择器给某些选择器添加特殊效果，用“ : ”来实现属性定义 a:link 选择所有未被访问的链接 a：visited 选择所有已经被访问过的链接 a：hover 选择鼠标指针位于其上的链接

5272 0

WebView加载页面的两种方式——网络页面和本地页面

WebView加载页面的两种方式一、加载网络页面　　加载网络页面，是最简单的一种方式，只需要传入http的URL就可以，实现WebView加载网络页面代码如下图： ?...二、加载本地页面　　1、加载assets目录下的HTML页面：加载assets目录的页面，大多数可以用来做页面数据的存储打包，这样可以访问离线文件，不用去进行网络请求，可以减少用户数据流量的使用...示例代码如下： //加载assets目录文件 webView.loadUrl("file:///android_asset/staticHtml.html"); 在这里面，解释一下引号里面每个字段的意思和作用...android_asset表示读取当前应用的assets目录下的文件 staticHtml.html表示assets目录下的HTML页面　　2、加载缓存到本地的页面加载缓存到本地的页面，这个主要可以用来做页面的离线缓存...例如将html文件存储到本地文件目录下 //文件存储的本地文件夹路径 File filesDir = getFilesDir().getAbsoluteFile();

2.7K3 0

PHP实现无限极分类的两种方式示例【递归和引用方式】

本文实例讲述了PHP实现无限极分类的两种方式。...分享给大家供大家参考，具体如下：面试的时候被问到无限极分类的设计和实现，比较常见的做法是在建表的时候，增加一个PID字段用来区别自己所属的分类 $array = array( array('id'...3, 'name' = '永年区'), array('id' = 9, 'pid' = 1, 'name' = '武安市'), ); 数据在数据库中存储大概是这个样子，怎么实现无限极递归呢，有两种常用的做法...变量默认的传值方式是按指传递 //也就是说假如说遍历顺序是河北省邯郸市当遍历到河北省时会把河北省放到tree中遍历到邯郸市时会把邯郸市放到河北省的子节点数组中但是！！！...因为他们俩是第一级节点而且排行1和2，放到$tree数组中之后，没有使用引用传递，那么后续对他俩的子节点的操作都没有在$tree中生效，现在我们更改一下顺序把邯郸市放到河北省的前面那么根据咱们的推断

1.8K2 0

SpringBoot引入Bean组件的几种方式

众所周知，在spring内部，所有的bean都是交由spring来统一管理的，有些bean可能是直接通过BeanDefinitionRegistry定义的，有些是通过FactoryBean注册的（一般用作其他框架与...spring整合） 1、Spring引入bean组件的三种方式引入@Import注解实现FactoryBean 接口以springboot为例，当一个配置类需要导入另外一个组件的时候，可以使用上面的方式进行导入...当然，spring为我们提供了一系列的注解，在引入其他组件的时候，可以使用@Import注解：下面是Import注解的源码：点开@Import注解源码，可以看到 @Target(ElementType.TYPE...>[] value(); } 看了上面的源码之后，我们现在有了三种选择，分别是下面的三种引入方式 1) 直接引入源class @Import(value = {UserInput.class}) public...org.choviwu.movie; import lombok.extern.slf4j.Slf4j; import java.util.List; @SpringBootApplication //这里分别引入了上面的三种组件方式

1.4K3 0

Containerd的两种安装方式

YUM方式安装1.1 获取YUM源获取阿里云YUM源# wget -O /etc/yum.repos.d/docker-ce.repo https://mirrors.aliyun.com/docker-ce...二进制方式安装Containerd有两种安装包：第一种是containerd-xxx,这种包用于单机测试没问题，不包含runC，需要提前安装。...第二种是cri-containerd-cni-xxxx，包含runc和k8s里的所需要的相关文件。k8s集群里需要用到此包。...虽然包含runC，但是依赖系统中的seccomp（安全计算模式，是一种限制容器调用系统资源的模式。）...harbor.kubemsb.com"] #此处添加了本地容器镜像仓库 Harbor,做为本地容器镜像仓库。

6.1K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭