首页 前端知识 Bootstrap3 Toast的Bootoast消息框插件使用

Bootstrap3 Toast的Bootoast消息框插件使用

2024-02-05 11:02:28 前端知识 前端哥 237 831 我要收藏

使用方法

在页面中引入bootstrap.min.css文件,bootoast.css,以及jquery和bootoast.js文件。

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootoast.css">
<script src="jquery.min.js"></script>
<script src="bootoast.js"></script>

API

Bootoast插件的默认配置如下:

bootoast({
    message: 'Helo!',
    type: 'info',
    position: 'bottom-center',
    icon: undefined,
    timeout: false,
    animationDuration: 300,
    dismissable: true
});

配置参数

参数默认值描述
message‘Helo!’Toast消息,可以是任何html字符串。
type‘info’bootstrap情景类的class名称。
icon根据选择的情景类来决定。Bootstrap 3 glyphicons名称。
position‘bottom-center’Toast消息显示的位置。可以是top,left-top,right-top,bottom,left-bottom,right-bottom。
timeoutfalseToast自动隐藏的时间。设置为false或0表示不会自动隐藏。
dismissabletrue是否在Toast上显示×按钮。
animationDuration300Toast隐藏动画的持续时间,单位毫秒。

效果图

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1404.html
标签
bootstrap
评论
会员中心 联系我 留言建议 回顶部
复制成功!