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

Bootstrap 警告信息(Alerts)使用介绍

本章将讲解警告(Alerts)以及 Bootstrap 所提供的用于警告的 class。警告(Alerts)向用户提供了一种定义消息样式的方式。它们为典型的用户操作提供了上下文信息反馈。

您可以为警告框添加一个可选的关闭按钮。为了创建一个内联的可取消的警告框,请使用JQ插件。

您可以通过创建一个 <div>,并向其添加一个 .alert class 和四个上下文 class(即 .alert-success、.alert-info、.alert-warning、.alert-danger)之一,来添加一个基本的警告框。下面的实例演示了这点:

<div class="alert alert-success">成功!很好地完成了提交。</div>
<div class="alert alert-info">信息!请注意这个信息。</div>
<div class="alert alert-warning">警告!请不要提交。</div>
<div class="alert alert-danger">错误!请进行一些更改。</div>

警告(Alerts)

<div class="alert alert-success alert-dismissable"><button type="button" class="close" data-dismiss="alert"aria-hidden="true">&times;</button>成功!很好地完成了提交。</div><div class="alert alert-info alert-dismissable"><button type="button" class="close" data-dismiss="alert"aria-hidden="true">&times;</button>信息!请注意这个信息。</div><div class="alert alert-warning alert-dismissable"><button type="button" class="close" data-dismiss="alert"aria-hidden="true">&times;</button>警告!请不要提交。</div><div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert"aria-hidden="true">&times;</button>错误!请进行一些更改。</div>

 

可取消的警告(Dismissal Alerts)

http://www.lryc.cn/news/438520.html

相关文章:

  • uniapp(H5)设置反向代理,设置成功后页面报错
  • define、typedef和using的使用
  • vue element时间选择不能超过今天 时间选中长度不能超过7天
  • 如何 吧一个 一维数组 切分成相同等分,一维数组作为lstm的输入(三维数据)的数据预处理 collate_fn的应用
  • Remix 学习 - @remix-run/react 中主要的 hooks
  • STL之stack
  • 如何用3个月零基础入门网络安全?_网络安全零基础怎么学习
  • 适合学生党开学买的蓝牙耳机?分享开放式耳机排行榜前十名
  • 汽车租赁系统1.0版本
  • DockerDocker Compose安装(离线+在线)
  • 【泰克生物】酵母展示建库技术解析:构建高质量抗体文库的实用指南
  • QT Mode/View之View
  • URP 线性空间 ui资源制作规范
  • 如何精确统计Pytorch模型推理时间
  • Mybatis-plus-Generator 3.5.5 自定义模板支持 (DTO/VO 等) 配置
  • C#环境下MAC地址获取方法解析
  • (k8s)Kubernetes 从0到1容器编排之旅
  • Rust Web开发框架对比:Warp与Actix-web
  • F12抓包12:Performance(性能)前端性能分析
  • 数据结构(Day13)
  • 链表的快速排序(C/C++实现)
  • css总结(记录一下...)
  • SpringBoot 处理 @KafkaListener 消息
  • Spring Boot-API版本控制问题
  • Git 提取和拉取的区别在哪
  • 【数据结构与算法 | 每日一题 | 力扣篇】力扣2390, 2848
  • 破解信息架构实施的密码:常见挑战与最佳解决方案全指南
  • CodeChef Starters 151 (Div.2) A~D
  • Redis学习——数据不一致怎么办?更新缓存失败了又怎么办?
  • 跨境电商代购新纪元:一键解锁全球好物,系统流程全揭秘