creativetimofficial--ui
Stefan
1313 行
80 KiB
HTML
1313 行
80 KiB
HTML
<!--
|
|
=========================================================
|
|
Material Dashboard - v2.1.1
|
|
=========================================================
|
|
|
|
Product Page: https://www.creative-tim.com/product/material-dashboard
|
|
Copyright 2019 Creative Tim (https://www.creative-tim.com)
|
|
Licensed under MIT (https://github.com/creativetimofficial/material-dashboard/blob/master/LICENSE.md)
|
|
|
|
Coded by Creative Tim
|
|
|
|
=========================================================
|
|
|
|
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -->
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<link rel="apple-touch-icon" sizes="76x76" href="../../../assets-old/img/apple-icon.png">
|
|
<link rel="icon" type="image/png" href="../../../assets-old/img/favicon.png">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
|
<title>
|
|
Material Dashboard by Creative Tim
|
|
</title>
|
|
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
|
|
<!-- Extra details for Live View on GitHub Pages -->
|
|
<!-- Canonical SEO -->
|
|
<link rel="canonical" href="https://www.creative-tim.com/product/material-dashboard" />
|
|
<!-- Social tags -->
|
|
<meta name="keywords" content="creative tim, html dashboard, html css dashboard, web dashboard, bootstrap 4 dashboard, bootstrap 4, css3 dashboard, bootstrap 4 admin, material dashboard bootstrap 4 dashboard, frontend, responsive bootstrap 4 dashboard, free dashboard, free admin dashboard, free bootstrap 4 admin dashboard">
|
|
<meta name="description" content="Material Dashboard is a Free Material Bootstrap Admin with a fresh, new design inspired by Google's Material Design.">
|
|
<!-- Schema.org markup for Google+ -->
|
|
<meta itemprop="name" content="Material Dashboard by Creative Tim">
|
|
<meta itemprop="description" content="Material Dashboard is a Free Material Bootstrap Admin with a fresh, new design inspired by Google's Material Design.">
|
|
<meta itemprop="image" content="https://s3.amazonaws.com/creativetim_bucket/products/50/opt_md_thumbnail.jpg">
|
|
<!-- Twitter Card data -->
|
|
<meta name="twitter:card" content="product">
|
|
<meta name="twitter:site" content="@creativetim">
|
|
<meta name="twitter:title" content="Material Dashboard by Creative Tim">
|
|
<meta name="twitter:description" content="Material Dashboard is a Free Material Bootstrap Admin with a fresh, new design inspired by Google's Material Design.">
|
|
<meta name="twitter:creator" content="@creativetim">
|
|
<meta name="twitter:image" content="https://s3.amazonaws.com/creativetim_bucket/products/50/opt_md_thumbnail.jpg">
|
|
<!-- Open Graph data -->
|
|
<meta property="fb:app_id" content="655968634437471">
|
|
<meta property="og:title" content="Material Dashboard by Creative Tim" />
|
|
<meta property="og:type" content="article" />
|
|
<meta property="og:url" content="https://demos.creative-tim.com/material-dashboard-bs4/examples/dashboard.html" />
|
|
<meta property="og:image" content="https://s3.amazonaws.com/creativetim_bucket/products/50/opt_md_thumbnail.jpg" />
|
|
<meta property="og:description" content="Material Dashboard is a Free Material Bootstrap Admin with a fresh, new design inspired by Google's Material Design." />
|
|
<meta property="og:site_name" content="Creative Tim" />
|
|
<!-- Fonts and icons -->
|
|
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
|
|
<!-- CSS Files -->
|
|
<link href="../../../assets-old/css/material-dashboard.min.css?v=2.1.0" rel="stylesheet" />
|
|
<!-- Documentation extras -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
|
|
<link rel="stylesheet" href="../../../assets-old/demo/docs.min.css">
|
|
<style>
|
|
.navbar-absolute-logo {
|
|
padding-left: 45px;
|
|
}
|
|
|
|
.navbar-absolute-logo img {
|
|
position: absolute;
|
|
left: 15px;
|
|
margin-top: -6px;
|
|
}
|
|
|
|
body {
|
|
background: white;
|
|
}
|
|
</style>
|
|
<!-- CSS Just for demo purpose, don't include it in your project -->
|
|
<link href="../../../assets-old/demo/demo.css" rel="stylesheet" />
|
|
<!-- Google Tag Manager -->
|
|
<script>
|
|
(function(w, d, s, l, i) {
|
|
w[l] = w[l] || [];
|
|
w[l].push({
|
|
'gtm.start': new Date().getTime(),
|
|
event: 'gtm.js'
|
|
});
|
|
var f = d.getElementsByTagName(s)[0],
|
|
j = d.createElement(s),
|
|
dl = l != 'dataLayer' ? '&l=' + l : '';
|
|
j.async = true;
|
|
j.src =
|
|
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
|
|
f.parentNode.insertBefore(j, f);
|
|
})(window, document, 'script', 'dataLayer', 'GTM-NKDMSK6');
|
|
</script>
|
|
<!-- End Google Tag Manager -->
|
|
</head>
|
|
|
|
<body class="bd-docs" data-spy="scroll" data-target=".bd-sidenav-active">
|
|
<!-- Extra details for Live View on GitHub Pages -->
|
|
<!-- Google Tag Manager (noscript) -->
|
|
<noscript>
|
|
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NKDMSK6" height="0" width="0" style="display:none;visibility:hidden"></iframe>
|
|
</noscript>
|
|
<!-- End Google Tag Manager (noscript) -->
|
|
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
|
|
<div class="container">
|
|
<span class="skiplink-text">Skip to main content</span>
|
|
</div>
|
|
</a>
|
|
<header class="navbar navbar-expand navbar-dark bg-primary flex-column flex-md-row bd-navbar">
|
|
<a class="navbar-brand mr-0 mr-md-2 navbar-absolute-logo" href="https://www.creative-tim.com/product/material-dashboard" target="_blank">
|
|
Material Dashboard
|
|
</a>
|
|
<ul class="navbar-nav flex-row d-none d-md-flex">
|
|
<!-- <li class="nav-item">
|
|
<a class="nav-link p-2" href="#version">
|
|
2.1.0
|
|
</a>
|
|
</li> -->
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
v2.1.0
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
|
<a class="dropdown-item" href="../../../docs/2.1/getting-started/introduction.html">BS4 - 2.1.1</a>
|
|
<a class="dropdown-item active" href="../../../docs/2.0/getting-started/introduction.html">BS4 - 2.1.0</a>
|
|
<a class="dropdown-item" href="https://demos.creative-tim.com/bs3/material-dashboard/documentation/tutorial-components.html" target="_blank">BS3 - 1.0</a>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link p-2" href="https://github.com/creativetimofficial/material-dashboard" target="_blank" rel="noopener" aria-label="GitHub">
|
|
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
|
|
<title>GitHub</title>
|
|
<path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd" />
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link p-2" href="https://twitter.com/CreativeTim" target="_blank" rel="noopener" aria-label="Twitter">
|
|
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false">
|
|
<title>Twitter</title>
|
|
<path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor" />
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<div class="navbar-nav-scroll ml-md-auto ">
|
|
<ul class="navbar-nav bd-navbar-nav flex-row">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="../../../docs/2.0/getting-started/introduction.html"><i class="material-icons">content_paste</i> Documentation</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="https://demos.creative-tim.com/material-dashboard-bs4/examples/dashboard.html"><i class="material-icons">view_carousel</i> Live Preview</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="https://github.com/creativetimofficial/material-dashboard" target="_blank" rel="noopener"><i class="material-icons">star</i> Help with a star</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="" target="_blank" rel="noopener"></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="" target="_blank" rel="noopener"></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<a href="https://github.com/creativetimofficial/material-dashboard" class="github-corner" aria-label="View source on Github">
|
|
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#fff; color:#9c27b0; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
|
|
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
|
|
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
|
|
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
|
|
</svg>
|
|
</a>
|
|
<style>
|
|
.github-corner:hover .octo-arm {
|
|
animation: octocat-wave 560ms ease-in-out
|
|
}
|
|
|
|
@keyframes octocat-wave {
|
|
0%,
|
|
100% {
|
|
transform: rotate(0)
|
|
}
|
|
20%,
|
|
60% {
|
|
transform: rotate(-25deg)
|
|
}
|
|
40%,
|
|
80% {
|
|
transform: rotate(10deg)
|
|
}
|
|
}
|
|
|
|
@media (max-width:500px) {
|
|
.github-corner:hover .octo-arm {
|
|
animation: none
|
|
}
|
|
.github-corner .octo-arm {
|
|
animation: octocat-wave 560ms ease-in-out
|
|
}
|
|
}
|
|
</style>
|
|
</header>
|
|
<div class="container-fluid">
|
|
<div class="row flex-xl-nowrap">
|
|
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
|
|
<nav class="collapse bd-links" id="bd-docs-nav">
|
|
<div class="bd-toc-item active">
|
|
<a class="bd-toc-link" href="#docs">
|
|
Getting started
|
|
</a>
|
|
<ul class="nav bd-sidenav">
|
|
<li class="">
|
|
<a href="../../../docs/2.0/getting-started/introduction.html">
|
|
Introduction
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/getting-started/license.html">
|
|
License
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/getting-started/file-structure.html">
|
|
File Structure
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/getting-started/build-tools.html">
|
|
Build Tools
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="bd-toc-item active">
|
|
<a class="bd-toc-link" href="#docs">
|
|
Components
|
|
</a>
|
|
<ul class="nav bd-sidenav">
|
|
<li class="">
|
|
<a href="../../../docs/2.0/components/alerts.html">
|
|
Alerts
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/components/buttons.html">
|
|
Buttons
|
|
</a>
|
|
</li>
|
|
<li class="active bd-sidenav-active">
|
|
<a href="../../../docs/2.0/components/card.html">
|
|
Card
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/components/dropdowns.html">
|
|
Dropdowns
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/components/forms.html">
|
|
Forms
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/components/google-maps.html">
|
|
Google Maps
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/components/material-icons.html">
|
|
Material Icons
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/components/modal.html">
|
|
Modal
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/components/navs.html">
|
|
Navs
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/components/navbar.html">
|
|
Navbar
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/components/tables.html">
|
|
Tables
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/components/typography.html">
|
|
Typography
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="bd-toc-item active">
|
|
<a class="bd-toc-link" href="#docs">
|
|
Plugins
|
|
</a>
|
|
<ul class="nav bd-sidenav">
|
|
<li class="">
|
|
<a href="../../../docs/2.0/plugins/bootstrap-notify.html">
|
|
Bootstrap Notify
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/plugins/perfect-scrollbar.html">
|
|
Perfect Scrollbar
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
<div class="d-none d-xl-block col-xl-2 bd-toc">
|
|
<ul class="section-nav">
|
|
<ul>
|
|
<li class="toc-entry toc-h3">
|
|
<a href="#card-chart">Card Chart</a>
|
|
<ul>
|
|
<li class="toc-entry toc-h4">
|
|
<a href="#daily-sales">Daily Sales</a>
|
|
</li>
|
|
<li class="toc-entry toc-h4">
|
|
<a href="#completed-tasks">Completed Tasks</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="toc-entry toc-h3">
|
|
<a href="#card-chart-1">Card Chart</a>
|
|
</li>
|
|
<li class="toc-entry toc-h3">
|
|
<a href="#4950-gb">49/50 GB</a>
|
|
</li>
|
|
<li class="toc-entry toc-h3">
|
|
<a href="#34245">$34,245</a>
|
|
</li>
|
|
</ul>
|
|
<li class="toc-entry toc-h2">
|
|
<a href="#example">Example</a>
|
|
<ul>
|
|
<ul>
|
|
<li class="toc-entry toc-h4">
|
|
<a href="#card-title">Card title</a>
|
|
</li>
|
|
</ul>
|
|
</ul>
|
|
</li>
|
|
<li class="toc-entry toc-h2">
|
|
<a href="#content-types">Content types</a>
|
|
<ul>
|
|
<li class="toc-entry toc-h3">
|
|
<a href="#body">Body</a>
|
|
</li>
|
|
<li class="toc-entry toc-h3">
|
|
<a href="#titles-text-and-links">Titles, text, and links</a>
|
|
<ul>
|
|
<li class="toc-entry toc-h4">
|
|
<a href="#card-title-1">Card title</a>
|
|
<ul>
|
|
<ul>
|
|
<li class="toc-entry toc-h6">
|
|
<a href="#card-subtitle">Card subtitle</a>
|
|
</li>
|
|
</ul>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="toc-entry toc-h3">
|
|
<a href="#images">Images</a>
|
|
</li>
|
|
<li class="toc-entry toc-h3">
|
|
<a href="#list-groups">List groups</a>
|
|
</li>
|
|
<li class="toc-entry toc-h3">
|
|
<a href="#header-and-footer">Header and footer</a>
|
|
<ul>
|
|
<li class="toc-entry toc-h4">
|
|
<a href="#special-title-treatment">Special title treatment</a>
|
|
</li>
|
|
<li class="toc-entry toc-h4">
|
|
<a href="#featured">Featured</a>
|
|
</li>
|
|
<li class="toc-entry toc-h4">
|
|
<a href="#special-title-treatment-1">Special title treatment</a>
|
|
</li>
|
|
<li class="toc-entry toc-h4">
|
|
<a href="#special-title-treatment-2">Special title treatment</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="toc-entry toc-h2">
|
|
<a href="#text-alignment">Text alignment</a>
|
|
<ul>
|
|
<ul>
|
|
<li class="toc-entry toc-h4">
|
|
<a href="#special-title-treatment-3">Special title treatment</a>
|
|
</li>
|
|
<li class="toc-entry toc-h4">
|
|
<a href="#special-title-treatment-4">Special title treatment</a>
|
|
</li>
|
|
<li class="toc-entry toc-h4">
|
|
<a href="#special-title-treatment-5">Special title treatment</a>
|
|
</li>
|
|
</ul>
|
|
</ul>
|
|
</li>
|
|
<li class="toc-entry toc-h2">
|
|
<a href="#navigation">Navigation</a>
|
|
<ul>
|
|
<ul>
|
|
<li class="toc-entry toc-h4">
|
|
<a href="#special-title-treatment-6">Special title treatment</a>
|
|
</li>
|
|
<li class="toc-entry toc-h4">
|
|
<a href="#special-title-treatment-7">Special title treatment</a>
|
|
</li>
|
|
</ul>
|
|
</ul>
|
|
</li>
|
|
<li class="toc-entry toc-h2">
|
|
<a href="#images-1">Images</a>
|
|
<ul>
|
|
<li class="toc-entry toc-h3">
|
|
<a href="#image-caps">Image caps</a>
|
|
<ul>
|
|
<li class="toc-entry toc-h4">
|
|
<a href="#card-title-2">Card title</a>
|
|
</li>
|
|
<li class="toc-entry toc-h4">
|
|
<a href="#card-title-3">Card title</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="toc-entry toc-h3">
|
|
<a href="#image-overlays">Image overlays</a>
|
|
<ul>
|
|
<li class="toc-entry toc-h4">
|
|
<a href="#card-title-4">Card title</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
|
<h1 class="bd-title" id="content">Cards</h1>
|
|
<p class="bd-lead">Bootstrap's cards provide a flexible and extensible content container with multiple variants and options.</p>
|
|
<p>We think cards are one of the best ways to organise your information. We went all out with possibilities and we recommended finding the right fit for your product. The general class for a card is called
|
|
<code class="highlighter-rouge">.card</code>. The information inside the card usually goes inside the content (class
|
|
<code class="highlighter-rouge">.card-body</code>). The content can have three types of elements inside:
|
|
<code class="highlighter-rouge">.card-title</code> and .category. You can optionally add a .card-footer, if you want to place a call-to-action. You can change the color of the header using the
|
|
<code class="highlighter-rouge">card-header-*color</code> attribute like this:
|
|
<code class="highlighter-rouge">card-header-primary | info | success | warning | danger | rose</code>.</p>
|
|
<p>If you want to use the cards on white background you can remove it’s shadow using the class
|
|
<code class="highlighter-rouge">.card-plain</code>
|
|
</p>
|
|
<h3 id="card-chart">Card Chart</h3>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header card-chart card-header-warning">
|
|
<div class="ct-chart" id="dailySalesChart"></div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Daily Sales</h4>
|
|
<p class="card-category">
|
|
<span class="text-success"><i class="fa fa-long-arrow-up"></i> 55% </span> increase in today sales.</p>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="stats">
|
|
<i class="material-icons">access_time</i> updated 4 minutes ago
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header card-chart card-header-success">
|
|
<div class="ct-chart" id="completedTasksChart"></div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Completed Tasks</h4>
|
|
<p class="card-category">Last Campaign Performance</p>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="stats">
|
|
<i class="material-icons">access_time</i> updated 2 minutes ago
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header card-chart card-header-warning"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"ct-chart"</span> <span class="na">id=</span><span class="s">"dailySalesChart"</span><span class="nt">></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Daily Sales<span class="nt"></h4></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-category"</span><span class="nt">><span</span> <span class="na">class=</span><span class="s">"text-success"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"fa fa-long-arrow-up"</span><span class="nt">></i></span> 55% <span class="nt"></span></span> increase in today sales.<span class="nt"></p></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-footer"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"stats"</span><span class="nt">></span>
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">></span>access_time<span class="nt"></i></span> updated 4 minutes ago
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header card-chart card-header-success"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"ct-chart"</span> <span class="na">id=</span><span class="s">"completedTasksChart"</span><span class="nt">></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Completed Tasks<span class="nt"></h4></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-category"</span><span class="nt">></span>Last Campaign Performance<span class="nt"></p></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-footer"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"stats"</span><span class="nt">></span>
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">></span>access_time<span class="nt"></i></span> updated 2 minutes ago
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span></code></pre></div>
|
|
<figure class="highlight"><pre><code class="language-html" data-lang="html"> // INFO: #dailySalesChart is initialised inside assets/js/demo.js on method initDocumentationCharts()</code></pre></figure>
|
|
<h3 id="card-chart-1">Card Chart</h3>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="row">
|
|
<div class="col-md-6 col-sm-6">
|
|
<div class="card card-stats">
|
|
<div class="card-header card-header-warning card-header-icon">
|
|
<div class="card-icon">
|
|
<i class="material-icons">content_copy</i>
|
|
</div>
|
|
<p class="card-category">Used Space</p>
|
|
<h3 class="card-title">49/50
|
|
<small>GB</small>
|
|
</h3>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="stats">
|
|
<i class="material-icons text-danger">warning</i>
|
|
<a href="#pablo">Get More Space...</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-sm-6">
|
|
<div class="card card-stats">
|
|
<div class="card-header card-header-success card-header-icon">
|
|
<div class="card-icon">
|
|
<i class="material-icons">store</i>
|
|
</div>
|
|
<p class="card-category">Revenue</p>
|
|
<h3 class="card-title">$34,245</h3>
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="stats">
|
|
<i class="material-icons">date_range</i> Last 24 Hours
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6 col-sm-6"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-stats"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header card-header-warning card-header-icon"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-icon"</span><span class="nt">></span>
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">></span>content_copy<span class="nt"></i></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-category"</span><span class="nt">></span>Used Space<span class="nt"></p></span>
|
|
<span class="nt"><h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>49/50 <span class="nt"><small></span>GB<span class="nt"></small></h3></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-footer"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"stats"</span><span class="nt">></span>
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"material-icons text-danger"</span><span class="nt">></span>warning<span class="nt"></i></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#pablo"</span><span class="nt">></span>Get More Space...<span class="nt"></a></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6 col-sm-6"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-stats"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header card-header-success card-header-icon"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-icon"</span><span class="nt">></span>
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">></span>store<span class="nt"></i></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-category"</span><span class="nt">></span>Revenue<span class="nt"></p></span>
|
|
<span class="nt"><h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>$34,245<span class="nt"></h3></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-footer"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"stats"</span><span class="nt">></span>
|
|
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">></span>date_range<span class="nt"></i></span> Last 24 Hours
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
|
|
<span class="nt"></div></span></code></pre></div>
|
|
<h2 id="example">Example</h2>
|
|
<p>Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easily customized with various
|
|
sizing options.</p>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="card" style="width: 20rem;">
|
|
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap" />
|
|
<div class="card-body">
|
|
<h4 class="card-title">Card title</h4>
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
<a href="#" class="btn btn-primary">Go somewhere</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">style=</span><span class="s">"width: 20rem;"</span><span class="nt">></span>
|
|
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"Card image cap"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h4></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="nt"></p></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Go somewhere<span class="nt"></a></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span></code></pre></div>
|
|
<h2 id="content-types">Content types</h2>
|
|
<p>Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.</p>
|
|
<h3 id="body">Body</h3>
|
|
<p>The building block of a card is the
|
|
<code class="highlighter-rouge">.card-body</code>. Use it whenever you need a padded section within a card.</p>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
This is some text within a card body.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
This is some text within a card body.
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span></code></pre></div>
|
|
<h3 id="titles-text-and-links">Titles, text, and links</h3>
|
|
<p>Card titles are used by adding
|
|
<code class="highlighter-rouge">.card-title</code> to a
|
|
<code class="highlighter-rouge"><h*></code> tag. In the same way, links are added and placed next to each other by adding
|
|
<code class="highlighter-rouge">.card-link</code> to an
|
|
<code class="highlighter-rouge"><a></code> tag.</p>
|
|
<p>Subtitles are used by adding a
|
|
<code class="highlighter-rouge">.card-subtitle</code> to a
|
|
<code class="highlighter-rouge"><h*></code> tag. If the
|
|
<code class="highlighter-rouge">.card-title</code> and the
|
|
<code class="highlighter-rouge">.card-subtitle</code> items are placed in a
|
|
<code class="highlighter-rouge">.card-body</code> item, the card title and subtitle are aligned nicely.</p>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="card" style="width: 20rem;">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Card title</h4>
|
|
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
<a href="#" class="card-link">Card link</a>
|
|
<a href="#" class="card-link">Another link</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">style=</span><span class="s">"width: 20rem;"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h4></span>
|
|
<span class="nt"><h6</span> <span class="na">class=</span><span class="s">"card-subtitle mb-2 text-muted"</span><span class="nt">></span>Card subtitle<span class="nt"></h6></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="nt"></p></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"card-link"</span><span class="nt">></span>Card link<span class="nt"></a></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"card-link"</span><span class="nt">></span>Another link<span class="nt"></a></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span></code></pre></div>
|
|
<h3 id="images">Images</h3>
|
|
<p>
|
|
<code class="highlighter-rouge">.card-img-top</code> places an image to the top of the card. With
|
|
<code class="highlighter-rouge">.card-text</code>, text can be added to the card. Text within
|
|
<code class="highlighter-rouge">.card-text</code> can also be styled with the standard HTML tags.</p>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="card" style="width: 20rem;">
|
|
<img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap" />
|
|
<div class="card-body">
|
|
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">style=</span><span class="s">"width: 20rem;"</span><span class="nt">></span>
|
|
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"Card image cap"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>Some quick example text to build on the card title and make up the bulk of the card's content.<span class="nt"></p></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span></code></pre></div>
|
|
<h3 id="list-groups">List groups</h3>
|
|
<p>Create lists of content in a card with a flush list group.</p>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="card" style="width: 20rem;">
|
|
<ul class="list-group list-group-flush">
|
|
<li class="list-group-item">Cras justo odio</li>
|
|
<li class="list-group-item">Dapibus ac facilisis in</li>
|
|
<li class="list-group-item">Vestibulum at eros</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">style=</span><span class="s">"width: 20rem;"</span><span class="nt">></span>
|
|
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-group list-group-flush"</span><span class="nt">></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Cras justo odio<span class="nt"></li></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></li></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Vestibulum at eros<span class="nt"></li></span>
|
|
<span class="nt"></ul></span>
|
|
<span class="nt"></div></span></code></pre></div>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="card card-nav-tabs" style="width: 20rem;">
|
|
<div class="card-header card-header-danger">
|
|
Featured
|
|
</div>
|
|
<ul class="list-group list-group-flush">
|
|
<li class="list-group-item">Cras justo odio</li>
|
|
<li class="list-group-item">Dapibus ac facilisis in</li>
|
|
<li class="list-group-item">Vestibulum at eros</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-nav-tabs"</span> <span class="na">style=</span><span class="s">"width: 20rem;"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header card-header-danger"</span><span class="nt">></span>
|
|
Featured
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list-group list-group-flush"</span><span class="nt">></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Cras justo odio<span class="nt"></li></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Dapibus ac facilisis in<span class="nt"></li></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-group-item"</span><span class="nt">></span>Vestibulum at eros<span class="nt"></li></span>
|
|
<span class="nt"></ul></span>
|
|
<span class="nt"></div></span></code></pre></div>
|
|
<h3 id="header-and-footer">Header and footer</h3>
|
|
<p>Add an optional header and/or footer within a card.</p>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="card card-nav-tabs">
|
|
<div class="card-header card-header-warning">
|
|
Featured
|
|
</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Special title treatment</h4>
|
|
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
|
<a href="#" class="btn btn-primary">Go somewhere</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-nav-tabs"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header card-header-warning"</span><span class="nt">></span>
|
|
Featured
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Special title treatment<span class="nt"></h4></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>With supporting text below as a natural lead-in to additional content.<span class="nt"></p></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Go somewhere<span class="nt"></a></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span></code></pre></div>
|
|
<p>Card headers can be styled by adding
|
|
<code class="highlighter-rouge">.card-header</code> to
|
|
<code class="highlighter-rouge"><h*></code> elements.</p>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="card card-nav-tabs">
|
|
<h4 class="card-header card-header-info">Featured</h4>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Special title treatment</h4>
|
|
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
|
<a href="#" class="btn btn-primary">Go somewhere</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-nav-tabs"</span><span class="nt">></span>
|
|
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-header card-header-info"</span><span class="nt">></span>Featured<span class="nt"></h4></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Special title treatment<span class="nt"></h4></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>With supporting text below as a natural lead-in to additional content.<span class="nt"></p></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Go somewhere<span class="nt"></a></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span></code></pre></div>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="card card-nav-tabs">
|
|
<div class="card-header card-header-success">
|
|
Quote
|
|
</div>
|
|
<div class="card-body">
|
|
<blockquote class="blockquote mb-0">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
|
<footer class="blockquote-footer">Someone famous in
|
|
<cite title="Source Title">Source Title</cite>
|
|
</footer>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-nav-tabs"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header card-header-success"</span><span class="nt">></span>
|
|
Quote
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
<span class="nt"><blockquote</span> <span class="na">class=</span><span class="s">"blockquote mb-0"</span><span class="nt">></span>
|
|
<span class="nt"><p></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.<span class="nt"></p></span>
|
|
<span class="nt"><footer</span> <span class="na">class=</span><span class="s">"blockquote-footer"</span><span class="nt">></span>Someone famous in <span class="nt"><cite</span> <span class="na">title=</span><span class="s">"Source Title"</span><span class="nt">></span>Source Title<span class="nt"></cite></footer></span>
|
|
<span class="nt"></blockquote></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span></code></pre></div>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="card card-nav-tabs text-center">
|
|
<div class="card-header card-header-primary">
|
|
Featured
|
|
</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Special title treatment</h4>
|
|
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
|
<a href="#" class="btn btn-primary">Go somewhere</a>
|
|
</div>
|
|
<div class="card-footer text-muted">
|
|
2 days ago
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-nav-tabs text-center"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header card-header-primary"</span><span class="nt">></span>
|
|
Featured
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Special title treatment<span class="nt"></h4></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>With supporting text below as a natural lead-in to additional content.<span class="nt"></p></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Go somewhere<span class="nt"></a></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-footer text-muted"</span><span class="nt">></span>
|
|
2 days ago
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span></code></pre></div>
|
|
<h2 id="text-alignment">Text alignment</h2>
|
|
<p>You can quickly change the text alignment of any card—in its entirety or specific parts—with
|
|
<a href="https://getbootstrap.com/docs/4.0/utilities/text/#text-alignment">text align classes</a>.</p>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="card" style="width: 20rem;">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Special title treatment</h4>
|
|
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
|
<a href="#" class="btn btn-primary">Go somewhere</a>
|
|
</div>
|
|
</div>
|
|
<div class="card text-center" style="width: 20rem;">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Special title treatment</h4>
|
|
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
|
<a href="#" class="btn btn-primary">Go somewhere</a>
|
|
</div>
|
|
</div>
|
|
<div class="card text-right" style="width: 20rem;">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Special title treatment</h4>
|
|
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
|
<a href="#" class="btn btn-primary">Go somewhere</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span> <span class="na">style=</span><span class="s">"width: 20rem;"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Special title treatment<span class="nt"></h4></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>With supporting text below as a natural lead-in to additional content.<span class="nt"></p></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Go somewhere<span class="nt"></a></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card text-center"</span> <span class="na">style=</span><span class="s">"width: 20rem;"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Special title treatment<span class="nt"></h4></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>With supporting text below as a natural lead-in to additional content.<span class="nt"></p></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Go somewhere<span class="nt"></a></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card text-right"</span> <span class="na">style=</span><span class="s">"width: 20rem;"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Special title treatment<span class="nt"></h4></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>With supporting text below as a natural lead-in to additional content.<span class="nt"></p></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Go somewhere<span class="nt"></a></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span></code></pre></div>
|
|
<h2 id="navigation">Navigation</h2>
|
|
<p>Add some navigation to a card’s header (or block) with Bootstrap’s
|
|
<a href="/material-dashboard/docs/2.0/components/navs.html">nav components</a>.</p>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="card text-center">
|
|
<div class="card-header card-header-rose">
|
|
<ul class="nav nav-tabs">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="#">Active</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Link</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link disabled" href="#">Disabled</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Special title treatment</h4>
|
|
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
|
<a href="#" class="btn btn-primary">Go somewhere</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card text-center"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header card-header-rose"</span><span class="nt">></span>
|
|
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span><span class="nt">></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Active<span class="nt"></a></span>
|
|
<span class="nt"></li></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
|
|
<span class="nt"></li></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Disabled<span class="nt"></a></span>
|
|
<span class="nt"></li></span>
|
|
<span class="nt"></ul></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Special title treatment<span class="nt"></h4></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>With supporting text below as a natural lead-in to additional content.<span class="nt"></p></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Go somewhere<span class="nt"></a></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span></code></pre></div>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="card text-center">
|
|
<div class="card-header">
|
|
<ul class="nav nav-pills card-header-pills">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="#">Active</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Link</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link disabled" href="#">Disabled</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Special title treatment</h4>
|
|
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
|
<a href="#" class="btn btn-primary">Go somewhere</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card text-center"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">></span>
|
|
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-pills card-header-pills"</span><span class="nt">></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Active<span class="nt"></a></span>
|
|
<span class="nt"></li></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
|
|
<span class="nt"></li></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Disabled<span class="nt"></a></span>
|
|
<span class="nt"></li></span>
|
|
<span class="nt"></ul></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Special title treatment<span class="nt"></h4></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>With supporting text below as a natural lead-in to additional content.<span class="nt"></p></span>
|
|
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Go somewhere<span class="nt"></a></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span></code></pre></div>
|
|
<h2 id="images-1">Images</h2>
|
|
<p>Cards include a few options for working with images. Choose from appending “image caps” at either end of a card, overlaying images with card content, or simply embedding the image in a card.</p>
|
|
<h3 id="image-caps">Image caps</h3>
|
|
<p>Similar to headers and footers, cards can include top and bottom “image caps”—images at the top or bottom of a card.</p>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="card mb-3">
|
|
<img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap" />
|
|
<div class="card-body">
|
|
<h4 class="card-title">Card title</h4>
|
|
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
|
<p class="card-text">
|
|
<small class="text-muted">Last updated 3 mins ago</small>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Card title</h4>
|
|
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
|
<p class="card-text">
|
|
<small class="text-muted">Last updated 3 mins ago</small>
|
|
</p>
|
|
</div>
|
|
<img class="card-img-bottom" data-src="holder.js/100px180/" alt="Card image cap" />
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card mb-3"</span><span class="nt">></span>
|
|
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"card-img-top"</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"Card image cap"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h4></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="nt"></p></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">><small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>Last updated 3 mins ago<span class="nt"></small></p></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span>
|
|
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h4></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="nt"></p></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">><small</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">></span>Last updated 3 mins ago<span class="nt"></small></p></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"card-img-bottom"</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"Card image cap"</span><span class="nt">></span>
|
|
<span class="nt"></div></span></code></pre></div>
|
|
<h3 id="image-overlays">Image overlays</h3>
|
|
<p>Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.</p>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="card bg-dark text-white">
|
|
<img class="card-img" data-src="holder.js/100px270/#55595c:#373a3c/text:Card image" alt="Card image" />
|
|
<div class="card-img-overlay">
|
|
<h4 class="card-title">Card title</h4>
|
|
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
|
<p class="card-text">Last updated 3 mins ago</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card bg-dark text-white"</span><span class="nt">></span>
|
|
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"card-img"</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"Card image"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-img-overlay"</span><span class="nt">></span>
|
|
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Card title<span class="nt"></h4></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.<span class="nt"></p></span>
|
|
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-text"</span><span class="nt">></span>Last updated 3 mins ago<span class="nt"></p></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span></code></pre></div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
<!-- Core JS Files -->
|
|
<script src="../../../assets-old/js/core/jquery.min.js" type="text/javascript"></script>
|
|
<script src="../../../assets-old/js/core/popper.min.js" type="text/javascript"></script>
|
|
<script src="../../../assets-old/js/core/bootstrap-material-design.min.js" type="text/javascript"></script>
|
|
<script src="../../../assets-old/js/plugins/perfect-scrollbar.jquery.min.js"></script>
|
|
<!-- Google Maps Plugin -->
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB2Yno10-YTnLjjn_Vtk0V8cdcY5lC4plU"></script>
|
|
<!-- Place this tag in your head or just before your close body tag. -->
|
|
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
|
<!-- Chartist JS -->
|
|
<script src="../../../assets-old/js/plugins/chartist.min.js"></script>
|
|
<!-- Notifications Plugin -->
|
|
<script src="../../../assets-old/js/plugins/bootstrap-notify.js"></script>
|
|
<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
|
|
<script src="../../../assets-old/js/material-dashboard.min.js?v=2.1.0" type="text/javascript"></script>
|
|
<!-- Sharrre libray -->
|
|
<script src="../../../assets-old/demo/jquery.sharrre.js"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
|
|
$('#facebook').sharrre({
|
|
share: {
|
|
facebook: true
|
|
},
|
|
enableHover: false,
|
|
enableTracking: false,
|
|
enableCounter: false,
|
|
click: function(api, options) {
|
|
api.simulateClick();
|
|
api.openPopup('facebook');
|
|
},
|
|
template: '<i class="fab fa-facebook-f"></i> Facebook',
|
|
url: 'https://demos.creative-tim.com/material-dashboard-bs4/examples/dashboard.html'
|
|
});
|
|
|
|
$('#google').sharrre({
|
|
share: {
|
|
googlePlus: true
|
|
},
|
|
enableCounter: false,
|
|
enableHover: false,
|
|
enableTracking: true,
|
|
click: function(api, options) {
|
|
api.simulateClick();
|
|
api.openPopup('googlePlus');
|
|
},
|
|
template: '<i class="fab fa-google-plus"></i> Google',
|
|
url: 'https://demos.creative-tim.com/material-dashboard-bs4/examples/dashboard.html'
|
|
});
|
|
|
|
$('#twitter').sharrre({
|
|
share: {
|
|
twitter: true
|
|
},
|
|
enableHover: false,
|
|
enableTracking: false,
|
|
enableCounter: false,
|
|
buttons: {
|
|
twitter: {
|
|
via: 'CreativeTim'
|
|
}
|
|
},
|
|
click: function(api, options) {
|
|
api.simulateClick();
|
|
api.openPopup('twitter');
|
|
},
|
|
template: '<i class="fab fa-twitter"></i> Twitter',
|
|
url: 'https://demos.creative-tim.com/material-dashboard-bs4/examples/dashboard.html'
|
|
});
|
|
|
|
// Facebook Pixel Code Don't Delete
|
|
! function(f, b, e, v, n, t, s) {
|
|
if (f.fbq) return;
|
|
n = f.fbq = function() {
|
|
n.callMethod ?
|
|
n.callMethod.apply(n, arguments) : n.queue.push(arguments)
|
|
};
|
|
if (!f._fbq) f._fbq = n;
|
|
n.push = n;
|
|
n.loaded = !0;
|
|
n.version = '2.0';
|
|
n.queue = [];
|
|
t = b.createElement(e);
|
|
t.async = !0;
|
|
t.src = v;
|
|
s = b.getElementsByTagName(e)[0];
|
|
s.parentNode.insertBefore(t, s)
|
|
}(window,
|
|
document, 'script', '//connect.facebook.net/en_US/fbevents.js');
|
|
|
|
try {
|
|
fbq('init', '111649226022273');
|
|
fbq('track', "PageView");
|
|
|
|
} catch (err) {
|
|
console.log('Facebook Track Error:', err);
|
|
}
|
|
|
|
});
|
|
</script>
|
|
<noscript>
|
|
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=111649226022273&ev=PageView&noscript=1" />
|
|
</noscript>
|
|
<script>
|
|
$(document).ready(function() {
|
|
$().ready(function() {
|
|
$sidebar = $('.sidebar');
|
|
$sidebar_img_container = $sidebar.find('.sidebar-background');
|
|
|
|
$full_page = $('.full-page');
|
|
|
|
$sidebar_responsive = $('body > .navbar-collapse');
|
|
sidebar_mini_active = true;
|
|
|
|
window_width = $(window).width();
|
|
|
|
fixed_plugin_open = $('.sidebar .sidebar-wrapper .nav li.active a p').html();
|
|
|
|
// if( window_width > 767 && fixed_plugin_open == 'Dashboard' ){
|
|
// if($('.fixed-plugin .dropdown').hasClass('show-dropdown')){
|
|
// $('.fixed-plugin .dropdown').addClass('show');
|
|
// }
|
|
//
|
|
// }
|
|
|
|
$('.fixed-plugin a').click(function(event) {
|
|
// Alex if we click on switch, stop propagation of the event, so the dropdown will not be hide, otherwise we set the section active
|
|
if ($(this).hasClass('switch-trigger')) {
|
|
if (event.stopPropagation) {
|
|
event.stopPropagation();
|
|
} else if (window.event) {
|
|
window.event.cancelBubble = true;
|
|
}
|
|
}
|
|
});
|
|
|
|
$('.fixed-plugin .background-color span').click(function() {
|
|
$(this).siblings().removeClass('active');
|
|
$(this).addClass('active');
|
|
|
|
var new_color = $(this).data('color');
|
|
|
|
if ($sidebar.length != 0) {
|
|
$sidebar.attr('data-color', new_color);
|
|
}
|
|
|
|
if ($full_page.length != 0) {
|
|
$full_page.attr('filter-color', new_color);
|
|
}
|
|
|
|
if ($sidebar_responsive.length != 0) {
|
|
$sidebar_responsive.attr('data-color', new_color);
|
|
}
|
|
});
|
|
|
|
$('.fixed-plugin .img-holder').click(function() {
|
|
$full_page_background = $('.full-page-background');
|
|
|
|
$(this).parent('li').siblings().removeClass('active');
|
|
$(this).parent('li').addClass('active');
|
|
|
|
|
|
var new_image = $(this).find("img").attr('src');
|
|
|
|
if ($sidebar_img_container.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
|
|
$sidebar_img_container.fadeOut('fast', function() {
|
|
$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
|
|
$sidebar_img_container.fadeIn('fast');
|
|
});
|
|
}
|
|
|
|
if ($full_page_background.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
|
|
var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');
|
|
|
|
$full_page_background.fadeOut('fast', function() {
|
|
$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
|
|
$full_page_background.fadeIn('fast');
|
|
});
|
|
}
|
|
|
|
if ($('.switch-sidebar-image input:checked').length == 0) {
|
|
var new_image = $('.fixed-plugin li.active .img-holder').find("img").attr('src');
|
|
var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');
|
|
|
|
$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
|
|
$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
|
|
}
|
|
|
|
if ($sidebar_responsive.length != 0) {
|
|
$sidebar_responsive.css('background-image', 'url("' + new_image + '")');
|
|
}
|
|
});
|
|
|
|
$('.switch-sidebar-image input').on("switchChange.bootstrapSwitch", function() {
|
|
$full_page_background = $('.full-page-background');
|
|
|
|
$input = $(this);
|
|
|
|
if ($input.is(':checked')) {
|
|
if ($sidebar_img_container.length != 0) {
|
|
$sidebar_img_container.fadeIn('fast');
|
|
$sidebar.attr('data-image', '#');
|
|
}
|
|
|
|
if ($full_page_background.length != 0) {
|
|
$full_page_background.fadeIn('fast');
|
|
$full_page.attr('data-image', '#');
|
|
}
|
|
|
|
background_image = true;
|
|
} else {
|
|
if ($sidebar_img_container.length != 0) {
|
|
$sidebar.removeAttr('data-image');
|
|
$sidebar_img_container.fadeOut('fast');
|
|
}
|
|
|
|
if ($full_page_background.length != 0) {
|
|
$full_page.removeAttr('data-image', '#');
|
|
$full_page_background.fadeOut('fast');
|
|
}
|
|
|
|
background_image = false;
|
|
}
|
|
});
|
|
|
|
$('.switch-sidebar-mini input').on("switchChange.bootstrapSwitch", function() {
|
|
var $btn = $(this);
|
|
|
|
if (sidebar_mini_active == true) {
|
|
$('body').removeClass('sidebar-mini');
|
|
sidebar_mini_active = false;
|
|
materialDashboard.showSidebarMessage('Sidebar mini deactivated...');
|
|
} else {
|
|
$('body').addClass('sidebar-mini');
|
|
sidebar_mini_active = true;
|
|
materialDashboard.showSidebarMessage('Sidebar mini activated...');
|
|
}
|
|
|
|
// we simulate the window Resize so the charts will get updated in realtime.
|
|
var simulateWindowResize = setInterval(function() {
|
|
window.dispatchEvent(new Event('resize'));
|
|
}, 180);
|
|
|
|
// we stop the simulation of Window Resize after the animations are completed
|
|
setTimeout(function() {
|
|
clearInterval(simulateWindowResize);
|
|
}, 1000);
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
if ($('.card-header.card-chart').length != 0) {
|
|
md.initDashboardPageCharts();
|
|
}
|
|
|
|
if ($('#websiteViewsChart').length != 0) {
|
|
md.initDocumentationCharts();
|
|
}
|
|
|
|
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|