极客教程Bootstrap 5警报器的附加内容
Boostrap提醒有助于告知用户特定事件或给予确认。但大多数时候，只有简单的文字提示不足以传达信息。需要有一些具有适当层次的附加内容。在这种情况下，附加内容就出现了。它允许开发者将额外的信息和警报的细节以一种干净的、分层的方式放在一起。我们需要使用class alert来创建一个警报。让我们看看语法和一些例子。
前提条件：Bootstrap 5 Alert组件，以创建一个警报。
Alerts附加内容类：没有要求这个类，我们只放HTML元素，这将是警报的附加组件，如标题，段落，按钮和分隔符。
语法:
<div class="alert">
<!-- Additional content -->
<h2 class="alert-heading">....</h2>
<hr>
<p>......</p>
</div>
下面的例子说明了Bootstrap 5警报的附加内容：
实例1：实例说明我们如何在Bootstrap 5中显示额外的内容。
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous" />
</head>
<body class="m-3">
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<strong class="m-3">Bootstrap 5 Alerts Additional Content</strong>
<br />
<div class="alert alert-success">
<!-- Additional content inside alert box -->
<h4 class="alert-heading">Huge Discount</h4>
<p>
Did you checkout the GeeksforGeeks courses. Do check and get one for
yourself! The validity of cources are lifetime, you can do that
according to your own pace.
</p>
<hr>
<p>Additional Feature: 24 X 7 Doubt Assistance for 6 Months</p>
</div>
</center>
</body>
</html>
输出:
Bootstrap 5警报器的附加内容
例子2：这个例子展示了警报内容中的链接和按钮的演示。
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous" />
</head>
<body class="m-3">
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<strong>Bootstrap 5 Alerts Additional Content</strong>
</center>
<div class="alert alert-primary">
<!-- Additional content inside alert box -->
<h4 class="alert-heading">Job-a-Thon</h4>
<p>
Monthly hiring challenges conducted by
<a href="#" class="alert-link">GeeksforGeeks</a> connecting suitable
candidates to tech companies. You can get a chance to interview with
top companies for leading job roles in Data Science, Machine Learning
and Analytics
</p>
<hr />
<button type="button" class="btn btn-success">Subscribe Now!</button>
</div>
</body>
</html>
输出:
Bootstrap 5警报器的附加内容