Bootstrap4

最新推荐文章于 2024-08-13 06:06:29 发布

s3337838

最新推荐文章于 2024-08-13 06:06:29 发布

阅读量160

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/s3337838/article/details/128999012

版权

这篇文章介绍了如何在Bootstrap4中创建各种类型的信息提示框，包括成功、信息、警告和错误等，并展示了如何添加关闭功能。此外，还讲解了Bootstrap4的按钮样式，包括不同颜色和类型的按钮，以及这些样式可应用于哪些HTML元素。

摘要由CSDN通过智能技术生成

Bootstrap4 信息提示框

<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>

关闭提示框

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

<div class="alert alert-success alert-dismissible">

<button type="button" class="close" data-dismiss="alert">×</button>

<strong>成功!</strong> 指定操作成功提示信息。

</div>

提示框动画

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

Bootstrap4 按钮

Bootstrap 4 提供了不同样式的按钮。

<div class="container">
<h2>按钮样式</h2>
<button type="button" class="btn">基本按钮</button>
<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-secondary">次要按钮</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-info">信息</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-danger">危险</button>
<button type="button" class="btn btn-dark">黑色</button>
<button type="button" class="btn btn-light">浅色</button>
<button type="button" class="btn btn-link">链接</button>
</div

按钮类可用于 <a>, <button>, 或 <input> 元素上

<div class="container">
<h2>按钮元素</h2>
<a href="#" class="btn btn-info" role="button">链接按钮</a>
<button type="button" class="btn btn-info">按钮</button>
<input type="button" class="btn btn-info" value="输入框按钮">
<input type="submit" class="btn btn-info" value="提交按钮">
</div>