bootstrap v4 toast轻提示正确用法
时间:2022-07-22
本文章向大家介绍bootstrap v4 toast轻提示正确用法,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
用vue和小程序开发的同学会感到里面的toast轻提示很好,可惜bootstrap到4以上才支持,而它的帮助里写的代码感觉都是“扯淡”的,根本用不起来效果。
轻提示首先是不影响页面布局,像弹窗一样,设置延迟的时间后会自动消失。
下图是vue的。——新建成功那个就是轻提示了。
所以这里有标准的用法。
https://github.com/Script47/Toast
https://www.kaiu.net/script/content/3154
https://www.kaiu.net/script/show/3154
注意,git上代码在不断更新,并且example也是在更新,请以上面第一为准哦。
首先要引用git上toast.css和js,以及bootstrap.js和css的4.0版本以上,然后将example代码拷贝过来使用即可。
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="../dist/toast.min.js"></script>
<script>
const TYPES = ['info', 'warning', 'success', 'error'],
TITLES = {
'info': 'Notice!',
'success': 'Awesome!',
'warning': 'Watch Out!',
'error': 'Doh!'
},
CONTENT = {
'info': 'Hello, world! This is a toast message.',
'success': 'The action has been completed.',
'warning': 'It's all about to go wrong',
'error': 'It all went wrong.'
},
POSITION = ['top-right', 'top-left', 'top-center', 'bottom-right', 'bottom-left', 'bottom-center'];
$.toastDefaults.position = 'bottom-center';
$.toastDefaults.dismissible = true;
$.toastDefaults.stackable = true;
$.toastDefaults.pauseDelayOnHover = true;
$('.snack').click(function() {
var type = TYPES[Math.floor(Math.random() * TYPES.length)],
content = CONTENT[type];
$.snack(type, content);
});
$('.toast-btn').click(function() {
var rng = Math.floor(Math.random() * 2) + 1,
type = TYPES[Math.floor(Math.random() * TYPES.length)],
title = TITLES[type],
content = CONTENT[type];
if (rng === 1) {
$.toast({
type: type,
title: title,
subtitle: '11 mins ago',
content: content,
delay: 5000
});
} else {
$.toast({
type: type,
title: title,
subtitle: '11 mins ago',
content: content,
delay: 5000,
img: {
src: 'https://via.placeholder.com/20',
alt: 'Image'
}
});
}
});
- 使命必达: 深入剖析WCF的可靠会话[原理揭秘篇](上)
- 其实添加数据也可以这样简单——表单的第三步抽象(针对UI及后置代码)
- 为Symfony2和Redis正名,基于PHP的10亿请求/周网站打造
- 如何使用Python基线预测进行时间序列预测
- 如何使用统计显着性检验来解释机器学习结果
- 其实添加数据也可以这样简单——表单的第一步抽象(针对数据访问层)《怪怪设计论: 抽象无处不在 》有感
- WCF服务端运行时架构体系详解[上篇]
- 使命必达: 深入剖析WCF的可靠会话[编程篇](下)
- 在网页里让文本框只能输入数字的一种方法。外加回车换Tab
- 如何用Python从零开始实现简单的线性回归
- 使命必达: 深入剖析WCF的可靠会话[编程篇](上)
- 页面回发后,让页面自动滚动到指定位置的一种简单的方法
- [自定义服务器控件] 第二步:下拉列表框。
- WCF服务端运行时架构体系详解[中篇]
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- AJAX的post请求与上传文件
- memcached的一些简单使用
- nosql介绍,memrcached介绍,安装memcached,查看memcachedq状态
- 如何在IDEA2017创建Maven的Web工程
- JSP上传文件与导出Excel表
- 关于CentOS中tomcat的8005端口启动不起来的解决办法
- 安装ansible以及简单使用
- 设计模式之职责链
- 转录组分析 | 使用SAMtools将SAM文件转换为BAM文件、排序、建立索引
- Matlab系列之那些数学函数(讨论功能已加入)
- 简单使用saltstack
- CentOS7下搭建postfix邮箱服务器并实现extmail的web访问
- 安装saltstack
- 简单使用jumpserver
- 简单实现MVC模式