举报投诉联系我们 手机版 热门标签 鳄鱼CMS
您的位置:鳄鱼CMS > Bootstrap4 信息提示框

Bootstrap4 信息提示框

2023-05-21 06:31 bootstrap4教程

 Bootstrap4 信息提示框

Bootstrap4中,信息提示框功能的实现非常容易。而且可以使用各种类实现提示框的颜色、动画等样式。


提示框颜色:

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

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
<div class="container">
  <h2>提示框</h2>
  <p>提示框可以使用 .alert 类, 后面加上指定特定意义的颜色类来实现:</p>
  <div class="alert alert-success">
    <strong>成功!</strong> 指定操作成功提示信息。
  </div>
  <div class="alert alert-info">
    <strong>信息!</strong> 请注意这个信息。
  </div>
  <div class="alert alert-warning">
    <strong>警告!</strong> 设置警告信息。
  </div>
  <div class="alert alert-danger">
    <strong>错误!</strong> 失败的操作
  </div>
  <div class="alert alert-primary">
?   <strong>首选!</strong> 这是一个重要的操作信息。
  </div>
  <div class="alert alert-secondary">
?   <strong>次要的!</strong> 显示一些不重要的信息。
  </div>
  <div class="alert alert-dark">
?   <strong>深灰色!</strong> 深灰色提示框。
  </div>
  <div class="alert alert-light">
?   <strong>浅灰色!</strong>浅灰色提示框。
  </div>
</div>
</body>
</html>


提示框添加链接

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

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
<div class="container">
  <h2>提示框添加链接</h2>
  <p>提示框中在链接的标签上添加 alert-link 类来设置匹配提示框颜色的链接:</p>
  <div class="alert alert-success">
    <strong>成功!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。
  </div>
  <div class="alert alert-info">
    <strong>信息!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。
  </div>
  <div class="alert alert-warning">
    <strong>警告!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。
  </div>
  <div class="alert alert-danger">
    <strong>错误!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。
  </div>
  <div class="alert alert-primary">
    <strong>首选!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。
  </div>
  <div class="alert alert-secondary">
    <strong>次要的!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。
  </div>
  <div class="alert alert-dark">
    <strong>深灰色!</strong>你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。
  </div>
  <div class="alert alert-light">
    <strong>灰色!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。
  </div>
</div>
</body>
</html>


关闭提示框

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

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
<div class="container">
  <h2>关闭提示框</h2>
  <p>我们可以在提示框中的 div 中添加 .alert-dismissable 类,然后在关闭按钮的链接上添加 class="close" 和 data-dismiss="alert" 类来设置提示框的关闭操作。</p>
  <div class="alert alert-success alert-dismissable">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>成功!</strong> 指定操作成功提示信息。
  </div>
  <div class="alert alert-info alert-dismissable">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>信息!</strong> 请注意这个信息。
  </div>
  <div class="alert alert-warning alert-dismissable">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>警告!</strong> 设置警告信息。
  </div>
  <div class="alert alert-danger alert-dismissable">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>错误!</strong> 失败的操作。
  </div>
  <div class="alert alert-primary alert-dismissable">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>首选!</strong> 这是一个重要的操作信息。
  </div>
  <div class="alert alert-secondary alert-dismissable">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>次要的!</strong> 显示一些不重要的信息。
  </div>
  <div class="alert alert-dark alert-dismissable">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>深灰色!</strong> 深灰色提示框。
  </div>
  <div class="alert alert-light alert-dismissable">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>浅灰色!</strong>浅灰色提示框。
  </div>
</div>
</body>
</html>

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


提示框动画

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

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>
<div class="container">
  <h2>提示框动画</h2>
  <p>.fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果:</p>
  <div class="alert alert-success alert-dismissable fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>成功!</strong> 指定操作成功提示信息。
  </div>
  <div class="alert alert-info alert-dismissable fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>信息!</strong> 请注意这个信息。
  </div>
  <div class="alert alert-warning alert-dismissable fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>警告!</strong> 设置警告信息。
  </div>
  <div class="alert alert-danger alert-dismissable fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>错误!</strong> 失败的操作。
  </div>
  <div class="alert alert-primary alert-dismissable fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>首选!</strong> 这是一个重要的操作信息。
  </div>
  <div class="alert alert-secondary alert-dismissable fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>次要的!</strong> 显示一些不重要的信息。
  </div>
  <div class="alert alert-dark alert-dismissable fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>深灰色!</strong> 深灰色提示框。
  </div>
  <div class="alert alert-light alert-dismissable fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>浅灰色!</strong>浅灰色提示框。
  </div>
</div>
</body>
</html>


阅读全文
以上是鳄鱼CMS为你收集整理的 Bootstrap4 信息提示框全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
  • angular ui库 Angular 库的原理

    angular ui库 Angular 库的原理

    2023-05-31 Angular13

    库的原理图当创建 Angular 库时,你可以为同时为它打包进一组原理图,并把它与 Angular CLI 集成在一起。借助原理图,用户可以用...

  • 英雄之旅安卓 Angular 英雄之旅-从服务器获取数据

    英雄之旅安卓 Angular 英雄之旅-从服务器获取数据

    2023-06-17 Angular13

    从服务端获取数据在这节课中,你将借助Angular的​HttpClient​来添加一些数据持久化特性。​HeroService​通过HTTP请求获取英雄...

  • angular的路由 Angular 路线

    angular的路由 Angular 路线

    2023-04-15 Angular13

    Angular路线图Angular从Google内部和更广泛的开源社区都收到了大量的特性请求。与此同时,我们的项目列表包含大量维护任务、代码...

  •  Node.js HTTPS

    Node.js HTTPS

    2023-04-06 Node.js教程

    稳定性: 3 - 稳定HTTPS是什么?HTTPS是基于TLS/SSL的HTTP协议,在Node.js里它可以作为单独的模块来实现。在本文中,你将了解HTTP...

  •  TypeScript Mixins

    TypeScript Mixins

    2023-05-18 TypeScript教程

    除了传统的面向对象继承方式,还流行一种通过可重用组件创建类的方式,就是联合另一个简单类的代码。 你可能在Scala等语言里对mi...

© 2024 鳄鱼CMS eyucms.com 版权所有 联系我们