1632 lines
75 KiB
HTML
1632 lines
75 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">
|
||
|
||
<link rel="apple-touch-icon" sizes="76x76" href="../../../assets/img/dashboard/free/apple-icon.png">
|
||
<link rel="icon" type="image/png" href="../../../assets/img/dashboard/free/favicon.png">
|
||
|
||
<title>
|
||
|
||
Black Dashboard Flask by Creative Tim
|
||
|
||
|
||
|
||
|
||
|
||
</title>
|
||
|
||
|
||
|
||
<!-- Fonts and icons -->
|
||
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet" />
|
||
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
|
||
|
||
<!-- Nucleo Icons -->
|
||
<link href="../../../assets/css/nucleo-icons.css" rel="stylesheet" />
|
||
<!-- CSS Files -->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<link href="../../../assets/css/dashboard-free.css?v=1.0.0" rel="stylesheet" />
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<!-- Documentation extras -->
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
|
||
|
||
<link rel="stylesheet" href="../../../assets/demo/docs.min.css">
|
||
|
||
<style>
|
||
.navbar-absolute-logo{
|
||
padding-left: 45px;
|
||
}
|
||
.navbar-absolute-logo img{
|
||
position: absolute;
|
||
left: 15px;
|
||
margin-top: -6px;
|
||
}
|
||
body{
|
||
background: white;
|
||
}
|
||
</style>
|
||
|
||
|
||
<!-- CSS Just for demo purpose, don't include it in your project -->
|
||
<link href="../../../assets/demo/dashboard/free/demo.css" rel="stylesheet" />
|
||
|
||
|
||
|
||
</head>
|
||
<body class="bd-docs" data-spy="scroll" data-target=".bd-sidenav-active">
|
||
|
||
|
||
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
|
||
<div class="container">
|
||
<span class="skiplink-text">Skip to main content</span>
|
||
</div>
|
||
</a>
|
||
|
||
<header class="navbar navbar-expand bg-primary flex-column flex-md-row bd-navbar">
|
||
<a class="navbar-brand mr-0 mr-md-2 navbar-absolute-logo" href="https://www.creative-tim.com/product/black-dashboard-flask" target="_blank">
|
||
Black Dashboard Flask
|
||
</a>
|
||
|
||
<ul class="navbar-nav flex-row d-none d-md-flex">
|
||
<li class="nav-item">
|
||
<a class="nav-link p-2" href="#version">
|
||
1.0.0
|
||
</a>
|
||
</li>
|
||
|
||
<!-- <li class="nav-item dropdown">
|
||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
v2.0.0
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||
<a class="dropdown-item active" href="/docs/1.0/">BS4 - 1.0.0</a>
|
||
<a class="dropdown-item" href="">BS3 - 1.2.1</a>
|
||
</div>
|
||
</li> -->
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link p-2" href="https://github.com/creativetimofficial/black-dashboard-flask" target="_blank" rel="noopener" aria-label="GitHub">
|
||
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
|
||
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link p-2" href="https://twitter.com/CreativeTim" target="_blank" rel="noopener" aria-label="Twitter">
|
||
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
|
||
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
|
||
<div class="navbar-nav-scroll ml-md-auto ">
|
||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||
<li class="nav-item">
|
||
<a target="_blank" href="javascript:void(0)" rel="nofollow" class="btn btn-round btn-default disabled"><i class="tim-icons icon-send mr-2"></i>Upgrade to PRO</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="../../../docs/1.0/getting-started/introduction.html"><i class="tim-icons icon-app"></i> Documentation</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="https://www.creative-tim.com/live/black-dashboard-flask"><i class="tim-icons icon-tv-2"></i> Live Preview</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="https://github.com/creativetimofficial/black-dashboard-flask" target="_blank" rel="noopener"><i class="tim-icons icon-shape-star"></i> Help with a star</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="" target="_blank" rel="noopener"></a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="" target="_blank" rel="noopener"></a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<a href="https://github.com/creativetimofficial/black-dashboard-flask" class="github-corner" aria-label="View source on Github"><svg width="60" height="60" viewBox="0 0 250 250" style="fill:#fff; color:#9c27b0; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
|
||
|
||
<!-- <a class="btn btn-white d-none d-lg-inline-block" href="">Download</a> -->
|
||
</header>
|
||
|
||
|
||
<div class="container-fluid">
|
||
<div class="row flex-xl-nowrap">
|
||
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
|
||
<nav class="collapse bd-links" id="bd-docs-nav">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="bd-toc-item active">
|
||
<a class="bd-toc-link" href="#docs">
|
||
Getting started
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/getting-started/getting-started-flask.html">
|
||
Getting Started Flask
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/getting-started/license.html">
|
||
License
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="bd-toc-item active">
|
||
<a class="bd-toc-link" href="#docs">
|
||
Foundation
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/foundation/colors.html">
|
||
Colors
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="bd-toc-item active">
|
||
<a class="bd-toc-link" href="#docs">
|
||
Components
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/components/alerts.html">
|
||
Alerts
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/components/badge.html">
|
||
Badge
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/components/breadcrumb.html">
|
||
Breadcrumb
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/components/buttons.html">
|
||
Buttons
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/components/card.html">
|
||
Card
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/components/collapse.html">
|
||
Collapse
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/components/dropdowns.html">
|
||
Dropdowns
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="active bd-sidenav-active">
|
||
|
||
<a href="../../../docs/1.0/components/forms.html">
|
||
Forms
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/components/google-maps.html">
|
||
Google Maps
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/components/modal.html">
|
||
Modal
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/components/navs.html">
|
||
Navs
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/components/navbar.html">
|
||
Navbar
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/components/nucleo-icons.html">
|
||
Nucleo Icons
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/components/tables.html">
|
||
Tables
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="bd-toc-item active">
|
||
<a class="bd-toc-link" href="#docs">
|
||
Plugins
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/plugins/perfect-scrollbar.html">
|
||
Perfect Scrollbar
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/plugins/chart-js.html">
|
||
Chart.js
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
</nav>
|
||
|
||
</div>
|
||
|
||
|
||
<div class="d-none d-xl-block col-xl-2 bd-toc">
|
||
<ul class="section-nav">
|
||
<li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#form-controls">Form controls</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#examples">Examples</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#checkboxes-and-radios">Checkboxes and radios</a>
|
||
<ul>
|
||
<li class="toc-entry toc-h3"><a href="#default-stacked">Default (stacked)</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#inline">Inline</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="toc-entry toc-h2"><a href="#layout">Layout</a>
|
||
<ul>
|
||
<li class="toc-entry toc-h3"><a href="#form-grid">Form grid</a>
|
||
<ul>
|
||
<li class="toc-entry toc-h4"><a href="#form-row">Form row</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="toc-entry toc-h2"><a href="#disabled-forms">Disabled forms</a>
|
||
<ul>
|
||
<ul>
|
||
<li class="toc-entry toc-h4"><a href="#caveat-with-anchors">Caveat with anchors</a></li>
|
||
<li class="toc-entry toc-h4"><a href="#cross-browser-compatibility">Cross-browser compatibility</a></li>
|
||
</ul>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||
<h1 class="bd-title" id="content">Forms</h1>
|
||
<p class="bd-lead">Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.</p>
|
||
<h2 id="overview">Overview</h2>
|
||
|
||
<p>Be sure to use an appropriate <code class="highlighter-rouge">type</code> attribute on all inputs (e.g., <code class="highlighter-rouge">email</code> for email address or <code class="highlighter-rouge">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>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<form>
|
||
<div class="form-group">
|
||
<label for="exampleInputEmail1">Email address</label>
|
||
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" />
|
||
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="exampleInputPassword1">Password</label>
|
||
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" />
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="checkbox" value="" />
|
||
Option one is this
|
||
<span class="form-check-sign">
|
||
<span class="check"></span>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
|
||
<button type="submit" class="btn btn-primary">Submit</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||
<span class="nt"><form></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"exampleInputEmail1"</span><span class="nt">></span>Email address<span class="nt"></label></span>
|
||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleInputEmail1"</span> <span class="na">aria-describedby=</span><span class="s">"emailHelp"</span> <span class="na">placeholder=</span><span class="s">"Enter email"</span><span class="nt">></span>
|
||
<span class="nt"><small</span> <span class="na">id=</span><span class="s">"emailHelp"</span> <span class="na">class=</span><span class="s">"form-text text-muted"</span><span class="nt">></span>We'll never share your email with anyone else.<span class="nt"></small></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"exampleInputPassword1"</span><span class="nt">></span>Password<span class="nt"></label></span>
|
||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleInputPassword1"</span> <span class="na">placeholder=</span><span class="s">"Password"</span><span class="nt">></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span>
|
||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">></span>
|
||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">""</span><span class="nt">></span>
|
||
Option one is this
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"form-check-sign"</span><span class="nt">></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"check"</span><span class="nt">></span></span>
|
||
<span class="nt"></span></span>
|
||
<span class="nt"></label></span>
|
||
<span class="nt"></div></span>
|
||
|
||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Submit<span class="nt"></button></span>
|
||
<span class="nt"></form></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre></div>
|
||
|
||
<h2 id="form-controls">Form controls</h2>
|
||
|
||
<p>Textual form controls—like <code class="highlighter-rouge"><input></code>s, <code class="highlighter-rouge"><select></code>s, and <code class="highlighter-rouge"><textarea></code>s—are styled with the <code class="highlighter-rouge">.form-control</code> class. Included are styles for general appearance, focus state, sizing, and more.</p>
|
||
|
||
<p>Be sure to explore our <a href="#custom-forms">custom forms</a> to further style <code class="highlighter-rouge"><select></code>s.</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<form>
|
||
<div class="form-group">
|
||
<label for="exampleFormControlInput1">Email address</label>
|
||
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="exampleFormControlSelect1">Example select</label>
|
||
<select class="form-control" id="exampleFormControlSelect1">
|
||
<option>1</option>
|
||
<option>2</option>
|
||
<option>3</option>
|
||
<option>4</option>
|
||
<option>5</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="exampleFormControlSelect2">Example multiple select</label>
|
||
<select multiple="" class="form-control" id="exampleFormControlSelect2">
|
||
<option>1</option>
|
||
<option>2</option>
|
||
<option>3</option>
|
||
<option>4</option>
|
||
<option>5</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="exampleFormControlTextarea1">Example textarea</label>
|
||
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||
<span class="nt"><form></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"exampleFormControlInput1"</span><span class="nt">></span>Email address<span class="nt"></label></span>
|
||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleFormControlInput1"</span> <span class="na">placeholder=</span><span class="s">"name@example.com"</span><span class="nt">></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"exampleFormControlSelect1"</span><span class="nt">></span>Example select<span class="nt"></label></span>
|
||
<span class="nt"><select</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleFormControlSelect1"</span><span class="nt">></span>
|
||
<span class="nt"><option></span>1<span class="nt"></option></span>
|
||
<span class="nt"><option></span>2<span class="nt"></option></span>
|
||
<span class="nt"><option></span>3<span class="nt"></option></span>
|
||
<span class="nt"><option></span>4<span class="nt"></option></span>
|
||
<span class="nt"><option></span>5<span class="nt"></option></span>
|
||
<span class="nt"></select></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"exampleFormControlSelect2"</span><span class="nt">></span>Example multiple select<span class="nt"></label></span>
|
||
<span class="nt"><select</span> <span class="na">multiple</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleFormControlSelect2"</span><span class="nt">></span>
|
||
<span class="nt"><option></span>1<span class="nt"></option></span>
|
||
<span class="nt"><option></span>2<span class="nt"></option></span>
|
||
<span class="nt"><option></span>3<span class="nt"></option></span>
|
||
<span class="nt"><option></span>4<span class="nt"></option></span>
|
||
<span class="nt"><option></span>5<span class="nt"></option></span>
|
||
<span class="nt"></select></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"exampleFormControlTextarea1"</span><span class="nt">></span>Example textarea<span class="nt"></label></span>
|
||
<span class="nt"><textarea</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"exampleFormControlTextarea1"</span> <span class="na">rows=</span><span class="s">"3"</span><span class="nt">></textarea></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></form></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre></div>
|
||
|
||
<h2 id="examples">Examples</h2>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="form-group has-success">
|
||
<input type="text" value="Success" class="form-control form-control-success" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group has-success"</span><span class="nt">></span>
|
||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">value=</span><span class="s">"Success"</span> <span class="na">class=</span><span class="s">"form-control form-control-success"</span> <span class="nt">/></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre></div>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="form-group has-danger">
|
||
<input type="email" value="Error Input" class="form-control form-control-danger" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group has-danger"</span><span class="nt">></span>
|
||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">value=</span><span class="s">"Error Input"</span> <span class="na">class=</span><span class="s">"form-control form-control-danger"</span> <span class="nt">/></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre></div>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="input-group">
|
||
<div class="input-group-prepend">
|
||
<div class="input-group-text">
|
||
<i class="tim-icons icon-single-02"></i>
|
||
</div>
|
||
</div>
|
||
<input type="text" class="form-control" placeholder="With Nucleo Icons" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">></span>
|
||
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"tim-icons icon-single-02"</span><span class="nt">></i></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"With Nucleo Icons"</span><span class="nt">></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre></div>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="input-group">
|
||
<div class="input-group-prepend">
|
||
<div class="input-group-text">
|
||
<i class="fab fa-dribbble"></i>
|
||
</div>
|
||
</div>
|
||
<input type="text" class="form-control" placeholder="With Font Awesome Icons" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-prepend"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">></span>
|
||
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fab fa-dribbble"</span><span class="nt">></i></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"With Font Awesome Icons"</span><span class="nt">></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre></div>
|
||
|
||
<h2 id="checkboxes-and-radios">Checkboxes and radios</h2>
|
||
|
||
<p>Default checkboxes and radios are improved upon with the help of <code class="highlighter-rouge">.form-check</code>, <strong>a single class for both input types that improves the layout and behavior of their HTML elements</strong>. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.</p>
|
||
|
||
<p>Disabled checkboxes and radios are supported, but to provide a <code class="highlighter-rouge">not-allowed</code> cursor on hover of the parent <code class="highlighter-rouge"><label></code>, you’ll need to add the <code class="highlighter-rouge">.disabled</code> class to the parent <code class="highlighter-rouge">.form-check</code>. The disabled class will also lighten the text color to help indicate the input’s state.</p>
|
||
|
||
<h3 id="default-stacked">Default (stacked)</h3>
|
||
|
||
<p>By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with <code class="highlighter-rouge">.form-check</code>.</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="checkbox" value="" />
|
||
Option one is this and that—be sure to include why it's great
|
||
<span class="form-check-sign">
|
||
<span class="check"></span>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="form-check disabled">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="checkbox" value="" disabled="" />
|
||
Option two is disabled
|
||
<span class="form-check-sign">
|
||
<span class="check"></span>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span>
|
||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">></span>
|
||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">""</span><span class="nt">></span>
|
||
Option one is this and that<span class="ni">&mdash;</span>be sure to include why it's great
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"form-check-sign"</span><span class="nt">></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"check"</span><span class="nt">></span></span>
|
||
<span class="nt"></span></span>
|
||
<span class="nt"></label></span>
|
||
<span class="nt"></div></span>
|
||
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check disabled"</span><span class="nt">></span>
|
||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">></span>
|
||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">""</span> <span class="na">disabled</span><span class="nt">></span>
|
||
Option two is disabled
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"form-check-sign"</span><span class="nt">></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"check"</span><span class="nt">></span></span>
|
||
<span class="nt"></span></span>
|
||
<span class="nt"></label></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre></div>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="form-check form-check-radio">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" />
|
||
Radio is off
|
||
<span class="form-check-sign"></span>
|
||
</label>
|
||
</div>
|
||
<div class="form-check form-check-radio">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2" checked="" />
|
||
Radio is on
|
||
<span class="form-check-sign"></span>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="form-check form-check-radio disabled">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="radio" name="exampleRadios1" id="exampleRadios1" value="option1" disabled="" />
|
||
Disabled radio is off
|
||
<span class="form-check-sign"></span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check form-check-radio"</span><span class="nt">></span>
|
||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">></span>
|
||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"exampleRadios"</span> <span class="na">id=</span><span class="s">"exampleRadios1"</span> <span class="na">value=</span><span class="s">"option1"</span> <span class="nt">></span>
|
||
Radio is off
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"form-check-sign"</span><span class="nt">></span></span>
|
||
<span class="nt"></label></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check form-check-radio"</span><span class="nt">></span>
|
||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">></span>
|
||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"exampleRadios"</span> <span class="na">id=</span><span class="s">"exampleRadios2"</span> <span class="na">value=</span><span class="s">"option2"</span> <span class="na">checked</span><span class="nt">></span>
|
||
Radio is on
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"form-check-sign"</span><span class="nt">></span></span>
|
||
<span class="nt"></label></span>
|
||
<span class="nt"></div></span>
|
||
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check form-check-radio disabled"</span><span class="nt">></span>
|
||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">></span>
|
||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"exampleRadios1"</span> <span class="na">id=</span><span class="s">"exampleRadios1"</span> <span class="na">value=</span><span class="s">"option1"</span> <span class="na">disabled</span><span class="nt">></span>
|
||
Disabled radio is off
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"form-check-sign"</span><span class="nt">></span></span>
|
||
<span class="nt"></label></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre></div>
|
||
|
||
<h3 id="inline">Inline</h3>
|
||
|
||
<p>Group checkboxes or radios on the same horizontal row by adding <code class="highlighter-rouge">.form-check-inline</code> to any <code class="highlighter-rouge">.form-check</code>.</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="form-check form-check-inline">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1" /> 1
|
||
<span class="form-check-sign"></span>
|
||
</label>
|
||
</div>
|
||
<div class="form-check form-check-inline">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2" /> 2
|
||
<span class="form-check-sign"></span>
|
||
</label>
|
||
</div>
|
||
<div class="form-check form-check-inline disabled">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled="" /> 3
|
||
<span class="form-check-sign"></span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check form-check-inline"</span><span class="nt">></span>
|
||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">></span>
|
||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">id=</span><span class="s">"inlineCheckbox1"</span> <span class="na">value=</span><span class="s">"option1"</span><span class="nt">></span> 1
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"form-check-sign"</span><span class="nt">></span></span>
|
||
<span class="nt"></label></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check form-check-inline"</span><span class="nt">></span>
|
||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">></span>
|
||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">id=</span><span class="s">"inlineCheckbox2"</span> <span class="na">value=</span><span class="s">"option2"</span><span class="nt">></span> 2
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"form-check-sign"</span><span class="nt">></span></span>
|
||
<span class="nt"></label></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check form-check-inline disabled"</span><span class="nt">></span>
|
||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">></span>
|
||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">id=</span><span class="s">"inlineCheckbox3"</span> <span class="na">value=</span><span class="s">"option3"</span> <span class="na">disabled</span><span class="nt">></span> 3
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"form-check-sign"</span><span class="nt">></span></span>
|
||
<span class="nt"></label></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre></div>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="form-check form-check-radio form-check-inline">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" /> 1
|
||
<span class="form-check-sign"></span>
|
||
</label>
|
||
</div>
|
||
<div class="form-check form-check-radio form-check-inline">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2" /> 2
|
||
<span class="form-check-sign"></span>
|
||
</label>
|
||
</div>
|
||
<div class="form-check form-check-radio form-check-inline disabled">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled="" /> 3
|
||
<span class="form-check-sign"></span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check form-check-radio form-check-inline"</span><span class="nt">></span>
|
||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">></span>
|
||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"inlineRadioOptions"</span> <span class="na">id=</span><span class="s">"inlineRadio1"</span> <span class="na">value=</span><span class="s">"option1"</span><span class="nt">></span> 1
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"form-check-sign"</span><span class="nt">></span></span>
|
||
<span class="nt"></label></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check form-check-radio form-check-inline"</span><span class="nt">></span>
|
||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">></span>
|
||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"inlineRadioOptions"</span> <span class="na">id=</span><span class="s">"inlineRadio2"</span> <span class="na">value=</span><span class="s">"option2"</span><span class="nt">></span> 2
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"form-check-sign"</span><span class="nt">></span></span>
|
||
<span class="nt"></label></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check form-check-radio form-check-inline disabled"</span><span class="nt">></span>
|
||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">></span>
|
||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"inlineRadioOptions"</span> <span class="na">id=</span><span class="s">"inlineRadio3"</span> <span class="na">value=</span><span class="s">"option3"</span> <span class="na">disabled</span><span class="nt">></span> 3
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"form-check-sign"</span><span class="nt">></span></span>
|
||
<span class="nt"></label></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre></div>
|
||
|
||
<h2 id="layout">Layout</h2>
|
||
|
||
<p>Since Bootstrap applies <code class="highlighter-rouge">display: block</code> and <code class="highlighter-rouge">width: 100%</code> to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.</p>
|
||
|
||
<h3 id="form-grid">Form grid</h3>
|
||
|
||
<p>More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<form>
|
||
<div class="row">
|
||
<div class="col">
|
||
<input type="text" class="form-control" placeholder="First name" />
|
||
</div>
|
||
<div class="col">
|
||
<input type="text" class="form-control" placeholder="Last name" />
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||
<span class="nt"><form></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span>
|
||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"First name"</span><span class="nt">></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span>
|
||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Last name"</span><span class="nt">></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></form></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre></div>
|
||
|
||
<h4 id="form-row">Form row</h4>
|
||
|
||
<p>You may also swap <code class="highlighter-rouge">.row</code> for <code class="highlighter-rouge">.form-row</code>, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<form>
|
||
<div class="form-row">
|
||
<div class="col">
|
||
<input type="text" class="form-control" placeholder="First name" />
|
||
</div>
|
||
<div class="col">
|
||
<input type="text" class="form-control" placeholder="Last name" />
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||
<span class="nt"><form></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span>
|
||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"First name"</span><span class="nt">></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span>
|
||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Last name"</span><span class="nt">></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></form></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre></div>
|
||
|
||
<p>More complex layouts can also be created with the grid system.</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<form>
|
||
<div class="form-row">
|
||
<div class="form-group col-md-6">
|
||
<label for="inputEmail4">Email</label>
|
||
<input type="email" class="form-control" id="inputEmail4" placeholder="Email" />
|
||
</div>
|
||
<div class="form-group col-md-6">
|
||
<label for="inputPassword4">Password</label>
|
||
<input type="password" class="form-control" id="inputPassword4" placeholder="Password" />
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="inputAddress">Address</label>
|
||
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="inputAddress2">Address 2</label>
|
||
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor" />
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group col-md-6">
|
||
<label for="inputCity">City</label>
|
||
<input type="text" class="form-control" id="inputCity" />
|
||
</div>
|
||
<div class="form-group col-md-4">
|
||
<label for="inputState">State</label>
|
||
<select id="inputState" class="form-control">
|
||
<option selected="">Choose...</option>
|
||
<option>...</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group col-md-2">
|
||
<label for="inputZip">Zip</label>
|
||
<input type="text" class="form-control" id="inputZip" />
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="checkbox" value="" />
|
||
Check me out
|
||
<span class="form-check-sign">
|
||
<span class="check"></span>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary">Sign in</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||
<span class="nt"><form></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group col-md-6"</span><span class="nt">></span>
|
||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"inputEmail4"</span><span class="nt">></span>Email<span class="nt"></label></span>
|
||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputEmail4"</span> <span class="na">placeholder=</span><span class="s">"Email"</span><span class="nt">></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group col-md-6"</span><span class="nt">></span>
|
||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"inputPassword4"</span><span class="nt">></span>Password<span class="nt"></label></span>
|
||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputPassword4"</span> <span class="na">placeholder=</span><span class="s">"Password"</span><span class="nt">></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"inputAddress"</span><span class="nt">></span>Address<span class="nt"></label></span>
|
||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputAddress"</span> <span class="na">placeholder=</span><span class="s">"1234 Main St"</span><span class="nt">></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"inputAddress2"</span><span class="nt">></span>Address 2<span class="nt"></label></span>
|
||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputAddress2"</span> <span class="na">placeholder=</span><span class="s">"Apartment, studio, or floor"</span><span class="nt">></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-row"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group col-md-6"</span><span class="nt">></span>
|
||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"inputCity"</span><span class="nt">></span>City<span class="nt"></label></span>
|
||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputCity"</span><span class="nt">></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group col-md-4"</span><span class="nt">></span>
|
||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"inputState"</span><span class="nt">></span>State<span class="nt"></label></span>
|
||
<span class="nt"><select</span> <span class="na">id=</span><span class="s">"inputState"</span> <span class="na">class=</span><span class="s">"form-control"</span><span class="nt">></span>
|
||
<span class="nt"><option</span> <span class="na">selected</span><span class="nt">></span>Choose...<span class="nt"></option></span>
|
||
<span class="nt"><option></span>...<span class="nt"></option></span>
|
||
<span class="nt"></select></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group col-md-2"</span><span class="nt">></span>
|
||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"inputZip"</span><span class="nt">></span>Zip<span class="nt"></label></span>
|
||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"inputZip"</span><span class="nt">></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span>
|
||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">></span>
|
||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">""</span><span class="nt">></span>
|
||
Check me out
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"form-check-sign"</span><span class="nt">></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"check"</span><span class="nt">></span></span>
|
||
<span class="nt"></span></span>
|
||
<span class="nt"></label></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Sign in<span class="nt"></button></span>
|
||
<span class="nt"></form></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre></div>
|
||
|
||
<h2 id="disabled-forms">Disabled forms</h2>
|
||
|
||
<p>Add the <code class="highlighter-rouge">disabled</code> boolean attribute on an input to prevent user interactions and make it appear lighter.</p>
|
||
|
||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">id=</span><span class="s">"disabledInput"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Disabled input here..."</span> <span class="na">disabled</span><span class="nt">></span></code></pre></figure>
|
||
|
||
<p>Add the <code class="highlighter-rouge">disabled</code> attribute to a <code class="highlighter-rouge"><fieldset></code> to disable all the controls within.</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<form>
|
||
<fieldset disabled="">
|
||
<div class="form-group">
|
||
<label for="disabledTextInput">Disabled input</label>
|
||
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="disabledSelect">Disabled select menu</label>
|
||
<select id="disabledSelect" class="form-control">
|
||
<option>Disabled select</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="checkbox" value="" />
|
||
Can't check me out
|
||
<span class="form-check-sign">
|
||
<span class="check"></span>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary">Submit</button>
|
||
</fieldset>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
||
<span class="nt"><form></span>
|
||
<span class="nt"><fieldset</span> <span class="na">disabled</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"disabledTextInput"</span><span class="nt">></span>Disabled input<span class="nt"></label></span>
|
||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">id=</span><span class="s">"disabledTextInput"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Disabled input"</span><span class="nt">></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">></span>
|
||
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"disabledSelect"</span><span class="nt">></span>Disabled select menu<span class="nt"></label></span>
|
||
<span class="nt"><select</span> <span class="na">id=</span><span class="s">"disabledSelect"</span> <span class="na">class=</span><span class="s">"form-control"</span><span class="nt">></span>
|
||
<span class="nt"><option></span>Disabled select<span class="nt"></option></span>
|
||
<span class="nt"></select></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">></span>
|
||
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"form-check-label"</span><span class="nt">></span>
|
||
<span class="nt"><input</span> <span class="na">class=</span><span class="s">"form-check-input"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">""</span><span class="nt">></span>
|
||
Can't check me out
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"form-check-sign"</span><span class="nt">></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"check"</span><span class="nt">></span></span>
|
||
<span class="nt"></span></span>
|
||
<span class="nt"></label></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Submit<span class="nt"></button></span>
|
||
<span class="nt"></fieldset></span>
|
||
<span class="nt"></form></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre></div>
|
||
|
||
<div class="bd-callout bd-callout-warning">
|
||
<h4 id="caveat-with-anchors">Caveat with anchors</h4>
|
||
|
||
<p>By default, browsers will treat all native form controls (<code class="highlighter-rouge"><input></code>, <code class="highlighter-rouge"><select></code> and <code class="highlighter-rouge"><button></code> elements) inside a <code class="highlighter-rouge"><fieldset disabled></code> as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes <code class="highlighter-rouge"><a ... class="btn btn-*"></code> elements, these will only be given a style of <code class="highlighter-rouge">pointer-events: none</code>. As noted in the section about <a href="/docs/1.0/components/buttons/#disabled-state">disabled state for buttons</a> (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn’t fully supported in Opera 18 and below, or in Internet Explorer 10, and won’t prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.</p>
|
||
</div>
|
||
|
||
<div class="bd-callout bd-callout-danger">
|
||
<h4 id="cross-browser-compatibility">Cross-browser compatibility</h4>
|
||
|
||
<p>While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don’t fully support the <code class="highlighter-rouge">disabled</code> attribute on a <code class="highlighter-rouge"><fieldset></code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
|
||
</div>
|
||
|
||
<p>If you want to see more examples and properties please check the official <strong><a href="http://getbootstrap.com/docs/4.0/components/forms/" target="_blank">Bootstrap Documentation</a></strong>.</p>
|
||
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<!-- Core JS Files -->
|
||
<script src="../../../assets/js/core/jquery.min.js" ></script>
|
||
<script src="../../../assets/js/core/popper.min.js" ></script>
|
||
<script src="../../../assets/js/core/bootstrap.min.js" ></script>
|
||
<script src="../../../assets/js/plugins/dashboard/free/perfect-scrollbar.jquery.min.js" ></script>
|
||
|
||
|
||
|
||
|
||
<!-- Google Maps Plugin -->
|
||
|
||
<!-- Place this tag in your head or just before your close body tag. -->
|
||
|
||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
|
||
|
||
|
||
<!-- Chart JS -->
|
||
<script src="../../../assets/js/plugins/dashboard/free/chartjs.min.js"></script>
|
||
|
||
<!-- Notifications Plugin -->
|
||
<script src="../../../assets/js/plugins/dashboard/free/bootstrap-notify.js"></script>
|
||
|
||
|
||
|
||
|
||
|
||
<!-- Control Center for Black Dashboard: parallax effects, scripts for the example pages etc --><script src="../../../assets/js/dashboard-free.js?v=1.0.0"></script><!-- Black Dashboard DEMO methods, don't include it in your project! -->
|
||
<script src="../../../assets/demo/dashboard/free/demo.js"></script>
|
||
|
||
|
||
|
||
<script>
|
||
$(document).ready(function(){
|
||
$().ready(function(){
|
||
$sidebar = $('.sidebar');
|
||
$navbar = $('.navbar');
|
||
$main_panel = $('.main-panel');
|
||
|
||
$full_page = $('.full-page');
|
||
|
||
$sidebar_responsive = $('body > .navbar-collapse');
|
||
sidebar_mini_active = true;
|
||
white_color = false;
|
||
|
||
window_width = $(window).width();
|
||
|
||
fixed_plugin_open = $('.sidebar .sidebar-wrapper .nav li.active a p').html();
|
||
|
||
|
||
|
||
$('.fixed-plugin a').click(function(event){
|
||
if($(this).hasClass('switch-trigger')){
|
||
if(event.stopPropagation){
|
||
event.stopPropagation();
|
||
}
|
||
else if(window.event){
|
||
window.event.cancelBubble = true;
|
||
}
|
||
}
|
||
});
|
||
|
||
$('.fixed-plugin .background-color span').click(function(){
|
||
$(this).siblings().removeClass('active');
|
||
$(this).addClass('active');
|
||
|
||
var new_color = $(this).data('color');
|
||
|
||
if($sidebar.length != 0){
|
||
$sidebar.attr('data',new_color);
|
||
}
|
||
|
||
if($main_panel.length != 0){
|
||
$main_panel.attr('data',new_color);
|
||
}
|
||
|
||
if($full_page.length != 0){
|
||
$full_page.attr('filter-color',new_color);
|
||
}
|
||
|
||
if($sidebar_responsive.length != 0){
|
||
$sidebar_responsive.attr('data',new_color);
|
||
}
|
||
});
|
||
|
||
$('.switch-sidebar-mini input').on("switchChange.bootstrapSwitch", function(){
|
||
var $btn = $(this);
|
||
|
||
if(sidebar_mini_active == true){
|
||
$('body').removeClass('sidebar-mini');
|
||
sidebar_mini_active = false;
|
||
blackDashboard.showSidebarMessage('Sidebar mini deactivated...');
|
||
}else{
|
||
$('body').addClass('sidebar-mini');
|
||
sidebar_mini_active = true;
|
||
blackDashboard.showSidebarMessage('Sidebar mini activated...');
|
||
}
|
||
|
||
// we simulate the window Resize so the charts will get updated in realtime.
|
||
var simulateWindowResize = setInterval(function(){
|
||
window.dispatchEvent(new Event('resize'));
|
||
},180);
|
||
|
||
// we stop the simulation of Window Resize after the animations are completed
|
||
setTimeout(function(){
|
||
clearInterval(simulateWindowResize);
|
||
},1000);
|
||
});
|
||
|
||
$('.switch-change-color input').on("switchChange.bootstrapSwitch", function(){
|
||
var $btn = $(this);
|
||
|
||
if(white_color == true){
|
||
|
||
$('body').addClass('change-background');
|
||
setTimeout(function(){ $('body').removeClass('change-background');
|
||
$('body').removeClass('white-content'); }, 900);
|
||
white_color = false;
|
||
}else{
|
||
|
||
$('body').addClass('change-background');
|
||
setTimeout(function(){ $('body').removeClass('change-background');
|
||
$('body').addClass('white-content');}, 900);
|
||
|
||
white_color = true;
|
||
}
|
||
|
||
|
||
});
|
||
|
||
$('.light-badge').click(function(){
|
||
$('body').addClass('white-content');
|
||
});
|
||
|
||
$('.dark-badge').click(function(){
|
||
$('body').removeClass('white-content');
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
|
||
|
||
|
||
|
||
<script src="../../../assets/demo/docs.min.js"></script>
|
||
<script src="../../../assets/demo/vendor/anchor.min.js"></script>
|
||
<script src="../../../assets/demo/vendor/clipboard.min.js"></script>
|
||
<script src="../../../assets/demo/vendor/holder.min.js"></script>
|
||
<script src="../../../assets/demo/src/application.js"></script>
|
||
|
||
<script>
|
||
$(document).ready(function(){
|
||
if($('#lineChartExample').length != 0){
|
||
demo.initDocChart();
|
||
}
|
||
|
||
|
||
|
||
|
||
});
|
||
</script>
|
||
|
||
<script>
|
||
Holder.addTheme('gray', {
|
||
bg: '#777',
|
||
fg: 'rgba(255,255,255,.75)',
|
||
font: 'Helvetica',
|
||
fontweight: 'normal'
|
||
})
|
||
</script>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<script src="https://cdn.trackjs.com/agent/v3/latest/t.js"></script><script>
|
||
window.TrackJS &&
|
||
TrackJS.install({
|
||
token: "ee6fab19c5a04ac1a32a645abde4613a",
|
||
application: "black-dashboard-free"
|
||
});
|
||
</script>
|
||
|
||
|
||
</body>
|
||
</html>
|