update,
This commit is contained in:
louiscklaw
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,657 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="../../assets/img/apple-icon.png">
|
||||
<link rel="icon" href="../../assets/img/favicon.png" type="image/png">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="author" content="Creative Tim">
|
||||
<title>
|
||||
Choices | Material Dashboard 2 FREE Laravel by Creative Tim & UPDIVISION
|
||||
</title>
|
||||
<link rel="canonical" href="https://www.creative-tim.com/learning-lab/bootstrap/colors/material-dashboard" />
|
||||
|
||||
<meta name="keywords" content="creative tim, updivision, html dashboard, laravel, material, html css dashboard laravel, material dashboard laravel, laravel material dashboard, material admin, laravel dashboard, laravel admin, web dashboard, bootstrap 5 dashboard laravel, bootstrap 5, css3 dashboard, bootstrap 5 admin laravel, material dashboard bootstrap 5 laravel, frontend, responsive bootstrap 5 dashboard, material dashboard, material laravel bootstrap 5 dashboard" />
|
||||
<meta name="description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta itemprop="name" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||||
<meta itemprop="description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta itemprop="image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||||
<meta name="twitter:card" content="product" />
|
||||
<meta name="twitter:site" content="@creativetim" />
|
||||
<meta name="twitter:title" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||||
<meta name="twitter:description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta name="twitter:creator" content="@creativetim" />
|
||||
<meta name="twitter:image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||||
<meta property="fb:app_id" content="655968634437471" />
|
||||
<meta property="og:title" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="https://www.creative-tim.com/live/material-dashboard-laravel" />
|
||||
<meta property="og:image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||||
<meta property="og:description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta property="og:site_name" content="Creative Tim" />
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="../../assets/css/nucleo-icons.css" type="text/css">
|
||||
|
||||
<link rel="stylesheet" href="../../assets/css/nextjs-material-dashboard-pro.min.css" type="text/css">
|
||||
|
||||
<link rel="stylesheet" href="../../assets/css/material-dashboard.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../../assets/css/demo.css" type="text/css">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700" rel="stylesheet">
|
||||
|
||||
<link href="../../assets/css/nucleo-icons.css" rel="stylesheet">
|
||||
|
||||
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
|
||||
<!-- Anti-flicker snippet (recommended) -->
|
||||
<style>
|
||||
.async-hide {
|
||||
opacity: 0 !important
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
(function(a, s, y, n, c, h, i, d, e) {
|
||||
s.className += ' ' + y;
|
||||
h.start = 1 * new Date;
|
||||
h.end = i = function() {
|
||||
s.className = s.className.replace(RegExp(' ?' + y), '')
|
||||
};
|
||||
(a[n] = a[n] || []).hide = h;
|
||||
setTimeout(function() {
|
||||
i();
|
||||
h.end = null
|
||||
}, c);
|
||||
h.timeout = c;
|
||||
})(window, document.documentElement, 'async-hide', 'dataLayer', 4000, {
|
||||
'GTM-K9BGS8K': true
|
||||
});
|
||||
</script>
|
||||
<!-- Analytics-Optimize Snippet -->
|
||||
<script>
|
||||
(function(i, s, o, g, r, a, m) {
|
||||
i['GoogleAnalyticsObject'] = r;
|
||||
i[r] = i[r] || function() {
|
||||
(i[r].q = i[r].q || []).push(arguments)
|
||||
}, i[r].l = 1 * new Date();
|
||||
a = s.createElement(o),
|
||||
m = s.getElementsByTagName(o)[0];
|
||||
a.async = 1;
|
||||
a.src = g;
|
||||
m.parentNode.insertBefore(a, m)
|
||||
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
|
||||
ga('create', 'UA-46172202-22', 'auto', {
|
||||
allowLinker: true
|
||||
});
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('require', 'GTM-K9BGS8K');
|
||||
ga('require', 'displayfeatures');
|
||||
ga('require', 'linker');
|
||||
ga('linker:autoLink', ["2checkout.com", "avangate.com"]);
|
||||
</script>
|
||||
<!-- end Analytics-Optimize Snippet -->
|
||||
<!-- 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 -->
|
||||
<!-- This is for docs typography and layout -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
|
||||
<link href="../../assets/css/docs.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body class="docs ">
|
||||
<!-- 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) -->
|
||||
<header class="ct-docs-navbar">
|
||||
<a class="ct-docs-navbar-brand" href="javascript:void(0)" aria-label="Bootstrap">
|
||||
</a><a href="https://www.creative-tim.com/" class="ct-docs-navbar-text" target="_blank">
|
||||
Creative Tim
|
||||
</a>
|
||||
<div class="ct-docs-navbar-border"></div>
|
||||
<a href="../../documentation/getting-started/installation.html" class="ct-docs-navbar-text">
|
||||
Docs
|
||||
</a>
|
||||
|
||||
<ul class="ct-docs-navbar-nav-left">
|
||||
<li class="ct-docs-nav-item-dropdown">
|
||||
<a href="javascript:;" class="ct-docs-navbar-nav-link" role="button">
|
||||
<span class="ct-docs-navbar-nav-link-inner--text">Live Preview</span>
|
||||
</a>
|
||||
<div class="ct-docs-navbar-dropdown-menu" aria-labelledby="DropdownPreview">
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://material-dashboard-laravel.creative-tim.com" target="_blank">
|
||||
Material Dashboard 2 Laravel
|
||||
</a>
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://material-dashboard-pro-laravel.creative-tim.com" target="_blank">
|
||||
Material Dashboard 2 Pro Laravel
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="ct-docs-nav-item-dropdown">
|
||||
<a href="javascript:;" class="ct-docs-navbar-nav-link" role="button">
|
||||
<span class="ct-docs-navbar-nav-link-inner--text">Support</span>
|
||||
</a>
|
||||
<div class="ct-docs-navbar-dropdown-menu" aria-labelledby="DropdownSupport">
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://github.com/creativetimofficial/material-dashboard-laravel/issues" target="_blank">
|
||||
Material Dashboard 2 Laravel
|
||||
</a>
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://github.com/creativetimofficial/ct-material-dashboard-pro-laravel/issues" target="_blank">
|
||||
Material Dashboard 2 Pro Laravel
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="ct-docs-navbar-nav-right">
|
||||
<li class="ct-docs-navbar-nav-item">
|
||||
<a class="ct-docs-navbar-nav-link" href="https://www.creative-tim.com/product/material-dashboard-laravel" target="_blank">Download Free</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="https://www.creative-tim.com/product/material-dashboard-pro-laravel" target="_blank" class="ct-docs-btn-upgrade">
|
||||
<span class="ct-docs-btn-inner--icon">
|
||||
<i class="fas fa-download mr-2" aria-hidden="true"></i>
|
||||
</span>
|
||||
<span class="ct-docs-navbar-nav-link-inner--text">Upgrade to PRO</span>
|
||||
</a>
|
||||
<button class="ct-docs-navbar-toggler" type="button">
|
||||
<span class="ct-docs-navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</header>
|
||||
<div class="ct-docs-main-container">
|
||||
<div class="ct-docs-main-content-row">
|
||||
<div class="ct-docs-sidebar-col">
|
||||
<nav class="ct-docs-sidebar-collapse-links">
|
||||
<div class="ct-docs-sidebar-product">
|
||||
<div class="ct-docs-sidebar-product-image">
|
||||
<img src="../../assets/img/bootstrap.png">
|
||||
</div>
|
||||
<p class="ct-docs-sidebar-product-text">Material Dashboard</p>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-active-40 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Getting started
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/overview.html">
|
||||
Overview
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/license.html">
|
||||
License
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/installation.html">
|
||||
Installation
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/build-tools.html">
|
||||
Build Tools
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/bootstrap.html">
|
||||
What is Bootstrap
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-folder-17 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Laravel
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/login.html">
|
||||
Login
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/sign-up.html">
|
||||
Sign Up
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/forgot-password.html">
|
||||
Forgot Password
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/user-profile.html">
|
||||
User Profile
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/user-management.html">
|
||||
User Management
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-folder-17 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Foundation
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class=" ">
|
||||
<a href="../../documentation/foundation/colors.html">
|
||||
Colors
|
||||
</a>
|
||||
</li>
|
||||
<li class=" ">
|
||||
<a href="../../documentation/foundation/grid.html">
|
||||
Grid
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/typography.html">
|
||||
Typography
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/icons.html">
|
||||
Icons
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/utilities.html">
|
||||
Utilities
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-app text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Components
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/components/alerts.html">
|
||||
Alerts
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/badge.html">
|
||||
Badge
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/buttons.html">
|
||||
Buttons
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/social-buttons.html">
|
||||
Social Buttons
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/cards.html">
|
||||
Cards
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/carousel.html">
|
||||
Carousel
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/collapse.html">
|
||||
Collapse
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/dropdowns.html">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/forms.html">
|
||||
Forms
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/input-group.html">
|
||||
Input Group
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/list-group.html">
|
||||
List Group
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/modal.html">
|
||||
Modal
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/navs.html">
|
||||
Navs
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/navbar.html">
|
||||
Navbar
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/pagination.html">
|
||||
Pagination
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/popovers.html">
|
||||
Popovers
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/progress.html">
|
||||
Progress
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/spinners.html">
|
||||
Spinners
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/tables.html">
|
||||
Tables
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/tooltips.html">
|
||||
Tooltips
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-settings text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Plugins
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/countUpJs.html">
|
||||
CountUp JS
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/charts.html">
|
||||
Charts
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/datepicker.html">
|
||||
Datepicker
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/fullcalendar.html">
|
||||
Fullcalendar
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/sliders.html">
|
||||
Sliders
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="ct-docs-nav-sidenav-active">
|
||||
<a href="../../documentation/plugins/choices.html">
|
||||
Choices
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/dropzone.html">
|
||||
Dropzone
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/datatables.html">
|
||||
Datatables
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/kanban.html">
|
||||
Kanban
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/photo-swipe.html">
|
||||
Photo Swipe
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/quill.html">
|
||||
Quill
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/sweet-alerts.html">
|
||||
Sweet Alerts
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/wizard.html">
|
||||
Wizard
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="ct-docs-toc-col">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2"><a href="#examples">Examples</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#single-selection">Single Selection</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#tags">Tags</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<main class="ct-docs-content-col" role="main">
|
||||
<div class="ct-docs-page-title">
|
||||
<h1 class="ct-docs-page-h1-title" id="content">
|
||||
Bootstrap Choices
|
||||
</h1>
|
||||
<span class="ct-docs-page-title-pro-line"> - </span>
|
||||
<div class="ct-docs-page-title-pro-bage">Pro Component</div>
|
||||
<div class="avatar-group mt-3">
|
||||
</div>
|
||||
</div>
|
||||
<p class="ct-docs-page-title-lead">A vanilla JS customisable select box/text input plugin.</p>
|
||||
<hr class="ct-docs-hr">
|
||||
<p>We have styled the select picker to look similar to the dropdown and the other inputs.</p>
|
||||
<h2 id="examples">Examples</h2>
|
||||
<h3 id="single-selection">Single Selection</h3>
|
||||
<p><select class="form-control" name="choices-button" id="choices-button" placeholder="Departure">
|
||||
<option value="Choice 1" selected="">Brazil</option>
|
||||
<option value="Choice 2">Bucharest</option>
|
||||
<option value="Choice 3">London</option>
|
||||
<option value="Choice 4">USA</option>
|
||||
</select></p>
|
||||
<div class="position-relative">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><select</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">name=</span><span class="s">"choices-button"</span> <span class="na">id=</span><span class="s">"choices-button"</span> <span class="na">placeholder=</span><span class="s">"Departure"</span><span class="nt">></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"Choice 1"</span> <span class="na">selected=</span><span class="s">""</span><span class="nt">></span>Brazil<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"Choice 2"</span><span class="nt">></span>Bucharest<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"Choice 3"</span><span class="nt">></span>London<span class="nt"></option></span>
|
||||
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"Choice 4"</span><span class="nt">></span>USA<span class="nt"></option></span>
|
||||
<span class="nt"></select></span></code></pre>
|
||||
</figure>
|
||||
</div>
|
||||
<h3 id="tags">Tags</h3>
|
||||
<p><input class="form-control" id="choices-tags" data-color="dark" type="text" value="vuejs, angular, react, laravel" placeholder="Enter something" /></p>
|
||||
<div class="position-relative">
|
||||
<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">"choices-tags"</span> <span class="na">data-color=</span><span class="s">"dark"</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">value=</span><span class="s">"vuejs, angular, react, laravel"</span> <span class="na">placeholder=</span><span class="s">"Enter something"</span> <span class="nt">/></span></code></pre>
|
||||
</figure>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<div class="ct-docs-main-footer-row">
|
||||
<div class="ct-docs-main-footer-blank-col">
|
||||
</div>
|
||||
<div class="ct-docs-main-footer-col">
|
||||
<footer class="ct-docs-footer">
|
||||
<div class="ct-docs-footer-inner-row">
|
||||
<div class="ct-docs-footer-col">
|
||||
<div class="ct-docs-footer-copyright">
|
||||
© <script>
|
||||
document.write(new Date().getFullYear())
|
||||
</script> <a href="https://creative-tim.com" class="ct-docs-footer-copyright-author" target="_blank">Creative Tim</a> & <a href="https://www.updivision.com" class="ct-docs-footer-copyright-author" target="_blank">UPDIVISION</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ct-docs-footer-col">
|
||||
<ul class="ct-docs-footer-nav-footer">
|
||||
<li>
|
||||
<a href="https://creative-tim.com" class="ct-docs-footer-nav-link" target="_blank">Creative Tim</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="https://www.updivision.com" class="ct-docs-footer-nav-link" target="_blank">UPDIVISION</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.creative-tim.com/contact-us" class="ct-docs-footer-nav-link" target="_blank">Contact Us</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://creative-tim.com/blog" class="ct-docs-footer-nav-link" target="_blank">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../assets/js/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/core/popper.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/core/bootstrap.bundle.min.js" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="../../assets/js/choices.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/prism.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/docs.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/holder.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/moment.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/material-dashboard.min.js" type="text/javascript"></script>
|
||||
<script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
})
|
||||
</script>
|
||||
<script>
|
||||
// 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>
|
||||
<script src="../../assets/js/docs.js"></script>
|
||||
<script type="text/javascript">
|
||||
if (document.getElementById('choices-button')) {
|
||||
var element = document.getElementById('choices-button');
|
||||
const example = new Choices(element, {});
|
||||
}
|
||||
var choicesTags = document.getElementById('choices-tags');
|
||||
var color = choicesTags.dataset.color;
|
||||
if (choicesTags) {
|
||||
const example = new Choices(choicesTags, {
|
||||
delimiter: ',',
|
||||
editItems: true,
|
||||
maxItemCount: 5,
|
||||
removeItemButton: true,
|
||||
addItems: true,
|
||||
classNames: {
|
||||
item: 'badge rounded-pill choices-' + color + ' me-2'
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,759 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="../../assets/img/apple-icon.png">
|
||||
<link rel="icon" href="../../assets/img/favicon.png" type="image/png">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="author" content="Creative Tim">
|
||||
<title>
|
||||
CountUp JS | Material Dashboard 2 FREE Laravel by Creative Tim & UPDIVISION
|
||||
</title>
|
||||
<link rel="canonical" href="https://www.creative-tim.com/learning-lab/bootstrap/colors/material-dashboard" />
|
||||
|
||||
<meta name="keywords" content="creative tim, updivision, html dashboard, laravel, material, html css dashboard laravel, material dashboard laravel, laravel material dashboard, material admin, laravel dashboard, laravel admin, web dashboard, bootstrap 5 dashboard laravel, bootstrap 5, css3 dashboard, bootstrap 5 admin laravel, material dashboard bootstrap 5 laravel, frontend, responsive bootstrap 5 dashboard, material dashboard, material laravel bootstrap 5 dashboard" />
|
||||
<meta name="description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta itemprop="name" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||||
<meta itemprop="description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta itemprop="image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||||
<meta name="twitter:card" content="product" />
|
||||
<meta name="twitter:site" content="@creativetim" />
|
||||
<meta name="twitter:title" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||||
<meta name="twitter:description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta name="twitter:creator" content="@creativetim" />
|
||||
<meta name="twitter:image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||||
<meta property="fb:app_id" content="655968634437471" />
|
||||
<meta property="og:title" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="https://www.creative-tim.com/live/material-dashboard-laravel" />
|
||||
<meta property="og:image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||||
<meta property="og:description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta property="og:site_name" content="Creative Tim" />
|
||||
|
||||
<link rel="stylesheet" href="../../assets/css/nucleo-icons.css" type="text/css">
|
||||
|
||||
<link rel="stylesheet" href="../../assets/css/nextjs-material-dashboard-pro.min.css" type="text/css">
|
||||
|
||||
<link rel="stylesheet" href="../../assets/css/material-dashboard.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../../assets/css/demo.css" type="text/css">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700" rel="stylesheet">
|
||||
|
||||
<link href="../../assets/css/nucleo-icons.css" rel="stylesheet">
|
||||
|
||||
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
|
||||
<!-- Anti-flicker snippet (recommended) -->
|
||||
<style>
|
||||
.async-hide {
|
||||
opacity: 0 !important
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
(function(a, s, y, n, c, h, i, d, e) {
|
||||
s.className += ' ' + y;
|
||||
h.start = 1 * new Date;
|
||||
h.end = i = function() {
|
||||
s.className = s.className.replace(RegExp(' ?' + y), '')
|
||||
};
|
||||
(a[n] = a[n] || []).hide = h;
|
||||
setTimeout(function() {
|
||||
i();
|
||||
h.end = null
|
||||
}, c);
|
||||
h.timeout = c;
|
||||
})(window, document.documentElement, 'async-hide', 'dataLayer', 4000, {
|
||||
'GTM-K9BGS8K': true
|
||||
});
|
||||
</script>
|
||||
<!-- Analytics-Optimize Snippet -->
|
||||
<script>
|
||||
(function(i, s, o, g, r, a, m) {
|
||||
i['GoogleAnalyticsObject'] = r;
|
||||
i[r] = i[r] || function() {
|
||||
(i[r].q = i[r].q || []).push(arguments)
|
||||
}, i[r].l = 1 * new Date();
|
||||
a = s.createElement(o),
|
||||
m = s.getElementsByTagName(o)[0];
|
||||
a.async = 1;
|
||||
a.src = g;
|
||||
m.parentNode.insertBefore(a, m)
|
||||
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
|
||||
ga('create', 'UA-46172202-22', 'auto', {
|
||||
allowLinker: true
|
||||
});
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('require', 'GTM-K9BGS8K');
|
||||
ga('require', 'displayfeatures');
|
||||
ga('require', 'linker');
|
||||
ga('linker:autoLink', ["2checkout.com", "avangate.com"]);
|
||||
</script>
|
||||
<!-- end Analytics-Optimize Snippet -->
|
||||
<!-- 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 -->
|
||||
<!-- This is for docs typography and layout -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
|
||||
<link href="../../assets/css/docs.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body class="docs ">
|
||||
<!-- 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) -->
|
||||
<header class="ct-docs-navbar">
|
||||
<a class="ct-docs-navbar-brand" href="javascript:void(0)" aria-label="Bootstrap">
|
||||
</a><a href="https://www.creative-tim.com/" class="ct-docs-navbar-text" target="_blank">
|
||||
Creative Tim
|
||||
</a>
|
||||
<div class="ct-docs-navbar-border"></div>
|
||||
<a href="../../documentation/getting-started/installation.html" class="ct-docs-navbar-text">
|
||||
Docs
|
||||
</a>
|
||||
|
||||
<ul class="ct-docs-navbar-nav-left">
|
||||
<li class="ct-docs-nav-item-dropdown">
|
||||
<a href="javascript:;" class="ct-docs-navbar-nav-link" role="button">
|
||||
<span class="ct-docs-navbar-nav-link-inner--text">Live Preview</span>
|
||||
</a>
|
||||
<div class="ct-docs-navbar-dropdown-menu" aria-labelledby="DropdownPreview">
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://material-dashboard-laravel.creative-tim.com" target="_blank">
|
||||
Material Dashboard 2 Laravel
|
||||
</a>
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://material-dashboard-pro-laravel.creative-tim.com" target="_blank">
|
||||
Material Dashboard 2 Pro Laravel
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="ct-docs-nav-item-dropdown">
|
||||
<a href="javascript:;" class="ct-docs-navbar-nav-link" role="button">
|
||||
<span class="ct-docs-navbar-nav-link-inner--text">Support</span>
|
||||
</a>
|
||||
<div class="ct-docs-navbar-dropdown-menu" aria-labelledby="DropdownSupport">
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://github.com/creativetimofficial/material-dashboard-laravel/issues" target="_blank">
|
||||
Material Dashboard 2 Laravel
|
||||
</a>
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://github.com/creativetimofficial/ct-material-dashboard-pro-laravel/issues" target="_blank">
|
||||
Material Dashboard 2 Pro Laravel
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="ct-docs-navbar-nav-right">
|
||||
<li class="ct-docs-navbar-nav-item">
|
||||
<a class="ct-docs-navbar-nav-link" href="https://www.creative-tim.com/product/material-dashboard-laravel" target="_blank">Download Free</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="https://www.creative-tim.com/product/material-dashboard-pro-laravel" target="_blank" class="ct-docs-btn-upgrade">
|
||||
<span class="ct-docs-btn-inner--icon">
|
||||
<i class="fas fa-download mr-2" aria-hidden="true"></i>
|
||||
</span>
|
||||
<span class="ct-docs-navbar-nav-link-inner--text">Upgrade to PRO</span>
|
||||
</a>
|
||||
<button class="ct-docs-navbar-toggler" type="button">
|
||||
<span class="ct-docs-navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</header>
|
||||
<div class="ct-docs-main-container">
|
||||
<div class="ct-docs-main-content-row">
|
||||
<div class="ct-docs-sidebar-col">
|
||||
<nav class="ct-docs-sidebar-collapse-links">
|
||||
<div class="ct-docs-sidebar-product">
|
||||
<div class="ct-docs-sidebar-product-image">
|
||||
<img src="../../assets/img/bootstrap.png">
|
||||
</div>
|
||||
<p class="ct-docs-sidebar-product-text">Material Dashboard</p>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-active-40 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Getting started
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/overview.html">
|
||||
Overview
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/license.html">
|
||||
License
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/installation.html">
|
||||
Installation
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/build-tools.html">
|
||||
Build Tools
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/bootstrap.html">
|
||||
What is Bootstrap
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-folder-17 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Laravel
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/login.html">
|
||||
Login
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/sign-up.html">
|
||||
Sign Up
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/forgot-password.html">
|
||||
Forgot Password
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/user-profile.html">
|
||||
User Profile
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/user-management.html">
|
||||
User Management
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-folder-17 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Foundation
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class=" ">
|
||||
<a href="../../documentation/foundation/colors.html">
|
||||
Colors
|
||||
</a>
|
||||
</li>
|
||||
<li class=" ">
|
||||
<a href="../../documentation/foundation/grid.html">
|
||||
Grid
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/typography.html">
|
||||
Typography
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/icons.html">
|
||||
Icons
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/utilities.html">
|
||||
Utilities
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-app text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Components
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/components/alerts.html">
|
||||
Alerts
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/badge.html">
|
||||
Badge
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/buttons.html">
|
||||
Buttons
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/social-buttons.html">
|
||||
Social Buttons
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/cards.html">
|
||||
Cards
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/carousel.html">
|
||||
Carousel
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/collapse.html">
|
||||
Collapse
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/dropdowns.html">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/forms.html">
|
||||
Forms
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/input-group.html">
|
||||
Input Group
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/list-group.html">
|
||||
List Group
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/modal.html">
|
||||
Modal
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/navs.html">
|
||||
Navs
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/navbar.html">
|
||||
Navbar
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/pagination.html">
|
||||
Pagination
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/popovers.html">
|
||||
Popovers
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/progress.html">
|
||||
Progress
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/spinners.html">
|
||||
Spinners
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/tables.html">
|
||||
Tables
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/tooltips.html">
|
||||
Tooltips
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-settings text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Plugins
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="ct-docs-nav-sidenav-active">
|
||||
<a href="../../documentation/plugins/countUpJs.html">
|
||||
CountUp JS
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/charts.html">
|
||||
Charts
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/datepicker.html">
|
||||
Datepicker
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/fullcalendar.html">
|
||||
Fullcalendar
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/sliders.html">
|
||||
Sliders
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/choices.html">
|
||||
Choices
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/dropzone.html">
|
||||
Dropzone
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/datatables.html">
|
||||
Datatables
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/kanban.html">
|
||||
Kanban
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/photo-swipe.html">
|
||||
Photo Swipe
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/quill.html">
|
||||
Quill
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/sweet-alerts.html">
|
||||
Sweet Alerts
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/wizard.html">
|
||||
Wizard
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="ct-docs-toc-col">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2"><a href="#usage">Usage</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#example">Example</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h6"><a href="#earnings">Earnings</a></li>
|
||||
<li class="toc-entry toc-h4"><a href="#-">$ </a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h6"><a href="#customers">Customers</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h4"><a href="#--1">$ </a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h6"><a href="#avg-value">Avg. Value</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h4"><a href="#--2">$ </a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h6"><a href="#refund-rate">Refund Rate</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h4"><a href="#--3"> %</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<main class="ct-docs-content-col" role="main">
|
||||
<div class="ct-docs-page-title">
|
||||
<h1 class="ct-docs-page-h1-title" id="content">
|
||||
Bootstrap CountUp JS
|
||||
</h1>
|
||||
<span class="ct-docs-page-title-pro-line"> - </span>
|
||||
<div class="ct-docs-page-title-pro-bage">Pro Component</div>
|
||||
<div class="avatar-group mt-3">
|
||||
</div>
|
||||
</div>
|
||||
<p class="ct-docs-page-title-lead">CountUp.js is a dependency-free, lightweight JavaScript class that can be used to quickly create animations that display numerical data in a more interesting way.</p>
|
||||
<hr class="ct-docs-hr">
|
||||
<h2 id="usage">Usage</h2>
|
||||
<p>In order to use this plugin on your page you will need to include the following script in the “Optional JS” area from the page’s footer:</p>
|
||||
<div class="position-relative">
|
||||
<div class="bd-clipboard"><span class="btn-clipboard" title="" data-bs-original-title="Copy to clipboard">Copy</span></div><figure class="highlight"><pre class=" language-html"><code class=" language-html" data-lang="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>../../assets/js/plugins/countup.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre>
|
||||
</figure>
|
||||
</div>
|
||||
<h2 id="example">Example</h2>
|
||||
<div class="row mb-3">
|
||||
<div class="col-lg-3 col-6 text-center">
|
||||
<div class="border border-light border-1 border-radius-md py-3">
|
||||
<h6 class="text-primary text-gradient mb-0">Earnings</h6>
|
||||
<h4 class="font-weight-bolder"><span class="small">$ </span><span id="state1" countto="23980">23,980</span></h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-6 text-center">
|
||||
<div class="border border-light border-1 border-radius-md py-3">
|
||||
<h6 class="text-primary text-gradient mb-0">Customers</h6>
|
||||
<h4 class="font-weight-bolder"><span class="small">$ </span><span id="state2" countto="2400">2,400</span></h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-6 text-center mt-4 mt-lg-0">
|
||||
<div class="border border-light border-1 border-radius-md py-3">
|
||||
<h6 class="text-primary text-gradient mb-0">Avg. Value</h6>
|
||||
<h4 class="font-weight-bolder"><span class="small">$ </span><span id="state3" countto="48">48</span></h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-6 text-center mt-4 mt-lg-0">
|
||||
<div class="border border-light border-1 border-radius-md py-3">
|
||||
<h6 class="text-primary text-gradient mb-0">Refund Rate</h6>
|
||||
<h4 class="font-weight-bolder"><span id="state4" countto="4">4</span><span class="small"> %</span></h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="position-relative">
|
||||
<div class="bd-clipboard"><span class="btn-clipboard" title="" data-bs-original-title="Copy to clipboard">Copy</span></div><figure class="highlight"><pre class=" language-html"><code class=" language-html" data-lang="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-lg-3 col-6 text-center<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>border border-light border-1 border-radius-md py-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h6</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-primary text-gradient mb-0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Earnings<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h6</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>font-weight-bolder<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>$ <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>state1<span class="token punctuation">"</span></span> <span class="token attr-name">countTo</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>23980<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-lg-3 col-6 text-center<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>border border-light border-1 border-radius-md py-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h6</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-primary text-gradient mb-0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Customers<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h6</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>font-weight-bolder<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>$ <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>state2<span class="token punctuation">"</span></span> <span class="token attr-name">countTo</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2400<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-lg-3 col-6 text-center mt-4 mt-lg-0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>border border-light border-1 border-radius-md py-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h6</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-primary text-gradient mb-0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Avg. Value<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h6</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>font-weight-bolder<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>$ <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>state3<span class="token punctuation">"</span></span> <span class="token attr-name">countTo</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>48<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-lg-3 col-6 text-center mt-4 mt-lg-0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>border border-light border-1 border-radius-md py-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h6</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-primary text-gradient mb-0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Refund Rate<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h6</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>font-weight-bolder<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>state4<span class="token punctuation">"</span></span> <span class="token attr-name">countTo</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> %<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="position-relative">
|
||||
<div class="bd-clipboard"><span class="btn-clipboard" title="" data-bs-original-title="Copy to clipboard">Copy</span></div><figure class="highlight"><pre class=" language-html"><code class=" language-html" data-lang="html">if (document.getElementById('state1')) {
|
||||
const countUp = new CountUp('state1', document.getElementById("state1").getAttribute("countTo"));
|
||||
if (!countUp.error) {
|
||||
countUp.start();
|
||||
} else {
|
||||
console.error(countUp.error);
|
||||
}
|
||||
}
|
||||
if (document.getElementById('state2')) {
|
||||
const countUp = new CountUp('state2', document.getElementById("state2").getAttribute("countTo"));
|
||||
if (!countUp.error) {
|
||||
countUp.start();
|
||||
} else {
|
||||
console.error(countUp.error);
|
||||
}
|
||||
}
|
||||
if (document.getElementById('state3')) {
|
||||
const countUp = new CountUp('state3', document.getElementById("state3").getAttribute("countTo"));
|
||||
if (!countUp.error) {
|
||||
countUp.start();
|
||||
} else {
|
||||
console.error(countUp.error);
|
||||
}
|
||||
}
|
||||
if (document.getElementById('state4')) {
|
||||
const countUp = new CountUp('state4', document.getElementById("state4").getAttribute("countTo"));
|
||||
if (!countUp.error) {
|
||||
countUp.start();
|
||||
} else {
|
||||
console.error(countUp.error);
|
||||
}
|
||||
}</code></pre>
|
||||
</figure>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<div class="ct-docs-main-footer-row">
|
||||
<div class="ct-docs-main-footer-blank-col">
|
||||
</div>
|
||||
<div class="ct-docs-main-footer-col">
|
||||
<footer class="ct-docs-footer">
|
||||
<div class="ct-docs-footer-inner-row">
|
||||
<div class="ct-docs-footer-col">
|
||||
<div class="ct-docs-footer-copyright">
|
||||
© <script>
|
||||
document.write(new Date().getFullYear())
|
||||
</script> <a href="https://creative-tim.com" class="ct-docs-footer-copyright-author" target="_blank">Creative Tim</a> & <a href="https://www.updivision.com" class="ct-docs-footer-copyright-author" target="_blank">UPDIVISION</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ct-docs-footer-col">
|
||||
<ul class="ct-docs-footer-nav-footer">
|
||||
<li>
|
||||
<a href="https://creative-tim.com" class="ct-docs-footer-nav-link" target="_blank">Creative Tim</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="https://www.updivision.com" class="ct-docs-footer-nav-link" target="_blank">UPDIVISION</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.creative-tim.com/contact-us" class="ct-docs-footer-nav-link" target="_blank">Contact Us</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://creative-tim.com/blog" class="ct-docs-footer-nav-link" target="_blank">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../assets/js/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/core/popper.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/core/bootstrap.bundle.min.js" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="../../assets/js/countup.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/prism.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/docs.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/holder.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/moment.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/material-dashboard.min.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
if (document.getElementById('state1')) {
|
||||
const countUp = new CountUp('state1', document.getElementById("state1").getAttribute("countTo"));
|
||||
if (!countUp.error) {
|
||||
countUp.start();
|
||||
} else {
|
||||
console.error(countUp.error);
|
||||
}
|
||||
}
|
||||
if (document.getElementById('state2')) {
|
||||
const countUp = new CountUp('state2', document.getElementById("state2").getAttribute("countTo"));
|
||||
if (!countUp.error) {
|
||||
countUp.start();
|
||||
} else {
|
||||
console.error(countUp.error);
|
||||
}
|
||||
}
|
||||
if (document.getElementById('state3')) {
|
||||
const countUp = new CountUp('state3', document.getElementById("state3").getAttribute("countTo"));
|
||||
if (!countUp.error) {
|
||||
countUp.start();
|
||||
} else {
|
||||
console.error(countUp.error);
|
||||
}
|
||||
}
|
||||
if (document.getElementById('state4')) {
|
||||
const countUp = new CountUp('state4', document.getElementById("state4").getAttribute("countTo"));
|
||||
if (!countUp.error) {
|
||||
countUp.start();
|
||||
} else {
|
||||
console.error(countUp.error);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
})
|
||||
</script>
|
||||
<script>
|
||||
// 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>
|
||||
<script src="../../assets/js/docs.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,640 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="../../assets/img/apple-icon.png">
|
||||
<link rel="icon" href="../../assets/img/favicon.png" type="image/png">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="author" content="Creative Tim">
|
||||
<title>
|
||||
Datepicker | Material Dashboard 2 FREE Laravel by Creative Tim & UPDIVISION
|
||||
</title>
|
||||
<link rel="canonical" href="https://www.creative-tim.com/learning-lab/bootstrap/colors/material-dashboard" />
|
||||
|
||||
<meta name="keywords" content="creative tim, updivision, html dashboard, laravel, material, html css dashboard laravel, material dashboard laravel, laravel material dashboard, material admin, laravel dashboard, laravel admin, web dashboard, bootstrap 5 dashboard laravel, bootstrap 5, css3 dashboard, bootstrap 5 admin laravel, material dashboard bootstrap 5 laravel, frontend, responsive bootstrap 5 dashboard, material dashboard, material laravel bootstrap 5 dashboard" />
|
||||
<meta name="description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta itemprop="name" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||||
<meta itemprop="description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta itemprop="image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||||
<meta name="twitter:card" content="product" />
|
||||
<meta name="twitter:site" content="@creativetim" />
|
||||
<meta name="twitter:title" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||||
<meta name="twitter:description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta name="twitter:creator" content="@creativetim" />
|
||||
<meta name="twitter:image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||||
<meta property="fb:app_id" content="655968634437471" />
|
||||
<meta property="og:title" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="https://www.creative-tim.com/live/material-dashboard-laravel" />
|
||||
<meta property="og:image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||||
<meta property="og:description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta property="og:site_name" content="Creative Tim" />
|
||||
|
||||
|
||||
<link rel="stylesheet" href="../../assets/css/nucleo-icons.css" type="text/css">
|
||||
|
||||
<link rel="stylesheet" href="../../assets/css/nextjs-material-dashboard-pro.min.css" type="text/css">
|
||||
|
||||
<link rel="stylesheet" href="../../assets/css/material-dashboard.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../../assets/css/demo.css" type="text/css">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700" rel="stylesheet">
|
||||
|
||||
<link href="../../assets/css/nucleo-icons.css" rel="stylesheet">
|
||||
|
||||
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
|
||||
<!-- Anti-flicker snippet (recommended) -->
|
||||
<style>
|
||||
.async-hide {
|
||||
opacity: 0 !important
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
(function(a, s, y, n, c, h, i, d, e) {
|
||||
s.className += ' ' + y;
|
||||
h.start = 1 * new Date;
|
||||
h.end = i = function() {
|
||||
s.className = s.className.replace(RegExp(' ?' + y), '')
|
||||
};
|
||||
(a[n] = a[n] || []).hide = h;
|
||||
setTimeout(function() {
|
||||
i();
|
||||
h.end = null
|
||||
}, c);
|
||||
h.timeout = c;
|
||||
})(window, document.documentElement, 'async-hide', 'dataLayer', 4000, {
|
||||
'GTM-K9BGS8K': true
|
||||
});
|
||||
</script>
|
||||
<!-- Analytics-Optimize Snippet -->
|
||||
<script>
|
||||
(function(i, s, o, g, r, a, m) {
|
||||
i['GoogleAnalyticsObject'] = r;
|
||||
i[r] = i[r] || function() {
|
||||
(i[r].q = i[r].q || []).push(arguments)
|
||||
}, i[r].l = 1 * new Date();
|
||||
a = s.createElement(o),
|
||||
m = s.getElementsByTagName(o)[0];
|
||||
a.async = 1;
|
||||
a.src = g;
|
||||
m.parentNode.insertBefore(a, m)
|
||||
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
|
||||
ga('create', 'UA-46172202-22', 'auto', {
|
||||
allowLinker: true
|
||||
});
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('require', 'GTM-K9BGS8K');
|
||||
ga('require', 'displayfeatures');
|
||||
ga('require', 'linker');
|
||||
ga('linker:autoLink', ["2checkout.com", "avangate.com"]);
|
||||
</script>
|
||||
<!-- end Analytics-Optimize Snippet -->
|
||||
<!-- 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 -->
|
||||
<!-- This is for docs typography and layout -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
|
||||
<link href="../../assets/css/docs.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body class="docs ">
|
||||
<!-- 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) -->
|
||||
<header class="ct-docs-navbar">
|
||||
<a class="ct-docs-navbar-brand" href="javascript:void(0)" aria-label="Bootstrap">
|
||||
</a><a href="https://www.creative-tim.com/" class="ct-docs-navbar-text" target="_blank">
|
||||
Creative Tim
|
||||
</a>
|
||||
<div class="ct-docs-navbar-border"></div>
|
||||
<a href="../../documentation/getting-started/installation.html" class="ct-docs-navbar-text">
|
||||
Docs
|
||||
</a>
|
||||
|
||||
<ul class="ct-docs-navbar-nav-left">
|
||||
<li class="ct-docs-nav-item-dropdown">
|
||||
<a href="javascript:;" class="ct-docs-navbar-nav-link" role="button">
|
||||
<span class="ct-docs-navbar-nav-link-inner--text">Live Preview</span>
|
||||
</a>
|
||||
<div class="ct-docs-navbar-dropdown-menu" aria-labelledby="DropdownPreview">
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://material-dashboard-laravel.creative-tim.com" target="_blank">
|
||||
Material Dashboard 2 Laravel
|
||||
</a>
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://material-dashboard-pro-laravel.creative-tim.com" target="_blank">
|
||||
Material Dashboard 2 Pro Laravel
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="ct-docs-nav-item-dropdown">
|
||||
<a href="javascript:;" class="ct-docs-navbar-nav-link" role="button">
|
||||
<span class="ct-docs-navbar-nav-link-inner--text">Support</span>
|
||||
</a>
|
||||
<div class="ct-docs-navbar-dropdown-menu" aria-labelledby="DropdownSupport">
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://github.com/creativetimofficial/material-dashboard-laravel/issues" target="_blank">
|
||||
Material Dashboard 2 Laravel
|
||||
</a>
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://github.com/creativetimofficial/ct-material-dashboard-pro-laravel/issues" target="_blank">
|
||||
Material Dashboard 2 Pro Laravel
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="ct-docs-navbar-nav-right">
|
||||
<li class="ct-docs-navbar-nav-item">
|
||||
<a class="ct-docs-navbar-nav-link" href="https://www.creative-tim.com/product/material-dashboard-laravel" target="_blank">Download Free</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="https://www.creative-tim.com/product/material-dashboard-pro-laravel" target="_blank" class="ct-docs-btn-upgrade">
|
||||
<span class="ct-docs-btn-inner--icon">
|
||||
<i class="fas fa-download mr-2" aria-hidden="true"></i>
|
||||
</span>
|
||||
<span class="ct-docs-navbar-nav-link-inner--text">Upgrade to PRO</span>
|
||||
</a>
|
||||
<button class="ct-docs-navbar-toggler" type="button">
|
||||
<span class="ct-docs-navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</header>
|
||||
<div class="ct-docs-main-container">
|
||||
<div class="ct-docs-main-content-row">
|
||||
<div class="ct-docs-sidebar-col">
|
||||
<nav class="ct-docs-sidebar-collapse-links">
|
||||
<div class="ct-docs-sidebar-product">
|
||||
<div class="ct-docs-sidebar-product-image">
|
||||
<img src="../../assets/img/bootstrap.png">
|
||||
</div>
|
||||
<p class="ct-docs-sidebar-product-text">Material Dashboard</p>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-active-40 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Getting started
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/overview.html">
|
||||
Overview
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/license.html">
|
||||
License
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/installation.html">
|
||||
Installation
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/build-tools.html">
|
||||
Build Tools
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/bootstrap.html">
|
||||
What is Bootstrap
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-folder-17 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Laravel
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/login.html">
|
||||
Login
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/sign-up.html">
|
||||
Sign Up
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/forgot-password.html">
|
||||
Forgot Password
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/user-profile.html">
|
||||
User Profile
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/user-management.html">
|
||||
User Management
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-folder-17 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Foundation
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class=" ">
|
||||
<a href="../../documentation/foundation/colors.html">
|
||||
Colors
|
||||
</a>
|
||||
</li>
|
||||
<li class=" ">
|
||||
<a href="../../documentation/foundation/grid.html">
|
||||
Grid
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/typography.html">
|
||||
Typography
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/icons.html">
|
||||
Icons
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/utilities.html">
|
||||
Utilities
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-app text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Components
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/components/alerts.html">
|
||||
Alerts
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/badge.html">
|
||||
Badge
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/buttons.html">
|
||||
Buttons
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/social-buttons.html">
|
||||
Social Buttons
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/cards.html">
|
||||
Cards
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/carousel.html">
|
||||
Carousel
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/collapse.html">
|
||||
Collapse
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/dropdowns.html">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/forms.html">
|
||||
Forms
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/input-group.html">
|
||||
Input Group
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/list-group.html">
|
||||
List Group
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/modal.html">
|
||||
Modal
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/navs.html">
|
||||
Navs
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/navbar.html">
|
||||
Navbar
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/pagination.html">
|
||||
Pagination
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/popovers.html">
|
||||
Popovers
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/progress.html">
|
||||
Progress
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/spinners.html">
|
||||
Spinners
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/tables.html">
|
||||
Tables
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/tooltips.html">
|
||||
Tooltips
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-settings text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Plugins
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/countUpJs.html">
|
||||
CountUp JS
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/charts.html">
|
||||
Charts
|
||||
</a>
|
||||
</li>
|
||||
<li class="ct-docs-nav-sidenav-active">
|
||||
<a href="../../documentation/plugins/datepicker.html">
|
||||
Datepicker
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/fullcalendar.html">
|
||||
Fullcalendar
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/sliders.html">
|
||||
Sliders
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/choices.html">
|
||||
Choices
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/dropzone.html">
|
||||
Dropzone
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/datatables.html">
|
||||
Datatables
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/kanban.html">
|
||||
Kanban
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/photo-swipe.html">
|
||||
Photo Swipe
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/quill.html">
|
||||
Quill
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/sweet-alerts.html">
|
||||
Sweet Alerts
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/wizard.html">
|
||||
Wizard
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="ct-docs-toc-col">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2"><a href="#usage">Usage</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#initialization">Initialization</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#range-datepicker">Range datepicker</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<main class="ct-docs-content-col" role="main">
|
||||
<div class="ct-docs-page-title">
|
||||
<h1 class="ct-docs-page-h1-title" id="content">
|
||||
Bootstrap Datepicker
|
||||
</h1>
|
||||
<span class="ct-docs-page-title-pro-line"> - </span>
|
||||
<div class="ct-docs-page-title-pro-bage">Pro Component</div>
|
||||
<div class="avatar-group mt-3">
|
||||
</div>
|
||||
</div>
|
||||
<p class="ct-docs-page-title-lead">The Bootstrap flatpickr is a lightweight and powerful datetime picker.</p>
|
||||
<hr class="ct-docs-hr">
|
||||
<h2 id="usage">Usage</h2>
|
||||
<p>In order to use this plugin on your page you will need to include the following script:</p>
|
||||
<div class="position-relative">
|
||||
<div class="bd-clipboard"><span class="btn-clipboard" title="" data-bs-original-title="Copy to clipboard">Copy</span></div><figure class="highlight"><pre class=" language-html"><code class=" language-html" data-lang="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/assets/js/plugins/flatpickr.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre>
|
||||
</figure>
|
||||
</div>
|
||||
<h2 id="initialization">Initialization</h2>
|
||||
<p>Add the <code class=" highlighter-rouge language-plaintext">.datepicker</code> class on the text input that you want to become a datepicker.</p>
|
||||
<h2 id="range-datepicker">Range datepicker</h2>
|
||||
<div class="input-group input-group-static">
|
||||
<input class="form-control datepicker flatpickr-input" placeholder="Please select date" type="text" onfocus="focused(this)" onfocusout="defocused(this)" readonly="readonly">
|
||||
</div>
|
||||
<div class="position-relative">
|
||||
<div class="bd-clipboard"><span class="btn-clipboard" title="" data-bs-original-title="Copy to clipboard">Copy</span></div><figure class="highlight"><pre class=" language-html"><code class=" language-html" data-lang="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input-group input-group-static<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control datepicker<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Please select date<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">onfocus</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>focused(this)<span class="token punctuation">"</span></span> <span class="token attr-name">onfocusout</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>defocused(this)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
|
||||
</figure>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<div class="ct-docs-main-footer-row">
|
||||
<div class="ct-docs-main-footer-blank-col">
|
||||
</div>
|
||||
<div class="ct-docs-main-footer-col">
|
||||
<footer class="ct-docs-footer">
|
||||
<div class="ct-docs-footer-inner-row">
|
||||
<div class="ct-docs-footer-col">
|
||||
<div class="ct-docs-footer-copyright">
|
||||
© <script>
|
||||
document.write(new Date().getFullYear())
|
||||
</script> <a href="https://creative-tim.com" class="ct-docs-footer-copyright-author" target="_blank">Creative Tim</a> & <a href="https://www.updivision.com" class="ct-docs-footer-copyright-author" target="_blank">UPDIVISION</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ct-docs-footer-col">
|
||||
<ul class="ct-docs-footer-nav-footer">
|
||||
<li>
|
||||
<a href="https://creative-tim.com" class="ct-docs-footer-nav-link" target="_blank">Creative Tim</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="https://www.updivision.com" class="ct-docs-footer-nav-link" target="_blank">UPDIVISION</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.creative-tim.com/contact-us" class="ct-docs-footer-nav-link" target="_blank">Contact Us</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://creative-tim.com/blog" class="ct-docs-footer-nav-link" target="_blank">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../assets/js/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/core/popper.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/core/bootstrap.bundle.min.js" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="../../assets/js/flatpickr.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/prism.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/docs.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/holder.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/moment.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/material-dashboard.min.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
if (document.querySelector('.datepicker')) {
|
||||
flatpickr('.datepicker', {
|
||||
mode: "range"
|
||||
}); // flatpickr
|
||||
}
|
||||
</script><div class="flatpickr-calendar rangeMode animate" tabindex="-1"><div class="flatpickr-months"><span class="flatpickr-prev-month"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 17 17"><g></g><path d="M5.207 8.471l7.146 7.147-0.707 0.707-7.853-7.854 7.854-7.853 0.707 0.707-7.147 7.146z"></path></svg></span><div class="flatpickr-month"><div class="flatpickr-current-month"><select class="flatpickr-monthDropdown-months" aria-label="Month" tabindex="-1"><option class="flatpickr-monthDropdown-month" value="0" tabindex="-1">January</option><option class="flatpickr-monthDropdown-month" value="1" tabindex="-1">February</option><option class="flatpickr-monthDropdown-month" value="2" tabindex="-1">March</option><option class="flatpickr-monthDropdown-month" value="3" tabindex="-1">April</option><option class="flatpickr-monthDropdown-month" value="4" tabindex="-1">May</option><option class="flatpickr-monthDropdown-month" value="5" tabindex="-1">June</option><option class="flatpickr-monthDropdown-month" value="6" tabindex="-1">July</option><option class="flatpickr-monthDropdown-month" value="7" tabindex="-1">August</option><option class="flatpickr-monthDropdown-month" value="8" tabindex="-1">September</option><option class="flatpickr-monthDropdown-month" value="9" tabindex="-1">October</option><option class="flatpickr-monthDropdown-month" value="10" tabindex="-1">November</option><option class="flatpickr-monthDropdown-month" value="11" tabindex="-1">December</option></select><div class="numInputWrapper"><input class="numInput cur-year" type="number" tabindex="-1" aria-label="Year"><span class="arrowUp"></span><span class="arrowDown"></span></div></div></div><span class="flatpickr-next-month"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 17 17"><g></g><path d="M13.207 8.472l-7.854 7.854-0.707-0.707 7.146-7.146-7.146-7.148 0.707-0.707 7.854 7.854z"></path></svg></span></div><div class="flatpickr-innerContainer"><div class="flatpickr-rContainer"><div class="flatpickr-weekdays"><div class="flatpickr-weekdaycontainer">
|
||||
<span class="flatpickr-weekday">
|
||||
Sun</span><span class="flatpickr-weekday">Mon</span><span class="flatpickr-weekday">Tue</span><span class="flatpickr-weekday">Wed</span><span class="flatpickr-weekday">Thu</span><span class="flatpickr-weekday">Fri</span><span class="flatpickr-weekday">Sat
|
||||
</span>
|
||||
</div></div><div class="flatpickr-days" tabindex="-1"><div class="dayContainer"><span class="flatpickr-day prevMonthDay" aria-label="October 31, 2021" tabindex="-1">31</span><span class="flatpickr-day " aria-label="November 1, 2021" tabindex="-1">1</span><span class="flatpickr-day " aria-label="November 2, 2021" tabindex="-1">2</span><span class="flatpickr-day " aria-label="November 3, 2021" tabindex="-1">3</span><span class="flatpickr-day " aria-label="November 4, 2021" tabindex="-1">4</span><span class="flatpickr-day " aria-label="November 5, 2021" tabindex="-1">5</span><span class="flatpickr-day " aria-label="November 6, 2021" tabindex="-1">6</span><span class="flatpickr-day " aria-label="November 7, 2021" tabindex="-1">7</span><span class="flatpickr-day " aria-label="November 8, 2021" tabindex="-1">8</span><span class="flatpickr-day " aria-label="November 9, 2021" tabindex="-1">9</span><span class="flatpickr-day " aria-label="November 10, 2021" tabindex="-1">10</span><span class="flatpickr-day " aria-label="November 11, 2021" tabindex="-1">11</span><span class="flatpickr-day " aria-label="November 12, 2021" tabindex="-1">12</span><span class="flatpickr-day " aria-label="November 13, 2021" tabindex="-1">13</span><span class="flatpickr-day " aria-label="November 14, 2021" tabindex="-1">14</span><span class="flatpickr-day " aria-label="November 15, 2021" tabindex="-1">15</span><span class="flatpickr-day " aria-label="November 16, 2021" tabindex="-1">16</span><span class="flatpickr-day " aria-label="November 17, 2021" tabindex="-1">17</span><span class="flatpickr-day " aria-label="November 18, 2021" tabindex="-1">18</span><span class="flatpickr-day " aria-label="November 19, 2021" tabindex="-1">19</span><span class="flatpickr-day " aria-label="November 20, 2021" tabindex="-1">20</span><span class="flatpickr-day " aria-label="November 21, 2021" tabindex="-1">21</span><span class="flatpickr-day today" aria-label="November 22, 2021" aria-current="date" tabindex="-1">22</span><span class="flatpickr-day " aria-label="November 23, 2021" tabindex="-1">23</span><span class="flatpickr-day " aria-label="November 24, 2021" tabindex="-1">24</span><span class="flatpickr-day " aria-label="November 25, 2021" tabindex="-1">25</span><span class="flatpickr-day " aria-label="November 26, 2021" tabindex="-1">26</span><span class="flatpickr-day " aria-label="November 27, 2021" tabindex="-1">27</span><span class="flatpickr-day " aria-label="November 28, 2021" tabindex="-1">28</span><span class="flatpickr-day " aria-label="November 29, 2021" tabindex="-1">29</span><span class="flatpickr-day " aria-label="November 30, 2021" tabindex="-1">30</span><span class="flatpickr-day nextMonthDay" aria-label="December 1, 2021" tabindex="-1">1</span><span class="flatpickr-day nextMonthDay" aria-label="December 2, 2021" tabindex="-1">2</span><span class="flatpickr-day nextMonthDay" aria-label="December 3, 2021" tabindex="-1">3</span><span class="flatpickr-day nextMonthDay" aria-label="December 4, 2021" tabindex="-1">4</span><span class="flatpickr-day nextMonthDay" aria-label="December 5, 2021" tabindex="-1">5</span><span class="flatpickr-day nextMonthDay" aria-label="December 6, 2021" tabindex="-1">6</span><span class="flatpickr-day nextMonthDay" aria-label="December 7, 2021" tabindex="-1">7</span><span class="flatpickr-day nextMonthDay" aria-label="December 8, 2021" tabindex="-1">8</span><span class="flatpickr-day nextMonthDay" aria-label="December 9, 2021" tabindex="-1">9</span><span class="flatpickr-day nextMonthDay" aria-label="December 10, 2021" tabindex="-1">10</span><span class="flatpickr-day nextMonthDay" aria-label="December 11, 2021" tabindex="-1">11</span></div></div></div></div></div>
|
||||
<script src="https://demos.creative-tim.com/test/material-dashboard-pro/assets/js/material-dashboard.min.js?v=1.0.0" type="text/javascript"></script>
|
||||
<script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
})
|
||||
</script>
|
||||
<script>
|
||||
// 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>
|
||||
<script src="../../assets/js/docs.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,647 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="../../assets/img/apple-icon.png">
|
||||
<link rel="icon" href="../../assets/img/favicon.png" type="image/png">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="author" content="Creative Tim">
|
||||
<title>
|
||||
Dropzone | Material Dashboard 2 FREE Laravel by Creative Tim & UPDIVISION
|
||||
</title>
|
||||
<link rel="canonical" href="https://www.creative-tim.com/learning-lab/bootstrap/colors/material-dashboard" />
|
||||
|
||||
<meta name="keywords" content="creative tim, updivision, html dashboard, laravel, material, html css dashboard laravel, material dashboard laravel, laravel material dashboard, material admin, laravel dashboard, laravel admin, web dashboard, bootstrap 5 dashboard laravel, bootstrap 5, css3 dashboard, bootstrap 5 admin laravel, material dashboard bootstrap 5 laravel, frontend, responsive bootstrap 5 dashboard, material dashboard, material laravel bootstrap 5 dashboard" />
|
||||
<meta name="description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta itemprop="name" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||||
<meta itemprop="description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta itemprop="image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||||
<meta name="twitter:card" content="product" />
|
||||
<meta name="twitter:site" content="@creativetim" />
|
||||
<meta name="twitter:title" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||||
<meta name="twitter:description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta name="twitter:creator" content="@creativetim" />
|
||||
<meta name="twitter:image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||||
<meta property="fb:app_id" content="655968634437471" />
|
||||
<meta property="og:title" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="https://www.creative-tim.com/live/material-dashboard-laravel" />
|
||||
<meta property="og:image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||||
<meta property="og:description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta property="og:site_name" content="Creative Tim" />
|
||||
|
||||
|
||||
<link rel="stylesheet" href="../../assets/css/nucleo-icons.css" type="text/css">
|
||||
|
||||
<link rel="stylesheet" href="../../assets/css/nextjs-material-dashboard-pro.min.css" type="text/css">
|
||||
|
||||
<link rel="stylesheet" href="../../assets/css/material-dashboard.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../../assets/css/demo.css" type="text/css">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700" rel="stylesheet">
|
||||
|
||||
<link href="../../assets/css/nucleo-icons.css" rel="stylesheet">
|
||||
|
||||
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
|
||||
<!-- Anti-flicker snippet (recommended) -->
|
||||
<style>
|
||||
.async-hide {
|
||||
opacity: 0 !important
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
(function(a, s, y, n, c, h, i, d, e) {
|
||||
s.className += ' ' + y;
|
||||
h.start = 1 * new Date;
|
||||
h.end = i = function() {
|
||||
s.className = s.className.replace(RegExp(' ?' + y), '')
|
||||
};
|
||||
(a[n] = a[n] || []).hide = h;
|
||||
setTimeout(function() {
|
||||
i();
|
||||
h.end = null
|
||||
}, c);
|
||||
h.timeout = c;
|
||||
})(window, document.documentElement, 'async-hide', 'dataLayer', 4000, {
|
||||
'GTM-K9BGS8K': true
|
||||
});
|
||||
</script>
|
||||
<!-- Analytics-Optimize Snippet -->
|
||||
<script>
|
||||
(function(i, s, o, g, r, a, m) {
|
||||
i['GoogleAnalyticsObject'] = r;
|
||||
i[r] = i[r] || function() {
|
||||
(i[r].q = i[r].q || []).push(arguments)
|
||||
}, i[r].l = 1 * new Date();
|
||||
a = s.createElement(o),
|
||||
m = s.getElementsByTagName(o)[0];
|
||||
a.async = 1;
|
||||
a.src = g;
|
||||
m.parentNode.insertBefore(a, m)
|
||||
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
|
||||
ga('create', 'UA-46172202-22', 'auto', {
|
||||
allowLinker: true
|
||||
});
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('require', 'GTM-K9BGS8K');
|
||||
ga('require', 'displayfeatures');
|
||||
ga('require', 'linker');
|
||||
ga('linker:autoLink', ["2checkout.com", "avangate.com"]);
|
||||
</script>
|
||||
<!-- end Analytics-Optimize Snippet -->
|
||||
<!-- 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 -->
|
||||
<!-- This is for docs typography and layout -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
|
||||
<link href="../../assets/css/docs.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body class="docs ">
|
||||
<!-- 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) -->
|
||||
<header class="ct-docs-navbar">
|
||||
<a class="ct-docs-navbar-brand" href="javascript:void(0)" aria-label="Bootstrap">
|
||||
</a><a href="https://www.creative-tim.com/" class="ct-docs-navbar-text" target="_blank">
|
||||
Creative Tim
|
||||
</a>
|
||||
<div class="ct-docs-navbar-border"></div>
|
||||
<a href="../../documentation/getting-started/installation.html" class="ct-docs-navbar-text">
|
||||
Docs
|
||||
</a>
|
||||
|
||||
<ul class="ct-docs-navbar-nav-left">
|
||||
<li class="ct-docs-nav-item-dropdown">
|
||||
<a href="javascript:;" class="ct-docs-navbar-nav-link" role="button">
|
||||
<span class="ct-docs-navbar-nav-link-inner--text">Live Preview</span>
|
||||
</a>
|
||||
<div class="ct-docs-navbar-dropdown-menu" aria-labelledby="DropdownPreview">
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://material-dashboard-laravel.creative-tim.com" target="_blank">
|
||||
Material Dashboard 2 Laravel
|
||||
</a>
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://material-dashboard-pro-laravel.creative-tim.com" target="_blank">
|
||||
Material Dashboard 2 Pro Laravel
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="ct-docs-nav-item-dropdown">
|
||||
<a href="javascript:;" class="ct-docs-navbar-nav-link" role="button">
|
||||
<span class="ct-docs-navbar-nav-link-inner--text">Support</span>
|
||||
</a>
|
||||
<div class="ct-docs-navbar-dropdown-menu" aria-labelledby="DropdownSupport">
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://github.com/creativetimofficial/material-dashboard-laravel/issues" target="_blank">
|
||||
Material Dashboard 2 Laravel
|
||||
</a>
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://github.com/creativetimofficial/ct-material-dashboard-pro-laravel/issues" target="_blank">
|
||||
Material Dashboard 2 Pro Laravel
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="ct-docs-navbar-nav-right">
|
||||
<li class="ct-docs-navbar-nav-item">
|
||||
<a class="ct-docs-navbar-nav-link" href="https://www.creative-tim.com/product/material-dashboard-laravel" target="_blank">Download Free</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="https://www.creative-tim.com/product/material-dashboard-pro-laravel" target="_blank" class="ct-docs-btn-upgrade">
|
||||
<span class="ct-docs-btn-inner--icon">
|
||||
<i class="fas fa-download mr-2" aria-hidden="true"></i>
|
||||
</span>
|
||||
<span class="ct-docs-navbar-nav-link-inner--text">Upgrade to PRO</span>
|
||||
</a>
|
||||
<button class="ct-docs-navbar-toggler" type="button">
|
||||
<span class="ct-docs-navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</header>
|
||||
<div class="ct-docs-main-container">
|
||||
<div class="ct-docs-main-content-row">
|
||||
<div class="ct-docs-sidebar-col">
|
||||
<nav class="ct-docs-sidebar-collapse-links">
|
||||
<div class="ct-docs-sidebar-product">
|
||||
<div class="ct-docs-sidebar-product-image">
|
||||
<img src="../../assets/img/bootstrap.png">
|
||||
</div>
|
||||
<p class="ct-docs-sidebar-product-text">Material Dashboard</p>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-active-40 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Getting started
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/overview.html">
|
||||
Overview
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/license.html">
|
||||
License
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/installation.html">
|
||||
Installation
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/build-tools.html">
|
||||
Build Tools
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/bootstrap.html">
|
||||
What is Bootstrap
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-folder-17 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Laravel
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/login.html">
|
||||
Login
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/sign-up.html">
|
||||
Sign Up
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/forgot-password.html">
|
||||
Forgot Password
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/user-profile.html">
|
||||
User Profile
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/user-management.html">
|
||||
User Management
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-folder-17 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Foundation
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class=" ">
|
||||
<a href="../../documentation/foundation/colors.html">
|
||||
Colors
|
||||
</a>
|
||||
</li>
|
||||
<li class=" ">
|
||||
<a href="../../documentation/foundation/grid.html">
|
||||
Grid
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/typography.html">
|
||||
Typography
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/icons.html">
|
||||
Icons
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/utilities.html">
|
||||
Utilities
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-app text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Components
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/components/alerts.html">
|
||||
Alerts
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/badge.html">
|
||||
Badge
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/buttons.html">
|
||||
Buttons
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/social-buttons.html">
|
||||
Social Buttons
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/cards.html">
|
||||
Cards
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/carousel.html">
|
||||
Carousel
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/collapse.html">
|
||||
Collapse
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/dropdowns.html">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/forms.html">
|
||||
Forms
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/input-group.html">
|
||||
Input Group
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/list-group.html">
|
||||
List Group
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/modal.html">
|
||||
Modal
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/navs.html">
|
||||
Navs
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/navbar.html">
|
||||
Navbar
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/pagination.html">
|
||||
Pagination
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/popovers.html">
|
||||
Popovers
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/progress.html">
|
||||
Progress
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/spinners.html">
|
||||
Spinners
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/tables.html">
|
||||
Tables
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/tooltips.html">
|
||||
Tooltips
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-settings text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Plugins
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/countUpJs.html">
|
||||
CountUp JS
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/charts.html">
|
||||
Charts
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/datepicker.html">
|
||||
Datepicker
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/fullcalendar.html">
|
||||
Fullcalendar
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/sliders.html">
|
||||
Sliders
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/choices.html">
|
||||
Choices
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="ct-docs-nav-sidenav-active">
|
||||
<a href="../../documentation/plugins/dropzone.html">
|
||||
Dropzone
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/datatables.html">
|
||||
Datatables
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/kanban.html">
|
||||
Kanban
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/photo-swipe.html">
|
||||
Photo Swipe
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/quill.html">
|
||||
Quill
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/sweet-alerts.html">
|
||||
Sweet Alerts
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/wizard.html">
|
||||
Wizard
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="ct-docs-toc-col">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2"><a href="#usage">Usage</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#js">JS</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2"><a href="#example">Example</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<main class="ct-docs-content-col" role="main">
|
||||
<div class="ct-docs-page-title">
|
||||
<h1 class="ct-docs-page-h1-title" id="content">
|
||||
Bootstrap Dropzone
|
||||
</h1>
|
||||
<span class="ct-docs-page-title-pro-line"> - </span>
|
||||
<div class="ct-docs-page-title-pro-bage">Pro Component</div>
|
||||
<div class="avatar-group mt-3">
|
||||
</div>
|
||||
</div>
|
||||
<p class="ct-docs-page-title-lead">Dropzone JS is an open-source library that provides drag’n’ drop file uploads with image previews. It is lightweight, doesn’t depend on any other library (like jQuery) and is highly customisable. Dropzone JS supports image previews and shows nice progress bars. <br> Keep reading our Bootstrap Dropzone JS examples and learn how to use this plugin.</p>
|
||||
<hr class="ct-docs-hr">
|
||||
<h2 id="usage">Usage</h2>
|
||||
<h3 id="js">JS</h3>
|
||||
<p>In order to use this plugin on your page you will need to include the following script in the “Optional JS” area from the page’s footer:</p>
|
||||
<div class="position-relative">
|
||||
<div class="bd-clipboard"><span class="btn-clipboard" title="" data-bs-original-title="Copy to clipboard">Copy</span></div><figure class="highlight"><pre class=" language-html"><code class=" language-html" data-lang="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>../../assets/js/plugins/dropzone.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre>
|
||||
</figure>
|
||||
</div>
|
||||
<h2 id="example">Example</h2>
|
||||
<div class="card">
|
||||
<form action="/file-upload" class="form-control border dropzone" id="dropzone">
|
||||
<div class="fallback">
|
||||
<input name="file" type="file" multiple="" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="position-relative">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><form</span> <span class="na">action=</span><span class="s">"/file-upload"</span> <span class="na">class=</span><span class="s">"form-control border dropzone"</span> <span class="na">id=</span><span class="s">"dropzone"</span><span class="nt">></span>
|
||||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"fallback"</span><span class="nt">></span>
|
||||
<span class="nt"><input</span> <span class="na">name=</span><span class="s">"file"</span> <span class="na">type=</span><span class="s">"file"</span> <span class="na">multiple</span> <span class="nt">/></span>
|
||||
<span class="nt"></div></span>
|
||||
<span class="nt"></form></span></code></pre>
|
||||
</figure>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<div class="ct-docs-main-footer-row">
|
||||
<div class="ct-docs-main-footer-blank-col">
|
||||
</div>
|
||||
<div class="ct-docs-main-footer-col">
|
||||
<footer class="ct-docs-footer">
|
||||
<div class="ct-docs-footer-inner-row">
|
||||
<div class="ct-docs-footer-col">
|
||||
<div class="ct-docs-footer-copyright">
|
||||
© <script>
|
||||
document.write(new Date().getFullYear())
|
||||
</script> <a href="https://creative-tim.com" class="ct-docs-footer-copyright-author" target="_blank">Creative Tim</a> & <a href="https://www.updivision.com" class="ct-docs-footer-copyright-author" target="_blank">UPDIVISION</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ct-docs-footer-col">
|
||||
<ul class="ct-docs-footer-nav-footer">
|
||||
<li>
|
||||
<a href="https://creative-tim.com" class="ct-docs-footer-nav-link" target="_blank">Creative Tim</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="https://www.updivision.com" class="ct-docs-footer-nav-link" target="_blank">UPDIVISION</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.creative-tim.com/contact-us" class="ct-docs-footer-nav-link" target="_blank">Contact Us</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://creative-tim.com/blog" class="ct-docs-footer-nav-link" target="_blank">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../assets/js/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/core/popper.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/core/bootstrap.bundle.min.js" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="../../assets/js/prism.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/docs.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/holder.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/moment.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/dropzone.min.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
Dropzone.autoDiscover = false;
|
||||
var drop = document.getElementById('dropzone')
|
||||
var myDropzone = new Dropzone(drop, {
|
||||
url: "/file/post",
|
||||
addRemoveLinks: true
|
||||
|
||||
});
|
||||
</script><input type="file" multiple="multiple" class="dz-hidden-input" style="visibility: hidden; position: absolute; top: 0px; left: 0px; height: 0px; width: 0px;">
|
||||
<script src="../../assets/js/material-dashboard.min.js" type="text/javascript"></script>
|
||||
<script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
})
|
||||
</script>
|
||||
<script>
|
||||
// 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>
|
||||
<script src="../../assets/js/docs.js"></script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,647 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="../../assets/img/apple-icon.png">
|
||||
<link rel="icon" href="../../assets/img/favicon.png" type="image/png">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="author" content="Creative Tim">
|
||||
<title>
|
||||
Quill | Material Dashboard 2 FREE Laravel by Creative Tim & UPDIVISION
|
||||
</title>
|
||||
<link rel="canonical" href="https://www.creative-tim.com/learning-lab/bootstrap/colors/material-dashboard" />
|
||||
|
||||
<meta name="keywords" content="creative tim, updivision, html dashboard, laravel, material, html css dashboard laravel, material dashboard laravel, laravel material dashboard, material admin, laravel dashboard, laravel admin, web dashboard, bootstrap 5 dashboard laravel, bootstrap 5, css3 dashboard, bootstrap 5 admin laravel, material dashboard bootstrap 5 laravel, frontend, responsive bootstrap 5 dashboard, material dashboard, material laravel bootstrap 5 dashboard" />
|
||||
<meta name="description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta itemprop="name" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||||
<meta itemprop="description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta itemprop="image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||||
<meta name="twitter:card" content="product" />
|
||||
<meta name="twitter:site" content="@creativetim" />
|
||||
<meta name="twitter:title" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||||
<meta name="twitter:description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta name="twitter:creator" content="@creativetim" />
|
||||
<meta name="twitter:image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||||
<meta property="fb:app_id" content="655968634437471" />
|
||||
<meta property="og:title" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="https://www.creative-tim.com/live/material-dashboard-laravel" />
|
||||
<meta property="og:image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||||
<meta property="og:description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta property="og:site_name" content="Creative Tim" />
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="../../assets/css/nucleo-icons.css" type="text/css">
|
||||
|
||||
<link rel="stylesheet" href="../../assets/css/nextjs-material-dashboard-pro.min.css" type="text/css">
|
||||
|
||||
<link rel="stylesheet" href="../../assets/css/material-dashboard.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../../assets/css/demo.css" type="text/css">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700" rel="stylesheet">
|
||||
|
||||
<link href="../../assets/css/nucleo-icons.css" rel="stylesheet">
|
||||
|
||||
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
|
||||
<!-- Anti-flicker snippet (recommended) -->
|
||||
<style>
|
||||
.async-hide {
|
||||
opacity: 0 !important
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
(function(a, s, y, n, c, h, i, d, e) {
|
||||
s.className += ' ' + y;
|
||||
h.start = 1 * new Date;
|
||||
h.end = i = function() {
|
||||
s.className = s.className.replace(RegExp(' ?' + y), '')
|
||||
};
|
||||
(a[n] = a[n] || []).hide = h;
|
||||
setTimeout(function() {
|
||||
i();
|
||||
h.end = null
|
||||
}, c);
|
||||
h.timeout = c;
|
||||
})(window, document.documentElement, 'async-hide', 'dataLayer', 4000, {
|
||||
'GTM-K9BGS8K': true
|
||||
});
|
||||
</script>
|
||||
<!-- Analytics-Optimize Snippet -->
|
||||
<script>
|
||||
(function(i, s, o, g, r, a, m) {
|
||||
i['GoogleAnalyticsObject'] = r;
|
||||
i[r] = i[r] || function() {
|
||||
(i[r].q = i[r].q || []).push(arguments)
|
||||
}, i[r].l = 1 * new Date();
|
||||
a = s.createElement(o),
|
||||
m = s.getElementsByTagName(o)[0];
|
||||
a.async = 1;
|
||||
a.src = g;
|
||||
m.parentNode.insertBefore(a, m)
|
||||
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
|
||||
ga('create', 'UA-46172202-22', 'auto', {
|
||||
allowLinker: true
|
||||
});
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('require', 'GTM-K9BGS8K');
|
||||
ga('require', 'displayfeatures');
|
||||
ga('require', 'linker');
|
||||
ga('linker:autoLink', ["2checkout.com", "avangate.com"]);
|
||||
</script>
|
||||
<!-- end Analytics-Optimize Snippet -->
|
||||
<!-- 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 -->
|
||||
<!-- This is for docs typography and layout -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
|
||||
<link href="../../assets/css/docs.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body class="docs ">
|
||||
<!-- 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) -->
|
||||
<header class="ct-docs-navbar">
|
||||
<a class="ct-docs-navbar-brand" href="javascript:void(0)" aria-label="Bootstrap">
|
||||
</a><a href="https://www.creative-tim.com/" class="ct-docs-navbar-text" target="_blank">
|
||||
Creative Tim
|
||||
</a>
|
||||
<div class="ct-docs-navbar-border"></div>
|
||||
<a href="../../documentation/getting-started/installation.html" class="ct-docs-navbar-text">
|
||||
Docs
|
||||
</a>
|
||||
|
||||
<ul class="ct-docs-navbar-nav-left">
|
||||
<li class="ct-docs-nav-item-dropdown">
|
||||
<a href="javascript:;" class="ct-docs-navbar-nav-link" role="button">
|
||||
<span class="ct-docs-navbar-nav-link-inner--text">Live Preview</span>
|
||||
</a>
|
||||
<div class="ct-docs-navbar-dropdown-menu" aria-labelledby="DropdownPreview">
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://material-dashboard-laravel.creative-tim.com" target="_blank">
|
||||
Material Dashboard 2 Laravel
|
||||
</a>
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://material-dashboard-pro-laravel.creative-tim.com" target="_blank">
|
||||
Material Dashboard 2 Pro Laravel
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="ct-docs-nav-item-dropdown">
|
||||
<a href="javascript:;" class="ct-docs-navbar-nav-link" role="button">
|
||||
<span class="ct-docs-navbar-nav-link-inner--text">Support</span>
|
||||
</a>
|
||||
<div class="ct-docs-navbar-dropdown-menu" aria-labelledby="DropdownSupport">
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://github.com/creativetimofficial/material-dashboard-laravel/issues" target="_blank">
|
||||
Material Dashboard 2 Laravel
|
||||
</a>
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://github.com/creativetimofficial/ct-material-dashboard-pro-laravel/issues" target="_blank">
|
||||
Material Dashboard 2 Pro Laravel
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="ct-docs-navbar-nav-right">
|
||||
<li class="ct-docs-navbar-nav-item">
|
||||
<a class="ct-docs-navbar-nav-link" href="https://www.creative-tim.com/product/material-dashboard-laravel" target="_blank">Download Free</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="https://www.creative-tim.com/product/material-dashboard-pro-laravel" target="_blank" class="ct-docs-btn-upgrade">
|
||||
<span class="ct-docs-btn-inner--icon">
|
||||
<i class="fas fa-download mr-2" aria-hidden="true"></i>
|
||||
</span>
|
||||
<span class="ct-docs-navbar-nav-link-inner--text">Upgrade to PRO</span>
|
||||
</a>
|
||||
<button class="ct-docs-navbar-toggler" type="button">
|
||||
<span class="ct-docs-navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</header>
|
||||
<div class="ct-docs-main-container">
|
||||
<div class="ct-docs-main-content-row">
|
||||
<div class="ct-docs-sidebar-col">
|
||||
<nav class="ct-docs-sidebar-collapse-links">
|
||||
<div class="ct-docs-sidebar-product">
|
||||
<div class="ct-docs-sidebar-product-image">
|
||||
<img src="../../assets/img/bootstrap.png">
|
||||
</div>
|
||||
<p class="ct-docs-sidebar-product-text">Material Dashboard</p>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-active-40 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Getting started
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/overview.html">
|
||||
Overview
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/license.html">
|
||||
License
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/installation.html">
|
||||
Installation
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/build-tools.html">
|
||||
Build Tools
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/bootstrap.html">
|
||||
What is Bootstrap
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-folder-17 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Laravel
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/login.html">
|
||||
Login
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/sign-up.html">
|
||||
Sign Up
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/forgot-password.html">
|
||||
Forgot Password
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/user-profile.html">
|
||||
User Profile
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/user-management.html">
|
||||
User Management
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-folder-17 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Foundation
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class=" ">
|
||||
<a href="../../documentation/foundation/colors.html">
|
||||
Colors
|
||||
</a>
|
||||
</li>
|
||||
<li class=" ">
|
||||
<a href="../../documentation/foundation/grid.html">
|
||||
Grid
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/typography.html">
|
||||
Typography
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/icons.html">
|
||||
Icons
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/utilities.html">
|
||||
Utilities
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-app text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Components
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/components/alerts.html">
|
||||
Alerts
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/badge.html">
|
||||
Badge
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/buttons.html">
|
||||
Buttons
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/social-buttons.html">
|
||||
Social Buttons
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/cards.html">
|
||||
Cards
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/carousel.html">
|
||||
Carousel
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/collapse.html">
|
||||
Collapse
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/dropdowns.html">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/forms.html">
|
||||
Forms
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/input-group.html">
|
||||
Input Group
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/list-group.html">
|
||||
List Group
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/modal.html">
|
||||
Modal
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/navs.html">
|
||||
Navs
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/navbar.html">
|
||||
Navbar
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/pagination.html">
|
||||
Pagination
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/popovers.html">
|
||||
Popovers
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/progress.html">
|
||||
Progress
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/spinners.html">
|
||||
Spinners
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/tables.html">
|
||||
Tables
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/tooltips.html">
|
||||
Tooltips
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-settings text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Plugins
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/countUpJs.html">
|
||||
CountUp JS
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/charts.html">
|
||||
Charts
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/datepicker.html">
|
||||
Datepicker
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/fullcalendar.html">
|
||||
Fullcalendar
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/sliders.html">
|
||||
Sliders
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/choices.html">
|
||||
Choices
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/dropzone.html">
|
||||
Dropzone
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/datatables.html">
|
||||
Datatables
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/kanban.html">
|
||||
Kanban
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/photo-swipe.html">
|
||||
Photo Swipe
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="ct-docs-nav-sidenav-active">
|
||||
<a href="../../documentation/plugins/quill.html">
|
||||
Quill
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/sweet-alerts.html">
|
||||
Sweet Alerts
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/wizard.html">
|
||||
Wizard
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="ct-docs-toc-col">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2"><a href="#initialization">Initialization</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#js">JS</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2"><a href="#example">Example</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<main class="ct-docs-content-col" role="main">
|
||||
<div class="ct-docs-page-title">
|
||||
<h1 class="ct-docs-page-h1-title" id="content">
|
||||
Bootstrap Quill
|
||||
</h1>
|
||||
<span class="ct-docs-page-title-pro-line"> - </span>
|
||||
<div class="ct-docs-page-title-pro-bage">Pro Component</div>
|
||||
<div class="avatar-group mt-3">
|
||||
</div>
|
||||
</div>
|
||||
<p class="ct-docs-page-title-lead">The Bootstrap Quill is a powerful rich text editor built for compatibility and extensibility. <br> Keep reading our Bootstrap Quill examples and learn how to use this plugin.</p>
|
||||
<hr class="ct-docs-hr">
|
||||
<h2 id="initialization">Initialization</h2>
|
||||
<h3 id="js">JS</h3>
|
||||
<p>In order to use this plugin on your page you will need to include the following script in the “Optional JS” area from the page’s footer:</p>
|
||||
<div class="position-relative">
|
||||
<div class="bd-clipboard"><span class="btn-clipboard" title="" data-bs-original-title="Copy to clipboard">Copy</span></div><figure class="highlight"><pre class=" language-html"><code class=" language-html" data-lang="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>../../assets/js/plugins/quill.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre>
|
||||
</figure>
|
||||
</div>
|
||||
<h2 id="example">Example</h2>
|
||||
<div class="card">
|
||||
<div id="editor">
|
||||
<p>Hello World!</p>
|
||||
<p>Some initial <strong>bold</strong> text</p>
|
||||
<p><br /></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="position-relative">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">id=</span><span class="s">"editor"</span><span class="nt">></span>
|
||||
<span class="nt"><p></span>Hello World!<span class="nt"></p></span>
|
||||
<span class="nt"><p></span>Some initial <span class="nt"><strong></span>bold<span class="nt"></strong></span> text<span class="nt"></p></span>
|
||||
<span class="nt"><p><br></p></span>
|
||||
<span class="nt"></div></span></code></pre>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="position-relative">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html">var quill = new Quill('#editor', {
|
||||
theme: 'snow' // Specify theme in configuration
|
||||
});</code></pre>
|
||||
</figure>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<div class="ct-docs-main-footer-row">
|
||||
<div class="ct-docs-main-footer-blank-col">
|
||||
</div>
|
||||
<div class="ct-docs-main-footer-col">
|
||||
<footer class="ct-docs-footer">
|
||||
<div class="ct-docs-footer-inner-row">
|
||||
<div class="ct-docs-footer-col">
|
||||
<div class="ct-docs-footer-copyright">
|
||||
© <script>
|
||||
document.write(new Date().getFullYear())
|
||||
</script> <a href="https://creative-tim.com" class="ct-docs-footer-copyright-author" target="_blank">Creative Tim</a> & <a href="https://www.updivision.com" class="ct-docs-footer-copyright-author" target="_blank">UPDIVISION</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ct-docs-footer-col">
|
||||
<ul class="ct-docs-footer-nav-footer">
|
||||
<li>
|
||||
<a href="https://creative-tim.com" class="ct-docs-footer-nav-link" target="_blank">Creative Tim</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="https://www.updivision.com" class="ct-docs-footer-nav-link" target="_blank">UPDIVISION</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.creative-tim.com/contact-us" class="ct-docs-footer-nav-link" target="_blank">Contact Us</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://creative-tim.com/blog" class="ct-docs-footer-nav-link" target="_blank">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../assets/js/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/core/popper.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/core/bootstrap.bundle.min.js" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="../../assets/js/prism.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/docs.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/holder.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/moment.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/quill.min.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
var quill = new Quill('#editor', {
|
||||
theme: 'snow' // Specify theme in configuration
|
||||
});
|
||||
</script>
|
||||
<script src="../../assets/js/material-dashboard.min.js" type="text/javascript"></script>
|
||||
<script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
})
|
||||
</script>
|
||||
<script>
|
||||
// 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>
|
||||
<script src="../../assets/js/docs.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,793 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="../../assets/img/apple-icon.png">
|
||||
<link rel="icon" href="../../assets/img/favicon.png" type="image/png">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="author" content="Creative Tim">
|
||||
<title>
|
||||
Sliders | Material Dashboard 2 FREE Laravel by Creative Tim & UPDIVISION
|
||||
</title>
|
||||
<link rel="canonical" href="https://www.creative-tim.com/learning-lab/bootstrap/colors/material-dashboard" />
|
||||
|
||||
<meta name="keywords" content="creative tim, updivision, html dashboard, laravel, material, html css dashboard laravel, material dashboard laravel, laravel material dashboard, material admin, laravel dashboard, laravel admin, web dashboard, bootstrap 5 dashboard laravel, bootstrap 5, css3 dashboard, bootstrap 5 admin laravel, material dashboard bootstrap 5 laravel, frontend, responsive bootstrap 5 dashboard, material dashboard, material laravel bootstrap 5 dashboard" />
|
||||
<meta name="description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta itemprop="name" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||||
<meta itemprop="description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta itemprop="image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||||
<meta name="twitter:card" content="product" />
|
||||
<meta name="twitter:site" content="@creativetim" />
|
||||
<meta name="twitter:title" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||||
<meta name="twitter:description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta name="twitter:creator" content="@creativetim" />
|
||||
<meta name="twitter:image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||||
<meta property="fb:app_id" content="655968634437471" />
|
||||
<meta property="og:title" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="https://www.creative-tim.com/live/material-dashboard-laravel" />
|
||||
<meta property="og:image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||||
<meta property="og:description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta property="og:site_name" content="Creative Tim" />
|
||||
|
||||
|
||||
<link rel="stylesheet" href="../../assets/css/nucleo-icons.css" type="text/css">
|
||||
|
||||
<link rel="stylesheet" href="../../assets/css/nextjs-material-dashboard-pro.min.css" type="text/css">
|
||||
|
||||
<link rel="stylesheet" href="../../assets/css/material-dashboard.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../../assets/css/demo.css" type="text/css">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700" rel="stylesheet">
|
||||
|
||||
<link href="../../assets/css/nucleo-icons.css" rel="stylesheet">
|
||||
|
||||
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
|
||||
<!-- Anti-flicker snippet (recommended) -->
|
||||
<style>
|
||||
.async-hide {
|
||||
opacity: 0 !important
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
(function(a, s, y, n, c, h, i, d, e) {
|
||||
s.className += ' ' + y;
|
||||
h.start = 1 * new Date;
|
||||
h.end = i = function() {
|
||||
s.className = s.className.replace(RegExp(' ?' + y), '')
|
||||
};
|
||||
(a[n] = a[n] || []).hide = h;
|
||||
setTimeout(function() {
|
||||
i();
|
||||
h.end = null
|
||||
}, c);
|
||||
h.timeout = c;
|
||||
})(window, document.documentElement, 'async-hide', 'dataLayer', 4000, {
|
||||
'GTM-K9BGS8K': true
|
||||
});
|
||||
</script>
|
||||
<!-- Analytics-Optimize Snippet -->
|
||||
<script>
|
||||
(function(i, s, o, g, r, a, m) {
|
||||
i['GoogleAnalyticsObject'] = r;
|
||||
i[r] = i[r] || function() {
|
||||
(i[r].q = i[r].q || []).push(arguments)
|
||||
}, i[r].l = 1 * new Date();
|
||||
a = s.createElement(o),
|
||||
m = s.getElementsByTagName(o)[0];
|
||||
a.async = 1;
|
||||
a.src = g;
|
||||
m.parentNode.insertBefore(a, m)
|
||||
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
|
||||
ga('create', 'UA-46172202-22', 'auto', {
|
||||
allowLinker: true
|
||||
});
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('require', 'GTM-K9BGS8K');
|
||||
ga('require', 'displayfeatures');
|
||||
ga('require', 'linker');
|
||||
ga('linker:autoLink', ["2checkout.com", "avangate.com"]);
|
||||
</script>
|
||||
<!-- end Analytics-Optimize Snippet -->
|
||||
<!-- 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 -->
|
||||
<!-- This is for docs typography and layout -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
|
||||
<link href="../../assets/css/docs.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body class="docs ">
|
||||
<!-- 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) -->
|
||||
<header class="ct-docs-navbar">
|
||||
<a class="ct-docs-navbar-brand" href="javascript:void(0)" aria-label="Bootstrap">
|
||||
</a><a href="https://www.creative-tim.com/" class="ct-docs-navbar-text" target="_blank">
|
||||
Creative Tim
|
||||
</a>
|
||||
<div class="ct-docs-navbar-border"></div>
|
||||
<a href="../../documentation/getting-started/installation.html" class="ct-docs-navbar-text">
|
||||
Docs
|
||||
</a>
|
||||
|
||||
<ul class="ct-docs-navbar-nav-left">
|
||||
<li class="ct-docs-nav-item-dropdown">
|
||||
<a href="javascript:;" class="ct-docs-navbar-nav-link" role="button">
|
||||
<span class="ct-docs-navbar-nav-link-inner--text">Live Preview</span>
|
||||
</a>
|
||||
<div class="ct-docs-navbar-dropdown-menu" aria-labelledby="DropdownPreview">
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://material-dashboard-laravel.creative-tim.com" target="_blank">
|
||||
Material Dashboard 2 Laravel
|
||||
</a>
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://material-dashboard-pro-laravel.creative-tim.com" target="_blank">
|
||||
Material Dashboard 2 Pro Laravel
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="ct-docs-nav-item-dropdown">
|
||||
<a href="javascript:;" class="ct-docs-navbar-nav-link" role="button">
|
||||
<span class="ct-docs-navbar-nav-link-inner--text">Support</span>
|
||||
</a>
|
||||
<div class="ct-docs-navbar-dropdown-menu" aria-labelledby="DropdownSupport">
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://github.com/creativetimofficial/material-dashboard-laravel/issues" target="_blank">
|
||||
Material Dashboard 2 Laravel
|
||||
</a>
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://github.com/creativetimofficial/ct-material-dashboard-pro-laravel/issues" target="_blank">
|
||||
Material Dashboard 2 Pro Laravel
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="ct-docs-navbar-nav-right">
|
||||
<li class="ct-docs-navbar-nav-item">
|
||||
<a class="ct-docs-navbar-nav-link" href="https://www.creative-tim.com/product/material-dashboard-laravel" target="_blank">Download Free</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="https://www.creative-tim.com/product/material-dashboard-pro-laravel" target="_blank" class="ct-docs-btn-upgrade">
|
||||
<span class="ct-docs-btn-inner--icon">
|
||||
<i class="fas fa-download mr-2" aria-hidden="true"></i>
|
||||
</span>
|
||||
<span class="ct-docs-navbar-nav-link-inner--text">Upgrade to PRO</span>
|
||||
</a>
|
||||
<button class="ct-docs-navbar-toggler" type="button">
|
||||
<span class="ct-docs-navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</header>
|
||||
<div class="ct-docs-main-container">
|
||||
<div class="ct-docs-main-content-row">
|
||||
<div class="ct-docs-sidebar-col">
|
||||
<nav class="ct-docs-sidebar-collapse-links">
|
||||
<div class="ct-docs-sidebar-product">
|
||||
<div class="ct-docs-sidebar-product-image">
|
||||
<img src="../../assets/img/bootstrap.png">
|
||||
</div>
|
||||
<p class="ct-docs-sidebar-product-text">Material Dashboard</p>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-active-40 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Getting started
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/overview.html">
|
||||
Overview
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/license.html">
|
||||
License
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/installation.html">
|
||||
Installation
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/build-tools.html">
|
||||
Build Tools
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/bootstrap.html">
|
||||
What is Bootstrap
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-folder-17 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Laravel
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/login.html">
|
||||
Login
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/sign-up.html">
|
||||
Sign Up
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/forgot-password.html">
|
||||
Forgot Password
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/user-profile.html">
|
||||
User Profile
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/user-management.html">
|
||||
User Management
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-folder-17 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Foundation
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class=" ">
|
||||
<a href="../../documentation/foundation/colors.html">
|
||||
Colors
|
||||
</a>
|
||||
</li>
|
||||
<li class=" ">
|
||||
<a href="../../documentation/foundation/grid.html">
|
||||
Grid
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/typography.html">
|
||||
Typography
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/icons.html">
|
||||
Icons
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/utilities.html">
|
||||
Utilities
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-app text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Components
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/components/alerts.html">
|
||||
Alerts
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/badge.html">
|
||||
Badge
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/buttons.html">
|
||||
Buttons
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/social-buttons.html">
|
||||
Social Buttons
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/cards.html">
|
||||
Cards
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/carousel.html">
|
||||
Carousel
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/collapse.html">
|
||||
Collapse
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/dropdowns.html">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/forms.html">
|
||||
Forms
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/input-group.html">
|
||||
Input Group
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/list-group.html">
|
||||
List Group
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/modal.html">
|
||||
Modal
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/navs.html">
|
||||
Navs
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/navbar.html">
|
||||
Navbar
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/pagination.html">
|
||||
Pagination
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/popovers.html">
|
||||
Popovers
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/progress.html">
|
||||
Progress
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/spinners.html">
|
||||
Spinners
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/tables.html">
|
||||
Tables
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/tooltips.html">
|
||||
Tooltips
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-settings text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Plugins
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/countUpJs.html">
|
||||
CountUp JS
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/charts.html">
|
||||
Charts
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/datepicker.html">
|
||||
Datepicker
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/fullcalendar.html">
|
||||
Fullcalendar
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="ct-docs-nav-sidenav-active">
|
||||
<a href="../../documentation/plugins/sliders.html">
|
||||
Sliders
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/choices.html">
|
||||
Choices
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/dropzone.html">
|
||||
Dropzone
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/datatables.html">
|
||||
Datatables
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/kanban.html">
|
||||
Kanban
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/photo-swipe.html">
|
||||
Photo Swipe
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/quill.html">
|
||||
Quill
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/sweet-alerts.html">
|
||||
Sweet Alerts
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/wizard.html">
|
||||
Wizard
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="ct-docs-toc-col">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2"><a href="#usage">Usage</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#initialization">Initialization</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#examples">Examples</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#slider">Slider</a></li>
|
||||
<li class="toc-entry toc-h3"><a href="#range-slider">Range slider</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2"><a href="#round-sliders">Round sliders</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#usage-1">Usage</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#example">Example</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h6"><a href="#device-limit">Device limit</a></li>
|
||||
<li class="toc-entry toc-h4"><a href="#21c">21°C</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<main class="ct-docs-content-col" role="main">
|
||||
<div class="ct-docs-page-title">
|
||||
<h1 class="ct-docs-page-h1-title" id="content">
|
||||
Bootstrap Sliders
|
||||
</h1>
|
||||
<span class="ct-docs-page-title-pro-line"> - </span>
|
||||
<div class="ct-docs-page-title-pro-bage">Pro Component</div>
|
||||
<div class="avatar-group mt-3">
|
||||
</div>
|
||||
</div>
|
||||
<p class="ct-docs-page-title-lead">Our Bootstrap Sliders (customised noUiSlider) refers to a lightweight JavaScript range slider library. The slider offers a wide selection of options and settings and is compatible with a ton of (touch) devices, including those running iOS, Android, Windows 8/8.1/10, Windows Phone 8.1 and Windows Mobile 10. <br> Keep reading our Bootstrap Sliders examples and learn how to use this plugin.</p>
|
||||
<hr class="ct-docs-hr">
|
||||
<h2 id="usage">Usage</h2>
|
||||
<p>In order to use this plugin on your page you will need to include the following script in the “Optional JS” area from the page’s footer:</p>
|
||||
<div class="position-relative">
|
||||
<div class="bd-clipboard"><span class="btn-clipboard" title="" data-bs-original-title="Copy to clipboard">Copy</span></div><figure class="highlight"><pre class=" language-html"><code class=" language-html" data-lang="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/assets/vendor/nouislider/js/nouislider.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre>
|
||||
</figure>
|
||||
</div>
|
||||
<h2 id="initialization">Initialization</h2>
|
||||
<p>Simply copy one of the code examples demonstrated below and include it in your page. Afterwards, you can modify the slider’s values with the ones you need.</p>
|
||||
<h2 id="examples">Examples</h2>
|
||||
<h3 id="slider">Slider</h3>
|
||||
<!-- Simple slider -->
|
||||
<!-- Simple slider -->
|
||||
<div class="mb-5">
|
||||
<div id="sliderRegular"></div>
|
||||
</div>
|
||||
<div class="position-relative">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Simple slider --></span>
|
||||
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"sliderDouble"</span><span class="nt">></div></span></code></pre>
|
||||
</figure>
|
||||
</div>
|
||||
<h3 id="range-slider">Range slider</h3>
|
||||
<!-- Range slider container -->
|
||||
<div class="mb-5">
|
||||
<div id="sliderDouble"></div>
|
||||
</div>
|
||||
<div class="position-relative">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Range slider container --></span>
|
||||
<span class="nt"><div</span> <span class="na">id=</span><span class="s">"sliderDouble"</span><span class="nt">></div></span></code></pre>
|
||||
</figure>
|
||||
</div>
|
||||
<h2 id="round-sliders">Round sliders</h2>
|
||||
<h2 id="usage-1">Usage</h2>
|
||||
<p>In order to use this plugin on your page you will need to include the following script in the “Optional JS” area from the page’s footer:</p>
|
||||
<div class="position-relative">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><script </span><span class="na">src=</span><span class="s">"../../assets/js/plugins/round-slider.min.js"</span><span class="nt">></script></span></code></pre>
|
||||
</figure>
|
||||
</div>
|
||||
<h2 id="example">Example</h2>
|
||||
<div class="card card-plain">
|
||||
<div class="card-body text-center p-3">
|
||||
<h6 class="text-start">Device limit</h6>
|
||||
<round-slider value="21" valuelabel="Temperature"></round-slider>
|
||||
<h4 class="font-weight-bold mt-n7"><span class="text-dark" id="value">21</span><span class="text-body">°C</span></h4>
|
||||
<p class="ps-1 mt-5 mb-0"><span class="text-xs">16°C</span><span class="px-3">Temperature</span><span class="text-xs">38°C</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="position-relative">
|
||||
<div class="bd-clipboard"><span class="btn-clipboard" title="" data-bs-original-title="Copy to clipboard">Copy</span></div><figure class="highlight"><pre class=" language-html"><code class=" language-html" data-lang="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>card card-plain<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>card-body text-center p-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h6</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-start<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Device limit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h6</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>round-slider</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>21<span class="token punctuation">"</span></span> <span class="token attr-name">valueLabel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Temperature<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>round-slider</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>font-weight-bold mt-n7<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-dark<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>value<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>21<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-body<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>°C<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ps-1 mt-5 mb-0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-xs<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>16°C<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>px-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Temperature<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-xs<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>38°C<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="position-relative">
|
||||
<div class="bd-clipboard"><span class="btn-clipboard" title="" data-bs-original-title="Copy to clipboard">Copy</span></div><figure class="highlight"><pre class=" language-html"><code class=" language-html" data-lang="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<span class="token comment">// Rounded slider</span>
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">setValue</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> active</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"round-slider"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">el</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>el<span class="token punctuation">.</span>value <span class="token operator">===</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span>
|
||||
el<span class="token punctuation">.</span>value <span class="token operator">=</span> value<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> span <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#value"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
span<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> value<span class="token punctuation">;</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>active<span class="token punctuation">)</span>
|
||||
span<span class="token punctuation">.</span>style<span class="token punctuation">.</span>color <span class="token operator">=</span> <span class="token string">'red'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">else</span>
|
||||
span<span class="token punctuation">.</span>style<span class="token punctuation">.</span>color <span class="token operator">=</span> <span class="token string">'black'</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"round-slider"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">el</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
el<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'value-changed'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">ev</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>ev<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>value <span class="token operator">!==</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span>
|
||||
<span class="token function">setValue</span><span class="token punctuation">(</span>ev<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>value<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>ev<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>low <span class="token operator">!==</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span>
|
||||
<span class="token function">setLow</span><span class="token punctuation">(</span>ev<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>low<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>ev<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>high <span class="token operator">!==</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span>
|
||||
<span class="token function">setHigh</span><span class="token punctuation">(</span>ev<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>high<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
el<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'value-changing'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">ev</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span>ev<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>value <span class="token operator">!==</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span>
|
||||
<span class="token function">setValue</span><span class="token punctuation">(</span>ev<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>value<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>ev<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>low <span class="token operator">!==</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span>
|
||||
<span class="token function">setLow</span><span class="token punctuation">(</span>ev<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>low<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>ev<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>high <span class="token operator">!==</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span>
|
||||
<span class="token function">setHigh</span><span class="token punctuation">(</span>ev<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>high<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre>
|
||||
</figure>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<div class="ct-docs-main-footer-row">
|
||||
<div class="ct-docs-main-footer-blank-col">
|
||||
</div>
|
||||
<div class="ct-docs-main-footer-col">
|
||||
<footer class="ct-docs-footer">
|
||||
<div class="ct-docs-footer-inner-row">
|
||||
<div class="ct-docs-footer-col">
|
||||
<div class="ct-docs-footer-copyright">
|
||||
© <script>
|
||||
document.write(new Date().getFullYear())
|
||||
</script> <a href="https://creative-tim.com" class="ct-docs-footer-copyright-author" target="_blank">Creative Tim</a> & <a href="https://www.updivision.com" class="ct-docs-footer-copyright-author" target="_blank">UPDIVISION</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ct-docs-footer-col">
|
||||
<ul class="ct-docs-footer-nav-footer">
|
||||
<li>
|
||||
<a href="https://creative-tim.com" class="ct-docs-footer-nav-link" target="_blank">Creative Tim</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="https://www.updivision.com" class="ct-docs-footer-nav-link" target="_blank">UPDIVISION</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.creative-tim.com/contact-us" class="ct-docs-footer-nav-link" target="_blank">Contact Us</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://creative-tim.com/blog" class="ct-docs-footer-nav-link" target="_blank">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../assets/js/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/core/popper.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/core/bootstrap.bundle.min.js" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="../../assets/js/prism.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/docs.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/holder.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/moment.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/nouislider.min.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
var slider = document.getElementById('sliderRegular');
|
||||
noUiSlider.create(slider, {
|
||||
start: 40,
|
||||
connect: [true, false],
|
||||
range: {
|
||||
min: 0,
|
||||
max: 100
|
||||
}
|
||||
});
|
||||
var slider2 = document.getElementById('sliderDouble');
|
||||
noUiSlider.create(slider2, {
|
||||
start: [20, 60],
|
||||
connect: true,
|
||||
range: {
|
||||
min: 0,
|
||||
max: 100
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script src="../../assets/js/round-slider.min.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
const setValue = function(value, active) {
|
||||
document.querySelectorAll("round-slider").forEach(function(el) {
|
||||
if (el.value === undefined) return;
|
||||
el.value = value;
|
||||
});
|
||||
const span = document.querySelector("#value");
|
||||
span.innerHTML = value;
|
||||
if (active)
|
||||
span.style.color = 'red';
|
||||
else
|
||||
span.style.color = 'black';
|
||||
}
|
||||
|
||||
document.querySelectorAll("round-slider").forEach(function(el) {
|
||||
el.addEventListener('value-changed', function(ev) {
|
||||
if (ev.detail.value !== undefined)
|
||||
setValue(ev.detail.value, false);
|
||||
else if (ev.detail.low !== undefined)
|
||||
setLow(ev.detail.low, false);
|
||||
else if (ev.detail.high !== undefined)
|
||||
setHigh(ev.detail.high, false);
|
||||
});
|
||||
|
||||
el.addEventListener('value-changing', function(ev) {
|
||||
if (ev.detail.value !== undefined)
|
||||
setValue(ev.detail.value, true);
|
||||
else if (ev.detail.low !== undefined)
|
||||
setLow(ev.detail.low, true);
|
||||
else if (ev.detail.high !== undefined)
|
||||
setHigh(ev.detail.high, true);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script src="../../assets/js/material-dashboard.min.js" type="text/javascript"></script>
|
||||
<script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
})
|
||||
</script>
|
||||
<script>
|
||||
// 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>
|
||||
<script src="../../assets/js/docs.js"></script>
|
||||
<script type="text/javascript">
|
||||
var slider = document.getElementById('sliderRegular');
|
||||
noUiSlider.create(slider, {
|
||||
start: 40,
|
||||
connect: [true, false],
|
||||
range: {
|
||||
min: 0,
|
||||
max: 100
|
||||
}
|
||||
});
|
||||
var slider2 = document.getElementById('sliderDouble');
|
||||
noUiSlider.create(slider2, {
|
||||
start: [20, 60],
|
||||
connect: true,
|
||||
range: {
|
||||
min: 0,
|
||||
max: 100
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,713 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="../../assets/img/apple-icon.png">
|
||||
<link rel="icon" href="../../assets/img/favicon.png" type="image/png">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="author" content="Creative Tim">
|
||||
<title>
|
||||
Sweet Alerts | Material Dashboard 2 FREE Laravel by Creative Tim & UPDIVISION
|
||||
</title>
|
||||
<link rel="canonical" href="https://www.creative-tim.com/learning-lab/bootstrap/colors/material-dashboard" />
|
||||
|
||||
<meta name="keywords" content="creative tim, updivision, html dashboard, laravel, material, html css dashboard laravel, material dashboard laravel, laravel material dashboard, material admin, laravel dashboard, laravel admin, web dashboard, bootstrap 5 dashboard laravel, bootstrap 5, css3 dashboard, bootstrap 5 admin laravel, material dashboard bootstrap 5 laravel, frontend, responsive bootstrap 5 dashboard, material dashboard, material laravel bootstrap 5 dashboard" />
|
||||
<meta name="description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta itemprop="name" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||||
<meta itemprop="description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta itemprop="image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||||
<meta name="twitter:card" content="product" />
|
||||
<meta name="twitter:site" content="@creativetim" />
|
||||
<meta name="twitter:title" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||||
<meta name="twitter:description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta name="twitter:creator" content="@creativetim" />
|
||||
<meta name="twitter:image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||||
<meta property="fb:app_id" content="655968634437471" />
|
||||
<meta property="og:title" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="https://www.creative-tim.com/live/material-dashboard-laravel" />
|
||||
<meta property="og:image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||||
<meta property="og:description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta property="og:site_name" content="Creative Tim" />
|
||||
|
||||
<link rel="stylesheet" href="../../assets/css/nucleo-icons.css" type="text/css">
|
||||
|
||||
<link rel="stylesheet" href="../../assets/css/nextjs-material-dashboard-pro.min.css" type="text/css">
|
||||
|
||||
<link rel="stylesheet" href="../../assets/css/material-dashboard.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../../assets/css/demo.css" type="text/css">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700" rel="stylesheet">
|
||||
|
||||
<link href="../../assets/css/nucleo-icons.css" rel="stylesheet">
|
||||
|
||||
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
|
||||
<!-- Anti-flicker snippet (recommended) -->
|
||||
<style>
|
||||
.async-hide {
|
||||
opacity: 0 !important
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
(function(a, s, y, n, c, h, i, d, e) {
|
||||
s.className += ' ' + y;
|
||||
h.start = 1 * new Date;
|
||||
h.end = i = function() {
|
||||
s.className = s.className.replace(RegExp(' ?' + y), '')
|
||||
};
|
||||
(a[n] = a[n] || []).hide = h;
|
||||
setTimeout(function() {
|
||||
i();
|
||||
h.end = null
|
||||
}, c);
|
||||
h.timeout = c;
|
||||
})(window, document.documentElement, 'async-hide', 'dataLayer', 4000, {
|
||||
'GTM-K9BGS8K': true
|
||||
});
|
||||
</script>
|
||||
<!-- Analytics-Optimize Snippet -->
|
||||
<script>
|
||||
(function(i, s, o, g, r, a, m) {
|
||||
i['GoogleAnalyticsObject'] = r;
|
||||
i[r] = i[r] || function() {
|
||||
(i[r].q = i[r].q || []).push(arguments)
|
||||
}, i[r].l = 1 * new Date();
|
||||
a = s.createElement(o),
|
||||
m = s.getElementsByTagName(o)[0];
|
||||
a.async = 1;
|
||||
a.src = g;
|
||||
m.parentNode.insertBefore(a, m)
|
||||
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
|
||||
ga('create', 'UA-46172202-22', 'auto', {
|
||||
allowLinker: true
|
||||
});
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('require', 'GTM-K9BGS8K');
|
||||
ga('require', 'displayfeatures');
|
||||
ga('require', 'linker');
|
||||
ga('linker:autoLink', ["2checkout.com", "avangate.com"]);
|
||||
</script>
|
||||
<!-- end Analytics-Optimize Snippet -->
|
||||
<!-- 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 -->
|
||||
<!-- This is for docs typography and layout -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
|
||||
<link href="../../assets/css/docs.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body class="docs" style="padding-right: 0px;">
|
||||
<!-- 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) -->
|
||||
<header class="ct-docs-navbar">
|
||||
<a class="ct-docs-navbar-brand" href="javascript:void(0)" aria-label="Bootstrap">
|
||||
</a><a href="https://www.creative-tim.com/" class="ct-docs-navbar-text" target="_blank">
|
||||
Creative Tim
|
||||
</a>
|
||||
<div class="ct-docs-navbar-border"></div>
|
||||
<a href="../../documentation/getting-started/installation.html" class="ct-docs-navbar-text">
|
||||
Docs
|
||||
</a>
|
||||
|
||||
<ul class="ct-docs-navbar-nav-left">
|
||||
<li class="ct-docs-nav-item-dropdown">
|
||||
<a href="javascript:;" class="ct-docs-navbar-nav-link" role="button">
|
||||
<span class="ct-docs-navbar-nav-link-inner--text">Live Preview</span>
|
||||
</a>
|
||||
<div class="ct-docs-navbar-dropdown-menu" aria-labelledby="DropdownPreview">
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://material-dashboard-laravel.creative-tim.com" target="_blank">
|
||||
Material Dashboard 2 Laravel
|
||||
</a>
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://material-dashboard-pro-laravel.creative-tim.com" target="_blank">
|
||||
Material Dashboard 2 Pro Laravel
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="ct-docs-nav-item-dropdown">
|
||||
<a href="javascript:;" class="ct-docs-navbar-nav-link" role="button">
|
||||
<span class="ct-docs-navbar-nav-link-inner--text">Support</span>
|
||||
</a>
|
||||
<div class="ct-docs-navbar-dropdown-menu" aria-labelledby="DropdownSupport">
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://github.com/creativetimofficial/material-dashboard-laravel/issues" target="_blank">
|
||||
Material Dashboard 2 Laravel
|
||||
</a>
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://github.com/creativetimofficial/ct-material-dashboard-pro-laravel/issues" target="_blank">
|
||||
Material Dashboard 2 Pro Laravel
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="ct-docs-navbar-nav-right">
|
||||
<li class="ct-docs-navbar-nav-item">
|
||||
<a class="ct-docs-navbar-nav-link" href="https://www.creative-tim.com/product/material-dashboard-laravel" target="_blank">Download Free</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="https://www.creative-tim.com/product/material-dashboard-pro-laravel" target="_blank" class="ct-docs-btn-upgrade">
|
||||
<span class="ct-docs-btn-inner--icon">
|
||||
<i class="fas fa-download mr-2" aria-hidden="true"></i>
|
||||
</span>
|
||||
<span class="ct-docs-navbar-nav-link-inner--text">Upgrade to PRO</span>
|
||||
</a>
|
||||
<button class="ct-docs-navbar-toggler" type="button">
|
||||
<span class="ct-docs-navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</header>
|
||||
<div class="ct-docs-main-container">
|
||||
<div class="ct-docs-main-content-row">
|
||||
<div class="ct-docs-sidebar-col">
|
||||
<nav class="ct-docs-sidebar-collapse-links">
|
||||
<div class="ct-docs-sidebar-product">
|
||||
<div class="ct-docs-sidebar-product-image">
|
||||
<img src="../../assets/img/bootstrap.png">
|
||||
</div>
|
||||
<p class="ct-docs-sidebar-product-text">Material Dashboard</p>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-active-40 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Getting started
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/overview.html">
|
||||
Overview
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/license.html">
|
||||
License
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/installation.html">
|
||||
Installation
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/build-tools.html">
|
||||
Build Tools
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/bootstrap.html">
|
||||
What is Bootstrap
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-folder-17 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Laravel
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/login.html">
|
||||
Login
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/sign-up.html">
|
||||
Sign Up
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/forgot-password.html">
|
||||
Forgot Password
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/user-profile.html">
|
||||
User Profile
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/user-management.html">
|
||||
User Management
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-folder-17 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Foundation
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class=" ">
|
||||
<a href="../../documentation/foundation/colors.html">
|
||||
Colors
|
||||
</a>
|
||||
</li>
|
||||
<li class=" ">
|
||||
<a href="../../documentation/foundation/grid.html">
|
||||
Grid
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/typography.html">
|
||||
Typography
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/icons.html">
|
||||
Icons
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/utilities.html">
|
||||
Utilities
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-app text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Components
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/components/alerts.html">
|
||||
Alerts
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/badge.html">
|
||||
Badge
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/buttons.html">
|
||||
Buttons
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/social-buttons.html">
|
||||
Social Buttons
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/cards.html">
|
||||
Cards
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/carousel.html">
|
||||
Carousel
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/collapse.html">
|
||||
Collapse
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/dropdowns.html">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/forms.html">
|
||||
Forms
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/input-group.html">
|
||||
Input Group
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/list-group.html">
|
||||
List Group
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/modal.html">
|
||||
Modal
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/navs.html">
|
||||
Navs
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/navbar.html">
|
||||
Navbar
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/pagination.html">
|
||||
Pagination
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/popovers.html">
|
||||
Popovers
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/progress.html">
|
||||
Progress
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/spinners.html">
|
||||
Spinners
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/tables.html">
|
||||
Tables
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/tooltips.html">
|
||||
Tooltips
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-settings text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Plugins
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/countUpJs.html">
|
||||
CountUp JS
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/charts.html">
|
||||
Charts
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/datepicker.html">
|
||||
Datepicker
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/fullcalendar.html">
|
||||
Fullcalendar
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/sliders.html">
|
||||
Sliders
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/choices.html">
|
||||
Choices
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/dropzone.html">
|
||||
Dropzone
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/datatables.html">
|
||||
Datatables
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/kanban.html">
|
||||
Kanban
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/photo-swipe.html">
|
||||
Photo Swipe
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/quill.html">
|
||||
Quill
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="ct-docs-nav-sidenav-active">
|
||||
<a href="../../documentation/plugins/sweet-alerts.html">
|
||||
Sweet Alerts
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/wizard.html">
|
||||
Wizard
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="ct-docs-toc-col">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2"><a href="#usage">Usage</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h3"><a href="#js">JS</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="toc-entry toc-h2"><a href="#examples">Examples</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<main class="ct-docs-content-col" role="main">
|
||||
<div class="ct-docs-page-title">
|
||||
<h1 class="ct-docs-page-h1-title" id="content">
|
||||
Bootstrap Sweet Alerts
|
||||
</h1>
|
||||
<span class="ct-docs-page-title-pro-line"> - </span>
|
||||
<div class="ct-docs-page-title-pro-bage">Pro Component</div>
|
||||
<div class="avatar-group mt-3">
|
||||
</div>
|
||||
</div>
|
||||
<p class="ct-docs-page-title-lead">Our Bootstrap Sweet Alerts are beautiful, responsive, customisable, accessible replacements for Javascript’s popup boxes. <br /> Keep reading our Bootstrap Alerts examples and learn how to use this plugin.</p>
|
||||
<hr class="ct-docs-hr">
|
||||
<h2 id="usage">Usage</h2>
|
||||
<h3 id="js">JS</h3>
|
||||
<p>In order to use this plugin on your page you will need to include the following script in the “Optional JS” area from the page’s footer:</p>
|
||||
<div class="position-relative">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><script </span><span class="na">src=</span><span class="s">"../../assets/js/plugins/sweetalert.min.js"</span><span class="nt">></script></span></code></pre>
|
||||
</figure>
|
||||
</div>
|
||||
<h2 id="examples">Examples</h2>
|
||||
<div class="row mb-5">
|
||||
<div class="col-lg-12 col-md-12 mx-auto">
|
||||
<div class="row mt-5">
|
||||
<div class="col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-body text-center">
|
||||
<p class="card-text">Basic example</p>
|
||||
<button class="btn bg-gradient-primary mb-0" onclick="material.showSwal('basic')">Try me!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mt-4 mt-md-0">
|
||||
<div class="card">
|
||||
<div class="card-body text-center">
|
||||
<p class="card-text">A success message</p>
|
||||
<button class="btn bg-gradient-primary mb-0" onclick="material.showSwal('success-message')">Try me!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mt-4 mt-md-0">
|
||||
<div class="card">
|
||||
<div class="card-body text-center">
|
||||
<p class="card-text">Custom HTML description</p>
|
||||
<button class="btn bg-gradient-primary mb-0" onclick="material.showSwal('custom-html')">Try me!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-body text-center">
|
||||
<p class="card-text">Gitgub avatar request</p>
|
||||
<button class="btn bg-gradient-primary mb-0" onclick="material.showSwal('input-field')">Try me!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mt-4 mt-md-0">
|
||||
<div class="card">
|
||||
<div class="card-body text-center">
|
||||
<p class="card-text">A title with a text under</p>
|
||||
<button class="btn bg-gradient-primary mb-0" onclick="material.showSwal('title-and-text')">Try me!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mt-4 mt-md-0">
|
||||
<div class="card">
|
||||
<div class="card-body text-center">
|
||||
<p class="card-text">A message with auto close</p>
|
||||
<button class="btn bg-gradient-primary mb-0" onclick="material.showSwal('auto-close')">Try me!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4 mb-5">
|
||||
<div class="col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-body text-center">
|
||||
<p class="card-text">A warning message, with a function attached to the "Confirm" Button...</p>
|
||||
<button class="btn bg-gradient-primary mb-0" onclick="material.showSwal('warning-message-and-confirmation')">Try me!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mt-4 mt-md-0">
|
||||
<div class="card">
|
||||
<div class="card-body text-center">
|
||||
<p class="card-text">...and by passing a parameter, you can execute something else for "Cancel"</p>
|
||||
<button class="btn bg-gradient-primary mb-0" onclick="material.showSwal('warning-message-and-cancel')">Try me!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mt-4 mt-md-0">
|
||||
<div class="card">
|
||||
<div class="card-body text-center">
|
||||
<p class="card-text">Right-to-left support for Arabic, Persian, Hebrew, and other RTL languages</p>
|
||||
<button class="btn bg-gradient-primary mb-0" onclick="material.showSwal('rtl-language')">Try me!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="position-relative">
|
||||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn bg-gradient-primary mb-0"</span> <span class="na">onclick=</span><span class="s">"material.showSwal('basic')"</span><span class="nt">></span>Try me!<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn bg-gradient-primary mb-0"</span> <span class="na">onclick=</span><span class="s">"material.showSwal('success-message')"</span><span class="nt">></span>Try me!<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn bg-gradient-primary mb-0"</span> <span class="na">onclick=</span><span class="s">"material.showSwal('custom-html')"</span><span class="nt">></span>Try me!<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn bg-gradient-primary mb-0"</span> <span class="na">onclick=</span><span class="s">"material.showSwal('input-field')"</span><span class="nt">></span>Try me!<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn bg-gradient-primary mb-0"</span> <span class="na">onclick=</span><span class="s">"material.showSwal('title-and-text')"</span><span class="nt">></span>Try me!<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn bg-gradient-primary mb-0"</span> <span class="na">onclick=</span><span class="s">"material.showSwal('auto-close')"</span><span class="nt">></span>Try me!<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn bg-gradient-primary mb-0"</span> <span class="na">onclick=</span><span class="s">"material.showSwal('warning-message-and-confirmation')"</span><span class="nt">></span>Try me!<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn bg-gradient-primary mb-0"</span> <span class="na">onclick=</span><span class="s">"material.showSwal('warning-message-and-cancel')"</span><span class="nt">></span>Try me!<span class="nt"></button></span>
|
||||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn bg-gradient-primary mb-0"</span> <span class="na">onclick=</span><span class="s">"material.showSwal('rtl-language')"</span><span class="nt">></span>Try me!<span class="nt"></button></span></code></pre>
|
||||
</figure>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<div class="ct-docs-main-footer-row">
|
||||
<div class="ct-docs-main-footer-blank-col">
|
||||
</div>
|
||||
<div class="ct-docs-main-footer-col">
|
||||
<footer class="ct-docs-footer">
|
||||
<div class="ct-docs-footer-inner-row">
|
||||
<div class="ct-docs-footer-col">
|
||||
<div class="ct-docs-footer-copyright">
|
||||
© <script>
|
||||
document.write(new Date().getFullYear())
|
||||
</script> <a href="https://creative-tim.com" class="ct-docs-footer-copyright-author" target="_blank">Creative Tim</a> & <a href="https://www.updivision.com" class="ct-docs-footer-copyright-author" target="_blank">UPDIVISION</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ct-docs-footer-col">
|
||||
<ul class="ct-docs-footer-nav-footer">
|
||||
<li>
|
||||
<a href="https://creative-tim.com" class="ct-docs-footer-nav-link" target="_blank">Creative Tim</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="https://www.updivision.com" class="ct-docs-footer-nav-link" target="_blank">UPDIVISION</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.creative-tim.com/contact-us" class="ct-docs-footer-nav-link" target="_blank">Contact Us</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://creative-tim.com/blog" class="ct-docs-footer-nav-link" target="_blank">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../assets/js/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/core/popper.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/core/bootstrap.bundle.min.js" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="../../assets/js/prism.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/docs.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/holder.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/moment.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/material-dashboard.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/plugins/sweetalert.min.js"></script>
|
||||
<script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
})
|
||||
</script>
|
||||
<script>
|
||||
// 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>
|
||||
<script src="../../assets/js/docs.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,797 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="../../assets/img/apple-icon.png">
|
||||
<link rel="icon" href="../../assets/img/favicon.png" type="image/png">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="author" content="Creative Tim">
|
||||
<title>
|
||||
Wizard | Material Dashboard 2 FREE Laravel by Creative Tim & UPDIVISION
|
||||
</title>
|
||||
<link rel="canonical" href="https://www.creative-tim.com/learning-lab/bootstrap/colors/material-dashboard" />
|
||||
|
||||
<meta name="keywords" content="creative tim, updivision, html dashboard, laravel, material, html css dashboard laravel, material dashboard laravel, laravel material dashboard, material admin, laravel dashboard, laravel admin, web dashboard, bootstrap 5 dashboard laravel, bootstrap 5, css3 dashboard, bootstrap 5 admin laravel, material dashboard bootstrap 5 laravel, frontend, responsive bootstrap 5 dashboard, material dashboard, material laravel bootstrap 5 dashboard" />
|
||||
<meta name="description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta itemprop="name" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||||
<meta itemprop="description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta itemprop="image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||||
<meta name="twitter:card" content="product" />
|
||||
<meta name="twitter:site" content="@creativetim" />
|
||||
<meta name="twitter:title" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||||
<meta name="twitter:description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta name="twitter:creator" content="@creativetim" />
|
||||
<meta name="twitter:image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||||
<meta property="fb:app_id" content="655968634437471" />
|
||||
<meta property="og:title" content="Material Dashboard 2 Laravel by Creative Tim & UPDIVISION" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="https://www.creative-tim.com/live/material-dashboard-laravel" />
|
||||
<meta property="og:image" content="https://s3.amazonaws.com/creativetim_bucket/products/598/original/material-dashboard-laravel.jpg" />
|
||||
<meta property="og:description" content="A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs." />
|
||||
<meta property="og:site_name" content="Creative Tim" />
|
||||
|
||||
|
||||
<link rel="stylesheet" href="../../assets/css/nucleo-icons.css" type="text/css">
|
||||
|
||||
<link rel="stylesheet" href="../../assets/css/nextjs-material-dashboard-pro.min.css" type="text/css">
|
||||
|
||||
<link rel="stylesheet" href="../../assets/css/material-dashboard.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../../assets/css/demo.css" type="text/css">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700" rel="stylesheet">
|
||||
|
||||
<link href="../../assets/css/nucleo-icons.css" rel="stylesheet">
|
||||
|
||||
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
|
||||
<!-- Anti-flicker snippet (recommended) -->
|
||||
<style>
|
||||
.async-hide {
|
||||
opacity: 0 !important
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
(function(a, s, y, n, c, h, i, d, e) {
|
||||
s.className += ' ' + y;
|
||||
h.start = 1 * new Date;
|
||||
h.end = i = function() {
|
||||
s.className = s.className.replace(RegExp(' ?' + y), '')
|
||||
};
|
||||
(a[n] = a[n] || []).hide = h;
|
||||
setTimeout(function() {
|
||||
i();
|
||||
h.end = null
|
||||
}, c);
|
||||
h.timeout = c;
|
||||
})(window, document.documentElement, 'async-hide', 'dataLayer', 4000, {
|
||||
'GTM-K9BGS8K': true
|
||||
});
|
||||
</script>
|
||||
<!-- Analytics-Optimize Snippet -->
|
||||
<script>
|
||||
(function(i, s, o, g, r, a, m) {
|
||||
i['GoogleAnalyticsObject'] = r;
|
||||
i[r] = i[r] || function() {
|
||||
(i[r].q = i[r].q || []).push(arguments)
|
||||
}, i[r].l = 1 * new Date();
|
||||
a = s.createElement(o),
|
||||
m = s.getElementsByTagName(o)[0];
|
||||
a.async = 1;
|
||||
a.src = g;
|
||||
m.parentNode.insertBefore(a, m)
|
||||
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
|
||||
ga('create', 'UA-46172202-22', 'auto', {
|
||||
allowLinker: true
|
||||
});
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('require', 'GTM-K9BGS8K');
|
||||
ga('require', 'displayfeatures');
|
||||
ga('require', 'linker');
|
||||
ga('linker:autoLink', ["2checkout.com", "avangate.com"]);
|
||||
</script>
|
||||
<!-- end Analytics-Optimize Snippet -->
|
||||
<!-- 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 -->
|
||||
<!-- This is for docs typography and layout -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
|
||||
<link href="../../assets/css/docs.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body class="docs ">
|
||||
<!-- 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) -->
|
||||
<header class="ct-docs-navbar">
|
||||
<a class="ct-docs-navbar-brand" href="javascript:void(0)" aria-label="Bootstrap">
|
||||
</a><a href="https://www.creative-tim.com/" class="ct-docs-navbar-text" target="_blank">
|
||||
Creative Tim
|
||||
</a>
|
||||
<div class="ct-docs-navbar-border"></div>
|
||||
<a href="../../documentation/getting-started/installation.html" class="ct-docs-navbar-text">
|
||||
Docs
|
||||
</a>
|
||||
|
||||
<ul class="ct-docs-navbar-nav-left">
|
||||
<li class="ct-docs-nav-item-dropdown">
|
||||
<a href="javascript:;" class="ct-docs-navbar-nav-link" role="button">
|
||||
<span class="ct-docs-navbar-nav-link-inner--text">Live Preview</span>
|
||||
</a>
|
||||
<div class="ct-docs-navbar-dropdown-menu" aria-labelledby="DropdownPreview">
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://material-dashboard-laravel.creative-tim.com" target="_blank">
|
||||
Material Dashboard 2 Laravel
|
||||
</a>
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://material-dashboard-pro-laravel.creative-tim.com" target="_blank">
|
||||
Material Dashboard 2 Pro Laravel
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="ct-docs-nav-item-dropdown">
|
||||
<a href="javascript:;" class="ct-docs-navbar-nav-link" role="button">
|
||||
<span class="ct-docs-navbar-nav-link-inner--text">Support</span>
|
||||
</a>
|
||||
<div class="ct-docs-navbar-dropdown-menu" aria-labelledby="DropdownSupport">
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://github.com/creativetimofficial/material-dashboard-laravel/issues" target="_blank">
|
||||
Material Dashboard 2 Laravel
|
||||
</a>
|
||||
<a class="ct-docs-navbar-dropdown-item" href="https://github.com/creativetimofficial/ct-material-dashboard-pro-laravel/issues" target="_blank">
|
||||
Material Dashboard 2 Pro Laravel
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="ct-docs-navbar-nav-right">
|
||||
<li class="ct-docs-navbar-nav-item">
|
||||
<a class="ct-docs-navbar-nav-link" href="https://www.creative-tim.com/product/material-dashboard-laravel" target="_blank">Download Free</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a href="https://www.creative-tim.com/product/material-dashboard-pro-laravel" target="_blank" class="ct-docs-btn-upgrade">
|
||||
<span class="ct-docs-btn-inner--icon">
|
||||
<i class="fas fa-download mr-2" aria-hidden="true"></i>
|
||||
</span>
|
||||
<span class="ct-docs-navbar-nav-link-inner--text">Upgrade to PRO</span>
|
||||
</a>
|
||||
<button class="ct-docs-navbar-toggler" type="button">
|
||||
<span class="ct-docs-navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</header>
|
||||
<div class="ct-docs-main-container">
|
||||
<div class="ct-docs-main-content-row">
|
||||
<div class="ct-docs-sidebar-col">
|
||||
<nav class="ct-docs-sidebar-collapse-links">
|
||||
<div class="ct-docs-sidebar-product">
|
||||
<div class="ct-docs-sidebar-product-image">
|
||||
<img src="../../assets/img/bootstrap.png">
|
||||
</div>
|
||||
<p class="ct-docs-sidebar-product-text">Material Dashboard</p>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-active-40 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Getting started
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/overview.html">
|
||||
Overview
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/license.html">
|
||||
License
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/installation.html">
|
||||
Installation
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/build-tools.html">
|
||||
Build Tools
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/getting-started/bootstrap.html">
|
||||
What is Bootstrap
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-folder-17 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Laravel
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/login.html">
|
||||
Login
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/sign-up.html">
|
||||
Sign Up
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/forgot-password.html">
|
||||
Forgot Password
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/user-profile.html">
|
||||
User Profile
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/laravel/user-management.html">
|
||||
User Management
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-folder-17 text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Foundation
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class=" ">
|
||||
<a href="../../documentation/foundation/colors.html">
|
||||
Colors
|
||||
</a>
|
||||
</li>
|
||||
<li class=" ">
|
||||
<a href="../../documentation/foundation/grid.html">
|
||||
Grid
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/typography.html">
|
||||
Typography
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/icons.html">
|
||||
Icons
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/foundation/utilities.html">
|
||||
Utilities
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-app text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Components
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/components/alerts.html">
|
||||
Alerts
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/badge.html">
|
||||
Badge
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/buttons.html">
|
||||
Buttons
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/social-buttons.html">
|
||||
Social Buttons
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/cards.html">
|
||||
Cards
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/carousel.html">
|
||||
Carousel
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/collapse.html">
|
||||
Collapse
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/dropdowns.html">
|
||||
Dropdowns
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/forms.html">
|
||||
Forms
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/input-group.html">
|
||||
Input Group
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/list-group.html">
|
||||
List Group
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/modal.html">
|
||||
Modal
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/navs.html">
|
||||
Navs
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/navbar.html">
|
||||
Navbar
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/pagination.html">
|
||||
Pagination
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/popovers.html">
|
||||
Popovers
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/progress.html">
|
||||
Progress
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/spinners.html">
|
||||
Spinners
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/tables.html">
|
||||
Tables
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/components/tooltips.html">
|
||||
Tooltips
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ct-docs-toc-item-active">
|
||||
<a class="ct-docs-toc-link" href="javascript:void(0)">
|
||||
<div class="d-inline-block">
|
||||
<div class="icon icon-xs border-radius-md bg-gradient-primary text-center mr-2 d-flex align-items-center justify-content-center me-1">
|
||||
<i class="ni ni-settings text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
Plugins
|
||||
</a>
|
||||
<ul class="ct-docs-nav-sidenav ms-4 ps-1">
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/countUpJs.html">
|
||||
CountUp JS
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/charts.html">
|
||||
Charts
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/datepicker.html">
|
||||
Datepicker
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/fullcalendar.html">
|
||||
Fullcalendar
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/sliders.html">
|
||||
Sliders
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/choices.html">
|
||||
Choices
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/dropzone.html">
|
||||
Dropzone
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/datatables.html">
|
||||
Datatables
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/kanban.html">
|
||||
Kanban
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/photo-swipe.html">
|
||||
Photo Swipe
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/quill.html">
|
||||
Quill
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="">
|
||||
<a href="../../documentation/plugins/sweet-alerts.html">
|
||||
Sweet Alerts
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="ct-docs-nav-sidenav-active">
|
||||
<a href="../../documentation/plugins/wizard.html">
|
||||
Wizard
|
||||
<span class="ct-docs-sidenav-pro-badge">Pro</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="ct-docs-toc-col">
|
||||
<ul class="section-nav">
|
||||
<li class="toc-entry toc-h2"><a href="#usage">Usage</a></li>
|
||||
<li class="toc-entry toc-h2"><a href="#example">Example</a>
|
||||
<ul>
|
||||
<li class="toc-entry toc-h5"><a href="#about-me">About me</a></li>
|
||||
<li class="toc-entry toc-h5"><a href="#address">Address</a></li>
|
||||
<li class="toc-entry toc-h5"><a href="#socials">Socials</a></li>
|
||||
<li class="toc-entry toc-h5"><a href="#profile">Profile</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<main class="ct-docs-content-col" role="main">
|
||||
<div class="ct-docs-page-title">
|
||||
<h1 class="ct-docs-page-h1-title" id="content">
|
||||
Bootstrap Wizard
|
||||
</h1>
|
||||
<span class="ct-docs-page-title-pro-line"> - </span>
|
||||
<div class="ct-docs-page-title-pro-bage">Pro Component</div>
|
||||
<div class="avatar-group mt-3">
|
||||
</div>
|
||||
</div>
|
||||
<p class="ct-docs-page-title-lead">Animated Multi-step Form For Bootstrap</p>
|
||||
<hr class="ct-docs-hr">
|
||||
<h2 id="usage">Usage</h2>
|
||||
<p>In order to use this plugin on your page you will need to include the following script in the “Optional JS” area from the page’s footer:</p>
|
||||
<div class="position-relative">
|
||||
<div class="bd-clipboard"><span class="btn-clipboard" title="" data-bs-original-title="Copy to clipboard">Copy</span></div><figure class="highlight"><pre class=" language-html"><code class=" language-html" data-lang="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>../../assets/js/plugins/multistep-form.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code></pre>
|
||||
</figure>
|
||||
</div>
|
||||
<h2 id="example">Example</h2>
|
||||
<p>Simply copy one of the code examples demonstrated below and include it in your page.</p>
|
||||
<div class="row mt-5">
|
||||
<div class="col-12 col-lg-10 m-auto">
|
||||
<div class="card border border-2">
|
||||
<div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
|
||||
<div class="bg-gradient-primary shadow-primary border-radius-lg pt-4 pb-3">
|
||||
<div class="multisteps-form__progress">
|
||||
<button class="multisteps-form__progress-btn js-active" type="button" title="User Info">
|
||||
<span>User Info</span>
|
||||
</button>
|
||||
<button class="multisteps-form__progress-btn" type="button" title="Address">Address</button>
|
||||
<button class="multisteps-form__progress-btn" type="button" title="Socials">Socials</button>
|
||||
<button class="multisteps-form__progress-btn" type="button" title="Profile">Profile</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form class="multisteps-form__form">
|
||||
<!--single form panel-->
|
||||
<div class="multisteps-form__panel border-radius-xl bg-white js-active" data-animation="FadeIn">
|
||||
<h5 class="font-weight-bolder mb-0">About me</h5>
|
||||
<p class="mb-0 text-sm">Mandatory informations</p>
|
||||
<div class="multisteps-form__content">
|
||||
<div class="row mt-3">
|
||||
<div class="col-12 col-sm-6">
|
||||
<div class="input-group input-group-dynamic">
|
||||
<label class="form-label">First Name</label>
|
||||
<input class="multisteps-form__input form-control" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 mt-3 mt-sm-0">
|
||||
<div class="input-group input-group-dynamic">
|
||||
<label class="form-label">Last Name</label>
|
||||
<input class="multisteps-form__input form-control" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-3">
|
||||
<div class="col-12 col-sm-6">
|
||||
<div class="input-group input-group-dynamic">
|
||||
<label class="form-label">Company</label>
|
||||
<input class="multisteps-form__input form-control" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 mt-3 mt-sm-0">
|
||||
<div class="input-group input-group-dynamic">
|
||||
<label class="form-label">Email Address</label>
|
||||
<input class="multisteps-form__input form-control" type="email" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-3">
|
||||
<div class="col-12 col-sm-6">
|
||||
<div class="input-group input-group-dynamic">
|
||||
<label class="form-label">Password</label>
|
||||
<input class="multisteps-form__input form-control" type="password" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 mt-3 mt-sm-0">
|
||||
<div class="input-group input-group-dynamic">
|
||||
<label class="form-label">Repeat Password</label>
|
||||
<input class="multisteps-form__input form-control" type="password" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-row d-flex mt-4">
|
||||
<button class="btn bg-gradient-dark ms-auto mb-0 js-btn-next" type="button" title="Next">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--single form panel-->
|
||||
<div class="multisteps-form__panel border-radius-xl bg-white" data-animation="FadeIn">
|
||||
<h5 class="font-weight-bold mb-0">Address</h5>
|
||||
<p class="mb-0 text-sm">Tell us where are you living</p>
|
||||
<div class="multisteps-form__content">
|
||||
<div class="row mt-3">
|
||||
<div class="col">
|
||||
<div class="input-group input-group-dynamic">
|
||||
<label class="form-label">Address 1</label>
|
||||
<input class="multisteps-form__input form-control" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-3">
|
||||
<div class="col">
|
||||
<div class="input-group input-group-dynamic">
|
||||
<label class="form-label">Address 2</label>
|
||||
<input class="multisteps-form__input form-control" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-3">
|
||||
<div class="col-12 col-sm-6">
|
||||
<div class="input-group input-group-dynamic">
|
||||
<label class="form-label">City</label>
|
||||
<input class="multisteps-form__input form-control" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-sm-4 mt-3 mt-sm-0">
|
||||
<select class="form-control" name="choices-state" id="choices-state">
|
||||
<option value="Asia" selected="">Asia</option>
|
||||
<option value="America">America</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-6 col-sm-2 mt-3 mt-sm-0">
|
||||
<div class="input-group input-group-dynamic">
|
||||
<label class="form-label">Zip</label>
|
||||
<input class="multisteps-form__input form-control" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-row d-flex mt-4">
|
||||
<button class="btn bg-gradient-light mb-0 js-btn-prev" type="button" title="Prev">Prev</button>
|
||||
<button class="btn bg-gradient-dark ms-auto mb-0 js-btn-next" type="button" title="Next">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--single form panel-->
|
||||
<div class="multisteps-form__panel border-radius-xl bg-white" data-animation="FadeIn">
|
||||
<h5 class="font-weight-bolder mb-0">Socials</h5>
|
||||
<p class="mb-0 text-sm">Please provide at least one social link</p>
|
||||
<div class="multisteps-form__content">
|
||||
<div class="row mt-3">
|
||||
<div class="col-12">
|
||||
<div class="input-group input-group-dynamic">
|
||||
<label class="form-label">Twitter Handle</label>
|
||||
<input class="multisteps-form__input form-control" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mt-3">
|
||||
<div class="input-group input-group-dynamic">
|
||||
<label class="form-label">Facebook Account</label>
|
||||
<input class="multisteps-form__input form-control" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mt-3">
|
||||
<div class="input-group input-group-dynamic">
|
||||
<label class="form-label">Instagram Account</label>
|
||||
<input class="multisteps-form__input form-control" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="button-row d-flex mt-4 col-12">
|
||||
<button class="btn bg-gradient-light mb-0 js-btn-prev" type="button" title="Prev">Prev</button>
|
||||
<button class="btn bg-gradient-dark ms-auto mb-0 js-btn-next" type="button" title="Next">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--single form panel-->
|
||||
<div class="multisteps-form__panel border-radius-xl bg-white h-100" data-animation="FadeIn">
|
||||
<h5 class="font-weight-bolder mb-0">Profile</h5>
|
||||
<p class="mb-0 text-sm">Optional informations</p>
|
||||
<div class="multisteps-form__content mt-3">
|
||||
<div class="row">
|
||||
<div class="col-12 mt-3">
|
||||
<div class="input-group input-group-dynamic">
|
||||
<textarea class="multisteps-form__textarea form-control" rows="5" placeholder="Say a few words about who you are or what you're working on."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-row d-flex mt-4">
|
||||
<button class="btn bg-gradient-light mb-0 js-btn-prev" type="button" title="Prev">Prev</button>
|
||||
<button class="btn bg-gradient-dark ms-auto mb-0" type="button" title="Send">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<div class="ct-docs-main-footer-row">
|
||||
<div class="ct-docs-main-footer-blank-col">
|
||||
</div>
|
||||
<div class="ct-docs-main-footer-col">
|
||||
<footer class="ct-docs-footer">
|
||||
<div class="ct-docs-footer-inner-row">
|
||||
<div class="ct-docs-footer-col">
|
||||
<div class="ct-docs-footer-copyright">
|
||||
© <script>
|
||||
document.write(new Date().getFullYear())
|
||||
</script> <a href="https://creative-tim.com" class="ct-docs-footer-copyright-author" target="_blank">Creative Tim</a> & <a href="https://www.updivision.com" class="ct-docs-footer-copyright-author" target="_blank">UPDIVISION</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ct-docs-footer-col">
|
||||
<ul class="ct-docs-footer-nav-footer">
|
||||
<li>
|
||||
<a href="https://creative-tim.com" class="ct-docs-footer-nav-link" target="_blank">Creative Tim</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="https://www.updivision.com" class="ct-docs-footer-nav-link" target="_blank">UPDIVISION</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.creative-tim.com/contact-us" class="ct-docs-footer-nav-link" target="_blank">Contact Us</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://creative-tim.com/blog" class="ct-docs-footer-nav-link" target="_blank">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../assets/js/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/core/popper.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/core/bootstrap.bundle.min.js" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="" type="text/javascript"></script>
|
||||
<script src="../../assets/js/prism.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/docs.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/holder.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/moment.min.js" type="text/javascript"></script>
|
||||
<script src="../../assets/js/material-dashboard.min.js" type="text/javascript"></script>
|
||||
<script>
|
||||
Holder.addTheme('gray', {
|
||||
bg: '#777',
|
||||
fg: 'rgba(255,255,255,.75)',
|
||||
font: 'Helvetica',
|
||||
fontweight: 'normal'
|
||||
})
|
||||
</script>
|
||||
<script>
|
||||
// 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>
|
||||
<script src="../../assets/js/multistep-form.js" type="text/javascript"></script>
|
||||
|
||||
<script src="../../assets/js/docs.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user