当前位置: 首页 > news >正文

Vue 项目中如何使用Bootstrap5(简单易懂)

Vue 项目中如何使用Bootstrap5(简单易懂)

  • 安装
  • 在 src/main.js 文件下引入包
  • 在vue文件中使用

1
Bootstrap官网(中文):https://www.bootcss.com/
Bootstrap5文档:https://v5.bootcss.com/docs/getting-started/introduction/

在这里插入图片描述

安装

首先安装 bootstrap5 和 popperjs

# bootstrap 依赖popperjs 必须安装
npm install bootstrap @popperjs/core --save
or
pnpm install bootstrap @popperjs/core --save
or
yarn add bootstrap @popperjs/core --save

在 src/main.js 文件下引入包

import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

在vue文件中使用

<nav class="navbar navbar-expand-lg bg-body-tertiary"><div class="container-fluid"><a class="navbar-brand" href="#">Navbar</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav me-auto mb-2 mb-lg-0"><li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a><ul class="dropdown-menu"><li><a class="dropdown-item" href="#">Action</a></li><li><a class="dropdown-item" href="#">Another action</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item" href="#">Something else here</a></li></ul></li><li class="nav-item"><a class="nav-link disabled">Disabled</a></li></ul><form class="d-flex" role="search"><input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"><button class="btn btn-outline-success" type="submit">Search</button></form></div></div>
</nav>

在这里插入图片描述
可查看对应文档引用不同组件 https://v5.bootcss.com/docs/components/navbar/






到这里就结束了,后续还会更新 前端 系列相关,还请持续关注!
感谢阅读,若有错误可以在下方评论区留言哦!!!

111

相关文章:

Vue 项目中如何使用Bootstrap5(简单易懂)

Vue 项目中如何使用Bootstrap5&#xff08;简单易懂&#xff09; 安装在 src/main.js 文件下引入包在vue文件中使用 Bootstrap官网&#xff08;中文&#xff09;&#xff1a;https://www.bootcss.com/ Bootstrap5文档&#xff1a;https://v5.bootcss.com/docs/getting-started/…...

k8s 资源预留

KUBERNETES资源管理之–资源预留 Kubernetes 的节点可以按照 Capacity 调度。node节点本身除了运行不少驱动 OS 和 Kubernetes 的系统守护进程&#xff0c;默认情况下 pod 能够使用节点全部可用容量&#xff0c; 除非为这些系统守护进程留出资源&#xff0c;否则它们将与 pod 争…...

微信小程序自定义弹窗阻止滑动冒泡catchtouchmove之后弹窗内部内容无法滑动

自定义弹窗 如图所示&#xff1a; 自定义弹窗内部有带滚动条的盒子区域 问题&#xff1a; 在盒子上滑动&#xff0c;页面如果超出一屏的话&#xff0c;也会跟着一起上下滚动 解决方案&#xff1a;给自定义弹窗 添加 catchtouchmove 事件&#xff0c;阻止冒泡即可 网上不少…...

Linux 命令速查

Network ping ping -c 3 -i 0.01 127.0.0.1 # -c 指定次数 # -i 指定时间间隔 日志 一般存放位置&#xff1a; /var/log&#xff0c;包含&#xff1a;系统连接日志 进程统计 错误日志 常见日志文件说明 日志功能access-logweb服务访问日志acct/pacct用户命令btmp记录失…...

第22期 | GPTSecurity周报

GPTSecurity是一个涵盖了前沿学术研究和实践经验分享的社区&#xff0c;集成了生成预训练 Transformer&#xff08;GPT&#xff09;、人工智能生成内容&#xff08;AIGC&#xff09;以及大型语言模型&#xff08;LLM&#xff09;等安全领域应用的知识。在这里&#xff0c;您可以…...

JavaScript前端 console 控制台详细解析与代码实例

JavaScript Console&#xff08;控制台&#xff09;是一个重要的工具&#xff0c;可以用于调试和测试 JavaScript 代码。在浏览器中&#xff0c;你可以使用控制台来查看 JavaScript 输出、测试代码、调试错误等。在本文中&#xff0c;我们将详细介绍控制台的常用功能和代码实例…...

idea中启动多例项目配置

多实例启动 日常本地开发微服务项目时&#xff0c;博主想要验证一下网关的负载均衡以及感知服务上下线能力时&#xff0c;需要用到多实例启动。 那么什么是多实例启动嘞&#xff1f;简单说就是能在本地同时启动多个同一服务。打个比方项目中有一个 MobileApplication 服务&…...

Activiti7流程结束监听事件中,抛出的异常无法被spring全局异常捕捉

ProcessRuntimeEventListener activiti7中&#xff0c;提供了ProcessRuntimeEventListener监听器&#xff0c;用于监听流程实例的结束事件 /*** 流程完成监听器*/ Slf4j Component public class ProcessCompleteListener implements ProcessRuntimeEventListener<ProcessC…...

Android 默认关闭自动旋转屏幕功能

Android 默认关闭自动旋转屏幕功能 接到客户邮件想要默认关闭设备的自动旋转屏幕功能&#xff0c;具体修改参照如下&#xff1a; /vendor/mediatek/proprietary/packages/apps/SettingsProvider/res/values/defaults.xml - <bool name"def_accelerometer_rotati…...

软文推广方案,媒介盒子分享

作为企业宣传的手段&#xff0c;它能用较低的成本获得较好的宣传效果&#xff0c;但有许多企业在进行软文推广时并不起效&#xff0c;这是因为没掌握好方法。今天媒介盒子就来告诉大家&#xff0c;通用的软文推广方案。 一、 明确推广目标以及受众 明确软文推广的目标有助于明…...

CSDN热榜分析6:将实时爬取的热榜数据导入sqlite

文章目录 初始化数据库接口更改数据库写入 初始化数据库 引入数据库的目的不止是为了存储&#xff0c;更多地也是为了便于查询&#xff0c;否则也没必要用一个Text控件来展示信息了。 所以一个正常的工作逻辑是&#xff0c;一打开热榜分析系统&#xff0c;也就同步打开数据库…...

2023年11月1日,Google全新域名来袭:.ing域名现已问世!

2023年11月1日(Oct31,2023美国与中国时差)Google宣布&#xff0c;正式推出.ing域名&#xff0c;这是一种新的顶级域名&#xff0c;旨在为用户提供更多的选择和创意。.ing域名是由Google和国际互联网名称与数字地址分配机构&#xff08;ICANN&#xff09;合作开发的&#xff0c;…...

【设计模式】第22节:行为型模式之“状态模式”

一、简介 状态模式一般用来实现状态机&#xff0c;而状态机常用在游戏、工作流引擎等系统开发中。不过&#xff0c;状态机的实现方式有多种&#xff0c;除了状态模式&#xff0c;比较常用的还有分支逻辑法和查表法。该模式允许对象内部状态改变使改变它的行为。 二、适用场景…...

JavaSE21——ArrayList

集合框架 ArrayList 一、概述 ArrayList 类是一个可以动态修改的数组&#xff0c;与普通数组的区别就是它是没有固定大小的限制&#xff0c;我们可以添加或删除元素。 ArrayList 继承了 AbstractList &#xff0c;并实现了 List 接口。 ArrayList中的元素可以通过索引访问…...

找质数(枚举 埃氏筛 线性筛)

输入一个数&#xff0c;返回小于等于这个数的质数。 枚举法&#xff1a; public static int countPrimes(int n) {int cnt0;for(int i2;i<n;i) {if(prime(i))cnt;}return cnt;}private static boolean prime(int x) {for(int i2;i*i<x;i){if(x%i0)return false;}return …...

第十二章 ObjectScript 系统标志和限定符 (qspec) - 标志

文章目录 第十二章 ObjectScript 系统标志和限定符 (qspec) - 标志 示例取消Negation标志Flags 第十二章 ObjectScript 系统标志和限定符 (qspec) - 标志 类库中的许多方法都接受 qspec 参数&#xff0c;通过该参数&#xff0c;可以控制将外部源导入 IRIS、控制代码的编译方式以…...

解决Windows Server 2012 由于没有远程桌面授权服务器可以提供需求可证

刚开始提示 之后就登录不了 &#xff08;如下图提示&#xff09; 由于windows server 2012 R2 安装了 远程桌面角色&#xff0c;但是这个角色是120天免费的&#xff0c;需要购买授权的。解决方法是取消/删除这个角色&#xff0c;就可以恢复正常的远程 一直下一步 远程桌面服…...

上位机底部栏 UI如何设置

上位机如果像设置个多页面切换&#xff1a; 位置&#xff1a; 代码如下&#xff1a; "tabBar": {"color": "black","selectedColor": "#d43c33","borderStyle":"black","backgroundColor": …...

MySQL表的增删改查(基础)

文章目录 一、CRUD二、新增&#xff08;Create&#xff09;2.1 单行数据全列插入2.2多行数据指定列插入 三、查询3.1 全列查询3.2 指定列查询3.3 查询字段表达式3.4 别名3.5 去重 DISTINCT3.6 排序3.7 条件查询 WHERE3.8 分页查询 LIMIT 四、修改&#xff08;Update&#xff09…...

uniapp书写顶部选项卡代码详细例子

以下是一个基于uni-app框架&#xff0c;使用顶部选项卡的代码示例。 在页面的.vue文件中&#xff0c;添加一个uni-tab-bar组件&#xff0c;并在组件内部添加多个uni-tab-bar-item组件&#xff0c;来实现顶部选项卡的布局。 <template><view><uni-tab-bar :cur…...

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中,常常会遇到 跨域请求接口 的情况。为了解决这个问题,Vite 和 Webpack 都提供了 proxy 代理功能,用于将本地开发请求转发到后端服务器。 什么是代理(proxy)? 代理是在开发过程中,前端项目通过开发服务器,将指定的请求“转发”到真实的后端服务器,从而绕…...

uniapp 字符包含的相关方法

在uniapp中&#xff0c;如果你想检查一个字符串是否包含另一个子字符串&#xff0c;你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的&#xff0c;但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...

LabVIEW双光子成像系统技术

双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制&#xff0c;展现出显著的技术优势&#xff1a; 深层组织穿透能力&#xff1a;适用于活体组织深度成像 高分辨率观测性能&#xff1a;满足微观结构的精细研究需求 低光毒性特点&#xff1a;减少对样本的损伤…...

pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)

目录 一、SQL注入 二、字符型SQL注入 三、字符型注入与数字型注入 四、源码分析 五、渗透实战 1、渗透准备 2、SQL注入探测 &#xff08;1&#xff09;输入单引号 &#xff08;2&#xff09;万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...

提升移动端网页调试效率:WebDebugX 与常见工具组合实践

在日常移动端开发中&#xff0c;网页调试始终是一个高频但又极具挑战的环节。尤其在面对 iOS 与 Android 的混合技术栈、各种设备差异化行为时&#xff0c;开发者迫切需要一套高效、可靠且跨平台的调试方案。过去&#xff0c;我们或多或少使用过 Chrome DevTools、Remote Debug…...

6.计算机网络核心知识点精要手册

计算机网络核心知识点精要手册 1.协议基础篇 网络协议三要素 语法&#xff1a;数据与控制信息的结构或格式&#xff0c;如同语言中的语法规则语义&#xff1a;控制信息的具体含义和响应方式&#xff0c;规定通信双方"说什么"同步&#xff1a;事件执行的顺序与时序…...

标注工具核心架构分析——主窗口的图像显示

&#x1f3d7;️ 标注工具核心架构分析 &#x1f4cb; 系统概述 主要有两个核心类&#xff0c;采用经典的 Scene-View 架构模式&#xff1a; &#x1f3af; 核心类结构 1. AnnotationScene (QGraphicsScene子类) 主要负责标注场景的管理和交互 &#x1f527; 关键函数&…...

Spring Boot 中实现 HTTPS 加密通信及常见问题排查指南

Spring Boot 中实现 HTTPS 加密通信及常见问题排查指南 在金融行业安全审计中&#xff0c;未启用HTTPS的Web应用被列为高危漏洞。通过正确配置HTTPS&#xff0c;可将中间人攻击风险降低98%——本文将全面解析Spring Boot中HTTPS的实现方案与实战避坑指南。 一、HTTPS 核心原理与…...