mitsuo_makuda/bootstrap-fluent-design_template
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
master
bootstrap-fluent-design_tem.../free/components/alert.html

422 lines
18 KiB
HTML
Raw Permalink Normal View History

New Fluent Design
2021-04-15 13:11:19 +01:00
<!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>
Reference in New Issue Copy Permalink