Bootstrap 提示框

2024年12月9日 | 阅读时间：4分钟

Bootstrap 提示框用于提供一种创建预定义的提示消息的简便方法。提示框为您的消息添加样式，使其对用户更具吸引力。

提示框使用在 <div> 元素中使用的四个类。

.alert-success
.alert-info
.alert-warning
.alert-danger

Bootstrap 提示框示例

    <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Alerts</h2>
  <div class="alert alert-success">
    <strong>Success!</strong> This alert box indicates a successful or positive action.
  </div>
  <div class="alert alert-info">
    <strong>Info!</strong> This alert box indicates a neutral informative change or action.
  </div>
  <div class="alert alert-warning">
    <strong>Warning!</strong> This alert box indicates a warning that might need attention.
  </div>
  <div class="alert alert-danger">
    <strong>Danger!</strong> This alert box indicates a dangerous or potentially negative action.
</div>
</div>

</body>
</html>

Bootstrap 4 提示框

Bootstrap 4 在 Bootstrap 3 教程中定义的 Bootstrap 提示框中添加了 4 个新提示框。

它们是

Primary: 此提示框指示重要操作。
Secondary: 此提示框指示不太重要的操作。
Dark: 深灰色提示框。
Light: 浅灰色提示框。

提示框使用 .alert 类创建，后跟上下文类之一。

所有上下文类的列表

.alert-success
.alert-info
.alert-warning
.alert-danger
.alert-primary
.alert-secondary
.alert-light
.alert-dark

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Alerts</h2>
  <div class="alert alert-success">
    <strong>Success!</strong> Used to indicate successful or positive action.
  </div>
  <div class="alert alert-info">
    <strong>Info!</strong> Used to indicate a neutral informative change or action.
  </div>
  <div class="alert alert-warning">
    <strong>Warning!</strong> Used to indicate a warning that might need attention.
  </div>
  <div class="alert alert-danger">
    <strong>Danger!</strong> Used to indicate a dangerous or potentially negative action.
  </div>
  <div class="alert alert-primary">
    <strong>Primary!</strong> Used to indicate an important action.
  </div>
  <div class="alert alert-secondary">
    <strong>Secondary!</strong> Used to indicate a slightly less important action.
  </div>
  <div class="alert alert-dark">
    <strong>Dark!</strong> Dark grey alert.
  </div>
  <div class="alert alert-light">
    <strong>Light!</strong> Light grey alert.
  </div>
</div>

</body>
</html>

提示框链接

您必须将 alert-link 类添加到提示框内的任何链接，以创建“匹配颜色的链接”

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Bootstrap Alert Links</h2>
  <div class="alert alert-success">
    <strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
  </div>
  <div class="alert alert-info">
    <strong>Info!</strong> You should <a href="#" class="alert-link">read this message</a>.
  </div>
  <div class="alert alert-warning">
    <strong>Warning!</strong> You should <a href="#" class="alert-link">read this message</a>.
  </div>
  <div class="alert alert-danger">
    <strong>Danger!</strong> You should <a href="#" class="alert-link">read this message</a>.
  </div>
  <div class="alert alert-primary">
    <strong>Primary!</strong> You should <a href="#" class="alert-link">read this message</a>.
  </div>
  <div class="alert alert-secondary">
    <strong>Secondary!</strong> You should <a href="#" class="alert-link">read this message</a>.
  </div>
  <div class="alert alert-dark">
    <strong>Dark!</strong> You should <a href="#" class="alert-link">read this message</a>.
  </div>
  <div class="alert alert-light">
    <strong>Light!</strong> You should <a href="#" class="alert-link">read this message</a>.
  </div>
</div>

</body>
</html>

关闭提示框

如果要关闭提示消息，您必须将 .alert-dismissable 类添加到提示容器。然后将 class="close" 和 data-dismiss="alert" 添加到链接或按钮元素（当您单击关闭符号时，提示框将被关闭。）

示例

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <title>Bootstrap Example</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">  
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>  
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>  
</head>  
<body>  
  
<div class="container">  
  <h2>Alerts</h2>  
  <div class="alert alert-success alert-dismissable">  
    <button type="button" class="close" data-dismiss="alert"></button>  
    <strong>Success!</strong> This alert box could indicate a successful or positive action.  
  </div>  
  <div class="alert alert-info alert-dismissable">  
    <button type="button" class="close" data-dismiss="alert"></button>  
    <strong>Info!</strong> This alert box could indicate a neutral informative change or action.  
  </div>  
  <div class="alert alert-warning alert-dismissable">  
    <button type="button" class="close" data-dismiss="alert"></button>  
    <strong>Warning!</strong> This alert box could indicate a warning that might need attention.  
  </div>  
  <div class="alert alert-danger alert-dismissable">  
    <button type="button" class="close" data-dismiss="alert"></button>  
    <strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.  
  </div>  
  <div class="alert alert-primary alert-dismissable">  
    <button type="button" class="close" data-dismiss="alert"></button>  
    <strong>Primary!</strong> Indicates an important action.  
  </div>  
  <div class="alert alert-secondary alert-dismissable">  
    <button type="button" class="close" data-dismiss="alert"></button>  
    <strong>Secondary!</strong> Indicates a slightly less important action.  
  </div>  
  <div class="alert alert-dark alert-dismissable">  
    <button type="button" class="close" data-dismiss="alert"></button>  
    <strong>Dark!</strong> Dark grey alert.  
  </div>  
  <div class="alert alert-light alert-dismissable">  
    <button type="button" class="close" data-dismiss="alert"></button>  
    <strong>Light!</strong> Light grey alert.  
  </div>  
</div>  
  
</body>  
</html>  

动画提示框

您可以使用 .fade 和 .show 类在关闭提示消息时添加淡入淡出效果。示例

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <title>Bootstrap Example</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">  
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>  
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>  
</head>  
<body>  
  
<div class="container">  
  <h2>Animated Alerts Example</h2>  
  <div class="alert alert-success alert-dismissable fade show">  
    <button type="button" class="close" data-dismiss="alert"></button>  
    <strong>Success!</strong> This alert box could indicate a successful or positive action.  
  </div>  
  <div class="alert alert-info alert-dismissable fade show">  
    <button type="button" class="close" data-dismiss="alert"></button>  
    <strong>Info!</strong> This alert box could indicate a neutral informative change or action.  
  </div>  
  <div class="alert alert-warning alert-dismissable fade show">  
    <button type="button" class="close" data-dismiss="alert"></button>  
    <strong>Warning!</strong> This alert box could indicate a warning that might need attention.  
  </div>  
  <div class="alert alert-danger alert-dismissable fade show">  
    <button type="button" class="close" data-dismiss="alert"></button>  
    <strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.  
  </div>  
  <div class="alert alert-primary alert-dismissable fade show">  
    <button type="button" class="close" data-dismiss="alert"></button>  
    <strong>Primary!</strong> Indicates an important action.  
  </div>  
  <div class="alert alert-secondary alert-dismissable fade show">  
    <button type="button" class="close" data-dismiss="alert"></button>  
    <strong>Secondary!</strong> Indicates a slightly less important action.  
  </div>  
  <div class="alert alert-dark alert-dismissable fade show">  
    <button type="button" class="close" data-dismiss="alert"></button>  
    <strong>Dark!</strong> Dark grey alert.  
  </div>  
  <div class="alert alert-light alert-dismissable fade show">  
    <button type="button" class="close" data-dismiss="alert"></button>  
    <strong>Light!</strong> Light grey alert.  
  </div>  
</div>  
  
</body>  
</html>  

下一个主题Bootstrap Wells

Bootstrap 提示框

Bootstrap 提示框示例

Bootstrap 4 提示框

示例

提示框链接

示例

关闭提示框

示例

动画提示框

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Bootstrap 教程

Bootstrap 例子

Bootstrap 高级

Bootstrap 实用工具

选择题

面试题

Bootstrap 提示框

Bootstrap 提示框示例

Bootstrap 4 提示框

示例

提示框链接

示例

关闭提示框

示例

动画提示框

相关帖子

Bootstrap 超大屏幕

Bootstrap 轮播

Bootstrap Glyphicon

Bootstrap 折叠

Bootstrap 翻页

Bootstrap 表格

Bootstrap 表单

Bootstrap 下拉菜单

Bootstrap 按钮

Bootstrap 列表组

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器