249 lines
12 KiB
PHP
Executable File
249 lines
12 KiB
PHP
Executable File
@extends('layouts.vertical', ['subtitle' => 'Alerts'])
|
|
|
|
@section('content')
|
|
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Alerts'])
|
|
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">Basic Example</h5>
|
|
<p class="card-subtitle">
|
|
Provide contextual feedback messages for typical user actions with the handful of available and
|
|
flexible alert
|
|
messages. Alerts are available for any length of text, as well as an optional dismiss button.
|
|
</p>
|
|
</div>
|
|
<div class="card-body">
|
|
<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 mb-0" role="alert">
|
|
A simple dark alert—check it out!
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">
|
|
Dismissible Alerts Example
|
|
</h5>
|
|
<p class="card-subtitle">
|
|
Add a dismiss button and the <code>.alert-dismissible</code> class, which adds extra padding to the
|
|
right of the alert and
|
|
positions the <code>.btn-close</code> button.
|
|
</p>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="alert alert-primary alert-dismissible fade show" role="alert">
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
A simple primary alert—check it out!
|
|
</div>
|
|
<div class="alert alert-secondary alert-dismissible fade show" role="alert">
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
A simple secondary alert—check it out!
|
|
</div>
|
|
<div class="alert alert-success alert-dismissible fade show" role="alert">
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
A simple success alert—check it out!
|
|
</div>
|
|
<div class="alert alert-danger alert-dismissible fade show" role="alert">
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
A simple danger alert—check it out!
|
|
</div>
|
|
<div class="alert alert-warning alert-dismissible fade show" role="alert">
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
A simple warning alert—check it out!
|
|
</div>
|
|
<div class="alert alert-info alert-dismissible fade show" role="alert">
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
A simple info alert—check it out!
|
|
</div>
|
|
<div class="alert alert-light alert-dismissible fade show" role="alert">
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
A simple light alert—check it out!
|
|
</div>
|
|
<div class="alert alert-dark alert-dismissible fade show mb-0" role="alert">
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
A simple dark alert—check it out!
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!-- end col -->
|
|
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">
|
|
Alert Link Example
|
|
</h5>
|
|
<p class="card-subtitle">
|
|
Use the <code>.alert-link</code> utility class to quickly provide matching colored links within any
|
|
alert.
|
|
</p>
|
|
</div>
|
|
<div class="card-body">
|
|
|
|
<div class="alert alert-primary" role="alert">
|
|
A simple primary alert with <a href="javascript:void(0);" 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="javascript:void(0);" 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="javascript:void(0);" class="alert-link">an example link</a>.
|
|
Give it a click if you like.
|
|
</div>
|
|
<div class="alert alert-danger mb-0" role="alert">
|
|
A simple danger alert with <a href="javascript:void(0);" class="alert-link">an example link</a>.
|
|
Give it a click if you like.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!-- end col -->
|
|
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">
|
|
Icons Alert Example
|
|
</h5>
|
|
<p class="card-subtitle">
|
|
You can also include additional elements like icons, heading, etc along side the actual message.
|
|
</p>
|
|
</div>
|
|
<div class="card-body">
|
|
|
|
<div class="alert alert-primary alert-icon" role="alert">
|
|
<div class="d-flex align-items-center">
|
|
<div
|
|
class="avatar-sm rounded bg-primary d-flex justify-content-center align-items-center fs-18 me-2 flex-shrink-0">
|
|
<i class="bx bx-info-circle text-white"></i>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
A simple primary alert—check it out!
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="alert alert-secondary alert-icon" role="alert">
|
|
<div class="d-flex align-items-center">
|
|
<div
|
|
class="avatar-sm rounded bg-secondary d-flex justify-content-center align-items-center fs-18 me-2 flex-shrink-0">
|
|
<i class="bx bx-x-circle text-white"></i>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
A simple secondary alert—check it out!
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="alert alert-success alert-icon" role="alert">
|
|
<div class="d-flex align-items-center">
|
|
<div
|
|
class="avatar-sm rounded bg-success d-flex justify-content-center align-items-center fs-18 me-2 flex-shrink-0">
|
|
<i class="bx bx-check-shield text-white"></i>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
A simple success alert—check it out!
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="alert alert-danger alert-icon mb-0" role="alert">
|
|
<div class="d-flex align-items-center">
|
|
<div
|
|
class="avatar-sm rounded bg-danger d-flex justify-content-center align-items-center fs-18 me-2 flex-shrink-0">
|
|
<i class="bx bx-info-circle text-white"></i>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
A simple danger alert—check it out!
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- end col -->
|
|
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">
|
|
Additional Content Alert Example
|
|
</h5>
|
|
<p class="card-subtitle">
|
|
Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
|
|
</p>
|
|
</div>
|
|
<div class="card-body">
|
|
|
|
<div class="row">
|
|
<div class="col-xl-6">
|
|
<div class="alert alert-primary mb-3 p-3 mb-xl-0" role="alert">
|
|
<h4 class="alert-heading">Well done!</h4>
|
|
<p class="mb-0">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>
|
|
<div class="col-xl-6">
|
|
<div class="alert alert-secondary p-3 mb-0" role="alert">
|
|
<h4 class="alert-heading">Well done!</h4>
|
|
<p class="mb-0">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>
|
|
</div>
|
|
|
|
</div> <!-- end card body -->
|
|
</div> <!-- end card -->
|
|
</div> <!-- end col -->
|
|
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">
|
|
Live example
|
|
</h5>
|
|
<p class="card-subtitle">
|
|
Click the button below to show an alert (hidden with inline styles to start), then dismiss (and
|
|
destroy) it with the built-in close button.
|
|
</p>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="liveAlertPlaceholder"></div>
|
|
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>
|
|
</div> <!-- end card body -->
|
|
</div> <!-- end card -->
|
|
</div><!-- end col -->
|
|
</div> <!-- end row -->
|
|
@endsection |