creativetimofficial--ui
Stefan
1840 行
130 KiB
HTML
1840 行
130 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="../../../../zh/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="../../../../ja/docs/2.1/getting-started/introduction.html">
|
||
前書き
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../ja/docs/2.1/getting-started/license.html">
|
||
ライセンス
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../ja/docs/2.1/getting-started/file-structure.html">
|
||
ファイル構造
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../ja/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="../../../../ja/docs/2.1/components/alerts.html">
|
||
アラート
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../ja/docs/2.1/components/badge.html">
|
||
バッジ
|
||
<span class="badge badge-primary">プロ</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../ja/docs/2.1/components/breadcrumb.html">
|
||
ブレッドクラム
|
||
<span class="badge badge-primary">プロ</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../ja/docs/2.1/components/buttons.html">
|
||
ボタン
|
||
</a>
|
||
</li>
|
||
<li class="active bd-sidenav-active">
|
||
<a href="../../../../ja/docs/2.1/components/card.html">
|
||
カード
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../ja/docs/2.1/components/carousel.html">
|
||
カルーセル
|
||
<span class="badge badge-primary">プロ</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../ja/docs/2.1/components/collapse.html">
|
||
崩壊
|
||
<span class="badge badge-primary">プロ</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../ja/docs/2.1/components/dropdowns.html">
|
||
ドロップダウン
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../ja/docs/2.1/components/forms.html">
|
||
フォーム
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../ja/docs/2.1/components/google-maps.html">
|
||
グーグルマップ
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../ja/docs/2.1/components/info-areas.html">
|
||
情報エリア
|
||
<span class="badge badge-primary">プロ</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../ja/docs/2.1/components/material-icons.html">
|
||
素材のアイコン
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../ja/docs/2.1/components/modal.html">
|
||
モーダル
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../ja/docs/2.1/components/navs.html">
|
||
ナビ
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../ja/docs/2.1/components/navbar.html">
|
||
ナビバー
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../ja/docs/2.1/components/pagination.html">
|
||
ページ付け
|
||
<span class="badge badge-primary">プロ</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../ja/docs/2.1/components/parallax.html">
|
||
視差
|
||
<span class="badge badge-primary">プロ</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../ja/docs/2.1/components/popovers.html">
|
||
ポップオーバー
|
||
<span class="badge badge-primary">プロ</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../ja/docs/2.1/components/progress.html">
|
||
進捗
|
||
<span class="badge badge-primary">プロ</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../ja/docs/2.1/components/tables.html">
|
||
テーブル
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../ja/docs/2.1/components/tooltips.html">
|
||
ツールチップ
|
||
<span class="badge badge-primary">プロ</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../ja/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="../../../../ja/docs/2.1/plugins/bootstrap-notify.html">
|
||
ブートストラップ通知
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../ja/docs/2.1/plugins/perfect-scrollbar.html">
|
||
完璧なスクロールバー
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../ja/docs/2.1/plugins/bootstrap-switch.html">
|
||
ブートストラップスイッチ
|
||
<span class="badge badge-primary">プロ</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../ja/docs/2.1/plugins/datetimepicker.html">
|
||
日時ピッカー
|
||
<span class="badge badge-primary">プロ</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../ja/docs/2.1/plugins/fullcalendar.html">
|
||
フルカレンダー
|
||
<span class="badge badge-primary">プロ</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../ja/docs/2.1/plugins/jvector-map.html">
|
||
jベクトルマップ
|
||
<span class="badge badge-primary">プロ</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../ja/docs/2.1/plugins/sweet-alert-2.html">
|
||
スウィートアラート
|
||
<span class="badge badge-primary">プロ</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../ja/docs/2.1/plugins/jquery-validation.html">
|
||
JQuery 検証as
|
||
<span class="badge badge-primary">プロ</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../ja/docs/2.1/plugins/fileupload-jasny.html">
|
||
ファイルのアップロードJasny
|
||
<span class="badge badge-primary">プロ</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../ja/docs/2.1/plugins/jquery-tagsinput.html">
|
||
jQueryのタグ入力
|
||
<span class="badge badge-primary">プロ</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../ja/docs/2.1/plugins/select-bootstrap.html">
|
||
ブートストラップを選択
|
||
<span class="badge badge-primary">プロ</span>
|
||
</a>
|
||
</li>
|
||
<li class="">
|
||
<a href="../../../../ja/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="#これがアイコンです">これがアイコンです</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/ja/docs/2.1/components/card.html" target="_blank">編集 Github</a>
|
||
</div>
|
||
<h1 class="bd-title" id="content">
|
||
カード
|
||
</h1>
|
||
<p class="bd-lead">ブートストラップのカードは、複数のバリエーションとオプションを備えた柔軟で拡張可能なコンテンツコンテナを提供します。</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>白い背景の上でカードを使いたいのなら、 <code class="highlighter-rouge">.card-plain</code>クラスを使ってカードの影を消すことができます。</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分、バルセロナのメインナイトライフを楽しめる「ナヴィーリオ」の近くです。
|
||
</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分、バルセロナのメインナイトライフを楽しめる「ナヴィーリオ」の近くです。
|
||
</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">これがアイコンです</h4>
|
||
場所は、バルセロネータビーチとバス停から徒歩でわずか2分、バルセロナのメインナイトライフを楽しめる「ナヴィーリオ」の近くです。
|
||
</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分、バルセロナのメインナイトライフを楽しめる「ナヴィーリオ」の近くです。
|
||
</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分、バルセロナのメインナイトライフを楽しめる「ナヴィーリオ」の近くです。
|
||
<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分、バルセロナのメインナイトライフを楽しめる「ナヴィーリオ」の近くです。
|
||
<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>これがアイコンです<span class="nt"></h4></span>
|
||
場所は、バルセロネータビーチとバス停から徒歩でわずか2分、バルセロナのメインナイトライフを楽しめる「ナヴィーリオ」の近くです。
|
||
<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分、バルセロナのメインナイトライフを楽しめる「ナヴィーリオ」の近くです。
|
||
<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>送信済みをコンパイン 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>送信済みをコンパイン 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"><a></code>タグに <code class="highlighter-rouge">.card-link</code>を追加することでリンクが追加されて隣同士に配置されます。</p>
|
||
<p>字幕は <code class="highlighter-rouge">.card-subtitle</code>を<code class="highlighter-rouge"> <h *> </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">もう1つのカードをリンク</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>もう1つのカードをリンク<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">追加コンテンツへの自然な導入として、下記のSupporting 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>追加コンテンツへの自然な導入として、下記のSupporting text<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">追加コンテンツへの自然な導入として、下記のSupporting 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>追加コンテンツへの自然な導入として、下記のSupporting text<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">
|
||
見積もり
|
||
</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>
|
||
見積もり
|
||
<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">追加コンテンツへの自然な導入として、下記のSupporting 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>追加コンテンツへの自然な導入として、下記のSupporting text<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>[text align classes]（{{site.baseurl}} / docs / {{site.docs_version}} / utilities / text /＃textを使用すると、カードのテキストの配置を全体的にまたは特定の部分ですばやく変更できます。 - アライメント）。</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">追加コンテンツへの自然な導入として、下記のSupporting 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">追加コンテンツへの自然な導入として、下記のSupporting 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">追加コンテンツへの自然な導入として、下記のSupporting 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>追加コンテンツへの自然な導入として、下記のSupporting text<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>追加コンテンツへの自然な導入として、下記のSupporting text<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>追加コンテンツへの自然な導入として、下記のSupporting text<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">追加コンテンツへの自然な導入として、下記のSupporting 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>追加コンテンツへの自然な導入として、下記のSupporting text<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">追加コンテンツへの自然な導入として、下記のSupporting 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>追加コンテンツへの自然な導入として、下記のSupporting text<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">
|
||
私たちは真実に人間の基盤を再起動する必要があるので、真実を怖がってはいけないそして、私はカニエを愛してカニエを愛して私はリックオーウェンズのベッドデザインを愛するが、後ろは...
|
||
</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>
|
||
私たちは真実に人間の基盤を再起動する必要があるので、真実を怖がってはいけないそして、私はカニエを愛してカニエを愛して私はリックオーウェンズのベッドデザインを愛するが、後ろは...
|
||
<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">
|
||
私たちは真実に人間の基盤を再起動する必要があるので、真実を怖がってはいけないそして、私はカニエを愛してカニエを愛して私はリックオーウェンズのベッドデザインを愛するが、後ろは...
|
||
</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>
|
||
私たちは真実に人間の基盤を再起動する必要があるので、真実を怖がってはいけないそして、私はカニエを愛してカニエを愛して私はリックオーウェンズのベッドデザインを愛するが、後ろは...
|
||
<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">
|
||
私たちは真実に人間の基盤を再起動する必要があるので、真実を怖がってはいけないそして、私はカニエを愛してカニエを愛して私はリックオーウェンズのベッドデザインを愛するが、後ろは...
|
||
</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>
|
||
私たちは真実に人間の基盤を再起動する必要があるので、真実を怖がってはいけないそして、私はカニエを愛してカニエを愛して私はリックオーウェンズのベッドデザインを愛するが、後ろは...
|
||
<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> |