<!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: Demo--> <section class="border p-4 mb-4"> <form class="row g-3 needs-validation" novalidate> <!-- <div class="col-md-4"> <div class="form-outline"> <input type="text" class="form-control" id="validationCustom01" value="Mark" required /> <label for="validationCustom01" class="form-label">First name</label> <div class="valid-feedback"> Looks good! </div> </div> </div> <div class="col-md-4"> <div class="form-outline"> <input type="text" class="form-control" id="validationCustom02" value="Otto" required /> <label for="validationCustom02" class="form-label">Last name</label> <div class="valid-feedback"> Looks good! </div> </div> </div> <div class="col-md-4"> <div class="input-group form-outline"> <span class="input-group-text" id="inputGroupPrepend">@</span> <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required /> <label for="validationCustomUsername" class="form-label">Username</label> <div class="invalid-feedback"> Please choose a username. </div> </div> </div> --> <!-- <div class="col-md-6"> <div class="form-outline"> <input type="text" class="form-control" id="validationCustom03" required /> <label for="validationCustom03" class="form-label">City</label> <div class="invalid-feedback"> Please provide a valid city. </div> </div> </div> --> <div class="col-md-6"> <div class="form-outline"> <input type="text" id="form134567" class="form-control" required /> <label class="form-label" for="form134567">Zip</label> <div class="invalid-feedback">Please provide a valid zip.</div> </div> <br /> <!-- <div class="form-outline"> <input type="text" id="form134" class="form-control" required /> <label class="form-label" for="form134">Example label</label> <div class="invalid-feedback"> You must agree before submitting. </div> </div> --> </div> <!-- <div class="col-12"> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required /> <label class="form-check-label" for="invalidCheck"> Agree to terms and conditions </label> <div class="invalid-feedback"> You must agree before submitting. </div> </div> </div> --> <div class="col-12"> <button class="btn btn-primary" type="submit">Submit form</button> </div> </form> </section> <!--Section: Demo--> <hr class="my-5" /> <!--Section: Basic example--> <section id="section-basic-example"> <!-- Section title --> <h2 class="mb-4">Basic example</h2> <div class="container my-5"> <div class="row"> <div class="col-lg-4 mb-4"> <p>Outline input</p> <div class="form-outline"> <input type="text" id="form134" class="form-control" /> <label class="form-label" for="form134">Example label</label> </div> </div> <div class="col-lg-4 mb-4"> <p>Outline bez labela</p> <div class="form-outline"> <input type="text" id="form143" class="form-control" /> </div> </div> <div class="col-lg-4 mb-4"> <p>Bootstrap standard input</p> <input type="text" id="form154" class="form-control" placeholder="Placeholder" /> </div> </div> <br /> <br /> <br /> <form class="row g-3 needs-validation" novalidate> <div class="row mb-4"> <div class="col-md-6"> <p>Outline input</p> <div class="form-outline"> <input type="text" id="form134" class="form-control form-control-sm" required /> <label class="form-label" for="form134">Example label</label> </div> </div> <div class="col-md-6"> <p>Bootstrap standard input small</p> <input type="text" id="form1546" class="form-control form-control-sm" placeholder="Placeholder" /> </div> </div> <div class="row mb-4"> <div class="col-md-6"> <p>Outline input</p> <div class="form-outline"> <input type="text" id="form134" class="form-control" required /> <label class="form-label" for="form134">Example label</label> <div class="invalid-feedback">You must agree before submitting.</div> </div> </div> <div class="col-md-6"> <p>Bootstrap standard input</p> <input type="text" id="form1548" class="form-control" placeholder="Placeholder" /> </div> </div> <div class="row mb-4"> <div class="col-md-6"> <p>Outline input</p> <div class="form-outline"> <input type="text" id="form134" class="form-control form-control-lg" required /> <label class="form-label" for="form134">Example label</label> <div class="invalid-feedback">You must agree before submitting.</div> </div> </div> <div class="col-md-6"> <p>Bootstrap standard input large</p> <input type="text" id="form1549" class="form-control form-control-lg" placeholder="Placeholder" /> </div> <button class="btn btn-primary mt-5" type="submit">Submit form</button> </div> </form> <br /> <br /> <br /> <p>Outline input</p> <div class="form-outline mb-4"> <input type="text" id="form1" class="form-control" /> <label class="form-label" for="form1">Example label</label> </div> <p>Outline bez labela</p> <p></p> <div class="form-outline mb-4"> <input type="text" id="form1" class="form-control" /> </div> <p>Bootstrap standard input</p> <input type="text" id="form1" class="form-control" placeholder="Placeholder" /> </div> <!--Section: Demo--> <section class="border p-4 mb-4"> <div class="row"> <div class="col-12 mb-4"> <p>To jest input z labelem</p> <div class="form-outline"> <input type="text" id="formm1" class="form-control" placeholder="Custom date" /> <label for="formm1" class="form-label">First name</label> </div> </div> <div class="col-12 mb-4"> <p>To jest input bez labela</p> <div class="form-outline"> <input type="text" id="form1" class="form-control" placeholder="Custom date" /> </div> </div> </div> <!-- <form class="row g-3 needs-validation" novalidate=""> <div class="col-md-4"> <div class="form-outline"> <input type="text" class="form-control" id="validationCustom01" value="Mark" required="" /> <label for="validationCustom01" class="form-label">First name</label> <div class="valid-feedback"> Looks good! </div> </div> </div> <div class="col-md-4"> <div class="form-outline"> <input type="text" class="form-control" id="validationCustom02" value="Otto" required="" /> <label for="validationCustom02" class="form-label">Last name</label> <div class="valid-feedback"> Looks good! </div> </div> </div> <div class="col-md-4"> <div class="input-group form-outline"> <span class="input-group-text" id="inputGroupPrepend">@</span> <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required="" /> <label for="validationCustomUsername" class="form-label">Username</label> <div class="invalid-feedback"> Please choose a username. </div> </div> </div> <div class="col-md-6"> <div class="form-outline"> <input type="text" class="form-control" id="validationCustom03" required="" /> <label for="validationCustom03" class="form-label">City</label> <div class="invalid-feedback"> Please provide a valid city. </div> </div> </div> <div class="col-md-3"> <select class="form-select" id="validationCustom04" required=""> <option selected="" disabled="" value="">Choose...</option> <option>...</option> </select> <label for="validationCustom04" class="form-label">State</label> <div class="invalid-feedback"> Please select a valid state. </div> </div> <div class="col-md-3"> <div class="form-outline"> <input type="text" class="form-control" id="validationCustom05" required="" /> <label for="validationCustom05" class="form-label">Zip</label> <div class="invalid-feedback"> Please provide a valid zip. </div> </div> </div> <div class="col-12"> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required="" /> <label class="form-check-label" for="invalidCheck"> Agree to terms and conditions </label> <div class="invalid-feedback"> You must agree before submitting. </div> </div> </div> <div class="col-12"> <button class="btn btn-primary" type="submit">Submit form</button> </div> </form> --> </section> <!--Section: Demo--> <!--Section: Code--> <section> <mdbsnippet> <code data-lang="html" data-name="HTML"> </code> <code data-lang="js" data-name="JavaScript"> </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> <!-- MDB --> <script type="text/javascript" src="../../js/mdb.min.js"></script> <!-- 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> <!-- Custom scripts --> <script type="text/javascript"> // Example starter JavaScript for disabling form submissions if there are invalid fields (function () { 'use strict'; // Fetch all the forms we want to apply custom Bootstrap validation styles to var forms = document.querySelectorAll('.needs-validation'); // Loop over them and prevent submission Array.prototype.slice.call(forms).forEach(function (form) { form.addEventListener( 'submit', function (event) { if (!form.checkValidity()) { event.preventDefault(); event.stopPropagation(); } form.classList.add('was-validated'); }, false ); }); })(); </script> </body> </html>