creativetimofficial--ui
Stefan
1840 行
124 KiB
HTML
1840 行
124 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.1" rel="stylesheet" />
|
||
<link href="https://demos.creative-tim.com/material-dashboard-pro/assets-old/css/material-dashboard.min.css?v=2.1.0" rel="stylesheet">
|
||
</link>
|
||
<link rel="alternate" hreflang="zh" href="https://demos.creative-tim.com/material-dashboard/zh/docs/2.1/components/card" />
|
||
<link rel="alternate" hreflang="ja" href="https://demos.creative-tim.com/material-dashboard/ja/docs/2.1/components/card" />
|
||
<link rel="alternate" hreflang="en" href="https://demos.creative-tim.com/material-dashboard/docs/2.1/components/card" />
|
||
<link rel="alternate" hreflang="x-default" href="https://demos.creative-tim.com/material-dashboard/docs/2.1/components/card" />
|
||
<!-- 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">
|
||
材料仪表板
|
||
</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.1
|
||
</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.1
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||
<a class="dropdown-item active" href="../../../../docs/2.1/getting-started/introduction.html">BS4 - 2.1.1</a>
|
||
<a class="dropdown-item" 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" href="https://www.creative-tim.com/product/material-dashboard"> <i class="material-icons">card_membership</i> 升级到专业版 </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> 实时预览</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>
|
||
帮助明星
|
||
</a>
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="introduction.html#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded=" ">
|
||
<i class="material-icons">translate </i>
|
||
中文
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||
<a class="dropdown-item active dropdown-flag-holder" href="#">
|
||
中文
|
||
</a>
|
||
<a class="dropdown-item dropdown-flag-holder" href="../../../../docs/2.1/getting-started/introduction.html">ENGLISH
|
||
</a>
|
||
<a class="dropdown-item dropdown-flag-holder" href="../../../../ja/docs/2.1/getting-started/introduction.html">日本人
|
||
</a>
|
||
</div>
|
||
</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">
|
||
入门
|
||
</a>
|
||
<ul class="nav bd-sidenav">
|
||
<li class="">
|
||
<a href="../../../../zh/docs/2.1/getting-started/introduction.html">
|
||
介绍
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../zh/docs/2.1/getting-started/license.html">
|
||
执照
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../zh/docs/2.1/getting-started/file-structure.html">
|
||
文件结构
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../zh/docs/2.1/getting-started/build-tools.html">
|
||
构建工具
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="bd-toc-item active">
|
||
<a class="bd-toc-link" href="#docs">
|
||
组件
|
||
</a>
|
||
<ul class="nav bd-sidenav">
|
||
<li class="">
|
||
<a href="../../../../zh/docs/2.1/components/alerts.html">
|
||
警报
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../zh/docs/2.1/components/badge.html">
|
||
徽章
|
||
<span class="badge badge-primary">临</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../zh/docs/2.1/components/breadcrumb.html">
|
||
面包屑
|
||
<span class="badge badge-primary">临</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../zh/docs/2.1/components/buttons.html">
|
||
纽扣
|
||
</a>
|
||
</li>
|
||
<li class="active bd-sidenav-active">
|
||
<a href="../../../../zh/docs/2.1/components/card.html">
|
||
卡
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../zh/docs/2.1/components/carousel.html">
|
||
圆盘传送带
|
||
<span class="badge badge-primary">临</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../zh/docs/2.1/components/collapse.html">
|
||
坍方
|
||
<span class="badge badge-primary">临</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../zh/docs/2.1/components/dropdowns.html">
|
||
下拉菜单
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../zh/docs/2.1/components/forms.html">
|
||
形式
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../zh/docs/2.1/components/google-maps.html">
|
||
谷歌地图
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../zh/docs/2.1/components/info-areas.html">
|
||
信息区域
|
||
<span class="badge badge-primary">临</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../zh/docs/2.1/components/material-icons.html">
|
||
材料图标
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../zh/docs/2.1/components/modal.html">
|
||
语气
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../zh/docs/2.1/components/navs.html">
|
||
资产净值
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../zh/docs/2.1/components/navbar.html">
|
||
导航栏
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../zh/docs/2.1/components/pagination.html">
|
||
分页
|
||
<span class="badge badge-primary">临</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../zh/docs/2.1/components/parallax.html">
|
||
视差
|
||
<span class="badge badge-primary">临</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../zh/docs/2.1/components/popovers.html">
|
||
约夏克布丁
|
||
<span class="badge badge-primary">临</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../zh/docs/2.1/components/progress.html">
|
||
进展
|
||
<span class="badge badge-primary">临</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../zh/docs/2.1/components/tables.html">
|
||
表
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../zh/docs/2.1/components/tooltips.html">
|
||
提示
|
||
<span class="badge badge-primary">临</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../zh/docs/2.1/components/typography.html">
|
||
活版印刷
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="bd-toc-item active">
|
||
<a class="bd-toc-link" href="#docs">
|
||
插件
|
||
</a>
|
||
<ul class="nav bd-sidenav">
|
||
<li class="">
|
||
<a href="../../../../zh/docs/2.1/plugins/bootstrap-notify.html">
|
||
Bootstrap通知
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../zh/docs/2.1/plugins/perfect-scrollbar.html">
|
||
完美的滚动条
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../zh/docs/2.1/plugins/bootstrap-switch.html">
|
||
自举开关
|
||
<span class="badge badge-primary">临</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../zh/docs/2.1/plugins/datetimepicker.html">
|
||
的DateTimePicker
|
||
<span class="badge badge-primary">临</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../zh/docs/2.1/plugins/fullcalendar.html">
|
||
完整日历
|
||
<span class="badge badge-primary">临</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../zh/docs/2.1/plugins/jvector-map.html">
|
||
jVector地图
|
||
<span class="badge badge-primary">临</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../zh/docs/2.1/plugins/sweet-alert-2.html">
|
||
甜蜜警报
|
||
<span class="badge badge-primary">临</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../zh/docs/2.1/plugins/jquery-validation.html">
|
||
JQuery 验证
|
||
<span class="badge badge-primary">临</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../zh/docs/2.1/plugins/fileupload-jasny.html">
|
||
上传文件 Jasny
|
||
<span class="badge badge-primary">临</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../zh/docs/2.1/plugins/jquery-tagsinput.html">
|
||
jQuery Tagsinput
|
||
<span class="badge badge-primary">临</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../zh/docs/2.1/plugins/select-bootstrap.html">
|
||
选择Bootstrap
|
||
<span class="badge badge-primary">临</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../zh/docs/2.1/plugins/sliders.html">
|
||
滑块
|
||
<span class="badge badge-primary">临</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
<div class="d-none d-xl-block col-xl-2 bd-toc">
|
||
<ul class="section-nav">
|
||
<li class="toc-entry toc-h2"><a href="#卡片标题类型">卡片标题类型</a>
|
||
<ul>
|
||
<ul>
|
||
<li class="toc-entry toc-h4"><a href="#常规标题">常规标题</a></li>
|
||
<li class="toc-entry toc-h4"><a href="#全标头彩色">全标头彩色</a></li>
|
||
<li class="toc-entry toc-h4"><a href="#这是icon">这是Icon</a></li>
|
||
<li class="toc-entry toc-h4"><a href="#here-is-the-text">Here is the Text</a></li>
|
||
</ul>
|
||
<li class="toc-entry toc-h3"><a href="#卡与动画---临-零件">卡与动画 - 临 零件</a>
|
||
<ul>
|
||
<li class="toc-entry toc-h4"><a href="#website-views">Website Views</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="toc-entry toc-h3"><a href="#卡片图表">卡片图表</a>
|
||
<ul>
|
||
<li class="toc-entry toc-h4"><a href="#每日销售">每日销售</a></li>
|
||
<li class="toc-entry toc-h4"><a href="#完成的任务">完成的任务</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="toc-entry toc-h2"><a href="#内容类型">内容类型</a>
|
||
<ul>
|
||
<li class="toc-entry toc-h3"><a href="#身体">身体</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#标题文字和链接">标题，文字和链接</a>
|
||
<ul>
|
||
<li class="toc-entry toc-h4"><a href="#卡片标题">卡片标题</a>
|
||
<ul>
|
||
<ul>
|
||
<li class="toc-entry toc-h6"><a href="#卡字幕">卡字幕</a></li>
|
||
</ul>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="toc-entry toc-h3"><a href="#图片">图片</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#列出组">列出组</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#页眉页脚">页眉页脚</a>
|
||
<ul>
|
||
<li class="toc-entry toc-h4"><a href="#特殊标题处理">特殊标题处理</a></li>
|
||
<li class="toc-entry toc-h4"><a href="#精选">精选</a></li>
|
||
<li class="toc-entry toc-h4"><a href="#特殊标题处理-1">特殊标题处理</a></li>
|
||
<li class="toc-entry toc-h4"><a href="#特殊标题处理-2">特殊标题处理</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="toc-entry toc-h2"><a href="#文字对齐">文字对齐</a>
|
||
<ul>
|
||
<ul>
|
||
<li class="toc-entry toc-h4"><a href="#特殊标题处理-3">特殊标题处理</a></li>
|
||
<li class="toc-entry toc-h4"><a href="#特殊标题处理-4">特殊标题处理</a></li>
|
||
<li class="toc-entry toc-h4"><a href="#特殊标题处理-5">特殊标题处理</a></li>
|
||
</ul>
|
||
</ul>
|
||
</li>
|
||
<li class="toc-entry toc-h2"><a href="#导航">导航</a>
|
||
<ul>
|
||
<ul>
|
||
<li class="toc-entry toc-h4"><a href="#特殊标题处理-6">特殊标题处理</a></li>
|
||
<li class="toc-entry toc-h4"><a href="#特殊标题处理-7">特殊标题处理</a></li>
|
||
</ul>
|
||
</ul>
|
||
</li>
|
||
<li class="toc-entry toc-h2"><a href="#图片-1">图片</a>
|
||
<ul>
|
||
<li class="toc-entry toc-h3"><a href="#图片上限">图片上限</a>
|
||
<ul>
|
||
<li class="toc-entry toc-h4"><a href="#卡片标题-1">卡片标题</a></li>
|
||
<li class="toc-entry toc-h4"><a href="#卡片标题-2">卡片标题</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="toc-entry toc-h3"><a href="#图像叠加">图像叠加</a>
|
||
<ul>
|
||
<li class="toc-entry toc-h4"><a href="#卡片标题-3">卡片标题</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="toc-entry toc-h2"><a href="#例子">例子</a>
|
||
<ul>
|
||
<li class="toc-entry toc-h3"><a href="#博客卡片---临零件">博客卡片 - 临零件</a>
|
||
<ul>
|
||
<ul>
|
||
<ul>
|
||
<li class="toc-entry toc-h6"><a href="#时尚">时尚</a></li>
|
||
</ul>
|
||
<li class="toc-entry toc-h5"><a href="#-------------twitter--------">
|
||
Twitter
|
||
</a></li>
|
||
</ul>
|
||
<li class="toc-entry toc-h4"><a href="#-------------你不必为了建立一个美妙的商业和生活而牺牲快乐--------">
|
||
"你不必为了建立一个美妙的商业和生活而牺牲快乐"
|
||
</a>
|
||
<ul>
|
||
<ul>
|
||
<li class="toc-entry toc-h6"><a href="#------------trending_up趋势--------">
|
||
trending_up趋势
|
||
</a></li>
|
||
</ul>
|
||
</ul>
|
||
</li>
|
||
<li class="toc-entry toc-h4"><a href="#------------发展您的业务开始关注您的员工--------">
|
||
发展您的业务开始关注您的员工
|
||
</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="toc-entry toc-h3"><a href="#档案卡---临零件">档案卡 - 临零件</a>
|
||
<ul>
|
||
<li class="toc-entry toc-h4"><a href="#alec-thompson">Alec Thompson</a>
|
||
<ul>
|
||
<ul>
|
||
<li class="toc-entry toc-h6"><a href="#ceo--co-founder">CEO / Co-Founder</a></li>
|
||
</ul>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="toc-entry toc-h3"><a href="#完整的背景卡---临零件">完整的背景卡 - 临零件</a>
|
||
<ul>
|
||
<ul>
|
||
<ul>
|
||
<li class="toc-entry toc-h6"><a href="#市场上的生产力应用程序">市场上的生产力应用程序</a></li>
|
||
</ul>
|
||
</ul>
|
||
</ul>
|
||
</li>
|
||
<li class="toc-entry toc-h3"><a href="#最佳生产力应用程序">最佳生产力应用程序</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#定价卡---临零件">定价卡 - 临零件</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#69">$69</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#旋转卡---临零件">旋转卡 - 临零件</a>
|
||
<ul>
|
||
<ul>
|
||
<ul>
|
||
<li class="toc-entry toc-h6"><a href="#完整的背景卡">完整的背景卡</a></li>
|
||
</ul>
|
||
</ul>
|
||
</ul>
|
||
</li>
|
||
<li class="toc-entry toc-h3"><a href="#此背景卡将在悬停时旋转">此背景卡将在悬停时旋转</a>
|
||
<ul>
|
||
<ul>
|
||
<li class="toc-entry toc-h5"><a href="#---------------管理邮政--------------------">
|
||
管理邮政
|
||
</a></li>
|
||
</ul>
|
||
</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">
|
||
<div class="row mt-4">
|
||
<a class="btn btn-default btn-sm ml-auto" href="https://github.com/creativetimofficial/material-dashboard-docs/edit/master/zh/docs/2.1/components/card.html" target="_blank">编辑于 Github</a>
|
||
</div>
|
||
<h1 class="bd-title" id="content">
|
||
牌
|
||
</h1>
|
||
<p class="bd-lead">Bootstrap的卡片提供灵活且可扩展的内容容器，具有多种变体和选项。</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 .card. The information inside the card usually goes inside the content (class .card-body). The content can have three types of elements inside: .card-title 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>如果你想在白色背景上使用这些卡片，可以使用“.card-plain”类删除它的阴影</p>
|
||
<h2 id="卡片标题类型">卡片标题类型</h2>
|
||
<p>The header of the cards start with the plain .card-header, then you can add other types of headers based on what you want to show like: <code class="highlighter-rouge">.card-header-icon</code> or <code class="highlighter-rouge">.card-header-text</code>.</p>
|
||
<div class="bd-example" data-example-id="">
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h4 class="card-title">常规标题</h4>
|
||
<p class="category">类别小标题</p>
|
||
</div>
|
||
<div class="card-body">
|
||
这个地方靠近巴塞罗那海滩和巴士站，步行只需2分钟，靠近“Naviglio”，在那里您可以享受巴塞罗那的主要夜生活......
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="card">
|
||
<div class="card-header card-header-danger">
|
||
<h4 class="card-title">全标头彩色</h4>
|
||
<p class="category">类别小标题</p>
|
||
</div>
|
||
<div class="card-body">
|
||
这个地方靠近巴塞罗那海滩和巴士站，步行只需2分钟，靠近“Naviglio”，在那里您可以享受巴塞罗那的主要夜生活......
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="card">
|
||
<div class="card-header card-header-icon card-header-rose">
|
||
<div class="card-icon">
|
||
<i class="material-icons">language</i>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<h4 class="card-title">这是Icon</h4>
|
||
这个地方靠近巴塞罗那海滩和巴士站，步行只需2分钟，靠近“Naviglio”，在那里您可以享受巴塞罗那的主要夜生活......
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="card">
|
||
<div class="card-header card-header-text card-header-primary">
|
||
<div class="card-text">
|
||
<h4 class="card-title">Here is the Text</h4>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
这个地方靠近巴塞罗那海滩和巴士站，步行只需2分钟，靠近“Naviglio”，在那里您可以享受巴塞罗那的主要夜生活......
|
||
</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"</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>常规标题<span class="nt"></h4></span>
|
||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"category"</span><span class="nt">></span>类别小标题<span class="nt"></p></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>
|
||
这个地方靠近巴塞罗那海滩和巴士站，步行只需2分钟，靠近“Naviglio”，在那里您可以享受巴塞罗那的主要夜生活......
|
||
<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-header-danger"</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>全标头彩色<span class="nt"></h4></span>
|
||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"category"</span><span class="nt">></span>类别小标题<span class="nt"></p></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>
|
||
这个地方靠近巴塞罗那海滩和巴士站，步行只需2分钟，靠近“Naviglio”，在那里您可以享受巴塞罗那的主要夜生活......
|
||
<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">"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-header-icon card-header-rose"</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>language<span class="nt"></i></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>这是Icon<span class="nt"></h4></span>
|
||
这个地方靠近巴塞罗那海滩和巴士站，步行只需2分钟，靠近“Naviglio”，在那里您可以享受巴塞罗那的主要夜生活......
|
||
<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-header-text card-header-primary"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-text"</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>Here is the Text<span class="nt"></h4></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>
|
||
这个地方靠近巴塞罗那海滩和巴士站，步行只需2分钟，靠近“Naviglio”，在那里您可以享受巴塞罗那的主要夜生活......
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre>
|
||
</div>
|
||
<h3 id="卡与动画---临-零件">卡与动画 - <a href="https://www.creative-tim.com/product/material-dashboard-pro?ref=md-docs" class="btn btn-primary btn-pro-component" target="_blank"><b>临</b> 零件</a></h3>
|
||
<p>We’ve created some special cards that can have actions under the header, you can activate those cards but adding the property <code class="highlighter-rouge">data-header-animation="true"</code>. Info: <strong>After 20x hovers</strong> of one of these cards you can break it:-)</p>
|
||
<p>要停止中断效果，您可以转到<code class="highlighter-rouge">assets js material-dashboard.js</code>并找到变量<code class="highlighter-rouge">breakCards = true</code>并将其设置为<code class="highlighter-rouge">false</code>。</p>
|
||
<div class="bd-example" data-example-id="">
|
||
<div class="row">
|
||
<div class="col-md-6 ml-auto mr-auto">
|
||
<div class="card card-chart">
|
||
<div class="card-header card-header-rose" data-header-animation="true">
|
||
<div class="ct-chart" id="websiteViewsChart"></div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="card-actions">
|
||
<button type="button" class="btn btn-danger btn-link fix-broken-card">
|
||
<i class="material-icons">build</i>修复标题!
|
||
</button>
|
||
<button type="button" class="btn btn-info btn-link" rel="tooltip" data-placement="bottom" title="Refresh">
|
||
<i class="material-icons">refresh</i>
|
||
</button>
|
||
<button type="button" class="btn btn-default btn-link" rel="tooltip" data-placement="bottom" title="Change Date">
|
||
<i class="material-icons">edit</i>
|
||
</button>
|
||
</div>
|
||
<h4 class="card-title">Website Views</h4>
|
||
<p class="card-category">上次广告系列效果</p>
|
||
</div>
|
||
<div class="card-footer">
|
||
<div class="stats">
|
||
<i class="material-icons">access_time</i>Compaign已发送 2 几天前
|
||
</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 ml-auto mr-auto"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-chart"</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="na">data-header-animation=</span><span class="s">"true"</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">"websiteViewsChart"</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"><div</span> <span class="na">class=</span><span class="s">"card-actions"</span><span class="nt">></span>
|
||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-danger btn-link fix-broken-card"</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>build<span class="nt"></i></span>修复标题!
|
||
<span class="nt"></button></span>
|
||
|
||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-info btn-link"</span> <span class="na">rel=</span><span class="s">"tooltip"</span> <span class="na">data-placement=</span><span class="s">"bottom"</span> <span class="na">title=</span><span class="s">"Refresh"</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>refresh<span class="nt"></i></span>
|
||
<span class="nt"></button></span>
|
||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default btn-link"</span> <span class="na">rel=</span><span class="s">"tooltip"</span> <span class="na">data-placement=</span><span class="s">"bottom"</span> <span class="na">title=</span><span class="s">"Change Date"</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>edit<span class="nt"></i></span>
|
||
<span class="nt"></button></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Website Views<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 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>Compaign已发送 2 几天前
|
||
<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>
|
||
<h3 id="卡片图表">卡片图表</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">每日销售</h4>
|
||
<p class="card-category"><span class="text-success"><i class="fa fa-long-arrow-up"></i> 55% </span>增加今天的销售额。</p>
|
||
</div>
|
||
<div class="card-footer">
|
||
<div class="stats">
|
||
<i class="material-icons">access_time</i>更新 4 几分钟前
|
||
</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">完成的任务</h4>
|
||
<p class="card-category">上次广告系列效果</p>
|
||
</div>
|
||
<div class="card-footer">
|
||
<div class="stats">
|
||
<i class="material-icons">access_time</i>
|
||
更新 2 几分钟前
|
||
</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>每日销售<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>增加今天的销售额。<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>更新 4 几分钟前
|
||
<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>完成的任务<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 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>
|
||
更新 2 几分钟前
|
||
<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>
|
||
<p><code class="highlighter-rouge">// INFO: #dailySalesChart is initialised inside assets/js/material-dashboard.js on method initDocumentationCharts()</code></p>
|
||
<h2 id="内容类型">内容类型</h2>
|
||
<p>卡支持各种内容，包括图像，文本，列表组，链接等。 以下是支持的示例。</p>
|
||
<h3 id="身体">身体</h3>
|
||
<p>卡的构建块是<code class="highlighter-rouge">.card-body</code>。 无论何时需要卡片中的填充部分，请使用它。</p>
|
||
<div class="bd-example" data-example-id="">
|
||
<div class="card">
|
||
<div class="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>
|
||
这是卡体内的一些文字
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre>
|
||
</div>
|
||
<h3 id="标题文字和链接">标题，文字和链接</h3>
|
||
<p>通过将<code class="highlighter-rouge">.card-title</code>添加到<code class="highlighter-rouge"><h></code>标签来使用卡片标题。 以同样的方式，通过将<code class="highlighter-rouge">.card-link</code>添加到<code class="highlighter-rouge"><a></code>标记，添加链接并将它们放在一起。</p>
|
||
<p>通过在<code class="highlighter-rouge"><h></code>标签中添加<code class="highlighter-rouge">.card-subtitle</code>来使用字幕。 如果<code class="highlighter-rouge">.card-title</code>和<code class="highlighter-rouge">.card-subtitle</code>项放在<code class="highlighter-rouge">.card-body</code>项中，则卡标题和副标题很好地对齐。</p>
|
||
<div class="bd-example" data-example-id="">
|
||
<div class="card" style="width: 20rem;">
|
||
<div class="card-body">
|
||
<h4 class="card-title">卡片标题</h4>
|
||
<h6 class="card-subtitle mb-2 text-muted">卡字幕</h6>
|
||
<p class="card-text">一些快速示例文本构建在卡片标题上，并构成卡片内容的大部分内容</p>
|
||
<a href="#0" class="card-link">卡链接</a>
|
||
<a href="#0" class="card-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>卡片标题<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>卡字幕<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>一些快速示例文本构建在卡片标题上，并构成卡片内容的大部分内容<span class="nt"></p></span>
|
||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#0"</span> <span class="na">class=</span><span class="s">"card-link"</span><span class="nt">></span>卡链接<span class="nt"></a></span>
|
||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#0"</span> <span class="na">class=</span><span class="s">"card-link"</span><span class="nt">></span>卡另一个链接<span class="nt"></a></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre>
|
||
</div>
|
||
<h3 id="图片">图片</h3>
|
||
<p>`.card-img-top<code class="highlighter-rouge">将图像放在卡片的顶部。 使用</code>.card-text<code class="highlighter-rouge">，可以将文本添加到卡中。 </code>.card-text`中的文本也可以使用标准HTML标记进行样式设置。</p>
|
||
<div class="bd-example" data-example-id="">
|
||
<div class="card" style="width: 20rem;">
|
||
<img class="card-img-top" src="https://images.unsplash.com/photo-1517303650219-83c8b1788c4c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bd4c162d27ea317ff8c67255e955e3c8&auto=format&fit=crop&w=2691&q=80" alt="Card image cap" />
|
||
<div class="card-body">
|
||
<p class="card-text">一些快速示例文本构建在卡片标题上，并构成卡片内容的大部分内容</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">"https://images.unsplash.com/photo-1517303650219-83c8b1788c4c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bd4c162d27ea317ff8c67255e955e3c8&auto=format&fit=crop&w=2691&q=80"</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>一些快速示例文本构建在卡片标题上，并构成卡片内容的大部分内容<span class="nt"></p></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre>
|
||
</div>
|
||
<h3 id="列出组">列出组</h3>
|
||
<p>使用刷新列表组创建卡中的内容列表。</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">
|
||
精选</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>
|
||
精选<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="页眉页脚">页眉页脚</h3>
|
||
<p>添加可选标头和</p>
|
||
<div class="bd-example" data-example-id="">
|
||
<div class="card card-nav-tabs">
|
||
<div class="card-header card-header-warning">
|
||
精选
|
||
</div>
|
||
<div class="card-body">
|
||
<h4 class="card-title">特殊标题处理</h4>
|
||
<p class="card-text">使用下面的支持文本作为添加内容的自然引入</p>
|
||
<a href="#0" class="btn btn-primary">去某地</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>
|
||
精选
|
||
<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>特殊标题处理<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>使用下面的支持文本作为添加内容的自然引入<span class="nt"></p></span>
|
||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#0"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>去某地<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">精选</h4>
|
||
<div class="card-body">
|
||
<h4 class="card-title">特殊标题处理</h4>
|
||
<p class="card-text">使用下面的支持文本作为添加内容的自然引入</p>
|
||
<a href="#0" class="btn btn-primary">去某地</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>精选<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>特殊标题处理<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>使用下面的支持文本作为添加内容的自然引入<span class="nt"></p></span>
|
||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#0"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>去某地<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">
|
||
精选
|
||
</div>
|
||
<div class="card-body">
|
||
<h4 class="card-title">特殊标题处理</h4>
|
||
<p class="card-text">使用下面的支持文本作为添加内容的自然引入</p>
|
||
<a href="#0" class="btn btn-primary">去某地</a>
|
||
</div>
|
||
<div class="card-footer text-muted">
|
||
2 几天前
|
||
</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>
|
||
精选
|
||
<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>特殊标题处理<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>使用下面的支持文本作为添加内容的自然引入<span class="nt"></p></span>
|
||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#0"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>去某地<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 几天前
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre>
|
||
</div>
|
||
<h2 id="文字对齐">文字对齐</h2>
|
||
<p>您可以使用我们的[文本对齐类]（{{site.baseurl}} docs {{site.docs_version}} utilities text＃text-alignment）快速更改任何卡片的文本对齐方式（完整或特定部分）。</p>
|
||
<div class="bd-example" data-example-id="">
|
||
<div class="card" style="width: 20rem;">
|
||
<div class="card-body">
|
||
<h4 class="card-title">特殊标题处理</h4>
|
||
<p class="card-text">使用下面的支持文本作为添加内容的自然引入</p>
|
||
<a href="#0" class="btn btn-primary">去某地</a>
|
||
</div>
|
||
</div>
|
||
<div class="card text-center" style="width: 20rem;">
|
||
<div class="card-body">
|
||
<h4 class="card-title">特殊标题处理</h4>
|
||
<p class="card-text">使用下面的支持文本作为添加内容的自然引入</p>
|
||
<a href="#0" class="btn btn-primary">去某地</a>
|
||
</div>
|
||
</div>
|
||
<div class="card text-right" style="width: 20rem;">
|
||
<div class="card-body">
|
||
<h4 class="card-title">特殊标题处理</h4>
|
||
<p class="card-text">使用下面的支持文本作为添加内容的自然引入</p>
|
||
<a href="#0" class="btn btn-primary">去某地</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>特殊标题处理<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>使用下面的支持文本作为添加内容的自然引入<span class="nt"></p></span>
|
||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#0"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>去某地<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>特殊标题处理<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>使用下面的支持文本作为添加内容的自然引入<span class="nt"></p></span>
|
||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#0"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>去某地<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>特殊标题处理<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>使用下面的支持文本作为添加内容的自然引入<span class="nt"></p></span>
|
||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#0"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>去某地<span class="nt"></a></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre>
|
||
</div>
|
||
<h2 id="导航">导航</h2>
|
||
<p>使用Bootstrap的[nav components]（{{site.baseurl}} docs {{site.docs_version}} components navs）向卡片的标题（或块）添加一些导航。</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="#0">活性</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#0">链接</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link disabled" href="#0">残障人士</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card-body">
|
||
<h4 class="card-title">特殊标题处理</h4>
|
||
<p class="card-text">使用下面的支持文本作为添加内容的自然引入</p>
|
||
<a href="#0" class="btn btn-primary">去某地</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">"#0"</span><span class="nt">></span>活性<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">"#0"</span><span class="nt">></span>链接<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">"#0"</span><span class="nt">></span>残障人士<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>特殊标题处理<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>使用下面的支持文本作为添加内容的自然引入<span class="nt"></p></span>
|
||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#0"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>去某地<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="#0">活性</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#0">链接</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link disabled" href="#0">残障人士</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card-body">
|
||
<h4 class="card-title">特殊标题处理</h4>
|
||
<p class="card-text">使用下面的支持文本作为添加内容的自然引入</p>
|
||
<a href="#0" class="btn btn-primary">去某地</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">"#0"</span><span class="nt">></span>活性<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">"#0"</span><span class="nt">></span>链接<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">"#0"</span><span class="nt">></span>残障人士<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>特殊标题处理<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>使用下面的支持文本作为添加内容的自然引入<span class="nt"></p></span>
|
||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#0"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>去某地<span class="nt"></a></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre>
|
||
</div>
|
||
<h2 id="图片-1">图片</h2>
|
||
<p>卡片包含一些处理图像的选项。 选择在卡的任一端添加“图像大写”，用卡片内容覆盖图像，或者只是将图像嵌入卡片中。</p>
|
||
<h3 id="图片上限">图片上限</h3>
|
||
<p>与页眉和页脚类似，卡片可以包括顶部和底部“图像上限” - 卡片顶部或底部的图像。</p>
|
||
<div class="bd-example" data-example-id="">
|
||
<div class="card mb-3">
|
||
<img class="card-img-top" src="https://images.unsplash.com/photo-1517303650219-83c8b1788c4c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bd4c162d27ea317ff8c67255e955e3c8&auto=format&fit=crop&w=2691&q=80" alt="Card image cap" />
|
||
<div class="card-body">
|
||
<h4 class="card-title">卡片标题</h4>
|
||
<p class="card-text">这是一张更宽的卡片，下面有支持文字作为其他内容的自然引导。这个内容有点长。</p>
|
||
<p class="card-text"><small class="text-muted">持续 更新 3 几分钟前</small></p>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="card-title">卡片标题</h4>
|
||
<p class="card-text">这是一张更宽的卡片，下面有支持文字作为其他内容的自然引导。这个内容有点长。</p>
|
||
<p class="card-text"><small class="text-muted">持续 更新 3 几分钟前</small></p>
|
||
</div>
|
||
<img class="card-img-bottom" src="https://images.unsplash.com/photo-1517303650219-83c8b1788c4c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bd4c162d27ea317ff8c67255e955e3c8&auto=format&fit=crop&w=2691&q=80" 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">"https://images.unsplash.com/photo-1517303650219-83c8b1788c4c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bd4c162d27ea317ff8c67255e955e3c8&auto=format&fit=crop&w=2691&q=80"</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>卡片标题<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>这是一张更宽的卡片，下面有支持文字作为其他内容的自然引导。这个内容有点长。<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>持续 更新 3 几分钟前<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>卡片标题<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>这是一张更宽的卡片，下面有支持文字作为其他内容的自然引导。这个内容有点长。<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>持续 更新 3 几分钟前<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">"https://images.unsplash.com/photo-1517303650219-83c8b1788c4c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bd4c162d27ea317ff8c67255e955e3c8&auto=format&fit=crop&w=2691&q=80"</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="图像叠加">图像叠加</h3>
|
||
<p>将图像转换为卡片背景并覆盖卡片的文本。 根据图像，您可能需要或可能不需要其他样式或实用程序。</p>
|
||
<div class="bd-example" data-example-id="">
|
||
<div class="card bg-dark text-white">
|
||
<img class="card-img" src="https://images.unsplash.com/photo-1517303650219-83c8b1788c4c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bd4c162d27ea317ff8c67255e955e3c8&auto=format&fit=crop&w=2691&q=80" alt="Card image" />
|
||
<div class="card-img-overlay">
|
||
<h4 class="card-title">卡片标题</h4>
|
||
<p class="card-text">这是一张更宽的卡片，下面有支持文字作为其他内容的自然引导。这个内容有点长。</p>
|
||
<p class="card-text">持续 更新 3 几分钟前</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">"https://images.unsplash.com/photo-1517303650219-83c8b1788c4c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bd4c162d27ea317ff8c67255e955e3c8&auto=format&fit=crop&w=2691&q=80"</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>卡片标题<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>这是一张更宽的卡片，下面有支持文字作为其他内容的自然引导。这个内容有点长。<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>持续 更新 3 几分钟前<span class="nt"></p></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre>
|
||
</div>
|
||
<h2 id="例子">例子</h2>
|
||
<h3 id="博客卡片---临零件">博客卡片 - <a href="https://www.creative-tim.com/product/material-dashboard-pro" class="btn btn-primary btn-pro-component" target="_blank"><b>临</b>零件</a></h3>
|
||
<div class="bd-example" data-example-id="">
|
||
<div class="card card-blog">
|
||
<div class="card-header card-header-image">
|
||
<a href="#pablo">
|
||
<img class="img" src="https://images.unsplash.com/photo-1511439817358-bee8e21790b5?auto=format&fit=crop&w=750&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" />
|
||
<div class="card-title">
|
||
今年夏天会很棒
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<div class="card-body">
|
||
<h6 class="card-category text-info">时尚</h6>
|
||
<p class="card-description">
|
||
不要害怕真相，因为我们需要重新启动人类基础的事实我爱你就像Kanye喜欢Kanye我喜欢Rick Owens的床设计，但背面是......
|
||
</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 card-blog"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header card-header-image"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#pablo"</span><span class="nt">></span>
|
||
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"img"</span> <span class="na">src=</span><span class="s">"https://images.unsplash.com/photo-1511439817358-bee8e21790b5?auto=format&fit=crop&w=750&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>
|
||
今年夏天会很棒
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></a></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"><h6</span> <span class="na">class=</span><span class="s">"card-category text-info"</span><span class="nt">></span>时尚<span class="nt"></h6></span>
|
||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-description"</span><span class="nt">></span>
|
||
不要害怕真相，因为我们需要重新启动人类基础的事实我爱你就像Kanye喜欢Kanye我喜欢Rick Owens的床设计，但背面是......
|
||
<span class="nt"></p></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre>
|
||
</div>
|
||
<div class="bd-example" data-example-id="">
|
||
<div class="card bg-info">
|
||
<div class="card-body">
|
||
<h5 class="card-category card-category-social">
|
||
<i class="fa fa-twitter"></i> Twitter
|
||
</h5>
|
||
<h4 class="card-title">
|
||
<a href="#pablo"> "你不必为了建立一个美妙的商业和生活而牺牲快乐"</a>
|
||
</h4>
|
||
<div class="card-stats">
|
||
<div class="author">
|
||
<a href="#pablo">
|
||
<img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=334&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="..." class="avatar img-raised" />
|
||
<span>Tania Andrew</span>
|
||
</a>
|
||
</div>
|
||
<div class="stats ml-auto">
|
||
<i class="material-icons">favorite</i> 2.4K ·
|
||
<i class="material-icons">share</i> 45
|
||
</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">"card bg-info"</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"><h5</span> <span class="na">class=</span><span class="s">"card-category card-category-social"</span><span class="nt">></span>
|
||
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-twitter"</span><span class="nt">></i></span> Twitter
|
||
<span class="nt"></h5></span>
|
||
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#pablo"</span><span class="nt">></span> "你不必为了建立一个美妙的商业和生活而牺牲快乐"<span class="nt"></a></span>
|
||
<span class="nt"></h4></span>
|
||
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-stats"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"author"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#pablo"</span><span class="nt">></span>
|
||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=334&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"</span> <span class="na">alt=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"avatar img-raised"</span><span class="nt">></span>
|
||
<span class="nt"><span></span>Tania Andrew<span class="nt"></span></span>
|
||
<span class="nt"></a></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"stats ml-auto"</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>favorite<span class="nt"></i></span> 2.4K <span class="ni">&#xB7;</span>
|
||
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">></span>share<span class="nt"></i></span> 45
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre>
|
||
</div>
|
||
<div class="bd-example" data-example-id="">
|
||
<div class="card">
|
||
<div class="card-body ">
|
||
<h6 class="card-category text-danger">
|
||
<i class="material-icons">trending_up</i>趋势
|
||
</h6>
|
||
<h4 class="card-title">
|
||
<a href="#pablo">发展您的业务开始关注您的员工</a>
|
||
</h4>
|
||
</div>
|
||
<div class="card-footer ">
|
||
<div class="author">
|
||
<a href="#pablo">
|
||
<img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=334&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="..." class="avatar img-raised" />
|
||
<span>Lord Alex</span>
|
||
</a>
|
||
</div>
|
||
<div class="stats ml-auto">
|
||
<i class="material-icons">favorite</i> 342 ·
|
||
<i class="material-icons">chat_bubble</i> 45
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body "</span><span class="nt">></span>
|
||
<span class="nt"><h6</span> <span class="na">class=</span><span class="s">"card-category text-danger"</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>trending_up<span class="nt"></i></span>趋势
|
||
<span class="nt"></h6></span>
|
||
<span class="nt"><h4</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#pablo"</span><span class="nt">></span>发展您的业务开始关注您的员工<span class="nt"></a></span>
|
||
<span class="nt"></h4></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">"author"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#pablo"</span><span class="nt">></span>
|
||
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=334&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"</span> <span class="na">alt=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"avatar img-raised"</span><span class="nt">></span>
|
||
<span class="nt"><span></span>Lord Alex<span class="nt"></span></span>
|
||
<span class="nt"></a></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"stats ml-auto"</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>favorite<span class="nt"></i></span> 342 <span class="ni">&#xB7;</span>
|
||
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">></span>chat_bubble<span class="nt"></i></span> 45
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre>
|
||
</div>
|
||
<h3 id="档案卡---临零件">档案卡 - <a href="https://www.creative-tim.com/product/material-dashboard-pro" class="btn btn-primary btn-pro-component" target="_blank"><b>临</b>零件</a></h3>
|
||
<div class="bd-example" data-example-id="">
|
||
<div class="card card-profile ml-auto mr-auto" style="max-width: 360px">
|
||
<div class="card-header card-header-image">
|
||
<a href="#pablo">
|
||
<img class="img" src="https://images.unsplash.com/photo-1492447273231-0f8fecec1e3a?auto=format&fit=crop&w=334&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" />
|
||
</a>
|
||
</div>
|
||
<div class="card-body ">
|
||
<h4 class="card-title">Alec Thompson</h4>
|
||
<h6 class="card-category text-gray">CEO / Co-Founder</h6>
|
||
</div>
|
||
<div class="card-footer justify-content-center">
|
||
<a href="#pablo" class="btn btn-just-icon btn-twitter btn-round">
|
||
<i class="fa fa-twitter"></i>
|
||
</a>
|
||
<a href="#pablo" class="btn btn-just-icon btn-facebook btn-round">
|
||
<i class="fa fa-facebook-square"></i>
|
||
</a>
|
||
<a href="#pablo" class="btn btn-just-icon btn-google btn-round">
|
||
<i class="fa fa-google"></i>
|
||
</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-profile ml-auto mr-auto"</span> <span class="na">style=</span><span class="s">"max-width: 360px"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header card-header-image"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#pablo"</span><span class="nt">></span>
|
||
<span class="nt"><img</span> <span class="na">class=</span><span class="s">"img"</span> <span class="na">src=</span><span class="s">"https://images.unsplash.com/photo-1492447273231-0f8fecec1e3a?auto=format&fit=crop&w=334&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"</span><span class="nt">></span>
|
||
<span class="nt"></a></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>Alec Thompson<span class="nt"></h4></span>
|
||
<span class="nt"><h6</span> <span class="na">class=</span><span class="s">"card-category text-gray"</span><span class="nt">></span>CEO / Co-Founder<span class="nt"></h6></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-footer justify-content-center"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#pablo"</span> <span class="na">class=</span><span class="s">"btn btn-just-icon btn-twitter btn-round"</span><span class="nt">></span>
|
||
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-twitter"</span><span class="nt">></i></span>
|
||
<span class="nt"></a></span>
|
||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#pablo"</span> <span class="na">class=</span><span class="s">"btn btn-just-icon btn-facebook btn-round"</span><span class="nt">></span>
|
||
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-facebook-square"</span><span class="nt">></i></span>
|
||
<span class="nt"></a></span>
|
||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#pablo"</span> <span class="na">class=</span><span class="s">"btn btn-just-icon btn-google btn-round"</span><span class="nt">></span>
|
||
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"fa fa-google"</span><span class="nt">></i></span>
|
||
<span class="nt"></a></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre>
|
||
</div>
|
||
<h3 id="完整的背景卡---临零件">完整的背景卡 - <a href="https://www.creative-tim.com/product/material-dashboard-pro" class="btn btn-primary btn-pro-component" target="_blank"><b>临</b>零件</a></h3>
|
||
<div class="bd-example" data-example-id="">
|
||
<div class="card card-background" style="background-image: url('https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=750&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D')">
|
||
<div class="card-body">
|
||
<h6 class="card-category text-info">市场上的生产力应用程序</h6>
|
||
<a href="#pablo">
|
||
<h3 class="card-title">最佳生产力应用程序</h3>
|
||
</a>
|
||
<p class="card-description">
|
||
不要害怕真相，因为我们需要重新启动人类基础的事实我爱你就像Kanye喜欢Kanye我喜欢Rick Owens的床设计，但背面是......
|
||
</p>
|
||
<a href="#pablo" class="btn btn-white btn-link">
|
||
<i class="material-icons">subject</i>阅读文章
|
||
</a>
|
||
<a href="#pablo" class="btn btn-white btn-link">
|
||
<i class="material-icons">watch_later</i>稍后观看
|
||
</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-background"</span> <span class="na">style=</span><span class="s">"background-image: url('https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=750&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D')"</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"><h6</span> <span class="na">class=</span><span class="s">"card-category text-info"</span><span class="nt">></span>市场上的生产力应用程序<span class="nt"></h6></span>
|
||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#pablo"</span><span class="nt">></span>
|
||
<span class="nt"><h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>最佳生产力应用程序<span class="nt"></h3></span>
|
||
<span class="nt"></a></span>
|
||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-description"</span><span class="nt">></span>
|
||
不要害怕真相，因为我们需要重新启动人类基础的事实我爱你就像Kanye喜欢Kanye我喜欢Rick Owens的床设计，但背面是......
|
||
<span class="nt"></p></span>
|
||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#pablo"</span> <span class="na">class=</span><span class="s">"btn btn-white btn-link"</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>subject<span class="nt"></i></span>阅读文章
|
||
<span class="nt"></a></span>
|
||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#pablo"</span> <span class="na">class=</span><span class="s">"btn btn-white btn-link"</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>watch_later<span class="nt"></i></span>稍后观看
|
||
<span class="nt"></a></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span></code></pre>
|
||
</div>
|
||
<h3 id="定价卡---临零件">定价卡 - <a href="https://www.creative-tim.com/product/material-dashboard-pro" class="btn btn-primary btn-pro-component" target="_blank"><b>临</b>零件</a></h3>
|
||
<div class="bd-example" data-example-id="">
|
||
<div class="row">
|
||
<div class="col-md-4 ml-auto mr-auto">
|
||
<div class="card card-pricing bg-primary">
|
||
<div class="card-body ">
|
||
<div class="card-icon">
|
||
<i class="material-icons text-white">business</i>
|
||
</div>
|
||
<h3 class="card-title">$69</h3>
|
||
<p class="card-description">
|
||
如果您的公司规模在11到99人之间，这很好。
|
||
</p>
|
||
<a href="#pablo" class="btn btn-white btn-round">选择计划</a>
|
||
</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-4 ml-auto mr-auto"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-pricing bg-primary"</span><span class="nt">><div</span> <span class="na">class=</span><span class="s">"card-body "</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-icon"</span><span class="nt">></span>
|
||
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"material-icons text-white"</span><span class="nt">></span>business<span class="nt"></i></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>$69<span class="nt"></h3></span>
|
||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-description"</span><span class="nt">></span>
|
||
如果您的公司规模在11到99人之间，这很好。
|
||
<span class="nt"></p></span>
|
||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#pablo"</span> <span class="na">class=</span><span class="s">"btn btn-white btn-round"</span><span class="nt">></span>选择计划<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></code></pre>
|
||
</div>
|
||
<h3 id="旋转卡---临零件">旋转卡 - <a href="https://www.creative-tim.com/product/material-dashboard-pro" class="btn btn-primary btn-pro-component" target="_blank"><b>临</b>零件</a></h3>
|
||
<div class="bd-example" data-example-id="">
|
||
<div class="row">
|
||
<div class="col-md-6 ml-auto mr-auto">
|
||
<div class="rotating-card-container">
|
||
<div class="card card-rotate card-background">
|
||
<div class="front front-background" style="background-image:url('https://images.unsplash.com/photo-1493787039806-2edcbe808750?auto=format&fit=crop&w=750&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D');">
|
||
<div class="card-body">
|
||
<h6 class="card-category">完整的背景卡</h6>
|
||
<a href="#pablo">
|
||
<h3 class="card-title">此背景卡将在悬停时旋转</h3>
|
||
</a>
|
||
<p class="card-description">
|
||
不要害怕真相，因为我们需要重新启动人类基础的事实我爱你就像Kanye喜欢Kanye我喜欢Rick Owens的床设计，但背面是......
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="back back-background" style="background-image: url('https://images.unsplash.com/photo-1493787039806-2edcbe808750?auto=format&fit=crop&w=750&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D');">
|
||
<div class="card-body">
|
||
<h5 class="card-title">
|
||
管理邮政
|
||
</h5>
|
||
<p class="card-description">作为管理员，您可以使用快捷方式编辑，查看或删除帖子。</p>
|
||
<div class="footer justify-content-center">
|
||
<a href="#pablo" class="btn btn-info btn-just-icon btn-fill btn-round">
|
||
<i class="material-icons">subject</i>
|
||
</a>
|
||
<a href="#pablo" class="btn btn-success btn-just-icon btn-fill btn-round btn-wd">
|
||
<i class="material-icons">mode_edit</i>
|
||
</a>
|
||
<a href="#pablo" class="btn btn-danger btn-just-icon btn-fill btn-round">
|
||
<i class="material-icons">delete</i>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</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 ml-auto mr-auto"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"rotating-card-container"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"card card-rotate card-background"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"front front-background"</span> <span class="na">style=</span><span class="s">"background-image:url('https://images.unsplash.com/photo-1493787039806-2edcbe808750?auto=format&fit=crop&w=750&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D');"</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"><h6</span> <span class="na">class=</span><span class="s">"card-category"</span><span class="nt">></span>完整的背景卡<span class="nt"></h6></span>
|
||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#pablo"</span><span class="nt">></span>
|
||
<span class="nt"><h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>此背景卡将在悬停时旋转<span class="nt"></h3></span>
|
||
<span class="nt"></a></span>
|
||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-description"</span><span class="nt">></span>
|
||
不要害怕真相，因为我们需要重新启动人类基础的事实我爱你就像Kanye喜欢Kanye我喜欢Rick Owens的床设计，但背面是......
|
||
<span class="nt"></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">"back back-background"</span> <span class="na">style=</span><span class="s">"background-image: url('https://images.unsplash.com/photo-1493787039806-2edcbe808750?auto=format&fit=crop&w=750&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D');"</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"><h5</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>
|
||
管理邮政
|
||
<span class="nt"></h5></span>
|
||
<span class="nt"><p</span> <span class="na">class=</span><span class="s">"card-description"</span><span class="nt">></span>作为管理员，您可以使用快捷方式编辑，查看或删除帖子。<span class="nt"></p></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"footer justify-content-center"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#pablo"</span> <span class="na">class=</span><span class="s">"btn btn-info btn-just-icon btn-fill btn-round"</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>subject<span class="nt"></i></span>
|
||
<span class="nt"></a></span>
|
||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#pablo"</span> <span class="na">class=</span><span class="s">"btn btn-success btn-just-icon btn-fill btn-round btn-wd"</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>mode_edit<span class="nt"></i></span>
|
||
<span class="nt"></a></span>
|
||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#pablo"</span> <span class="na">class=</span><span class="s">"btn btn-danger btn-just-icon btn-fill btn-round"</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>delete<span class="nt"></i></span>
|
||
<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="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"></script>
|
||
<script src="../../../../assets-old/js/core/popper.min.js"></script>
|
||
<script src="../../../../assets-old/js/core/bootstrap-material-design.min.js"></script>
|
||
<script src="../../../../assets-old/js/plugins/perfect-scrollbar.jquery.min.js"></script>
|
||
<!-- Plugin for the momentJs -->
|
||
<script src="../../../../assets-old/js/plugins/moment.min.js"></script>
|
||
<!-- Plugin for Sweet Alert -->
|
||
<script src="../../../../assets-old/js/plugins/sweetalert2.js"></script>
|
||
<!-- Forms Validations Plugin -->
|
||
<script src="../../../../assets-old/js/plugins/jquery.validate.min.js"></script>
|
||
<!-- Plugin for the Wizard, full documentation here: https://github.com/VinceG/twitter-bootstrap-wizard -->
|
||
<script src="../../../../assets-old/js/plugins/jquery.bootstrap-wizard.js"></script>
|
||
<!-- Plugin for Select, full documentation here: http://silviomoreto.github.io/bootstrap-select -->
|
||
<script src="../../../../assets-old/js/plugins/bootstrap-selectpicker.js"></script>
|
||
<!-- Plugin for the DateTimePicker, full documentation here: https://eonasdan.github.io/bootstrap-datetimepicker/ -->
|
||
<script src="../../../../assets-old/js/plugins/bootstrap-datetimepicker.min.js"></script>
|
||
<!-- DataTables.net Plugin, full documentation here: https://datatables.net/ -->
|
||
<script src="../../../../assets-old/js/plugins/jquery.dataTables.min.js"></script>
|
||
<!-- Plugin for Tags, full documentation here: https://github.com/bootstrap-tagsinput/bootstrap-tagsinputs -->
|
||
<script src="../../../../assets-old/js/plugins/bootstrap-tagsinput.js"></script>
|
||
<!-- Plugin for Fileupload, full documentation here: http://www.jasny.net/bootstrap/javascript/#fileinput -->
|
||
<script src="../../../../assets-old/js/plugins/jasny-bootstrap.min.js"></script>
|
||
<!-- Full Calendar Plugin, full documentation here: https://github.com/fullcalendar/fullcalendar -->
|
||
<script src="../../../../assets-old/js/plugins/fullcalendar.min.js"></script>
|
||
<!-- Vector Map plugin, full documentation here: http://jvectormap.com/documentation/ -->
|
||
<script src="../../../../assets-old/js/plugins/jquery-jvectormap.js"></script>
|
||
<!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
|
||
<script src="../../../../assets-old/js/plugins/nouislider.min.js"></script>
|
||
<!-- Include a polyfill for ES6 Promises (optional) for IE11, UC Browser and Android browser support SweetAlert -->
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.js"></script>
|
||
<!-- Library for adding dinamically elements -->
|
||
<script src="../../../../assets-old/js/plugins/arrive.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.1" 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() {
|
||
if ($('.card-header.card-chart').length != 0) {
|
||
md.initDashboardPageCharts();
|
||
}
|
||
|
||
if ($('#websiteViewsChart').length != 0) {
|
||
md.initDocumentationCharts();
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
if ($('.datetimepicker').length != 0) {
|
||
md.initFormExtendedDatetimepickers();
|
||
}
|
||
if ($('#fullCalendar').length != 0) {
|
||
md.initFullCalendar();
|
||
}
|
||
|
||
if ($('.slider').length != 0) {
|
||
md.initSliders();
|
||
}
|
||
|
||
// Activate the tooltips
|
||
$('[data-toggle="tooltip"]').tooltip();
|
||
|
||
// Activate Popovers
|
||
$('[data-toggle="popover"]').popover();
|
||
|
||
// Vector map
|
||
if ($('#worldMap').length != 0) {
|
||
md.initVectorMap();
|
||
}
|
||
|
||
if ($('#RegisterValidation').length != 0) {
|
||
|
||
setFormValidation('#RegisterValidation');
|
||
|
||
function setFormValidation(id) {
|
||
$(id).validate({
|
||
highlight: function(element) {
|
||
$(element).closest('.form-group').removeClass('has-success').addClass('has-danger');
|
||
$(element).closest('.form-check').removeClass('has-success').addClass('has-danger');
|
||
},
|
||
success: function(element) {
|
||
$(element).closest('.form-group').removeClass('has-danger').addClass('has-success');
|
||
$(element).closest('.form-check').removeClass('has-danger').addClass('has-success');
|
||
},
|
||
errorPlacement: function(error, element) {
|
||
$(element).closest('.form-group').append(error);
|
||
},
|
||
});
|
||
}
|
||
}
|
||
|
||
});
|
||
|
||
// FileInput
|
||
$('.form-file-simple .inputFileVisible').click(function() {
|
||
$(this).siblings('.inputFileHidden').trigger('click');
|
||
});
|
||
|
||
$('.form-file-simple .inputFileHidden').change(function() {
|
||
var filename = $(this).val().replace(/C:\\fakepath\\/i, '');
|
||
$(this).siblings('.inputFileVisible').val(filename);
|
||
});
|
||
|
||
$('.form-file-multiple .inputFileVisible, .form-file-multiple .input-group-btn').click(function() {
|
||
$(this).parent().parent().find('.inputFileHidden').trigger('click');
|
||
$(this).parent().parent().addClass('is-focused');
|
||
});
|
||
|
||
$('.form-file-multiple .inputFileHidden').change(function() {
|
||
var names = '';
|
||
for (var i = 0; i < $(this).get(0).files.length; ++i) {
|
||
if (i < $(this).get(0).files.length - 1) {
|
||
names += $(this).get(0).files.item(i).name + ',';
|
||
} else {
|
||
names += $(this).get(0).files.item(i).name;
|
||
}
|
||
}
|
||
$(this).siblings('.input-group').find('.inputFileVisible').val(names);
|
||
});
|
||
|
||
$('.form-file-multiple .btn').on('focus', function() {
|
||
$(this).parent().siblings().trigger('focus');
|
||
});
|
||
|
||
$('.form-file-multiple .btn').on('focusout', function() {
|
||
$(this).parent().siblings().trigger('focusout');
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html> |