程序员经验分享-hwhale

开心档-软件开发入门教程网之Bootstrap4 信息提示框

2023-11-19

Bootstrap4 信息提示框

Bootstrap 4 可以很容易实现信息提示框。

提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现:

 

实例

<div class="alert alert-success">
  <strong>成功!</strong> 指定操作成功提示信息。
</div>

提示框添加链接

提示框中在链接的标签上添加 alert-link 类来设置匹配提示框颜色的链接：

实例

<div class="alert alert-success">
  <strong>成功!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。
</div>

关闭提示框

我们可以在提示框中的 div 中添加 .alert-dismissible 类，然后在关闭按钮的链接上添加 class="close" 和 data-dismiss="alert" 类来设置提示框的关闭操作。

实例

<div class="alert alert-success alert-dismissible">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>成功!</strong> 指定操作成功提示信息。
</div>

提示: &times; (×) 是 HTML 实体字符，来表示关闭操作，而不是字母 "x"。

提示框动画

.fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果：

实例

<div class="alert alert-danger alert-dismissible fade show">
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

5App开发

IOS APP开发

html

javascript

前端

开心档-软件开发入门教程网之Bootstrap4 信息提示框 的相关文章

随机推荐

  • 基于互补搜索技术和新颖架构设计，结合MobileNetV3主干网络，打造不同的目标检测器

    基于互补搜索技术和新颖架构设计 结合MobileNetV3主干网络 打造不同的目标检测器 目标检测是计算机视觉中的一个重要任务 随着深度学习技术的发展和神经网络的不断优化 YOLOv5已成为目前最流行的目标检测框架之一 然而 为了进一步提高

  • opengl shader 使用札记

    一 shader的使用步骤 创建shader 1 创建一个shader对象 GLuint glCreateShader GLenum shaderType 2 将shader源代码传入前面创建的shader对象 void glShaderS

  • 老嫂子的保姆级科普 选择视频剪辑软件就从阅读本文开始

    选错一款视频剪辑软件 是种什么样的体验 就好像新婚当晚 发现老婆是人妖一样 浪费了感情 又错付了青春 新手在学习视频剪辑的初期 需要花费大量精力去熟悉剪辑软件的基础功能 而软件挑选本身没有对错可言 适合自己的才是最好的 因此 本文仅从事实与

  • 初识Java（一）

    Java开发语言 前言 一 Java是什么 二 应用领域 特点及核心机制 1 应用领域 2 特性及特点 特性 特点 3 两种核心机制 三 JDK JRE JVM的关系 四 Java环境变量配置 五 编写我的第一个程序 总结 前言 计算机语言

  • C# 实现rabbitmq 延迟队列功能（不堵塞）

    最近在研究rabbitmq 项目中有这样一个场景 在用户要支付订单的时候 如果超过30分钟未支付 会把订单关掉 当然我们可以做一个定时任务 每个一段时间来扫描未支付的订单 如果该订单超过支付时间就关闭 但是在数据量小的时候并没有什么大的问题

  • 计算机基础msoffice等宽两缆,一级计算机基础及《MSOffice应用》模拟题

    一级计算机基础及 MSOffice应用 模拟题 三 字处理题 共25分 26 在考生文件夹下打开文档WORD DOCX 按照要求完成下列操作并以该文件名 WORD oocx 保存文档 文档开始 IBM电子商务专利的特点 通过对IBM e c

  • Typora主题下载

    1 0前言 Typora有很多主题可以使用 默认的主题很少 想要自己的主题更加个性化 可以去添加更多的主题来优化自己的使用体验 2 0下载主题 2 1 找到Typora主题的网站 1 打开一个typora文件此点击 2 进入偏好设置 3依次

  • 【目标检测】32、让你一文看懂且看全 NMS 及其变体

    文章目录 一 NMS 1 1 背景 1 2 方法 1 3 代码 1 4 不足 二 Soft NMS 2 1 背景 2 2 方法 2 3 效果 2 4 代码 2 5 不足 三 Softer NMS 3 1 背景 3 2 方法 四 IoU Ne

  • MySQL开启bin_log后导致创建函数、存储过程失败。Error：Result_ 1418 - This function has none of DETERMINISTIC

    搭建分布式服务 使用了主从数据库 需要使用MySQL的binlog去同步数据 但是开启binlog后导致新增函数 存储过程等报错 具体报错信息如下 Result 1418 This function has none of DETERMIN

  • kitti depth complement

    代码 运行环境 windows10 open3d版本 0 12 0 import cv2 import numpy as np import os import math import open3d as o3d basic path D

  • 【好工具】网页剪藏+免费云端笔记+一键变博客

    欢迎大家来到 好工具 专栏 这个专栏面向所有希望获得高效生产力工具的朋友 在这个专栏里 我们会和大家聊聊那些狂拽酷霸炫的生产力工具 相信大家一定我一样 茫然于庞大的工具海洋 却仍找不到称心的它来使用 这也是 好工具 专栏存在的意义 发掘 折

  • 贝叶斯优化及其python实现

    贝叶斯优化是机器学习中一种常用的优化技术 其目的是在有限步数内寻找函数的最大值或最小值 它可以被视为在探索不同参数配置与观察这些配置结果之间寻求平衡点的过程 基本思想是将我们在过去的观察和体验 传递到下一个尝试中 从而在等待数据的反馈时 逐

  • 微信小程序开发实战第五讲之授权登录

    上一节 我们实现了简单的通过用户名和密码调用接口进行登录的实战 但是在小程序中 有个特殊的情况 就是很少有厂商去开发一个注册功能或者是通过用户名 密码来登录的逻辑 为什么 因为APP 小程序为了用户体验 是尽量多的避免用户多次输入交互 所以

  • 物联网LoRa系列-17：LoRa终端Sx1262芯片内部的射频信号放大器

    至此 我们已经拆解了天线是如何发送和接收空中的无线电磁波信号 拆解了无线终端如何对射频前端的高频电信号进行进一步处理的 还拆解了无线终端的发送和接收如何分时复用天线的半双工模式 本篇将进一步拆解无线终端是如何对射频电信号进行进一步的处理 包

  • 【优化器】(一) SGD原理 & pytorch代码解析

    1 简介 很多情况下 我们调用优化器的时候都不清楚里面的原理和构造 主要基于自己数据集和模型的特点 然后再根据别人的经验来选择或者尝试优化器 下面分别对SGD的原理 pytorch代码进行介绍和解析 2 梯度下降 梯度下降方法可以分为3种

  • constexpr 用法

    1 简介 constexpr函数指的是在编译的时候就能得到其返回值的函数 也就是说编译器将constexpr函数直接转换成其返回值 因此 constexpr函数都是被隐式地定义为内联函数 使用constexpr关键字来修饰constexpr

  • C++设计模式(二)观察者模式

    1 观察者模式知识点 1 定义 定义对象间的一种一对多的依赖关系 当一个对象的状态发生改变的时候 所有依赖它的对象都得到通知并自动更新 2 动机 将一个系统分割成一系列相互协作的类有一个常见的副作用 需要维护相关对象间的一致性 我们不希望为

  • 设计模式——原型模式

    原型模式顾名思义 就是指以某个实例为原型 copy出一个新的实例 该实例属性与原型相同或者是类似 很多时候 我们需要创建大量的相同或者相似的对象 如果一个个用new 构造函数的形式去创建的话比较繁琐 就像孙悟空要想变出成千上万个猴子猴孙总不

  • wmic命令学习

    我目前知道wmic可以查询进程 还可以查询服务 查询进程使用wmic process 如果想知道进程的名字 进程号 执行文件路径可以通过get来获取 还可以根据where筛选进程进行查询 wmic process get name proc

  • 开心档-软件开发入门教程网之Bootstrap4 信息提示框

    Bootstrap4 信息提示框 Bootstrap 4 可以很容易实现信息提示框 提示框可以使用 alert 类 后面加上 alert success alert info alert warning alert danger alert

热门标签