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

news2024/9/25 19:22:53

本章将讲解警告(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.coloradmin.cn/o/2138011.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C# 实现二维数据数组导出到 Excel

目录 功能需求 范例运行环境 Excel DCOM 配置 设计实现 组件库引入 ​编辑​ 方法设计 生成二维数据数组 核心方法实现 调用示例 总结 功能需求 将数据库查询出来的数据导出并生成 Excel 文件&#xff0c;是项目中经常使用的一项功能。本文将介绍通过数据集生成二维…

基于TCP的网络计算器实现

目录 一. 重新理解协议 二. 序列化与反序列化 2.1 概念 2.2 重新理解 read、write、recv、send 和 tcp 为什么支持全双工 2.3 理解TCP面向字节流 三. 请求应答模块实现 3.1 添加与解析报头 3.2 定制协议&#xff1a; 3.3 Json 四. 计算模块实现…

字典转换(根据字典转换、根据id转换)

一、三种转换方式 翻译场景:序列化时候转换 适用类型: 字典type转中文用户id转用户名部门id转名称附件id转url路径1.1 根据另一个映射字段 翻译保存到此字段 根据创建者createBy的id,查询名称设置到 createName 1.2 直接根据此字段值翻译后替换此字段值 ossId 替换为 url …

医疗监测数据检测系统源码分享

医疗监测数据检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer…

vue3透传、注入

属性透传 传递给子组件时&#xff0c;没有被子组件消费的属性或事件&#xff0c;常见的如id、class 注意1 1.class、style是合并的&#xff0c;style中如果出现重复的样式&#xff0c;以透传属性为准2.id属性是以透传属性为准&#xff0c;其他情况透传属性名相同&#xff0c…

深度学习云服务器免费使用教程

#云服务器# #深度学习# #人工智能# #计算机视觉# 本文为各位学习深度学习的入门选手而创建&#xff0c;降低深度学习的入门门槛。 谷歌云服务器Colab&#xff1a; T4GPU。限额&#xff0c;需要科学上网&#xff0c;不能使用终端。 谷歌云服务器地址&#xff1a;欢迎使用 C…

C语言 | Leetcode C语言题解之第405题数字转换为十六进制数

题目&#xff1a; 题解&#xff1a; char * toHex(int num){int i0;char *nums(char*)malloc(sizeof(char)*32);unsigned int newnum(unsigned int)num;if(num0){nums[0]0;nums[1]\0;return nums;}while(newnum>1){int flagnewnum%16;newnum/16;if(flag<9){nums[i]flag0…

华为OD机试 - 计算误码率(Python/JS/C/C++ 2024 E卷 100分)

华为OD机试 2024E卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试真题&#xff08;Python/JS/C/C&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;私信哪吒&#xff0c;备注华为OD&#xff0c;加入华为OD刷题交流群&#xff0c;…

Acwing 队列

模拟队列 主要思想&#xff1a;先进先出&#xff08;注意与栈做区分&#xff09;&#xff0c;队尾插入&#xff0c;队头删除。设置一个数组存储数据&#xff0c;队头指针指向队列第一个元素&#xff08;初始为0&#xff09;&#xff0c;队尾指针指向最后一个元素&#xff08;初…

Qt常用控件——QSpinBox

文章目录 QSpinBox核心属性及信号点餐示例 QSpinBox核心属性及信号 QSpinBox或者QDoubleSpinBox表示微调框&#xff0c;带有按钮的输入框&#xff0c;可以用来输入整数/浮点数或者通过点击按钮调整数值大小 QSpinBox和QDoubleSpinBox用法基本相同&#xff0c;本篇以QSpinBox为…

Ubuntu 安装包下载(以20版本 阿里镜像站为例子)

Ubuntu安装包下载 上一篇文章写了一些国内常用的镜像站&#xff0c;这篇以阿里云镜像站Ubuntu20版本为例。 https://mirrors.aliyun.com/ubuntu-releases/ 1.点击自己想要下载的版本 2.点击以amd64.iso为结尾的文件&#xff0c;这个是安装文件&#xff0c;如果是桌面端&…

C++初阶学习——探索STL奥秘——vector的模拟实现

vector的结构比较特殊&#xff0c;成员变量为三个指针 #pragma once #include <iostream> using std::cin; using std::cout; using std::endl;#include <string> using std::string;namespace Yohifo {template<class T>class vector{public:typedef T val…

使用jmeter做性能测试实践过程中需要注意什么

前言 在驾驭Apache JMeter进行性能测试之旅中&#xff0c;深刻理解其特性和限制是至关重要的。以下是提升JMeter效能的关键策略&#xff0c;旨在挖掘其潜力&#xff0c;克服局限&#xff0c;实现精准测试。 1.精确调控线程数 推荐阈值&#xff1a;将线程数控制在300以内&…

模拟视频推到WVP推流列表

效果 1. wvp创建RTMP 2. 使用ffmpeg将本地的视频转为rtmp ffmpeg -re -i F:rtsp\123.mp4 -c copy -f flv rtmp://192.168.1.237:1935/cd/10001?sign=Z4Y3eYeSg

HTML5之canvas绘图

介绍 <canvas> 是 HTML5 引入的一个强大元素&#xff0c;允许直接在网页上进行矢量图形和位图图像的绘制&#xff0c;为网页提供了一个动态图形渲染的平台。这一特性极大丰富了网页的表现力&#xff0c;特别是在数据可视化、游戏开发、交互式图表和动画制作等领域发挥着…

第311题| 超好用!二重积分求旋转体体积公式|武忠祥老师每日一题

第一步&#xff1a; &#xff08;1&#xff09;找渐近线&#xff0c;先看水平渐近线&#xff0c;看x趋于无穷时&#xff0c;y有没有趋于一个有限的值。 , 得出水平渐近线y1。因为左右两边都是水平渐近线&#xff0c;所以没有斜渐近线。 第二步&#xff1a; 画出图像&#…

Spring Boot环境下的学生读书笔记共享

第4章 系统设计 4.1系统结构设计 读书笔记共享平台的设计主要是为了满足用户的实际需求。 因此&#xff0c;它需要通过Internet实现&#xff0c;因此它必须具备硬件和软件基础。该平台最终可以通过科学技术和各种方式达到支持智能化的信息管理的目的。因此&#xff0c;它必须具…

深入理解Python中的生成器:高效迭代与延迟计算的艺术

在处理大量数据时&#xff0c;如何有效地管理内存成为了一个关键问题。Python中的生成器&#xff08;Generator&#xff09;提供了一种优雅的解决方案&#xff0c;它允许你在迭代过程中按需生成数据&#xff0c;而不是一次性加载所有数据到内存中。本文将详细探讨生成器的工作原…

看Threejs好玩示例,学习创新与技术(三)

本文接上篇内容&#xff0c;继续挖掘应用ThreeJS的一些创新算法。 1、获得鼠标移动对应的地理位置 这个算法如果放在几年前&#xff0c;那肯定会难倒一帮人的。因为是三维投影涉及矩阵变换及求逆&#xff0c;而且还是投影模式下的。在Project Texture这个示例中&#xff0c;作…

Sentaurus TCAD的sdevice求解中选择Math求解方法

目录 并行迭代线性求解器&#xff08;ILS&#xff09;并行超节点直接求解器&#xff08;ParDiSo&#xff09;超节点直接求解器&#xff08;Super&#xff09;详细解释1. 并行迭代线性求解器&#xff08;ILS&#xff09;2. 并行超节点直接求解器&#xff08;ParDiSo&#xff09;…