creativetimofficial--ui
Stefan
1285 行
82 KiB
HTML
1285 行
82 KiB
HTML
<!--
|
|
=========================================================
|
|
Material Dashboard - v2.1.1
|
|
=========================================================
|
|
|
|
Product Page: https://www.creative-tim.com/product/material-dashboard
|
|
Copyright 2019 Creative Tim (https://www.creative-tim.com)
|
|
Licensed under MIT (https://github.com/creativetimofficial/material-dashboard/blob/master/LICENSE.md)
|
|
|
|
Coded by Creative Tim
|
|
|
|
=========================================================
|
|
|
|
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -->
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<link rel="apple-touch-icon" sizes="76x76" href="../../../assets-old/img/apple-icon.png">
|
|
<link rel="icon" type="image/png" href="../../../assets-old/img/favicon.png">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
|
<title>
|
|
Material Dashboard by Creative Tim
|
|
</title>
|
|
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
|
|
<!-- Extra details for Live View on GitHub Pages -->
|
|
<!-- Canonical SEO -->
|
|
<link rel="canonical" href="https://www.creative-tim.com/product/material-dashboard" />
|
|
<!-- Social tags -->
|
|
<meta name="keywords" content="creative tim, html dashboard, html css dashboard, web dashboard, bootstrap 4 dashboard, bootstrap 4, css3 dashboard, bootstrap 4 admin, material dashboard bootstrap 4 dashboard, frontend, responsive bootstrap 4 dashboard, free dashboard, free admin dashboard, free bootstrap 4 admin dashboard">
|
|
<meta name="description" content="Material Dashboard is a Free Material Bootstrap Admin with a fresh, new design inspired by Google's Material Design.">
|
|
<!-- Schema.org markup for Google+ -->
|
|
<meta itemprop="name" content="Material Dashboard by Creative Tim">
|
|
<meta itemprop="description" content="Material Dashboard is a Free Material Bootstrap Admin with a fresh, new design inspired by Google's Material Design.">
|
|
<meta itemprop="image" content="https://s3.amazonaws.com/creativetim_bucket/products/50/opt_md_thumbnail.jpg">
|
|
<!-- Twitter Card data -->
|
|
<meta name="twitter:card" content="product">
|
|
<meta name="twitter:site" content="@creativetim">
|
|
<meta name="twitter:title" content="Material Dashboard by Creative Tim">
|
|
<meta name="twitter:description" content="Material Dashboard is a Free Material Bootstrap Admin with a fresh, new design inspired by Google's Material Design.">
|
|
<meta name="twitter:creator" content="@creativetim">
|
|
<meta name="twitter:image" content="https://s3.amazonaws.com/creativetim_bucket/products/50/opt_md_thumbnail.jpg">
|
|
<!-- Open Graph data -->
|
|
<meta property="fb:app_id" content="655968634437471">
|
|
<meta property="og:title" content="Material Dashboard by Creative Tim" />
|
|
<meta property="og:type" content="article" />
|
|
<meta property="og:url" content="https://demos.creative-tim.com/material-dashboard-bs4/examples/dashboard.html" />
|
|
<meta property="og:image" content="https://s3.amazonaws.com/creativetim_bucket/products/50/opt_md_thumbnail.jpg" />
|
|
<meta property="og:description" content="Material Dashboard is a Free Material Bootstrap Admin with a fresh, new design inspired by Google's Material Design." />
|
|
<meta property="og:site_name" content="Creative Tim" />
|
|
<!-- Fonts and icons -->
|
|
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
|
|
<!-- CSS Files -->
|
|
<link href="../../../assets-old/css/material-dashboard.min.css?v=2.1.0" rel="stylesheet" />
|
|
<!-- Documentation extras -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
|
|
<link rel="stylesheet" href="../../../assets-old/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-old/demo/demo.css" rel="stylesheet" />
|
|
<!-- Google Tag Manager -->
|
|
<script>
|
|
(function(w, d, s, l, i) {
|
|
w[l] = w[l] || [];
|
|
w[l].push({
|
|
'gtm.start': new Date().getTime(),
|
|
event: 'gtm.js'
|
|
});
|
|
var f = d.getElementsByTagName(s)[0],
|
|
j = d.createElement(s),
|
|
dl = l != 'dataLayer' ? '&l=' + l : '';
|
|
j.async = true;
|
|
j.src =
|
|
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
|
|
f.parentNode.insertBefore(j, f);
|
|
})(window, document, 'script', 'dataLayer', 'GTM-NKDMSK6');
|
|
</script>
|
|
<!-- End Google Tag Manager -->
|
|
</head>
|
|
|
|
<body class="bd-docs" data-spy="scroll" data-target=".bd-sidenav-active">
|
|
<!-- Extra details for Live View on GitHub Pages -->
|
|
<!-- Google Tag Manager (noscript) -->
|
|
<noscript>
|
|
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NKDMSK6" height="0" width="0" style="display:none;visibility:hidden"></iframe>
|
|
</noscript>
|
|
<!-- End Google Tag Manager (noscript) -->
|
|
<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 navbar-dark 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/material-dashboard" target="_blank">
|
|
Material Dashboard
|
|
</a>
|
|
<ul class="navbar-nav flex-row d-none d-md-flex">
|
|
<!-- <li class="nav-item">
|
|
<a class="nav-link p-2" href="#version">
|
|
2.1.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.1.0
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
|
<a class="dropdown-item" href="../../../docs/2.1/getting-started/introduction.html">BS4 - 2.1.1</a>
|
|
<a class="dropdown-item active" href="../../../docs/2.0/getting-started/introduction.html">BS4 - 2.1.0</a>
|
|
<a class="dropdown-item" href="https://demos.creative-tim.com/bs3/material-dashboard/documentation/tutorial-components.html" target="_blank">BS3 - 1.0</a>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link p-2" href="https://github.com/creativetimofficial/material-dashboard" 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 class="nav-link active" href="../../../docs/2.0/getting-started/introduction.html"><i class="material-icons">content_paste</i> Documentation</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="https://demos.creative-tim.com/material-dashboard-bs4/examples/dashboard.html"><i class="material-icons">view_carousel</i> Live Preview</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="https://github.com/creativetimofficial/material-dashboard" target="_blank" rel="noopener"><i class="material-icons">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/material-dashboard" class="github-corner" aria-label="View source on Github">
|
|
<svg width="80" height="80" 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>
|
|
</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/2.0/getting-started/introduction.html">
|
|
Introduction
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/getting-started/license.html">
|
|
License
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/getting-started/file-structure.html">
|
|
File Structure
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/getting-started/build-tools.html">
|
|
Build Tools
|
|
</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/2.0/components/alerts.html">
|
|
Alerts
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/components/buttons.html">
|
|
Buttons
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/components/card.html">
|
|
Card
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/components/dropdowns.html">
|
|
Dropdowns
|
|
</a>
|
|
</li>
|
|
<li class="active bd-sidenav-active">
|
|
<a href="../../../docs/2.0/components/forms.html">
|
|
Forms
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/components/google-maps.html">
|
|
Google Maps
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/components/material-icons.html">
|
|
Material Icons
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/components/modal.html">
|
|
Modal
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/components/navs.html">
|
|
Navs
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/components/navbar.html">
|
|
Navbar
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/components/tables.html">
|
|
Tables
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/components/typography.html">
|
|
Typography
|
|
</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/2.0/plugins/bootstrap-notify.html">
|
|
Bootstrap Notify
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/plugins/perfect-scrollbar.html">
|
|
Perfect Scrollbar
|
|
</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>
|
|
<ul>
|
|
<li class="toc-entry toc-h3">
|
|
<a href="#readonly">Readonly</a>
|
|
</li>
|
|
</ul>
|
|
</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="">
|
|
<form>
|
|
<div class="form-group">
|
|
<label for="exampleInput1" class="bmd-label-floating">With Floating Label</label>
|
|
<input type="email" class="form-control" id="exampleInput1" />
|
|
<span class="bmd-help">We'll never share your email with anyone else.</span>
|
|
</div>
|
|
<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 class="highlight"><pre><code class="language-html" data-lang="html"><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">"exampleInput1"</span> <span class="na">class=</span><span class="s">"bmd-label-floating"</span><span class="nt">></span>With Floating Label<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">"exampleInput1"</span><span class="nt">></span>
|
|
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"bmd-help"</span><span class="nt">></span>We'll never share your email with anyone else.<span class="nt"></span></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">"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></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="">
|
|
<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 class="highlight"><pre><code class="language-html" data-lang="html"><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></code></pre></div>
|
|
<h3 id="readonly">Readonly</h3>
|
|
<p>Add the
|
|
<code class="highlighter-rouge">readonly</code> boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.</p>
|
|
<div class="bd-example" data-example-id="">
|
|
<input class="form-control" type="text" placeholder="Readonly input here…" readonly="" />
|
|
</div>
|
|
<div 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">type=</span><span class="s">"text"</span> <span class="na">placeholder=</span><span class="s">"Readonly input here…"</span> <span class="na">readonly</span><span class="nt">></span></code></pre></div>
|
|
<h2 id="examples">Examples</h2>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="form-group label-floating has-success">
|
|
<label class="control-label">Success input</label>
|
|
<input type="text" value="Success" class="form-control" />
|
|
<span class="form-control-feedback">
|
|
<i class="material-icons">done</i>
|
|
</span>
|
|
</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">"form-group label-floating has-success"</span><span class="nt">></span>
|
|
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"control-label"</span><span class="nt">></span>Success input<span class="nt"></label></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"</span> <span class="nt">/></span>
|
|
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"form-control-feedback"</span><span class="nt">></span>
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">></span>done<span class="nt"></i></span>
|
|
<span class="nt"></span></span>
|
|
<span class="nt"></div></span></code></pre></div>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="form-group label-floating has-error">
|
|
<label class="control-label">Error input</label>
|
|
<input type="email" value="Error Input" class="form-control" />
|
|
<span class="material-icons form-control-feedback">clear</span>
|
|
</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">"form-group label-floating has-error"</span><span class="nt">></span>
|
|
<span class="nt"><label</span> <span class="na">class=</span><span class="s">"control-label"</span><span class="nt">></span>Error input<span class="nt"></label></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"</span> <span class="nt">/></span>
|
|
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"material-icons form-control-feedback"</span><span class="nt">></span>clear<span class="nt"></span></span>
|
|
<span class="nt"></div></span></code></pre></div>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="input-group">
|
|
<div class="input-group-prepend">
|
|
<span class="input-group-text">
|
|
<i class="material-icons">group</i>
|
|
</span>
|
|
</div>
|
|
<input type="text" class="form-control" placeholder="With Material Icons" />
|
|
</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">"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"><span</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">"material-icons"</span><span class="nt">></span>group<span class="nt"></i></span>
|
|
<span class="nt"></span></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 Material Icons"</span><span class="nt">></span>
|
|
<span class="nt"></div></span></code></pre></div>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="input-group">
|
|
<div class="input-group-prepend">
|
|
<span class="input-group-text">
|
|
<i class="fa fa-group"></i>
|
|
</span>
|
|
</div>
|
|
<input type="text" class="form-control" placeholder="With Font Awesome Icons" />
|
|
</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">"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"><span</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">"fa fa-group"</span><span class="nt">></i></span>
|
|
<span class="nt"></span></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></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="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 class="highlight"><pre><code class="language-html" data-lang="html"><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></code></pre></div>
|
|
<div class="bd-example" data-example-id="">
|
|
<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="circle">
|
|
<span class="check"></span>
|
|
</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="circle">
|
|
<span class="check"></span>
|
|
</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="circle">
|
|
<span class="check"></span>
|
|
</span>
|
|
</label>
|
|
</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">"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">"circle"</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 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">"circle"</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 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">"circle"</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></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="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 class="check"></span>
|
|
</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 class="check"></span>
|
|
</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 class="check"></span>
|
|
</span>
|
|
</label>
|
|
</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">"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 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 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 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 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 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></code></pre></div>
|
|
<div class="bd-example" data-example-id="">
|
|
<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="circle">
|
|
<span class="check"></span>
|
|
</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="circle">
|
|
<span class="check"></span>
|
|
</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="circle">
|
|
<span class="check"></span>
|
|
</span>
|
|
</label>
|
|
</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">"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">"circle"</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 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">"circle"</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 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">"circle"</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></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="">
|
|
<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 class="highlight"><pre><code class="language-html" data-lang="html"><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></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="">
|
|
<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 class="highlight"><pre><code class="language-html" data-lang="html"><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></code></pre></div>
|
|
<p>More complex layouts can also be created with the grid system.</p>
|
|
<div class="bd-example" data-example-id="">
|
|
<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 class="highlight"><pre><code class="language-html" data-lang="html"><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></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="">
|
|
<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 class="highlight"><pre><code class="language-html" data-lang="html"><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></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="material-dashboard/docs/2.0/components/buttons.html#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="https://getbootstrap.com/docs/4.0/components/forms/" target="_blank" rel="nofollow">Bootstrap Documentation</a></strong>.</p>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
<!-- Core JS Files -->
|
|
<script src="../../../assets-old/js/core/jquery.min.js" type="text/javascript"></script>
|
|
<script src="../../../assets-old/js/core/popper.min.js" type="text/javascript"></script>
|
|
<script src="../../../assets-old/js/core/bootstrap-material-design.min.js" type="text/javascript"></script>
|
|
<script src="../../../assets-old/js/plugins/perfect-scrollbar.jquery.min.js"></script>
|
|
<!-- Google Maps Plugin -->
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB2Yno10-YTnLjjn_Vtk0V8cdcY5lC4plU"></script>
|
|
<!-- Place this tag in your head or just before your close body tag. -->
|
|
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
|
<!-- Chartist JS -->
|
|
<script src="../../../assets-old/js/plugins/chartist.min.js"></script>
|
|
<!-- Notifications Plugin -->
|
|
<script src="../../../assets-old/js/plugins/bootstrap-notify.js"></script>
|
|
<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
|
|
<script src="../../../assets-old/js/material-dashboard.min.js?v=2.1.0" type="text/javascript"></script>
|
|
<!-- Sharrre libray -->
|
|
<script src="../../../assets-old/demo/jquery.sharrre.js"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
|
|
$('#facebook').sharrre({
|
|
share: {
|
|
facebook: true
|
|
},
|
|
enableHover: false,
|
|
enableTracking: false,
|
|
enableCounter: false,
|
|
click: function(api, options) {
|
|
api.simulateClick();
|
|
api.openPopup('facebook');
|
|
},
|
|
template: '<i class="fab fa-facebook-f"></i> Facebook',
|
|
url: 'https://demos.creative-tim.com/material-dashboard-bs4/examples/dashboard.html'
|
|
});
|
|
|
|
$('#google').sharrre({
|
|
share: {
|
|
googlePlus: true
|
|
},
|
|
enableCounter: false,
|
|
enableHover: false,
|
|
enableTracking: true,
|
|
click: function(api, options) {
|
|
api.simulateClick();
|
|
api.openPopup('googlePlus');
|
|
},
|
|
template: '<i class="fab fa-google-plus"></i> Google',
|
|
url: 'https://demos.creative-tim.com/material-dashboard-bs4/examples/dashboard.html'
|
|
});
|
|
|
|
$('#twitter').sharrre({
|
|
share: {
|
|
twitter: true
|
|
},
|
|
enableHover: false,
|
|
enableTracking: false,
|
|
enableCounter: false,
|
|
buttons: {
|
|
twitter: {
|
|
via: 'CreativeTim'
|
|
}
|
|
},
|
|
click: function(api, options) {
|
|
api.simulateClick();
|
|
api.openPopup('twitter');
|
|
},
|
|
template: '<i class="fab fa-twitter"></i> Twitter',
|
|
url: 'https://demos.creative-tim.com/material-dashboard-bs4/examples/dashboard.html'
|
|
});
|
|
|
|
// Facebook Pixel Code Don't Delete
|
|
! function(f, b, e, v, n, t, s) {
|
|
if (f.fbq) return;
|
|
n = f.fbq = function() {
|
|
n.callMethod ?
|
|
n.callMethod.apply(n, arguments) : n.queue.push(arguments)
|
|
};
|
|
if (!f._fbq) f._fbq = n;
|
|
n.push = n;
|
|
n.loaded = !0;
|
|
n.version = '2.0';
|
|
n.queue = [];
|
|
t = b.createElement(e);
|
|
t.async = !0;
|
|
t.src = v;
|
|
s = b.getElementsByTagName(e)[0];
|
|
s.parentNode.insertBefore(t, s)
|
|
}(window,
|
|
document, 'script', '//connect.facebook.net/en_US/fbevents.js');
|
|
|
|
try {
|
|
fbq('init', '111649226022273');
|
|
fbq('track', "PageView");
|
|
|
|
} catch (err) {
|
|
console.log('Facebook Track Error:', err);
|
|
}
|
|
|
|
});
|
|
</script>
|
|
<noscript>
|
|
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=111649226022273&ev=PageView&noscript=1" />
|
|
</noscript>
|
|
<script>
|
|
$(document).ready(function() {
|
|
$().ready(function() {
|
|
$sidebar = $('.sidebar');
|
|
$sidebar_img_container = $sidebar.find('.sidebar-background');
|
|
|
|
$full_page = $('.full-page');
|
|
|
|
$sidebar_responsive = $('body > .navbar-collapse');
|
|
sidebar_mini_active = true;
|
|
|
|
window_width = $(window).width();
|
|
|
|
fixed_plugin_open = $('.sidebar .sidebar-wrapper .nav li.active a p').html();
|
|
|
|
// if( window_width > 767 && fixed_plugin_open == 'Dashboard' ){
|
|
// if($('.fixed-plugin .dropdown').hasClass('show-dropdown')){
|
|
// $('.fixed-plugin .dropdown').addClass('show');
|
|
// }
|
|
//
|
|
// }
|
|
|
|
$('.fixed-plugin a').click(function(event) {
|
|
// Alex if we click on switch, stop propagation of the event, so the dropdown will not be hide, otherwise we set the section active
|
|
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-color', new_color);
|
|
}
|
|
|
|
if ($full_page.length != 0) {
|
|
$full_page.attr('filter-color', new_color);
|
|
}
|
|
|
|
if ($sidebar_responsive.length != 0) {
|
|
$sidebar_responsive.attr('data-color', new_color);
|
|
}
|
|
});
|
|
|
|
$('.fixed-plugin .img-holder').click(function() {
|
|
$full_page_background = $('.full-page-background');
|
|
|
|
$(this).parent('li').siblings().removeClass('active');
|
|
$(this).parent('li').addClass('active');
|
|
|
|
|
|
var new_image = $(this).find("img").attr('src');
|
|
|
|
if ($sidebar_img_container.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
|
|
$sidebar_img_container.fadeOut('fast', function() {
|
|
$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
|
|
$sidebar_img_container.fadeIn('fast');
|
|
});
|
|
}
|
|
|
|
if ($full_page_background.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
|
|
var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');
|
|
|
|
$full_page_background.fadeOut('fast', function() {
|
|
$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
|
|
$full_page_background.fadeIn('fast');
|
|
});
|
|
}
|
|
|
|
if ($('.switch-sidebar-image input:checked').length == 0) {
|
|
var new_image = $('.fixed-plugin li.active .img-holder').find("img").attr('src');
|
|
var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');
|
|
|
|
$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
|
|
$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
|
|
}
|
|
|
|
if ($sidebar_responsive.length != 0) {
|
|
$sidebar_responsive.css('background-image', 'url("' + new_image + '")');
|
|
}
|
|
});
|
|
|
|
$('.switch-sidebar-image input').on("switchChange.bootstrapSwitch", function() {
|
|
$full_page_background = $('.full-page-background');
|
|
|
|
$input = $(this);
|
|
|
|
if ($input.is(':checked')) {
|
|
if ($sidebar_img_container.length != 0) {
|
|
$sidebar_img_container.fadeIn('fast');
|
|
$sidebar.attr('data-image', '#');
|
|
}
|
|
|
|
if ($full_page_background.length != 0) {
|
|
$full_page_background.fadeIn('fast');
|
|
$full_page.attr('data-image', '#');
|
|
}
|
|
|
|
background_image = true;
|
|
} else {
|
|
if ($sidebar_img_container.length != 0) {
|
|
$sidebar.removeAttr('data-image');
|
|
$sidebar_img_container.fadeOut('fast');
|
|
}
|
|
|
|
if ($full_page_background.length != 0) {
|
|
$full_page.removeAttr('data-image', '#');
|
|
$full_page_background.fadeOut('fast');
|
|
}
|
|
|
|
background_image = false;
|
|
}
|
|
});
|
|
|
|
$('.switch-sidebar-mini input').on("switchChange.bootstrapSwitch", function() {
|
|
var $btn = $(this);
|
|
|
|
if (sidebar_mini_active == true) {
|
|
$('body').removeClass('sidebar-mini');
|
|
sidebar_mini_active = false;
|
|
materialDashboard.showSidebarMessage('Sidebar mini deactivated...');
|
|
} else {
|
|
$('body').addClass('sidebar-mini');
|
|
sidebar_mini_active = true;
|
|
materialDashboard.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);
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
if ($('.card-header.card-chart').length != 0) {
|
|
md.initDashboardPageCharts();
|
|
}
|
|
|
|
if ($('#websiteViewsChart').length != 0) {
|
|
md.initDocumentationCharts();
|
|
}
|
|
|
|
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|