634 lines
26 KiB
HTML
634 lines
26 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>
|
||
<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 -->
|
||
|
||
<!-- Api tab -->
|
||
<li class="nav-item" role="presentation">
|
||
<a
|
||
class="nav-link"
|
||
id="pills-api-tab"
|
||
data-mdb-toggle="pill"
|
||
href="#pills-api"
|
||
role="tab"
|
||
aria-controls="pills-api"
|
||
aria-selected="false"
|
||
>API</a
|
||
>
|
||
</li>
|
||
<!-- Api 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">Title</h2>
|
||
|
||
<!-- Seo title -->
|
||
<h1 class="h5">Subtitle</h1>
|
||
|
||
<!-- Description -->
|
||
<p>
|
||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere mollitia qui
|
||
aut. Molestias explicabo autem veniam doloribus doloremque numquam odit rem
|
||
sapiente natus ipsam temporibus voluptates, ab mollitia repellat! Itaque.
|
||
</p>
|
||
</section>
|
||
<!--Section: Introduction-->
|
||
|
||
<hr class="my-5" />
|
||
|
||
<!--Section: Basic example-->
|
||
<section id="section-basic-example">
|
||
<!-- Section title -->
|
||
<h2>Overview</h2>
|
||
<p>
|
||
Bootstrap’s form controls expand on our Rebooted form styles with classes. Use
|
||
these classes to opt into their customized displays for a more consistent
|
||
rendering across browsers and devices.
|
||
</p>
|
||
<p>
|
||
Be sure to use an appropriate <code>type</code> attribute on all inputs (e.g.,
|
||
<code>email</code> for email address or <code>number</code> for numerical
|
||
information) to take advantage of newer input controls like email verification,
|
||
number selection, and more.
|
||
</p>
|
||
<p>
|
||
Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading for
|
||
documentation on required classes, form layout, and more.
|
||
</p>
|
||
|
||
<!--Section: Demo-->
|
||
<section class="border p-4 mb-4">
|
||
<form>
|
||
<div class="form-outline">
|
||
<input
|
||
type="email"
|
||
class="form-control"
|
||
id="exampleInputEmail1"
|
||
aria-describedby="emailHelp"
|
||
/>
|
||
<label for="exampleInputEmail1" class="form-label">Email address</label>
|
||
</div>
|
||
<div id="emailHelp" class="form-text mb-3">
|
||
We'll never share your email with anyone else.
|
||
</div>
|
||
<div class="form-outline mb-3">
|
||
<input type="password" class="form-control" id="exampleInputPassword1" />
|
||
<label for="exampleInputPassword1" class="form-label">Password</label>
|
||
</div>
|
||
<div class="mb-3 form-check">
|
||
<input type="checkbox" class="form-check-input" id="exampleCheck1" />
|
||
<label class="form-check-label" for="exampleCheck1">Check me out</label>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary">Submit</button>
|
||
</form>
|
||
</section>
|
||
<!--Section: Demo-->
|
||
|
||
<!--Section: Code-->
|
||
<section>
|
||
<mdbsnippet>
|
||
<code data-lang="html" data-name="HTML">
|
||
<form>
|
||
<div class="form-outline">
|
||
<input
|
||
type="email"
|
||
class="form-control"
|
||
id="exampleInputEmail1"
|
||
aria-describedby="emailHelp"
|
||
/>
|
||
<label for="exampleInputEmail1" class="form-label">Email address</label>
|
||
</div>
|
||
<div id="emailHelp" class="form-text mb-3">
|
||
We'll never share your email with anyone else.
|
||
</div>
|
||
<div class="form-outline mb-3">
|
||
<input
|
||
type="password"
|
||
class="form-control"
|
||
id="exampleInputPassword1"
|
||
/>
|
||
<label for="exampleInputPassword1" class="form-label">Password</label>
|
||
</div>
|
||
<div class="mb-3 form-check">
|
||
<input type="checkbox" class="form-check-input" id="exampleCheck1" />
|
||
<label class="form-check-label" for="exampleCheck1">Check me out</label>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary">Submit</button>
|
||
</form>
|
||
</code>
|
||
</mdbsnippet>
|
||
</section>
|
||
<!--Section: Code-->
|
||
</section>
|
||
<!--Section: Basic example-->
|
||
|
||
<hr class="my-5" />
|
||
|
||
<!--Section: Basic example-->
|
||
<section id="">
|
||
<!-- Section title -->
|
||
<h2 id="form-text">Form text</h2>
|
||
<p>
|
||
Block-level or inline-level form text can be created using
|
||
<code>.form-text</code>.
|
||
</p>
|
||
<div class="bd-callout bd-callout-warning">
|
||
<h5 id="associating-form-text-with-form-controls">
|
||
Associating form text with form controls
|
||
</h5>
|
||
<p>
|
||
Form text should be explicitly associated with the form control it relates to
|
||
using the <code>aria-describedby</code> attribute. This will ensure that
|
||
assistive technologies—such as screen readers—will announce this form text
|
||
when the user focuses or enters the control.
|
||
</p>
|
||
</div>
|
||
|
||
<p>
|
||
Form text below inputs can be styled with <code>.form-text</code>. If a
|
||
block-level element will be used, a top margin is added for easy spacing from
|
||
the inputs above.
|
||
</p>
|
||
|
||
<!--Section: Demo-->
|
||
<section class="border p-4 mb-4">
|
||
<div class="form-outline">
|
||
<input
|
||
type="password"
|
||
id="inputPassword5"
|
||
class="form-control"
|
||
aria-describedby="passwordHelpBlock"
|
||
/>
|
||
<label for="inputPassword5" class="form-label">Password</label>
|
||
</div>
|
||
<div id="passwordHelpBlock" class="form-text">
|
||
Your password must be 8-20 characters long, contain letters and numbers, and
|
||
must not contain spaces, special characters, or emoji.
|
||
</div>
|
||
</section>
|
||
<!--Section: Demo-->
|
||
|
||
<!--Section: Code-->
|
||
<section>
|
||
<mdbsnippet>
|
||
<code data-lang="html" data-name="HTML">
|
||
<div class="form-outline">
|
||
<input
|
||
type="password"
|
||
id="inputPassword5"
|
||
class="form-control"
|
||
aria-describedby="passwordHelpBlock"
|
||
/>
|
||
<label for="inputPassword5" class="form-label">Password</label>
|
||
</div>
|
||
<div id="passwordHelpBlock" class="form-text">
|
||
Your password must be 8-20 characters long, contain letters and numbers,
|
||
and must not contain spaces, special characters, or emoji.
|
||
</div>
|
||
</code>
|
||
</mdbsnippet>
|
||
</section>
|
||
<!--Section: Code-->
|
||
|
||
<p>
|
||
Inline text can use any typical inline HTML element (be it a
|
||
<code><span></code>, <code><small></code>, or something else) with
|
||
nothing more than the <code>.form-text</code> class.
|
||
</p>
|
||
|
||
<!--Section: Demo-->
|
||
<section class="border p-4 mb-4">
|
||
<div class="row g-3 align-items-center">
|
||
<div class="col-auto">
|
||
<div class="form-outline">
|
||
<input
|
||
type="password"
|
||
id="inputPassword6"
|
||
class="form-control"
|
||
aria-describedby="passwordHelpInline"
|
||
/>
|
||
<label for="inputPassword6" class="form-label">Password</label>
|
||
</div>
|
||
</div>
|
||
<div class="col-auto">
|
||
<span id="passwordHelpInline" class="form-text">
|
||
Must be 8-20 characters long.
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!--Section: Demo-->
|
||
|
||
<!--Section: Code-->
|
||
<section>
|
||
<mdbsnippet>
|
||
<code data-lang="html" data-name="HTML">
|
||
<div class="row g-3 align-items-center">
|
||
<div class="col-auto">
|
||
<div class="form-outline">
|
||
<input
|
||
type="password"
|
||
id="inputPassword6"
|
||
class="form-control"
|
||
aria-describedby="passwordHelpInline"
|
||
/>
|
||
<label for="inputPassword6" class="form-label">Password</label>
|
||
</div>
|
||
</div>
|
||
<div class="col-auto">
|
||
<span id="passwordHelpInline" class="form-text">
|
||
Must be 8-20 characters long.
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</code>
|
||
</mdbsnippet>
|
||
</section>
|
||
<!--Section: Code-->
|
||
</section>
|
||
<!--Section: Basic example-->
|
||
|
||
<hr class="my-5" />
|
||
|
||
<!--Section: Basic example-->
|
||
<section id="">
|
||
<h2 id="disabled-forms">
|
||
Disabled forms<a
|
||
class="anchorjs-link"
|
||
aria-label="Anchor"
|
||
data-anchorjs-icon="#"
|
||
href="#disabled-forms"
|
||
style="padding-left: 0.375em;"
|
||
></a>
|
||
</h2>
|
||
|
||
<p>
|
||
Add the <code>disabled</code> boolean attribute on an input to prevent user
|
||
interactions and make it appear lighter.
|
||
</p>
|
||
|
||
<!--Section: Code-->
|
||
<section>
|
||
<mdbsnippet>
|
||
<code data-lang="html" data-name="HTML">
|
||
<input
|
||
class="form-control"
|
||
id="disabledInput"
|
||
type="text"
|
||
placeholder="Disabled input here..."
|
||
disabled
|
||
/>
|
||
</code>
|
||
</mdbsnippet>
|
||
</section>
|
||
<!--Section: Code-->
|
||
|
||
<p>
|
||
Add the <code>disabled</code> attribute to a <code><fieldset></code> to
|
||
disable all the controls within.
|
||
</p>
|
||
|
||
<p>
|
||
By default, browsers will treat all native form controls
|
||
(<code><input></code>, <code><select></code>, and
|
||
<code><button></code> elements) inside a
|
||
<code><fieldset disabled></code> as disabled, preventing both keyboard and
|
||
mouse interactions on them. However, if your form also includes
|
||
<code><a ... class="btn btn-*"></code> elements, these will only be given
|
||
a style of <code>pointer-events: none</code>.
|
||
</p>
|
||
|
||
<!--Section: Demo-->
|
||
<section class="border p-4 mb-4">
|
||
<form>
|
||
<fieldset disabled aria-label="Disabled fieldset example">
|
||
<div class="form-outline mb-3">
|
||
<input
|
||
type="text"
|
||
id="disabledTextInput"
|
||
class="form-control"
|
||
placeholder="Disabled input"
|
||
/>
|
||
<label for="disabledTextInput" class="form-label">Disabled input</label>
|
||
</div>
|
||
<div class="form-outine mb-3">
|
||
<select id="disabledSelect" class="form-select">
|
||
<option>Disabled select</option>
|
||
</select>
|
||
<label for="disabledSelect" class="form-label"
|
||
>Disabled select menu</label
|
||
>
|
||
</div>
|
||
<div class="mb-3">
|
||
<div class="form-check">
|
||
<input
|
||
class="form-check-input"
|
||
type="checkbox"
|
||
id="disabledFieldsetCheck"
|
||
disabled
|
||
/>
|
||
<label class="form-check-label" for="disabledFieldsetCheck">
|
||
Can't check this
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary">Submit</button>
|
||
</fieldset>
|
||
</form>
|
||
</section>
|
||
<!--Section: Demo-->
|
||
|
||
<!--Section: Code-->
|
||
<section>
|
||
<mdbsnippet>
|
||
<code data-lang="html" data-name="HTML">
|
||
<form>
|
||
<fieldset disabled aria-label="Disabled fieldset example">
|
||
<div class="form-outline mb-3">
|
||
<input
|
||
type="text"
|
||
id="disabledTextInput"
|
||
class="form-control"
|
||
placeholder="Disabled input"
|
||
/>
|
||
<label for="disabledTextInput" class="form-label"
|
||
>Disabled input</label
|
||
>
|
||
</div>
|
||
<div class="form-outine mb-3">
|
||
<select id="disabledSelect" class="form-select">
|
||
<option>Disabled select</option>
|
||
</select>
|
||
<label for="disabledSelect" class="form-label"
|
||
>Disabled select menu</label
|
||
>
|
||
</div>
|
||
<div class="mb-3">
|
||
<div class="form-check">
|
||
<input
|
||
class="form-check-input"
|
||
type="checkbox"
|
||
id="disabledFieldsetCheck"
|
||
disabled
|
||
/>
|
||
<label class="form-check-label" for="disabledFieldsetCheck">
|
||
Can't check this
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary">Submit</button>
|
||
</fieldset>
|
||
</form>
|
||
</code>
|
||
</mdbsnippet>
|
||
</section>
|
||
<!--Section: Code-->
|
||
</section>
|
||
<!--Section: Basic example-->
|
||
</section>
|
||
<!--Section: Docs content-->
|
||
</div>
|
||
<!--Grid column-->
|
||
|
||
<!--Grid column-->
|
||
<div class="col-md-2 mb-4">
|
||
<!-- Table of content -->
|
||
<nav id="table-of-content">
|
||
<ul>
|
||
<li><a href="#section-introduction">Introduction</a></li>
|
||
<li><a href="#section-basic-example">Basic example</a></li>
|
||
</ul>
|
||
</nav>
|
||
<!-- Table of content -->
|
||
</div>
|
||
<!--Grid column-->
|
||
</div>
|
||
<!--Grid row-->
|
||
</div>
|
||
<!-- Overview panel -->
|
||
|
||
<!-- API panel -->
|
||
<div class="tab-pane fade" id="pills-api" role="tabpanel" aria-labelledby="pills-api-tab">
|
||
<!--Grid row-->
|
||
<div class="row">
|
||
<!--Grid column-->
|
||
<div class="col-md-10 mb-4">
|
||
<!--Section: API content-->
|
||
<section>
|
||
<!--Section: Introduction-->
|
||
<section id="section-introduction">
|
||
<!-- Main title -->
|
||
<h2 class="h1 fw-bold">Title - API</h2>
|
||
</section>
|
||
<!--Section: Introduction-->
|
||
|
||
<hr class="my-5" />
|
||
|
||
<!--Section: Usage-->
|
||
<section id="section-usage">
|
||
<!-- Section title -->
|
||
<h2 class="mb-4">Usage</h2>
|
||
|
||
<h4 class="mb-4">Via data attributes</h4>
|
||
|
||
<mdbsnippet>
|
||
<code data-lang="html" data-name="HTML">
|
||
<button type="button" data-mdb-toggle="modal" data-mdb-target="#myModal">
|
||
Launch modal
|
||
</button>
|
||
</code>
|
||
</mdbsnippet>
|
||
|
||
<h4 class="my-4">Via JavaScript</h4>
|
||
|
||
<mdbsnippet>
|
||
<code data-lang="js" data-name="JavaScript">
|
||
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
|
||
</code>
|
||
</mdbsnippet>
|
||
</section>
|
||
<!--Section: Usage-->
|
||
|
||
<hr class="my-5" />
|
||
|
||
<!--Section: Options-->
|
||
<section id="section-options">
|
||
<!-- Section title -->
|
||
<h2 class="mb-4">Options</h2>
|
||
|
||
<div class="table-responsive">
|
||
<table class="table table-striped table-bordered">
|
||
<thead>
|
||
<tr>
|
||
<th class="th-sm">Name</th>
|
||
<th class="th-sm">Type</th>
|
||
<th class="th-sm">Default</th>
|
||
<th class="th-sm">Description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="text-nowrap"><code class="highlighter-rouge">tag</code></td>
|
||
<td><i>String</i></td>
|
||
<td><code>'button'</code></td>
|
||
<td>Changes button tag</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
<!--Section: Options-->
|
||
|
||
<hr class="my-5" />
|
||
|
||
<!--Section: Methods-->
|
||
<section id="section-methods">
|
||
<!-- Section title -->
|
||
<h2 class="mb-4">Methods</h2>
|
||
|
||
<div class="table-responsive">
|
||
<table class="table table-striped table-bordered">
|
||
<thead>
|
||
<tr>
|
||
<th class="th-sm">Name</th>
|
||
<th class="th-sm">Description</th>
|
||
<th class="th-sm">Example</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="text-nowrap"><code class="highlighter-rouge">toggle</code></td>
|
||
<td>Manually toggles a modal</td>
|
||
<td><code class="language-markup text-nowrap">myModal.toggle()</code></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
<!--Section: Methods-->
|
||
|
||
<hr class="my-5" />
|
||
|
||
<!--Section: Events-->
|
||
<section id="section-events">
|
||
<!-- Section title -->
|
||
<h2 class="mb-4">Events</h2>
|
||
|
||
<div class="table-responsive">
|
||
<table class="table table-striped table-bordered">
|
||
<thead>
|
||
<tr>
|
||
<th class="th-sm">Name</th>
|
||
<th class="th-sm">Description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="text-nowrap">
|
||
<code class="highlighter-rouge">show.bs.modal</code>
|
||
</td>
|
||
<td>
|
||
This event fires immediately when the show instance method is called. If
|
||
caused by a click, the clicked element is available as the relatedTarget
|
||
property of the event.
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
<!--Section: Events-->
|
||
</section>
|
||
<!--Section: API content-->
|
||
</div>
|
||
<!--Grid column-->
|
||
|
||
<!--Grid column-->
|
||
<div class="col-md-2 mb-4">
|
||
<!-- Table of content -->
|
||
<nav id="table-of-content">
|
||
<ul>
|
||
<li><a href="#section-usage">Usage</a></li>
|
||
<li><a href="#section-options">Options</a></li>
|
||
<li><a href="#section-methods">Methods</a></li>
|
||
<li><a href="#section-events">Events</a></li>
|
||
</ul>
|
||
</nav>
|
||
<!-- Table of content -->
|
||
</div>
|
||
<!--Grid column-->
|
||
</div>
|
||
<!--Grid row-->
|
||
</div>
|
||
<!-- API 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>
|