mirrors / creativetimofficial--ui

项目文件夹

creativetimofficial--ui
文件
refactor/gh-pages
T

873 行
47 KiB
HTML
原始文件 永久链接 Blame 文件历史

<!--
=========================================================
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/collapse" />
<link rel="alternate" hreflang="ja" href="https://demos.creative-tim.com/material-dashboard/ja/docs/2.1/components/collapse" />
<link rel="alternate" hreflang="en" href="https://demos.creative-tim.com/material-dashboard/docs/2.1/components/collapse" />
<link rel="alternate" hreflang="x-default" href="https://demos.creative-tim.com/material-dashboard/docs/2.1/components/collapse" />
<!-- Documentation extras -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
<link rel="stylesheet" href="../../../../assets-old/demo/docs.min.css">
<style>
.navbar-absolute-logo {
padding-left: 45px;
}
.navbar-absolute-logo img {
position: absolute;
left: 15px;
margin-top: -6px;
}
body {
background: white;
}
</style>
<!-- CSS Just for demo purpose, don't include it in your project -->
<link href="../../../../assets-old/demo/demo.css" rel="stylesheet" />
<!-- Google Tag Manager -->
<script>
(function(w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({
'gtm.start': new Date().getTime(),
event: 'gtm.js'
});
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-NKDMSK6');
</script>
<!-- End Google Tag Manager -->
</head>
<body class="bd-docs" data-spy="scroll" data-target=".bd-sidenav-active">
<!-- Extra details for Live View on GitHub Pages -->
<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NKDMSK6" height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container">
<span class="skiplink-text">Skip to main content</span>
</div>
</a>
<header class="navbar navbar-expand navbar-dark bg-primary flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2 navbar-absolute-logo" href="https://www.creative-tim.com/product/material-dashboard" target="_blank">
材料仪表板
</a>
<ul class="navbar-nav flex-row d-none d-md-flex">
<!-- <li class="nav-item">
<a class="nav-link p-2" href="#version">
2.1.1
</a>
</li> -->
<li class="nav-item dropdown">
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
v2.1.1
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
<a class="dropdown-item active" href="../../../../docs/2.1/getting-started/introduction.html">BS4 - 2.1.1</a>
<a class="dropdown-item" href="../../../../docs/2.0/getting-started/introduction.html">BS4 - 2.1.0</a>
<a class="dropdown-item" href="https://demos.creative-tim.com/bs3/material-dashboard/documentation/tutorial-components.html" target="_blank">BS3 - 1.0</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://github.com/creativetimofficial/material-dashboard" target="_blank" rel="noopener" aria-label="GitHub">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
<title>GitHub</title>
<path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd" />
</svg>
</a>
</li>
<li class="nav-item">
<a class="nav-link p-2" href="https://twitter.com/CreativeTim" target="_blank" rel="noopener" aria-label="Twitter">
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false">
<title>Twitter</title>
<path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor" />
</svg>
</a>
</li>
</ul>
<div class="navbar-nav-scroll ml-md-auto ">
<ul class="navbar-nav bd-navbar-nav flex-row">
<li class="nav-item">
<a class="nav-link" href="https://www.creative-tim.com/product/material-dashboard"> <i class="material-icons">card_membership</i> 升级到专业版 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://demos.creative-tim.com/material-dashboard-bs4/examples/dashboard.html"><i class="material-icons">view_carousel</i> 实时预览</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/creativetimofficial/material-dashboard" target="_blank" rel="noopener"><i class="material-icons">star</i>
帮助明星
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="introduction.html#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded=" ">
<i class="material-icons">translate </i>
中文
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
<a class="dropdown-item active dropdown-flag-holder" href="#">
中文
</a>
<a class="dropdown-item dropdown-flag-holder" href="../../../../docs/2.1/getting-started/introduction.html">ENGLISH
</a>
<a class="dropdown-item dropdown-flag-holder" href="../../../../ja/docs/2.1/getting-started/introduction.html">日本人
</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="" target="_blank" rel="noopener"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="" target="_blank" rel="noopener"></a>
</li>
</ul>
</div>
<a href="https://github.com/creativetimofficial/material-dashboard" class="github-corner" aria-label="View source on Github">
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#fff; color:#9c27b0; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
</svg></a>
<style>
.github-corner:hover .octo-arm {
animation: octocat-wave 560ms ease-in-out
}
@keyframes octocat-wave {
0%,
100% {
transform: rotate(0)
}
20%,
60% {
transform: rotate(-25deg)
}
40%,
80% {
transform: rotate(10deg)
}
}
@media (max-width:500px) {
.github-corner:hover .octo-arm {
animation: none
}
.github-corner .octo-arm {
animation: octocat-wave 560ms ease-in-out
}
}
</style>
</header>
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
<nav class="collapse bd-links" id="bd-docs-nav">
<div class="bd-toc-item active">
<a class="bd-toc-link" href="#docs">
入门
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="../../../../zh/docs/2.1/getting-started/introduction.html">
介绍
</a>
</li>
<li class="">
<a href="../../../../zh/docs/2.1/getting-started/license.html">
执照
</a>
</li>
<li class="">
<a href="../../../../zh/docs/2.1/getting-started/file-structure.html">
文件结构
</a>
</li>
<li class="">
<a href="../../../../zh/docs/2.1/getting-started/build-tools.html">
构建工具
</a>
</li>
</ul>
</div>
<div class="bd-toc-item active">
<a class="bd-toc-link" href="#docs">
组件
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="../../../../zh/docs/2.1/components/alerts.html">
警报
</a>
</li>
<li class="">
<a href="../../../../zh/docs/2.1/components/badge.html">
徽章
<span class="badge badge-primary">临</span>
</a>
</li>
<li class="">
<a href="../../../../zh/docs/2.1/components/breadcrumb.html">
面包屑
<span class="badge badge-primary">临</span>
</a>
</li>
<li class="">
<a href="../../../../zh/docs/2.1/components/buttons.html">
纽扣
</a>
</li>
<li class="">
<a href="../../../../zh/docs/2.1/components/card.html">
卡
</a>
</li>
<li class="">
<a href="../../../../zh/docs/2.1/components/carousel.html">
圆盘传送带
<span class="badge badge-primary">临</span>
</a>
</li>
<li class="active bd-sidenav-active">
<a href="../../../../zh/docs/2.1/components/collapse.html">
坍方
<span class="badge badge-primary">临</span>
</a>
</li>
<li class="">
<a href="../../../../zh/docs/2.1/components/dropdowns.html">
下拉菜单
</a>
</li>
<li class="">
<a href="../../../../zh/docs/2.1/components/forms.html">
形式
</a>
</li>
<li class="">
<a href="../../../../zh/docs/2.1/components/google-maps.html">
谷歌地图
</a>
</li>
<li class="">
<a href="../../../../zh/docs/2.1/components/info-areas.html">
信息区域
<span class="badge badge-primary">临</span>
</a>
</li>
<li class="">
<a href="../../../../zh/docs/2.1/components/material-icons.html">
材料图标
</a>
</li>
<li class="">
<a href="../../../../zh/docs/2.1/components/modal.html">
语气
</a>
</li>
<li class="">
<a href="../../../../zh/docs/2.1/components/navs.html">
资产净值
</a>
</li>
<li class="">
<a href="../../../../zh/docs/2.1/components/navbar.html">
导航栏
</a>
</li>
<li class="">
<a href="../../../../zh/docs/2.1/components/pagination.html">
分页
<span class="badge badge-primary">临</span>
</a>
</li>
<li class="">
<a href="../../../../zh/docs/2.1/components/parallax.html">
视差
<span class="badge badge-primary">临</span>
</a>
</li>
<li class="">
<a href="../../../../zh/docs/2.1/components/popovers.html">
约夏克布丁
<span class="badge badge-primary">临</span>
</a>
</li>
<li class="">
<a href="../../../../zh/docs/2.1/components/progress.html">
进展
<span class="badge badge-primary">临</span>
</a>
</li>
<li class="">
<a href="../../../../zh/docs/2.1/components/tables.html">
表
</a>
</li>
<li class="">
<a href="../../../../zh/docs/2.1/components/tooltips.html">
提示
<span class="badge badge-primary">临</span>
</a>
</li>
<li class="">
<a href="../../../../zh/docs/2.1/components/typography.html">
活版印刷
</a>
</li>
</ul>
</div>
<div class="bd-toc-item active">
<a class="bd-toc-link" href="#docs">
插件
</a>
<ul class="nav bd-sidenav">
<li class="">
<a href="../../../../zh/docs/2.1/plugins/bootstrap-notify.html">
Bootstrap通知
</a>
</li>
<li class="">
<a href="../../../../zh/docs/2.1/plugins/perfect-scrollbar.html">
完美的滚动条
</a>
</li>
<li class="">
<a href="../../../../zh/docs/2.1/plugins/bootstrap-switch.html">
自举开关
<span class="badge badge-primary">临</span>
</a>
</li>
<li class="">
<a href="../../../../zh/docs/2.1/plugins/datetimepicker.html">
的DateTimePicker
<span class="badge badge-primary">临</span>
</a>
</li>
<li class="">
<a href="../../../../zh/docs/2.1/plugins/fullcalendar.html">
完整日历
<span class="badge badge-primary">临</span>
</a>
</li>
<li class="">
<a href="../../../../zh/docs/2.1/plugins/jvector-map.html">
jVector地图
<span class="badge badge-primary">临</span>
</a>
</li>
<li class="">
<a href="../../../../zh/docs/2.1/plugins/sweet-alert-2.html">
甜蜜警报
<span class="badge badge-primary">临</span>
</a>
</li>
<li class="">
<a href="../../../../zh/docs/2.1/plugins/jquery-validation.html">
JQuery 验证
<span class="badge badge-primary">临</span>
</a>
</li>
<li class="">
<a href="../../../../zh/docs/2.1/plugins/fileupload-jasny.html">
上传文件 Jasny
<span class="badge badge-primary">临</span>
</a>
</li>
<li class="">
<a href="../../../../zh/docs/2.1/plugins/jquery-tagsinput.html">
jQuery Tagsinput
<span class="badge badge-primary">临</span>
</a>
</li>
<li class="">
<a href="../../../../zh/docs/2.1/plugins/select-bootstrap.html">
选择Bootstrap
<span class="badge badge-primary">临</span>
</a>
</li>
<li class="">
<a href="../../../../zh/docs/2.1/plugins/sliders.html">
滑块
<span class="badge badge-primary">临</span>
</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="toc-entry toc-h2"><a href="#例子">例子</a></li>
<li class="toc-entry toc-h2"><a href="#手风琴的例子">手风琴的例子</a>
<ul>
<ul>
<ul>
<li class="toc-entry toc-h5"><a href="#------------可折叠组项目-1----------keyboard_arrow_down--------------">
可折叠组项目 #1
keyboard_arrow_down
</a></li>
<li class="toc-entry toc-h5"><a href="#-----------可折叠组项目-2----------keyboard_arrow_down--------------">
可折叠组项目 #2
keyboard_arrow_down
</a></li>
<li class="toc-entry toc-h5"><a href="#-----------可折叠组项目-3----------keyboard_arrow_down--------------">
可折叠组项目 #3
keyboard_arrow_down
</a></li>
</ul>
</ul>
</ul>
</li>
</ul>
</div>
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
<div class="row mt-4">
<a class="btn btn-default btn-sm ml-auto" href="https://github.com/creativetimofficial/material-dashboard-docs/edit/master/zh/docs/2.1/components/collapse.html" target="_blank">编辑于 Github</a>
</div>
<h1 class="bd-title" id="content">
坍方
- <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>
</h1>
<p class="bd-lead"> 使用几个类和我们的JavaScript插件切换项目中内容的可见性。</p>
<h2 id="例子">例子</h2>
<p>单击下面的按钮以通过类更改显示和隐藏另一个元素：</p>
<ul>
<li><code class="highlighter-rouge">.collapse</code>隐藏内容</li>
<li>在转换期间应用<code class="highlighter-rouge">.collapsing</code></li>
<li><code class="highlighter-rouge">.collapse.show</code>显示内容</li>
</ul>
<p>您可以使用带有<code class="highlighter-rouge">href</code>属性的链接，也可以使用带有<code class="highlighter-rouge">data-target</code>属性的按钮。 在这两种情况下，都需要<code class="highlighter-rouge">data-toggle =“collapse”</code>。</p>
<div class="bd-example" data-example-id="">
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
与href链接
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
带有数据目标的按钮
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;p&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#collapseExample"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseExample"</span><span class="nt">&gt;</span>
与href链接
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#collapseExample"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseExample"</span><span class="nt">&gt;</span>
带有数据目标的按钮
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"collapse"</span> <span class="na">id=</span><span class="s">"collapseExample"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card card-body"</span><span class="nt">&gt;</span>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h2 id="手风琴的例子">手风琴的例子</h2>
<p>Using the <a href="/material-dashboard/docs/2.1/components/card">card</a> component, you can extend the default collapse behavior to create an accordion.</p>
<div class="bd-example" data-example-id="">
<div id="accordion" role="tablist">
<div class="card card-collapse">
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
<a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
可折叠组项目 #1
<i class="material-icons">keyboard_arrow_down</i>
</a>
</h5>
</div>
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card card-collapse">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
可折叠组项目 #2
<i class="material-icons">keyboard_arrow_down</i>
</a>
</h5>
</div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card card-collapse">
<div class="card-header" role="tab" id="headingThree">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
可折叠组项目 #3
<i class="material-icons">keyboard_arrow_down</i>
</a>
</h5>
</div>
<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"accordion"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card card-collapse"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">id=</span><span class="s">"headingOne"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#collapseOne"</span> <span class="na">aria-expanded=</span><span class="s">"true"</span> <span class="na">aria-controls=</span><span class="s">"collapseOne"</span><span class="nt">&gt;</span>
可折叠组项目 #1
<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">&gt;</span>keyboard_arrow_down<span class="nt">&lt;/i&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/h5&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"collapseOne"</span> <span class="na">class=</span><span class="s">"collapse show"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"headingOne"</span> <span class="na">data-parent=</span><span class="s">"#accordion"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card card-collapse"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">id=</span><span class="s">"headingTwo"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"collapsed"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#collapseTwo"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseTwo"</span><span class="nt">&gt;</span>
可折叠组项目 #2
<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">&gt;</span>keyboard_arrow_down<span class="nt">&lt;/i&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/h5&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"collapseTwo"</span> <span class="na">class=</span><span class="s">"collapse"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"headingTwo"</span> <span class="na">data-parent=</span><span class="s">"#accordion"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card card-collapse"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">id=</span><span class="s">"headingThree"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"mb-0"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"collapsed"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">href=</span><span class="s">"#collapseThree"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-controls=</span><span class="s">"collapseThree"</span><span class="nt">&gt;</span>
可折叠组项目 #3
<span class="nt">&lt;i</span> <span class="na">class=</span><span class="s">"material-icons"</span><span class="nt">&gt;</span>keyboard_arrow_down<span class="nt">&lt;/i&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/h5&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"collapseThree"</span> <span class="na">class=</span><span class="s">"collapse"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"headingThree"</span> <span class="na">data-parent=</span><span class="s">"#accordion"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<p>如果您想查看更多示例和属性，请查看官方 <strong><a href="http://getbootstrap.com/docs/4.0/components/collapse/" target="_blank">Bootstrap Documentation</a></strong>.</p>
</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>
在新工单中引用 查看 Git Blame 复制永久链接