vue 使用bootstrap4的toast功能

本文详细介绍了如何在前端项目中引入并初始化弹窗组件,包括HTML结构与JS调用方式,适合初学者快速掌握。

原文档实在是太难看了,研究了半天才看出来。
简单来说就两点
一.引入弹窗内容

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

二.初始化弹窗

$('.toast').toast(option)   //toast 为弹窗的类名

option 参数如下
在这里插入图片描述
三.在指定页面触发

$('.toast').toast(option)  //toast 为上面实例化的弹窗名字

四.大功告成
欢迎关注我,一个致力于前端的研究者,一起学习进步。
在这里插入图片描述

### 集成BootstrapVue 3和Vite项目 #### 创建SCSS文件 为了在Vue 3与Vite构建的项目里使用Bootstrap,可以在`assets`目录下建立名为`styles.scss`的文件来集中管理样式表引入。具体操作如下: ```scss // 导入全部Bootstrap CSS @import "bootstrap/scss/bootstrap"; // 引入图标支持 @import 'bootstrap-icons/font/bootstrap-icons.css'; ``` 上述配置确保了整个应用程序能够访问Bootstrap所提供的CSS类以及图标资源[^1]。 #### 修改入口文件 接着,在项目的入口文件即`main.ts`或`main.js`内加入必要的脚本和样式引用语句以便全局生效: ```javascript // 引入自定义样式文件 import '/src/assets/styles.scss' // 加载Popper库,这是Bootstrap某些组件所依赖的基础工具包 import "@popperjs/core" // 完整加载Bootstrap JavaScript插件集合 import "bootstrap" ``` 这段代码片段的作用在于初始化所需的JavaScript功能模块,并使它们在整个应用范围内可用。 对于那些只需要部分特性的场景,则可以选择性地单独加载特定组件而非整体打包所有JS逻辑: ```javascript // 按需引入单个Bootstrap JS组件实例 import Alert from 'bootstrap/js/dist/alert'; import { Tooltip, Toast, Popover } from 'bootstrap'; ``` 这样做不仅有助于减少最终部署包体积,还能加快页面加载速度。 #### 使用示例 完成以上设置之后便可以直接利用Bootstrap提供的HTML结构标签配合相应的class属性快速搭建界面布局;同时也可以借助其预设好的API接口轻松调用交互特效等功能特性。 例如要显示警告框只需简单编写如下模板代码即可实现预期效果: ```html <div class="alert alert-primary" role="alert"> A simple primary alert—check it out! </div> <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Tooltip!">Hover me</button> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

东哥aigc

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值