📅 最后修改于: 2023-12-03 15:13:40.716000 🧑 作者: Mango
Bootstrap Toast is a small notification popup used in web applications. It is lightweight and provides a convenient way to display a message to the user. In this article, we will explore how to use Bootstrap Toast in HTML.
First, we need to include the Bootstrap CSS file and JS file in our HTML file. We can do this by adding the following code to the <head> section of our HTML file:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-Qw6e8+5vbRmdi1p6ptOx6sAybFW3TjYlOHlUKIzed10KpqmJ/+KX0wwXuZP0MlgJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnYYE1iYYUksdQRVvoxMf3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js"></script>
To create a toast, we need to add a container with the class toast and an ID to that container. For example:
<div class="toast" id="myToast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="mr-auto">Bootstrap Toast</strong>
<small>Now</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
This is a Bootstrap Toast Example!
</div>
</div>
In the above example, we have added a container with the class toast and an ID myToast. We also defined a header and a body for the toast.
Note that the data-dismiss="toast" attribute on the close button dismisses the toast when clicked.
We can show the toast using JavaScript. Here is an example:
<script>
$(document).ready(function(){
$('#myToast').toast('show');
});
</script>
In the above code, we have used jQuery to show the toast with the ID myToast.
Bootstrap Toast is a simple and effective way to display notifications in a web application. We hope this article has provided you with enough information to get started using Bootstrap Toast in your HTML application.
# Bootstrap Toast - HTML
Bootstrap Toast 是用于 Web 应用程序中的小型通知弹出窗口。它是轻量级的，为用户提供了一种方便的方式来显示消息。在本文中，我们将探讨如何在 HTML 中使用 Bootstrap Toast。
## 入门
首先，我们需要在 HTML 文件中包含 Bootstrap CSS 文件和 JS 文件。我们可以通过将以下代码添加到 HTML 文件的 ```<head>``` 部分来实现：
```html
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-Qw6e8+5vbRmdi1p6ptOx6sAybFW3TjYlOHlUKIzed10KpqmJ/+KX0wwXuZP0MlgJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnYYE1iYYUksdQRVvoxMf3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js"></script>
要创建 Toast，我们需要向该容器添加一个具有 toast 类和一个 ID 的容器。例如：
<div class="toast" id="myToast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="mr-auto">Bootstrap Toast</strong>
<small>Now</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
This is a Bootstrap Toast Example!
</div>
</div>
在上面的示例中，我们添加了一个具有类 `toast``` 和 ID `myToast``` 的容器。我们还为 Toast 定义了头和主体。
请注意，关闭按钮上的 data-dismiss="toast" 属性会在单击时解除 Toast。
我们可以使用 JavaScript 显示 Toast。这里是一个例子：
<script>
$(document).ready(function(){
$('#myToast').toast('show');
});
</script>
在上面的代码中，我们使用 jQuery 来显示具有 ID `` `myToast``` 的 Toast。
Bootstrap Toast 是在 Web 应用程序中显示通知的简单有效的方法。我们希望本文提供了足够的信息，使您能够开始在 HTML 应用程序中使用 Bootstrap Toast。