1409 lines
61 KiB
HTML
1409 lines
61 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: Utilities-->
|
|
<section id="section-utilites">
|
|
<!-- Section title -->
|
|
<h2 class="mb-4">Utilities</h2>
|
|
|
|
<!--Section: Demo-->
|
|
<section class="border p-4 mb-4">
|
|
<div class="form-outline mb-3">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="formGroupExampleInput"
|
|
placeholder="Example input placeholder"
|
|
/>
|
|
<label for="formGroupExampleInput" class="form-label">Example label</label>
|
|
</div>
|
|
<div class="form-outline mb-3">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="formGroupExampleInput2"
|
|
placeholder="Another input placeholder"
|
|
/>
|
|
<label for="formGroupExampleInput2" class="form-label">Another label</label>
|
|
</div>
|
|
</section>
|
|
<!--Section: Demo-->
|
|
|
|
<!--Section: Code-->
|
|
<section>
|
|
<mdbsnippet>
|
|
<code data-lang="html" data-name="HTML">
|
|
<div class="form-outline mb-3">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="formGroupExampleInput"
|
|
placeholder="Example input placeholder"
|
|
/>
|
|
<label for="formGroupExampleInput" class="form-label"
|
|
>Example label</label
|
|
>
|
|
</div>
|
|
<div class="form-outline mb-3">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="formGroupExampleInput2"
|
|
placeholder="Another input placeholder"
|
|
/>
|
|
<label for="formGroupExampleInput2" class="form-label"
|
|
>Another label</label
|
|
>
|
|
</div>
|
|
</code>
|
|
</mdbsnippet>
|
|
</section>
|
|
<!--Section: Code-->
|
|
</section>
|
|
<!--Section: Utilities-->
|
|
|
|
<hr class="my-5" />
|
|
|
|
<!--Section: Form gird-->
|
|
<section id="form-grid">
|
|
<!-- Section title -->
|
|
<h2 class="mb-4">Form grid</h2>
|
|
|
|
<!--Section: Demo-->
|
|
<section class="border p-4 mb-4">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="form-outline">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="formGridExampleInput"
|
|
placeholder="First name"
|
|
aria-label="First name"
|
|
/>
|
|
<label for="formGridExampleInput" class="form-label">First name</label>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="form-outline">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="formGridExInput"
|
|
placeholder="Last name"
|
|
aria-label="Last name"
|
|
/>
|
|
<label for="formGridExInput" class="form-label">Last name</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!--Section: Demo-->
|
|
|
|
<!--Section: Code-->
|
|
<section>
|
|
<mdbsnippet>
|
|
<code data-lang="html" data-name="HTML">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="form-outline">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="formGridExampleInput"
|
|
placeholder="First name"
|
|
aria-label="First name"
|
|
/>
|
|
<label for="formGridExampleInput" class="form-label"
|
|
>First name</label
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="form-outline">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="formGridExInput"
|
|
placeholder="Last name"
|
|
aria-label="Last name"
|
|
/>
|
|
<label for="formGridExInput" class="form-label">Last name</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</mdbsnippet>
|
|
</section>
|
|
<!--Section: Code-->
|
|
</section>
|
|
<!--Section: Form gird-->
|
|
|
|
<hr class="my-5" />
|
|
|
|
<!--Section: Gutters-->
|
|
<section id="gutters">
|
|
<!-- Section title -->
|
|
<h2 class="mb-4">Gutters</h2>
|
|
|
|
<!--Section: Demo-->
|
|
<section class="border p-4 mb-4">
|
|
<div class="row g-3">
|
|
<div class="col">
|
|
<div class="form-outline">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="formGuttersExampleInput"
|
|
placeholder="First name"
|
|
aria-label="First name"
|
|
/>
|
|
<label for="formGuttersExampleInput" class="form-label">First name</label>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="form-outline">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="formGuttersExInput"
|
|
placeholder="Last name"
|
|
aria-label="Last name"
|
|
/>
|
|
<label for="formGuttersExInput" class="form-label">Last name</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!--Section: Demo-->
|
|
|
|
<!--Section: Code-->
|
|
<section>
|
|
<mdbsnippet>
|
|
<code data-lang="html" data-name="HTML">
|
|
<div class="row g-3">
|
|
<div class="col">
|
|
<div class="form-outline">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="formGuttersExampleInput"
|
|
placeholder="First name"
|
|
aria-label="First name"
|
|
/>
|
|
<label for="formGuttersExampleInput" class="form-label"
|
|
>First name</label
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="form-outline">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="formGuttersExInput"
|
|
placeholder="Last name"
|
|
aria-label="Last name"
|
|
/>
|
|
<label for="formGuttersExInput" class="form-label">Last name</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</mdbsnippet>
|
|
</section>
|
|
<!--Section: Code-->
|
|
|
|
<p>More complex layouts can also be created with the grid system.</p>
|
|
|
|
<!--Section: Demo-->
|
|
<section class="border p-4 mb-4">
|
|
<form class="row g-3">
|
|
<div class="col-md-6">
|
|
<div class="form-outline">
|
|
<input type="email" class="form-control" id="inputEmail4" />
|
|
<label for="inputEmail4" class="form-label">Email</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-outline">
|
|
<input type="password" class="form-control" id="inputPassword4" />
|
|
<label for="inputPassword4" class="form-label">Password</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="form-outline">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="inputAddress"
|
|
placeholder="1234 Main St"
|
|
/>
|
|
<label for="inputAddress" class="form-label">Address</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="form-outline">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="inputAddress2"
|
|
placeholder="Apartment, studio, or floor"
|
|
/>
|
|
<label for="inputAddress2" class="form-label">Address 2</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-outline">
|
|
<input type="text" class="form-control" id="inputCity" />
|
|
<label for="inputCity" class="form-label">City</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<select id="inputState" class="form-select">
|
|
<option selected>Choose...</option>
|
|
<option>...</option>
|
|
</select>
|
|
<label for="inputState" class="form-label">State</label>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<div class="form-outline">
|
|
<input type="text" class="form-control" id="inputZip" />
|
|
<label for="inputZip" class="form-label">Zip</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="gridCheck" />
|
|
<label class="form-check-label" for="gridCheck"> Check me out </label>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<button type="submit" class="btn btn-primary">Sign in</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
<!--Section: Demo-->
|
|
|
|
<!--Section: Code-->
|
|
<section>
|
|
<mdbsnippet>
|
|
<code data-lang="html" data-name="HTML">
|
|
<form class="row g-3">
|
|
<div class="col-md-6">
|
|
<div class="form-outline">
|
|
<input type="email" class="form-control" id="inputEmail4" />
|
|
<label for="inputEmail4" class="form-label">Email</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-outline">
|
|
<input type="password" class="form-control" id="inputPassword4" />
|
|
<label for="inputPassword4" class="form-label">Password</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="form-outline">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="inputAddress"
|
|
placeholder="1234 Main St"
|
|
/>
|
|
<label for="inputAddress" class="form-label">Address</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="form-outline">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="inputAddress2"
|
|
placeholder="Apartment, studio, or floor"
|
|
/>
|
|
<label for="inputAddress2" class="form-label">Address 2</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-outline">
|
|
<input type="text" class="form-control" id="inputCity" />
|
|
<label for="inputCity" class="form-label">City</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<select id="inputState" class="form-select">
|
|
<option selected>Choose...</option>
|
|
<option>...</option>
|
|
</select>
|
|
<label for="inputState" class="form-label">State</label>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<div class="form-outline">
|
|
<input type="text" class="form-control" id="inputZip" />
|
|
<label for="inputZip" class="form-label">Zip</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="gridCheck" />
|
|
<label class="form-check-label" for="gridCheck"> Check me out </label>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<button type="submit" class="btn btn-primary">Sign in</button>
|
|
</div>
|
|
</form>
|
|
</code>
|
|
</mdbsnippet>
|
|
</section>
|
|
<!--Section: Code-->
|
|
</section>
|
|
<!--Section: Gutters-->
|
|
|
|
<hr class="my-5" />
|
|
|
|
<!--Section: Horizontal form-->
|
|
<section id="horizontal">
|
|
<!-- Section title -->
|
|
<h2 class="mb-4">Horizontal form</h2>
|
|
|
|
<!--Section: Demo-->
|
|
<section class="border p-4 mb-4">
|
|
<form>
|
|
<div class="row mb-3 d-flex align-items-center">
|
|
<div class="col-sm-2">
|
|
<p class="mb-0">Email</p>
|
|
</div>
|
|
<div class="col-sm-10">
|
|
<div class="form-outline">
|
|
<input type="email" class="form-control" id="inputEmail3" />
|
|
<label for="inputEmail3" class="form-label">Email</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3 d-flex align-items-center">
|
|
<div class="col-sm-2">
|
|
<p class="mb-0">Password</p>
|
|
</div>
|
|
<div class="col-sm-10">
|
|
<div class="form-outline">
|
|
<input type="password" class="form-control" id="inputPassword3" />
|
|
<label for="inputPassword3" class="form-label">Password</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<fieldset>
|
|
<div class="row mb-3">
|
|
<legend class="col-form-label col-sm-2 pt-0">Radios</legend>
|
|
<div class="col-sm-10">
|
|
<div class="form-check mb-1">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="gridRadios"
|
|
id="gridRadios1"
|
|
value="option1"
|
|
checked
|
|
/>
|
|
<label class="form-check-label" for="gridRadios1">
|
|
First radio
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-1">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="gridRadios"
|
|
id="gridRadios2"
|
|
value="option2"
|
|
/>
|
|
<label class="form-check-label" for="gridRadios2">
|
|
Second radio
|
|
</label>
|
|
</div>
|
|
<div class="form-check disabled mb-1">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="gridRadios"
|
|
id="gridRadios3"
|
|
value="option3"
|
|
disabled
|
|
/>
|
|
<label class="form-check-label" for="gridRadios3">
|
|
Third disabled radio
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
<div class="row mb-3">
|
|
<div class="col-form-label col-sm-2 pt-0">Checkbox</div>
|
|
<div class="col-sm-10">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="gridCheck1" />
|
|
<label class="form-check-label" for="gridCheck1">
|
|
Example checkbox
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Sign in</button>
|
|
</form>
|
|
</section>
|
|
<!--Section: Demo-->
|
|
|
|
<!--Section: Code-->
|
|
<section>
|
|
<mdbsnippet>
|
|
<code data-lang="html" data-name="HTML">
|
|
<form>
|
|
<div class="row mb-3 d-flex align-items-center">
|
|
<div class="col-sm-2">
|
|
<p class="mb-0">Email</p>
|
|
</div>
|
|
<div class="col-sm-10">
|
|
<div class="form-outline">
|
|
<input type="email" class="form-control" id="inputEmail3" />
|
|
<label for="inputEmail3" class="form-label">Email</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3 d-flex align-items-center">
|
|
<div class="col-sm-2">
|
|
<p class="mb-0">Password</p>
|
|
</div>
|
|
<div class="col-sm-10">
|
|
<div class="form-outline">
|
|
<input type="password" class="form-control" id="inputPassword3" />
|
|
<label for="inputPassword3" class="form-label">Password</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<fieldset>
|
|
<div class="row mb-3">
|
|
<legend class="col-form-label col-sm-2 pt-0">Radios</legend>
|
|
<div class="col-sm-10">
|
|
<div class="form-check mb-1">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="gridRadios"
|
|
id="gridRadios1"
|
|
value="option1"
|
|
checked
|
|
/>
|
|
<label class="form-check-label" for="gridRadios1">
|
|
First radio
|
|
</label>
|
|
</div>
|
|
<div class="form-check mb-1">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="gridRadios"
|
|
id="gridRadios2"
|
|
value="option2"
|
|
/>
|
|
<label class="form-check-label" for="gridRadios2">
|
|
Second radio
|
|
</label>
|
|
</div>
|
|
<div class="form-check disabled mb-1">
|
|
<input
|
|
class="form-check-input"
|
|
type="radio"
|
|
name="gridRadios"
|
|
id="gridRadios3"
|
|
value="option3"
|
|
disabled
|
|
/>
|
|
<label class="form-check-label" for="gridRadios3">
|
|
Third disabled radio
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
<div class="row mb-3">
|
|
<div class="col-form-label col-sm-2 pt-0">Checkbox</div>
|
|
<div class="col-sm-10">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="gridCheck1" />
|
|
<label class="form-check-label" for="gridCheck1">
|
|
Example checkbox
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Sign in</button>
|
|
</form>
|
|
</code>
|
|
</mdbsnippet>
|
|
</section>
|
|
<!--Section: Code-->
|
|
</section>
|
|
<!--Section: Horizontal form-->
|
|
|
|
<hr class="my-5" />
|
|
|
|
<!--Section: Horizontal form label sizing-->
|
|
<section id="horizontal-label">
|
|
<!-- Section title -->
|
|
<h2 class="mb-4">Horizontal form label sizing</h2>
|
|
|
|
<!--Section: Demo-->
|
|
<section class="border p-4 mb-4">
|
|
<div class="row mb-3 d-flex align-items-center">
|
|
<div class="col-sm-2">
|
|
<p class="mb-0 col-form-label-sm">Email</p>
|
|
</div>
|
|
<div class="col-sm-10">
|
|
<div class="form-outline">
|
|
<input
|
|
type="email"
|
|
class="form-control form-control-sm"
|
|
id="colFormLabelSm"
|
|
placeholder="col-form-label-sm"
|
|
/>
|
|
<label for="colFormLabelSm" class="form-label">col-form-label-sm</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3 d-flex align-items-center">
|
|
<div class="col-sm-2">
|
|
<p class="mb-0 col-form-label">Email</p>
|
|
</div>
|
|
<div class="col-sm-10">
|
|
<div class="form-outline">
|
|
<input
|
|
type="email"
|
|
class="form-control"
|
|
id="colFormLabel"
|
|
placeholder="col-form-label"
|
|
/>
|
|
<label for="colFormLabel" class="form-label">col-form-label</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row d-flex align-items-center">
|
|
<div class="col-sm-2">
|
|
<p class="mb-0 col-form-label-lg">Email</p>
|
|
</div>
|
|
<div class="col-sm-10">
|
|
<div class="form-outline">
|
|
<input
|
|
type="email"
|
|
class="form-control form-control-lg"
|
|
id="colFormLabelLg"
|
|
placeholder="col-form-label-lg"
|
|
/>
|
|
<label for="colFormLabelLg" class="form-label">col-form-label-lg</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!--Section: Demo-->
|
|
|
|
<!--Section: Code-->
|
|
<section>
|
|
<mdbsnippet>
|
|
<code data-lang="html" data-name="HTML">
|
|
<div class="row mb-3 d-flex align-items-center">
|
|
<div class="col-sm-2">
|
|
<p class="mb-0 col-form-label-sm">Email</p>
|
|
</div>
|
|
<div class="col-sm-10">
|
|
<div class="form-outline">
|
|
<input
|
|
type="email"
|
|
class="form-control form-control-sm"
|
|
id="colFormLabelSm"
|
|
placeholder="col-form-label-sm"
|
|
/>
|
|
<label for="colFormLabelSm" class="form-label"
|
|
>col-form-label-sm</label
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-3 d-flex align-items-center">
|
|
<div class="col-sm-2">
|
|
<p class="mb-0 col-form-label">Email</p>
|
|
</div>
|
|
<div class="col-sm-10">
|
|
<div class="form-outline">
|
|
<input
|
|
type="email"
|
|
class="form-control"
|
|
id="colFormLabel"
|
|
placeholder="col-form-label"
|
|
/>
|
|
<label for="colFormLabel" class="form-label">col-form-label</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row d-flex align-items-center">
|
|
<div class="col-sm-2">
|
|
<p class="mb-0 col-form-label-lg">Email</p>
|
|
</div>
|
|
<div class="col-sm-10">
|
|
<div class="form-outline">
|
|
<input
|
|
type="email"
|
|
class="form-control form-control-lg"
|
|
id="colFormLabelLg"
|
|
placeholder="col-form-label-lg"
|
|
/>
|
|
<label for="colFormLabelLg" class="form-label"
|
|
>col-form-label-lg</label
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</mdbsnippet>
|
|
</section>
|
|
<!--Section: Code-->
|
|
</section>
|
|
<!--Section: Horizontal form label sizing-->
|
|
|
|
<hr class="my-5" />
|
|
|
|
<!--Section: Column sizing-->
|
|
<section id="column-sizing">
|
|
<!-- Section title -->
|
|
<h2 class="mb-4">Column sizing</h2>
|
|
|
|
<!--Section: Demo-->
|
|
<section class="border p-4 mb-4">
|
|
<div class="row g-3">
|
|
<div class="col-sm-7">
|
|
<div class="form-outline">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="example-1"
|
|
placeholder="City"
|
|
aria-label="City"
|
|
/>
|
|
<label for="example-1" class="form-label">City</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm">
|
|
<div class="form-outline">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="example-2"
|
|
placeholder="State"
|
|
aria-label="State"
|
|
/>
|
|
<label for="example-2" class="form-label">State</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm">
|
|
<div class="form-outline">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="example-3"
|
|
placeholder="Zip"
|
|
aria-label="Zip"
|
|
/>
|
|
<label for="example-3" class="form-label">Zip</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!--Section: Demo-->
|
|
|
|
<!--Section: Code-->
|
|
<section>
|
|
<mdbsnippet>
|
|
<code data-lang="html" data-name="HTML">
|
|
<div class="row g-3">
|
|
<div class="col-sm-7">
|
|
<div class="form-outline">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="example-1"
|
|
placeholder="City"
|
|
aria-label="City"
|
|
/>
|
|
<label for="example-1" class="form-label">City</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm">
|
|
<div class="form-outline">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="example-2"
|
|
placeholder="State"
|
|
aria-label="State"
|
|
/>
|
|
<label for="example-2" class="form-label">State</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm">
|
|
<div class="form-outline">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="example-3"
|
|
placeholder="Zip"
|
|
aria-label="Zip"
|
|
/>
|
|
<label for="example-3" class="form-label">Zip</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</mdbsnippet>
|
|
</section>
|
|
<!--Section: Code-->
|
|
</section>
|
|
<!--Section: Column sizing-->
|
|
|
|
<hr class="my-5" />
|
|
|
|
<!--Section: Auto sizing-->
|
|
<section id="auto-sizing">
|
|
<!-- Section title -->
|
|
<h2 class="mb-4">Auto sizing</h2>
|
|
|
|
<!--Section: Demo-->
|
|
<section class="border p-4 mb-4">
|
|
<form class="row gy-2 gx-3 align-items-center">
|
|
<div class="col-auto">
|
|
<div class="form-outline">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="autoSizingInput"
|
|
placeholder="Jane Doe"
|
|
/>
|
|
<label class="form-label" for="autoSizingInput">Name</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="input-group form-outline">
|
|
<span class="input-group-text" id="inputGroupPrepend">@</span>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="autoSizingInputGroup"
|
|
placeholder="Username"
|
|
/>
|
|
<label for="autoSizingInputGroup" class="form-label">Username</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<label class="sr-only" for="autoSizingSelect">Preference</label>
|
|
<select class="form-select" id="autoSizingSelect">
|
|
<option selected>Choose...</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="autoSizingCheck" />
|
|
<label class="form-check-label" for="autoSizingCheck">
|
|
Remember me
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
<!--Section: Demo-->
|
|
|
|
<!--Section: Code-->
|
|
<section>
|
|
<mdbsnippet>
|
|
<code data-lang="html" data-name="HTML">
|
|
<form class="row gy-2 gx-3 align-items-center">
|
|
<div class="col-auto">
|
|
<div class="form-outline">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="autoSizingInput"
|
|
placeholder="Jane Doe"
|
|
/>
|
|
<label class="form-label" for="autoSizingInput">Name</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="input-group form-outline">
|
|
<span class="input-group-text" id="inputGroupPrepend">@</span>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="autoSizingInputGroup"
|
|
placeholder="Username"
|
|
/>
|
|
<label for="autoSizingInputGroup" class="form-label">Username</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<label class="sr-only" for="autoSizingSelect">Preference</label>
|
|
<select class="form-select" id="autoSizingSelect">
|
|
<option selected>Choose...</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="form-check">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
id="autoSizingCheck"
|
|
/>
|
|
<label class="form-check-label" for="autoSizingCheck">
|
|
Remember me
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
|
</div>
|
|
</form>
|
|
</code>
|
|
</mdbsnippet>
|
|
</section>
|
|
<!--Section: Code-->
|
|
|
|
<!-- Section title -->
|
|
<p class="mb-4">
|
|
You can then remix that once again with size-specific column classes.
|
|
</p>
|
|
|
|
<!--Section: Demo-->
|
|
<section class="border p-4 mb-4">
|
|
<form class="row gx-3 gy-2 align-items-center">
|
|
<div class="col-sm-3">
|
|
<div class="form-outline">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="specificSizeInputName"
|
|
placeholder="Jane Doe"
|
|
/>
|
|
<label class="form-label" for="specificSizeInputName">Name</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-3">
|
|
<div class="input-group form-outline">
|
|
<span class="input-group-text" id="inputGroupPrepend">@</span>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="specificSizeInputGroupUsername"
|
|
placeholder="Username"
|
|
/>
|
|
<label for="specificSizeInputGroupUsername" class="form-label"
|
|
>Username</label
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-3">
|
|
<label class="sr-only" for="specificSizeSelect">Preference</label>
|
|
<select class="form-select" id="specificSizeSelect">
|
|
<option selected>Choose...</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="autoSizingCheck2" />
|
|
<label class="form-check-label" for="autoSizingCheck2">
|
|
Remember me
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
<!--Section: Demo-->
|
|
|
|
<!--Section: Code-->
|
|
<section>
|
|
<mdbsnippet>
|
|
<code data-lang="html" data-name="HTML">
|
|
<form class="row gx-3 gy-2 align-items-center">
|
|
<div class="col-sm-3">
|
|
<div class="form-outline">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="specificSizeInputName"
|
|
placeholder="Jane Doe"
|
|
/>
|
|
<label class="form-label" for="specificSizeInputName">Name</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-3">
|
|
<div class="input-group form-outline">
|
|
<span class="input-group-text" id="inputGroupPrepend">@</span>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="specificSizeInputGroupUsername"
|
|
placeholder="Username"
|
|
/>
|
|
<label for="specificSizeInputGroupUsername" class="form-label"
|
|
>Username</label
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-3">
|
|
<label class="sr-only" for="specificSizeSelect">Preference</label>
|
|
<select class="form-select" id="specificSizeSelect">
|
|
<option selected>Choose...</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="form-check">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
id="autoSizingCheck2"
|
|
/>
|
|
<label class="form-check-label" for="autoSizingCheck2">
|
|
Remember me
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
|
</div>
|
|
</form>
|
|
</code>
|
|
</mdbsnippet>
|
|
</section>
|
|
<!--Section: Code-->
|
|
</section>
|
|
<!--Section: Auto sizing-->
|
|
|
|
<hr class="my-5" />
|
|
|
|
<!--Section: Inline forms-->
|
|
<section id="inline-forms">
|
|
<!-- Section title -->
|
|
<h2 class="mb-4">Inline forms</h2>
|
|
|
|
<!--Section: Demo-->
|
|
<section class="border p-4 mb-4">
|
|
<form class="row row-cols-md-auto g-3 align-items-center">
|
|
<div class="col-12">
|
|
<div class="form-outline">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="inlineFormInputName"
|
|
placeholder="Jane Doe"
|
|
/>
|
|
<label class="form-label" for="inlineFormInputName">Name</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<div class="input-group form-outline">
|
|
<span class="input-group-text" id="inputGroupPrepend">@</span>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="inlineFormInputGroupUsername"
|
|
placeholder="Username"
|
|
/>
|
|
<label class="form-label" for="inlineFormInputGroupUsername"
|
|
>Username</label
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<label class="sr-only" for="inlineFormSelectPref">Preference</label>
|
|
<select class="form-select" id="inlineFormSelectPref">
|
|
<option selected>Choose...</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="inlineFormCheck" />
|
|
<label class="form-check-label" for="inlineFormCheck">
|
|
Remember me
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
<!--Section: Demo-->
|
|
|
|
<!--Section: Code-->
|
|
<section>
|
|
<mdbsnippet>
|
|
<code data-lang="html" data-name="HTML">
|
|
<form class="row row-cols-md-auto g-3 align-items-center">
|
|
<div class="col-12">
|
|
<div class="form-outline">
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="inlineFormInputName"
|
|
placeholder="Jane Doe"
|
|
/>
|
|
<label class="form-label" for="inlineFormInputName">Name</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="input-group form-outline">
|
|
<span class="input-group-text" id="inputGroupPrepend">@</span>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="inlineFormInputGroupUsername"
|
|
placeholder="Username"
|
|
/>
|
|
<label class="form-label" for="inlineFormInputGroupUsername"
|
|
>Username</label
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<label class="sr-only" for="inlineFormSelectPref">Preference</label>
|
|
<select class="form-select" id="inlineFormSelectPref">
|
|
<option selected>Choose...</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="form-check">
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
id="inlineFormCheck"
|
|
/>
|
|
<label class="form-check-label" for="inlineFormCheck">
|
|
Remember me
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
|
</div>
|
|
</form>
|
|
</code>
|
|
</mdbsnippet>
|
|
</section>
|
|
<!--Section: Code-->
|
|
</section>
|
|
<!--Section: Inline forms-->
|
|
</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>
|