422 lines
18 KiB
HTML
422 lines
18 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8" />
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
|||
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
|||
|
|
<title>Material Design for Bootstrap</title>
|
|||
|
|
<!-- MDB icon -->
|
|||
|
|
<link rel="icon" href="../../img/mdb-favicon.ico" type="image/x-icon" />
|
|||
|
|
<!-- Font Awesome -->
|
|||
|
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
|
|||
|
|
<!-- Google Fonts Roboto -->
|
|||
|
|
<link
|
|||
|
|
rel="stylesheet"
|
|||
|
|
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
|
|||
|
|
/>
|
|||
|
|
<!-- MDB -->
|
|||
|
|
<link rel="stylesheet" href="../../css/mdb.min.css" />
|
|||
|
|
<!-- PRISM -->
|
|||
|
|
<link rel="stylesheet" href="../../dev/css/new-prism.css" />
|
|||
|
|
<!-- Custom styles -->
|
|||
|
|
<style></style>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body data-mdb-spy="scroll" data-mdb-target="#scrollspy" data-mdb-offset="0">
|
|||
|
|
<div class="container my-5">
|
|||
|
|
<!-- Navs -->
|
|||
|
|
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
|
|||
|
|
<!-- Overview tab -->
|
|||
|
|
<li class="nav-item" role="presentation">
|
|||
|
|
<a
|
|||
|
|
class="nav-link active"
|
|||
|
|
id="pills-overview-tab"
|
|||
|
|
data-mdb-toggle="pill"
|
|||
|
|
href="#pills-overview"
|
|||
|
|
role="tab"
|
|||
|
|
aria-controls="pills-overview"
|
|||
|
|
aria-selected="true"
|
|||
|
|
>Overview</a
|
|||
|
|
>
|
|||
|
|
</li>
|
|||
|
|
<!-- Overview tab -->
|
|||
|
|
</ul>
|
|||
|
|
<!-- Navs -->
|
|||
|
|
|
|||
|
|
<!-- Panels -->
|
|||
|
|
<div class="tab-content mt-4" id="pills-tabContent">
|
|||
|
|
<!-- Overview panel -->
|
|||
|
|
<div
|
|||
|
|
class="tab-pane fade show active"
|
|||
|
|
id="pills-overview"
|
|||
|
|
role="tabpanel"
|
|||
|
|
aria-labelledby="pills-overview-tab"
|
|||
|
|
>
|
|||
|
|
<!--Grid row-->
|
|||
|
|
<div class="row">
|
|||
|
|
<!--Grid column-->
|
|||
|
|
<div class="col-md-10 mb-4">
|
|||
|
|
<!--Section: Docs content-->
|
|||
|
|
<section>
|
|||
|
|
<!--Section: Introduction-->
|
|||
|
|
<section id="section-introduction">
|
|||
|
|
<!-- Main title -->
|
|||
|
|
<h2 class="h1 fw-bold">Alerts</h2>
|
|||
|
|
|
|||
|
|
<!-- Seo title -->
|
|||
|
|
<h1 class="h5">Bootstrap 5 Alerts</h1>
|
|||
|
|
|
|||
|
|
<!-- Description -->
|
|||
|
|
<p>
|
|||
|
|
Provide contextual feedback messages for typical user actions with the handful
|
|||
|
|
of available and flexible alert messages.
|
|||
|
|
</p>
|
|||
|
|
</section>
|
|||
|
|
<!--Section: Introduction-->
|
|||
|
|
|
|||
|
|
<hr class="my-5" />
|
|||
|
|
|
|||
|
|
<!--Section: Basic example-->
|
|||
|
|
<section id="section-basic-example">
|
|||
|
|
<!-- Section title -->
|
|||
|
|
<h2 class="mb-4">Basic example</h2>
|
|||
|
|
|
|||
|
|
<!--Section: Demo-->
|
|||
|
|
<section class="border p-4 d-flex justify-content-center mb-4">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="alert alert-primary" role="alert">
|
|||
|
|
A simple primary alert—check it out!
|
|||
|
|
</div>
|
|||
|
|
<div class="alert alert-secondary" role="alert">
|
|||
|
|
A simple secondary alert—check it out!
|
|||
|
|
</div>
|
|||
|
|
<div class="alert alert-success" role="alert">
|
|||
|
|
A simple success alert—check it out!
|
|||
|
|
</div>
|
|||
|
|
<div class="alert alert-danger" role="alert">
|
|||
|
|
A simple danger alert—check it out!
|
|||
|
|
</div>
|
|||
|
|
<div class="alert alert-warning" role="alert">
|
|||
|
|
A simple warning alert—check it out!
|
|||
|
|
</div>
|
|||
|
|
<div class="alert alert-info" role="alert">
|
|||
|
|
A simple info alert—check it out!
|
|||
|
|
</div>
|
|||
|
|
<div class="alert alert-light" role="alert">
|
|||
|
|
A simple light alert—check it out!
|
|||
|
|
</div>
|
|||
|
|
<div class="alert alert-dark" role="alert">
|
|||
|
|
A simple dark alert—check it out!
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
<!--Section: Demo-->
|
|||
|
|
|
|||
|
|
<!--Section: Code-->
|
|||
|
|
<section>
|
|||
|
|
<mdbsnippet>
|
|||
|
|
<code data-lang="html" data-name="HTML">
|
|||
|
|
<div class="alert alert-primary" role="alert">
|
|||
|
|
A simple primary alert—check it out!
|
|||
|
|
</div>
|
|||
|
|
<div class="alert alert-secondary" role="alert">
|
|||
|
|
A simple secondary alert—check it out!
|
|||
|
|
</div>
|
|||
|
|
<div class="alert alert-success" role="alert">
|
|||
|
|
A simple success alert—check it out!
|
|||
|
|
</div>
|
|||
|
|
<div class="alert alert-danger" role="alert">
|
|||
|
|
A simple danger alert—check it out!
|
|||
|
|
</div>
|
|||
|
|
<div class="alert alert-warning" role="alert">
|
|||
|
|
A simple warning alert—check it out!
|
|||
|
|
</div>
|
|||
|
|
<div class="alert alert-info" role="alert">
|
|||
|
|
A simple info alert—check it out!
|
|||
|
|
</div>
|
|||
|
|
<div class="alert alert-light" role="alert">
|
|||
|
|
A simple light alert—check it out!
|
|||
|
|
</div>
|
|||
|
|
<div class="alert alert-dark" role="alert">
|
|||
|
|
A simple dark alert—check it out!
|
|||
|
|
</div>
|
|||
|
|
</code>
|
|||
|
|
</mdbsnippet>
|
|||
|
|
</section>
|
|||
|
|
<!--Section: Code-->
|
|||
|
|
</section>
|
|||
|
|
<!--Section: Basic example-->
|
|||
|
|
|
|||
|
|
<hr class="my-5" />
|
|||
|
|
|
|||
|
|
<!--Section: Link Color-->
|
|||
|
|
<section id="section-link-color">
|
|||
|
|
<!-- Section title -->
|
|||
|
|
<h2 class="mb-4">Link Color</h2>
|
|||
|
|
|
|||
|
|
<!--Section: Demo-->
|
|||
|
|
<section class="border p-4 d-flex justify-content-center mb-4">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="alert alert-primary" role="alert">
|
|||
|
|
A simple primary alert with
|
|||
|
|
<a href="#" class="alert-link">an example link</a>. Give it a click if you
|
|||
|
|
like.
|
|||
|
|
</div>
|
|||
|
|
<div class="alert alert-secondary" role="alert">
|
|||
|
|
A simple secondary alert with
|
|||
|
|
<a href="#" class="alert-link">an example link</a>. Give it a click if you
|
|||
|
|
like.
|
|||
|
|
</div>
|
|||
|
|
<div class="alert alert-success" role="alert">
|
|||
|
|
A simple success alert with
|
|||
|
|
<a href="#" class="alert-link">an example link</a>. Give it a click if you
|
|||
|
|
like.
|
|||
|
|
</div>
|
|||
|
|
<div class="alert alert-danger" role="alert">
|
|||
|
|
A simple danger alert with
|
|||
|
|
<a href="#" class="alert-link">an example link</a>. Give it a click if you
|
|||
|
|
like.
|
|||
|
|
</div>
|
|||
|
|
<div class="alert alert-warning" role="alert">
|
|||
|
|
A simple warning alert with
|
|||
|
|
<a href="#" class="alert-link">an example link</a>. Give it a click if you
|
|||
|
|
like.
|
|||
|
|
</div>
|
|||
|
|
<div class="alert alert-info" role="alert">
|
|||
|
|
A simple info alert with <a href="#" class="alert-link">an example link</a>.
|
|||
|
|
Give it a click if you like.
|
|||
|
|
</div>
|
|||
|
|
<div class="alert alert-light" role="alert">
|
|||
|
|
A simple light alert with
|
|||
|
|
<a href="#" class="alert-link">an example link</a>. Give it a click if you
|
|||
|
|
like.
|
|||
|
|
</div>
|
|||
|
|
<div class="alert alert-dark" role="alert">
|
|||
|
|
A simple dark alert with <a href="#" class="alert-link">an example link</a>.
|
|||
|
|
Give it a click if you like.
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
<!--Section: Demo-->
|
|||
|
|
|
|||
|
|
<!--Section: Code-->
|
|||
|
|
<section>
|
|||
|
|
<mdbsnippet>
|
|||
|
|
<code data-lang="html" data-name="HTML">
|
|||
|
|
<div class="alert alert-primary" role="alert">
|
|||
|
|
A simple primary alert with
|
|||
|
|
<a href="#" class="alert-link">an example link</a>. Give it a click if you
|
|||
|
|
like.
|
|||
|
|
</div>
|
|||
|
|
<div class="alert alert-secondary" role="alert">
|
|||
|
|
A simple secondary alert with
|
|||
|
|
<a href="#" class="alert-link">an example link</a>. Give it a click if you
|
|||
|
|
like.
|
|||
|
|
</div>
|
|||
|
|
<div class="alert alert-success" role="alert">
|
|||
|
|
A simple success alert with
|
|||
|
|
<a href="#" class="alert-link">an example link</a>. Give it a click if you
|
|||
|
|
like.
|
|||
|
|
</div>
|
|||
|
|
<div class="alert alert-danger" role="alert">
|
|||
|
|
A simple danger alert with
|
|||
|
|
<a href="#" class="alert-link">an example link</a>. Give it a click if you
|
|||
|
|
like.
|
|||
|
|
</div>
|
|||
|
|
<div class="alert alert-warning" role="alert">
|
|||
|
|
A simple warning alert with
|
|||
|
|
<a href="#" class="alert-link">an example link</a>. Give it a click if you
|
|||
|
|
like.
|
|||
|
|
</div>
|
|||
|
|
<div class="alert alert-info" role="alert">
|
|||
|
|
A simple info alert with
|
|||
|
|
<a href="#" class="alert-link">an example link</a>. Give it a click if you
|
|||
|
|
like.
|
|||
|
|
</div>
|
|||
|
|
<div class="alert alert-light" role="alert">
|
|||
|
|
A simple light alert with
|
|||
|
|
<a href="#" class="alert-link">an example link</a>. Give it a click if you
|
|||
|
|
like.
|
|||
|
|
</div>
|
|||
|
|
<div class="alert alert-dark" role="alert">
|
|||
|
|
A simple dark alert with
|
|||
|
|
<a href="#" class="alert-link">an example link</a>. Give it a click if you
|
|||
|
|
like.
|
|||
|
|
</div>
|
|||
|
|
</code>
|
|||
|
|
</mdbsnippet>
|
|||
|
|
</section>
|
|||
|
|
<!--Section: Code-->
|
|||
|
|
</section>
|
|||
|
|
<!--Section: Link Color-->
|
|||
|
|
|
|||
|
|
<hr class="my-5" />
|
|||
|
|
|
|||
|
|
<!--Section: Additional Content-->
|
|||
|
|
<section id="section-additional-content">
|
|||
|
|
<!-- Section title -->
|
|||
|
|
<h2 class="mb-4">Additional Content</h2>
|
|||
|
|
|
|||
|
|
<!--Section: Demo-->
|
|||
|
|
<section class="border p-4 d-flex justify-content-center mb-4">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="alert alert-success" role="alert">
|
|||
|
|
<h4 class="alert-heading">Well done!</h4>
|
|||
|
|
<p>
|
|||
|
|
Aww yeah, you successfully read this important alert message. This example
|
|||
|
|
text is going to run a bit longer so that you can see how spacing within
|
|||
|
|
an alert works with this kind of content.
|
|||
|
|
</p>
|
|||
|
|
<hr />
|
|||
|
|
<p class="mb-0">
|
|||
|
|
Whenever you need to, be sure to use margin utilities to keep things nice
|
|||
|
|
and tidy.
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
<!--Section: Demo-->
|
|||
|
|
|
|||
|
|
<!--Section: Code-->
|
|||
|
|
<section>
|
|||
|
|
<mdbsnippet>
|
|||
|
|
<code data-lang="html" data-name="HTML">
|
|||
|
|
<div class="alert alert-success" role="alert">
|
|||
|
|
<h4 class="alert-heading">Well done!</h4>
|
|||
|
|
<p>
|
|||
|
|
Aww yeah, you successfully read this important alert message. This
|
|||
|
|
example text is going to run a bit longer so that you can see how
|
|||
|
|
spacing within an alert works with this kind of content.
|
|||
|
|
</p>
|
|||
|
|
<hr />
|
|||
|
|
<p class="mb-0">
|
|||
|
|
Whenever you need to, be sure to use margin utilities to keep things
|
|||
|
|
nice and tidy.
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</code>
|
|||
|
|
</mdbsnippet>
|
|||
|
|
</section>
|
|||
|
|
<!--Section: Code-->
|
|||
|
|
</section>
|
|||
|
|
<!--Section: Additional Content-->
|
|||
|
|
|
|||
|
|
<hr class="my-5" />
|
|||
|
|
|
|||
|
|
<!--Section: Dismissing-->
|
|||
|
|
<section id="section-dismissing">
|
|||
|
|
<!-- Section title -->
|
|||
|
|
<h2 class="mb-4">Dismissing</h2>
|
|||
|
|
|
|||
|
|
<p>
|
|||
|
|
Using the alert JavaScript plugin, it’s possible to dismiss any alert inline.
|
|||
|
|
Here’s how:
|
|||
|
|
</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
Be sure you’ve loaded the alert plugin, or the compiled Bootstrap JavaScript.
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
Add a close button and the <code>.alert-dismissible</code> class, which adds
|
|||
|
|
extra padding to the right of the alert and positions the close button.
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
On the close button, add the <code>data-mdb-dismiss="alert"</code> attribute,
|
|||
|
|
which triggers the JavaScript functionality. Be sure to use the
|
|||
|
|
<code>button</code> element with it for proper behavior across all devices.
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
To animate alerts when dismissing them, be sure to add the
|
|||
|
|
<code>.fade</code> and <code>.show classes</code>.
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<p>You can see this in action with a live demo:</p>
|
|||
|
|
|
|||
|
|
<!--Section: Demo-->
|
|||
|
|
<section class="border p-4 d-flex justify-content-center mb-4">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="alert alert-warning alert-dismissible fade show" role="alert">
|
|||
|
|
<strong>Holy guacamole!</strong> You should check in on some of those fields
|
|||
|
|
below.
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
class="btn-close"
|
|||
|
|
data-mdb-dismiss="alert"
|
|||
|
|
aria-label="Close"
|
|||
|
|
></button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
<!--Section: Demo-->
|
|||
|
|
|
|||
|
|
<!--Section: Code-->
|
|||
|
|
<section>
|
|||
|
|
<mdbsnippet>
|
|||
|
|
<code data-lang="html" data-name="HTML">
|
|||
|
|
<div class="alert alert-warning alert-dismissible fade show" role="alert">
|
|||
|
|
<strong>Holy guacamole!</strong> You should check in on some of those
|
|||
|
|
fields below.
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
class="btn-close"
|
|||
|
|
data-mdb-dismiss="alert"
|
|||
|
|
aria-label="Close"
|
|||
|
|
></button>
|
|||
|
|
</div>
|
|||
|
|
</code>
|
|||
|
|
</mdbsnippet>
|
|||
|
|
</section>
|
|||
|
|
<!--Section: Code-->
|
|||
|
|
</section>
|
|||
|
|
<!--Section: Dismissing-->
|
|||
|
|
</section>
|
|||
|
|
<!--Section: Docs content-->
|
|||
|
|
</div>
|
|||
|
|
<!--Grid column-->
|
|||
|
|
|
|||
|
|
<!--Grid column-->
|
|||
|
|
<div class="col-md-2 mb-4">
|
|||
|
|
<!-- Table of content -->
|
|||
|
|
<div id="scrollspy" class="sticky-top">
|
|||
|
|
<ul class="nav flex-column nav-pills menu-sidebar">
|
|||
|
|
<!-- Links -->
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link active" href="#section-introduction">Introduction</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="#section-basic-example">Basic example</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="#section-link-color">Link Color</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="#section-additional-content">Additional Content</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a class="nav-link" href="#section-dismissing">Dismissing</a>
|
|||
|
|
</li>
|
|||
|
|
<!-- Links -->
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<!-- Table of content -->
|
|||
|
|
</div>
|
|||
|
|
<!--Grid column-->
|
|||
|
|
</div>
|
|||
|
|
<!--Grid row-->
|
|||
|
|
</div>
|
|||
|
|
<!-- Overview panel -->
|
|||
|
|
</div>
|
|||
|
|
<!-- Panels -->
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- PRISM -->
|
|||
|
|
<script type="text/javascript" src="../../dev/js/new-prism.js"></script>
|
|||
|
|
<!-- MDB SNIPPET -->
|
|||
|
|
<script type="text/javascript" src="../../dev/js/dist/mdbsnippet.min.js"></script>
|
|||
|
|
<!-- MDB -->
|
|||
|
|
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
|||
|
|
<!-- Custom scripts -->
|
|||
|
|
<script type="text/javascript"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|