creativetimofficial--ui
Stefan
1035 行
64 KiB
HTML
1035 行
64 KiB
HTML
<!--
|
|
=========================================================
|
|
Material Dashboard - v2.1.1
|
|
=========================================================
|
|
|
|
Product Page: https://www.creative-tim.com/product/material-dashboard
|
|
Copyright 2019 Creative Tim (https://www.creative-tim.com)
|
|
Licensed under MIT (https://github.com/creativetimofficial/material-dashboard/blob/master/LICENSE.md)
|
|
|
|
Coded by Creative Tim
|
|
|
|
=========================================================
|
|
|
|
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -->
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<link rel="apple-touch-icon" sizes="76x76" href="../../../assets-old/img/apple-icon.png">
|
|
<link rel="icon" type="image/png" href="../../../assets-old/img/favicon.png">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
|
<title>
|
|
Material Dashboard by Creative Tim
|
|
</title>
|
|
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
|
|
<!-- Extra details for Live View on GitHub Pages -->
|
|
<!-- Canonical SEO -->
|
|
<link rel="canonical" href="https://www.creative-tim.com/product/material-dashboard" />
|
|
<!-- Social tags -->
|
|
<meta name="keywords" content="creative tim, html dashboard, html css dashboard, web dashboard, bootstrap 4 dashboard, bootstrap 4, css3 dashboard, bootstrap 4 admin, material dashboard bootstrap 4 dashboard, frontend, responsive bootstrap 4 dashboard, free dashboard, free admin dashboard, free bootstrap 4 admin dashboard">
|
|
<meta name="description" content="Material Dashboard is a Free Material Bootstrap Admin with a fresh, new design inspired by Google's Material Design.">
|
|
<!-- Schema.org markup for Google+ -->
|
|
<meta itemprop="name" content="Material Dashboard by Creative Tim">
|
|
<meta itemprop="description" content="Material Dashboard is a Free Material Bootstrap Admin with a fresh, new design inspired by Google's Material Design.">
|
|
<meta itemprop="image" content="https://s3.amazonaws.com/creativetim_bucket/products/50/opt_md_thumbnail.jpg">
|
|
<!-- Twitter Card data -->
|
|
<meta name="twitter:card" content="product">
|
|
<meta name="twitter:site" content="@creativetim">
|
|
<meta name="twitter:title" content="Material Dashboard by Creative Tim">
|
|
<meta name="twitter:description" content="Material Dashboard is a Free Material Bootstrap Admin with a fresh, new design inspired by Google's Material Design.">
|
|
<meta name="twitter:creator" content="@creativetim">
|
|
<meta name="twitter:image" content="https://s3.amazonaws.com/creativetim_bucket/products/50/opt_md_thumbnail.jpg">
|
|
<!-- Open Graph data -->
|
|
<meta property="fb:app_id" content="655968634437471">
|
|
<meta property="og:title" content="Material Dashboard by Creative Tim" />
|
|
<meta property="og:type" content="article" />
|
|
<meta property="og:url" content="https://demos.creative-tim.com/material-dashboard-bs4/examples/dashboard.html" />
|
|
<meta property="og:image" content="https://s3.amazonaws.com/creativetim_bucket/products/50/opt_md_thumbnail.jpg" />
|
|
<meta property="og:description" content="Material Dashboard is a Free Material Bootstrap Admin with a fresh, new design inspired by Google's Material Design." />
|
|
<meta property="og:site_name" content="Creative Tim" />
|
|
<!-- Fonts and icons -->
|
|
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
|
|
<!-- CSS Files -->
|
|
<link href="../../../assets-old/css/material-dashboard.min.css?v=2.1.0" rel="stylesheet" />
|
|
<!-- Documentation extras -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
|
|
<link rel="stylesheet" href="../../../assets-old/demo/docs.min.css">
|
|
<style>
|
|
.navbar-absolute-logo {
|
|
padding-left: 45px;
|
|
}
|
|
|
|
.navbar-absolute-logo img {
|
|
position: absolute;
|
|
left: 15px;
|
|
margin-top: -6px;
|
|
}
|
|
|
|
body {
|
|
background: white;
|
|
}
|
|
</style>
|
|
<!-- CSS Just for demo purpose, don't include it in your project -->
|
|
<link href="../../../assets-old/demo/demo.css" rel="stylesheet" />
|
|
<!-- Google Tag Manager -->
|
|
<script>
|
|
(function(w, d, s, l, i) {
|
|
w[l] = w[l] || [];
|
|
w[l].push({
|
|
'gtm.start': new Date().getTime(),
|
|
event: 'gtm.js'
|
|
});
|
|
var f = d.getElementsByTagName(s)[0],
|
|
j = d.createElement(s),
|
|
dl = l != 'dataLayer' ? '&l=' + l : '';
|
|
j.async = true;
|
|
j.src =
|
|
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
|
|
f.parentNode.insertBefore(j, f);
|
|
})(window, document, 'script', 'dataLayer', 'GTM-NKDMSK6');
|
|
</script>
|
|
<!-- End Google Tag Manager -->
|
|
</head>
|
|
|
|
<body class="bd-docs" data-spy="scroll" data-target=".bd-sidenav-active">
|
|
<!-- Extra details for Live View on GitHub Pages -->
|
|
<!-- Google Tag Manager (noscript) -->
|
|
<noscript>
|
|
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NKDMSK6" height="0" width="0" style="display:none;visibility:hidden"></iframe>
|
|
</noscript>
|
|
<!-- End Google Tag Manager (noscript) -->
|
|
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
|
|
<div class="container">
|
|
<span class="skiplink-text">Skip to main content</span>
|
|
</div>
|
|
</a>
|
|
<header class="navbar navbar-expand navbar-dark bg-primary flex-column flex-md-row bd-navbar">
|
|
<a class="navbar-brand mr-0 mr-md-2 navbar-absolute-logo" href="https://www.creative-tim.com/product/material-dashboard" target="_blank">
|
|
Material Dashboard
|
|
</a>
|
|
<ul class="navbar-nav flex-row d-none d-md-flex">
|
|
<!-- <li class="nav-item">
|
|
<a class="nav-link p-2" href="#version">
|
|
2.1.0
|
|
</a>
|
|
</li> -->
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
v2.1.0
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
|
<a class="dropdown-item" href="../../../docs/2.1/getting-started/introduction.html">BS4 - 2.1.1</a>
|
|
<a class="dropdown-item active" href="../../../docs/2.0/getting-started/introduction.html">BS4 - 2.1.0</a>
|
|
<a class="dropdown-item" href="https://demos.creative-tim.com/bs3/material-dashboard/documentation/tutorial-components.html" target="_blank">BS3 - 1.0</a>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link p-2" href="https://github.com/creativetimofficial/material-dashboard" target="_blank" rel="noopener" aria-label="GitHub">
|
|
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
|
|
<title>GitHub</title>
|
|
<path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd" />
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link p-2" href="https://twitter.com/CreativeTim" target="_blank" rel="noopener" aria-label="Twitter">
|
|
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false">
|
|
<title>Twitter</title>
|
|
<path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor" />
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<div class="navbar-nav-scroll ml-md-auto ">
|
|
<ul class="navbar-nav bd-navbar-nav flex-row">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="../../../docs/2.0/getting-started/introduction.html"><i class="material-icons">content_paste</i> Documentation</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="https://demos.creative-tim.com/material-dashboard-bs4/examples/dashboard.html"><i class="material-icons">view_carousel</i> Live Preview</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="https://github.com/creativetimofficial/material-dashboard" target="_blank" rel="noopener"><i class="material-icons">star</i> Help with a star</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="" target="_blank" rel="noopener"></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="" target="_blank" rel="noopener"></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<a href="https://github.com/creativetimofficial/material-dashboard" class="github-corner" aria-label="View source on Github">
|
|
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#fff; color:#9c27b0; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
|
|
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
|
|
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
|
|
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
|
|
</svg>
|
|
</a>
|
|
<style>
|
|
.github-corner:hover .octo-arm {
|
|
animation: octocat-wave 560ms ease-in-out
|
|
}
|
|
|
|
@keyframes octocat-wave {
|
|
0%,
|
|
100% {
|
|
transform: rotate(0)
|
|
}
|
|
20%,
|
|
60% {
|
|
transform: rotate(-25deg)
|
|
}
|
|
40%,
|
|
80% {
|
|
transform: rotate(10deg)
|
|
}
|
|
}
|
|
|
|
@media (max-width:500px) {
|
|
.github-corner:hover .octo-arm {
|
|
animation: none
|
|
}
|
|
.github-corner .octo-arm {
|
|
animation: octocat-wave 560ms ease-in-out
|
|
}
|
|
}
|
|
</style>
|
|
</header>
|
|
<div class="container-fluid">
|
|
<div class="row flex-xl-nowrap">
|
|
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
|
|
<nav class="collapse bd-links" id="bd-docs-nav">
|
|
<div class="bd-toc-item active">
|
|
<a class="bd-toc-link" href="#docs">
|
|
Getting started
|
|
</a>
|
|
<ul class="nav bd-sidenav">
|
|
<li class="">
|
|
<a href="../../../docs/2.0/getting-started/introduction.html">
|
|
Introduction
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/getting-started/license.html">
|
|
License
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/getting-started/file-structure.html">
|
|
File Structure
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/getting-started/build-tools.html">
|
|
Build Tools
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="bd-toc-item active">
|
|
<a class="bd-toc-link" href="#docs">
|
|
Components
|
|
</a>
|
|
<ul class="nav bd-sidenav">
|
|
<li class="">
|
|
<a href="../../../docs/2.0/components/alerts.html">
|
|
Alerts
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/components/buttons.html">
|
|
Buttons
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/components/card.html">
|
|
Card
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/components/dropdowns.html">
|
|
Dropdowns
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/components/forms.html">
|
|
Forms
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/components/google-maps.html">
|
|
Google Maps
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/components/material-icons.html">
|
|
Material Icons
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/components/modal.html">
|
|
Modal
|
|
</a>
|
|
</li>
|
|
<li class="active bd-sidenav-active">
|
|
<a href="../../../docs/2.0/components/navs.html">
|
|
Navs
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/components/navbar.html">
|
|
Navbar
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/components/tables.html">
|
|
Tables
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/components/typography.html">
|
|
Typography
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="bd-toc-item active">
|
|
<a class="bd-toc-link" href="#docs">
|
|
Plugins
|
|
</a>
|
|
<ul class="nav bd-sidenav">
|
|
<li class="">
|
|
<a href="../../../docs/2.0/plugins/bootstrap-notify.html">
|
|
Bootstrap Notify
|
|
</a>
|
|
</li>
|
|
<li class="">
|
|
<a href="../../../docs/2.0/plugins/perfect-scrollbar.html">
|
|
Perfect Scrollbar
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
<div class="d-none d-xl-block col-xl-2 bd-toc">
|
|
<ul class="section-nav">
|
|
<li class="toc-entry toc-h2">
|
|
<a href="#base-nav">Base nav</a>
|
|
</li>
|
|
<li class="toc-entry toc-h2">
|
|
<a href="#available-styles">Available styles</a>
|
|
<ul>
|
|
<li class="toc-entry toc-h3">
|
|
<a href="#horizontal-alignment">Horizontal alignment</a>
|
|
</li>
|
|
<li class="toc-entry toc-h3">
|
|
<a href="#vertical">Vertical</a>
|
|
</li>
|
|
<li class="toc-entry toc-h3">
|
|
<a href="#tabs">Tabs</a>
|
|
<ul>
|
|
<li class="toc-entry toc-h4">
|
|
<a href="#tabs-on-plain-card">Tabs on Plain Card</a>
|
|
</li>
|
|
<li class="toc-entry toc-h4">
|
|
<a href="#tabs-with-icons-on-card">Tabs with Icons on Card</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="toc-entry toc-h3">
|
|
<a href="#pills">Pills</a>
|
|
<ul>
|
|
<li class="toc-entry toc-h4">
|
|
<a href="#with-icons">With Icons</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="toc-entry toc-h3">
|
|
<a href="#using-data-attributes">Using data attributes</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
|
<h1 class="bd-title" id="content">Navs</h1>
|
|
<p class="bd-lead">Documentation and examples for how to use Bootstrap's included navigation components.</p>
|
|
<h2 id="base-nav">Base nav</h2>
|
|
<p>Navigation available in Bootstrap share general markup and styles, from the base
|
|
<code class="highlighter-rouge">.nav</code> class to the active and disabled states. Swap modifier classes to switch between each style.</p>
|
|
<p>The base
|
|
<code class="highlighter-rouge">.nav</code> component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.</p>
|
|
<div class="bd-callout bd-callout-info">
|
|
<p>The base
|
|
<code class="highlighter-rouge">.nav</code> component does not include any
|
|
<code class="highlighter-rouge">.active</code> state. The following examples include the class, mainly to demonstrate that this particular class does not trigger any special styling.</p>
|
|
</div>
|
|
<div class="bd-example" data-example-id="">
|
|
<ul class="nav">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="#">Active</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Link</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Link</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link disabled" href="#">Disabled</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav"</span><span class="nt">></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Active<span class="nt"></a></span>
|
|
<span class="nt"></li></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
|
|
<span class="nt"></li></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
|
|
<span class="nt"></li></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Disabled<span class="nt"></a></span>
|
|
<span class="nt"></li></span>
|
|
<span class="nt"></ul></span></code></pre></div>
|
|
<p>Classes are used throughout, so your markup can be super flexible. Use
|
|
<code class="highlighter-rouge"><ul></code>s like above, or roll your own with say a
|
|
<code class="highlighter-rouge"><nav></code> element. Because the
|
|
<code class="highlighter-rouge">.nav</code> uses
|
|
<code class="highlighter-rouge">display: flex</code>, the nav links behave the same as nav items would, but without the extra markup.</p>
|
|
<div class="bd-example" data-example-id="">
|
|
<nav class="nav">
|
|
<a class="nav-link active" href="#">Active</a>
|
|
<a class="nav-link" href="#">Link</a>
|
|
<a class="nav-link" href="#">Link</a>
|
|
<a class="nav-link disabled" href="#">Disabled</a>
|
|
</nav>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav</span> <span class="na">class=</span><span class="s">"nav"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Active<span class="nt"></a></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Disabled<span class="nt"></a></span>
|
|
<span class="nt"></nav></span></code></pre></div>
|
|
<h2 id="available-styles">Available styles</h2>
|
|
<p>Change the style of
|
|
<code class="highlighter-rouge">.nav</code>s component with modifiers and utilities. Mix and match as needed, or build your own.</p>
|
|
<h3 id="horizontal-alignment">Horizontal alignment</h3>
|
|
<p>Change the horizontal alignment of your nav with
|
|
<a href="https://getbootstrap.com/docs/4.0/layout/grid/#horizontal-alignment">flexbox utilities</a>. By default, navs are left-aligned, but you can easily change them to center or right aligned.</p>
|
|
<p>Centered with
|
|
<code class="highlighter-rouge">.justify-content-center</code>:</p>
|
|
<div class="bd-example" data-example-id="">
|
|
<ul class="nav justify-content-center">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="#">Active</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Link</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Link</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link disabled" href="#">Disabled</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav justify-content-center"</span><span class="nt">></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Active<span class="nt"></a></span>
|
|
<span class="nt"></li></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
|
|
<span class="nt"></li></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
|
|
<span class="nt"></li></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Disabled<span class="nt"></a></span>
|
|
<span class="nt"></li></span>
|
|
<span class="nt"></ul></span></code></pre></div>
|
|
<p>Right-aligned with
|
|
<code class="highlighter-rouge">.justify-content-end</code>:</p>
|
|
<div class="bd-example" data-example-id="">
|
|
<ul class="nav justify-content-end">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="#">Active</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Link</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Link</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link disabled" href="#">Disabled</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav justify-content-end"</span><span class="nt">></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Active<span class="nt"></a></span>
|
|
<span class="nt"></li></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
|
|
<span class="nt"></li></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
|
|
<span class="nt"></li></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Disabled<span class="nt"></a></span>
|
|
<span class="nt"></li></span>
|
|
<span class="nt"></ul></span></code></pre></div>
|
|
<h3 id="vertical">Vertical</h3>
|
|
<p>Stack your navigation by changing the flex item direction with the
|
|
<code class="highlighter-rouge">.flex-column</code> utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g.,
|
|
<code class="highlighter-rouge">.flex-sm-column</code>).</p>
|
|
<div class="bd-example" data-example-id="">
|
|
<ul class="nav flex-column">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="#">Active</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Link</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Link</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link disabled" href="#">Disabled</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav flex-column"</span><span class="nt">></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Active<span class="nt"></a></span>
|
|
<span class="nt"></li></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
|
|
<span class="nt"></li></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
|
|
<span class="nt"></li></span>
|
|
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Disabled<span class="nt"></a></span>
|
|
<span class="nt"></li></span>
|
|
<span class="nt"></ul></span></code></pre></div>
|
|
<p>As always, vertical navigation is possible without
|
|
<code class="highlighter-rouge"><ul></code>s, too.</p>
|
|
<div class="bd-example" data-example-id="">
|
|
<nav class="nav flex-column">
|
|
<a class="nav-link active" href="#">Active</a>
|
|
<a class="nav-link" href="#">Link</a>
|
|
<a class="nav-link" href="#">Link</a>
|
|
<a class="nav-link disabled" href="#">Disabled</a>
|
|
</nav>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav</span> <span class="na">class=</span><span class="s">"nav flex-column"</span><span class="nt">></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Active<span class="nt"></a></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
|
|
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Disabled<span class="nt"></a></span>
|
|
<span class="nt"></nav></span></code></pre></div>
|
|
<h3 id="tabs">Tabs</h3>
|
|
<p>Takes the basic nav from above and adds the
|
|
<code class="highlighter-rouge">.nav-tabs</code> class to generate a tabbed interface. Use them to create tabbable regions with our
|
|
<a href="#javascript-behavior">tab JavaScript plugin</a>.</p>
|
|
<h4 id="tabs-on-plain-card">Tabs on Plain Card</h4>
|
|
<div class="bd-example" data-example-id="">
|
|
<div class="card card-nav-tabs card-plain">
|
|
<div class="card-header card-header-danger">
|
|
<!-- colors: "header-primary", "header-info", "header-success", "header-warning", "header-danger" -->
|
|
<div class="nav-tabs-navigation">
|
|
<div class="nav-tabs-wrapper">
|
|
<ul class="nav nav-tabs" data-tabs="tabs">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="#home" data-toggle="tab">Home</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#updates" data-toggle="tab">Updates</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#history" data-toggle="tab">History</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body ">
|
|
<div class="tab-content text-center">
|
|
<div class="tab-pane active" id="home">
|
|
<p>I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. So when you get something that has the name Kanye West on it, it’s supposed to be pushing the furthest possibilities. I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus.</p>
|
|
</div>
|
|
<div class="tab-pane" id="updates">
|
|
<p> I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. </p>
|
|
</div>
|
|
<div class="tab-pane" id="history">
|
|
<p> I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.</p>
|
|
</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 card-nav-tabs card-plain"</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="c"><!-- colors: "header-primary", "header-info", "header-success", "header-warning", "header-danger" --></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"nav-tabs-navigation"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"nav-tabs-wrapper"</span><span class="nt">></span>
|
|
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span> <span class="na">data-tabs=</span><span class="s">"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">"#home"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">></span>Home<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">"#updates"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">></span>Updates<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">"#history"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">></span>History<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="nt"></div><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">"tab-content text-center"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane active"</span> <span class="na">id=</span><span class="s">"home"</span><span class="nt">></span>
|
|
<span class="nt"><p></span>I think that<span class="ni">&#x2019;</span>s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. So when you get something that has the name Kanye West on it, it<span class="ni">&#x2019;</span>s supposed to be pushing the furthest possibilities. I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus.<span class="nt"></p></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"updates"</span><span class="nt">></span>
|
|
<span class="nt"><p></span> I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that<span class="ni">&#x2019;</span>s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. I think that<span class="ni">&#x2019;</span>s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. <span class="nt"></p></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"history"</span><span class="nt">></span>
|
|
<span class="nt"><p></span> I think that<span class="ni">&#x2019;</span>s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that<span class="ni">&#x2019;</span>s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.<span class="nt"></p></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span></code></pre></div>
|
|
<h4 id="tabs-with-icons-on-card">Tabs with Icons on Card</h4>
|
|
<div class="card card-nav-tabs">
|
|
<div class="card-header card-header-primary">
|
|
<!-- colors: "header-primary", "header-info", "header-success", "header-warning", "header-danger" -->
|
|
<div class="nav-tabs-navigation">
|
|
<div class="nav-tabs-wrapper">
|
|
<ul class="nav nav-tabs" data-tabs="tabs">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="#profile" data-toggle="tab">
|
|
<i class="material-icons">face</i> Profile
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#messages" data-toggle="tab">
|
|
<i class="material-icons">chat</i> Messages
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#settings" data-toggle="tab">
|
|
<i class="material-icons">build</i> Settings
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body ">
|
|
<div class="tab-content text-center">
|
|
<div class="tab-pane active" id="profile">
|
|
<p> I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. </p>
|
|
</div>
|
|
<div class="tab-pane" id="messages">
|
|
<p> I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.</p>
|
|
</div>
|
|
<div class="tab-pane" id="settings">
|
|
<p>I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. So when you get something that has the name Kanye West on it, it’s supposed to be pushing the furthest possibilities. I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h3 id="pills">Pills</h3>
|
|
<p>Take that same HTML, but use
|
|
<code class="highlighter-rouge">.nav-pills</code> instead:</p>
|
|
<h4 id="with-icons">With Icons</h4>
|
|
<div class="bd-example" data-example-id="">
|
|
<ul class="nav nav-pills nav-pills-icons" role="tablist">
|
|
<!--
|
|
color-classes: "nav-pills-primary", "nav-pills-info", "nav-pills-success", "nav-pills-warning","nav-pills-danger"
|
|
-->
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#dashboard-1" role="tab" data-toggle="tab">
|
|
<i class="material-icons">dashboard</i> Dashboard
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link active" href="#schedule-1" role="tab" data-toggle="tab">
|
|
<i class="material-icons">schedule</i> Schedule
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#tasks-1" role="tab" data-toggle="tab">
|
|
<i class="material-icons">list</i> Tasks
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content tab-space">
|
|
<div class="tab-pane active" id="dashboard-1">
|
|
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
|
|
<br />
|
|
<br /> Dramatically visualize customer directed convergence without revolutionary ROI.
|
|
</div>
|
|
<div class="tab-pane" id="schedule-1">
|
|
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
|
|
<br />
|
|
<br />Dramatically maintain clicks-and-mortar solutions without functional solutions.
|
|
</div>
|
|
<div class="tab-pane" id="tasks-1">
|
|
Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas.
|
|
<br />
|
|
<br />Dynamically innovate resource-leveling customer service for state of the art customer service.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-pills nav-pills-icons"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">></span>
|
|
<span class="c"><!--
|
|
color-classes: "nav-pills-primary", "nav-pills-info", "nav-pills-success", "nav-pills-warning","nav-pills-danger"
|
|
--></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">"#dashboard-1"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</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>dashboard<span class="nt"></i></span>
|
|
Dashboard
|
|
<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 active"</span> <span class="na">href=</span><span class="s">"#schedule-1"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</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>schedule<span class="nt"></i></span>
|
|
Schedule
|
|
<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">"#tasks-1"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</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>list<span class="nt"></i></span>
|
|
Tasks
|
|
<span class="nt"></a></span>
|
|
<span class="nt"></li></span>
|
|
<span class="nt"></ul></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-content tab-space"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane active"</span> <span class="na">id=</span><span class="s">"dashboard-1"</span><span class="nt">></span>
|
|
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
|
|
<span class="nt"><br><br></span>
|
|
Dramatically visualize customer directed convergence without revolutionary ROI.
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"schedule-1"</span><span class="nt">></span>
|
|
Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
|
|
<span class="nt"><br><br></span>Dramatically maintain clicks-and-mortar solutions without functional solutions.
|
|
<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"tasks-1"</span><span class="nt">></span>
|
|
Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas.
|
|
<span class="nt"><br><br></span>Dynamically innovate resource-leveling customer service for state of the art customer service.
|
|
<span class="nt"></div></span>
|
|
<span class="nt"></div></span></code></pre></div>
|
|
<h3 id="using-data-attributes">Using data attributes</h3>
|
|
<p>You can activate a tab or pill navigation without writing any JavaScript by simply specifying
|
|
<code class="highlighter-rouge">data-toggle="tab"</code> or
|
|
<code class="highlighter-rouge">data-toggle="pill"</code> on an element. Use these data attributes on
|
|
<code class="highlighter-rouge">.nav-tabs</code> or
|
|
<code class="highlighter-rouge">.nav-pills</code>.</p>
|
|
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="c"><!-- Nav tabs --></span>
|
|
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span> <span class="na">id=</span><span class="s">"myTab"</span> <span class="na">role=</span><span class="s">"tablist"</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">id=</span><span class="s">"home-tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span> <span class="na">href=</span><span class="s">"#home"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"home"</span> <span class="na">aria-selected=</span><span class="s">"true"</span><span class="nt">></span>Home<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">id=</span><span class="s">"profile-tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span> <span class="na">href=</span><span class="s">"#profile"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"profile"</span> <span class="na">aria-selected=</span><span class="s">"false"</span><span class="nt">></span>Profile<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">id=</span><span class="s">"messages-tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span> <span class="na">href=</span><span class="s">"#messages"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"messages"</span> <span class="na">aria-selected=</span><span class="s">"false"</span><span class="nt">></span>Messages<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">id=</span><span class="s">"settings-tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span> <span class="na">href=</span><span class="s">"#settings"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">aria-controls=</span><span class="s">"settings"</span> <span class="na">aria-selected=</span><span class="s">"false"</span><span class="nt">></span>Settings<span class="nt"></a></span>
|
|
<span class="nt"></li></span>
|
|
<span class="nt"></ul></span>
|
|
|
|
<span class="c"><!-- Tab panes --></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-content"</span><span class="nt">></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane active"</span> <span class="na">id=</span><span class="s">"home"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"home-tab"</span><span class="nt">></span>...<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"profile"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"profile-tab"</span><span class="nt">></span>...<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"messages"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"messages-tab"</span><span class="nt">></span>...<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"settings"</span> <span class="na">role=</span><span class="s">"tabpanel"</span> <span class="na">aria-labelledby=</span><span class="s">"settings-tab"</span><span class="nt">></span>...<span class="nt"></div></span>
|
|
<span class="nt"></div></span></code></pre></figure>
|
|
<p>If you want to see more examples and properties please check the official <strong><a href="https://getbootstrap.com/docs/4.0/components/navs/" target="_blank" rel="nofollow">Bootstrap Documentation</a></strong>.</p>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
<!-- Core JS Files -->
|
|
<script src="../../../assets-old/js/core/jquery.min.js" type="text/javascript"></script>
|
|
<script src="../../../assets-old/js/core/popper.min.js" type="text/javascript"></script>
|
|
<script src="../../../assets-old/js/core/bootstrap-material-design.min.js" type="text/javascript"></script>
|
|
<script src="../../../assets-old/js/plugins/perfect-scrollbar.jquery.min.js"></script>
|
|
<!-- Google Maps Plugin -->
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB2Yno10-YTnLjjn_Vtk0V8cdcY5lC4plU"></script>
|
|
<!-- Place this tag in your head or just before your close body tag. -->
|
|
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
|
<!-- Chartist JS -->
|
|
<script src="../../../assets-old/js/plugins/chartist.min.js"></script>
|
|
<!-- Notifications Plugin -->
|
|
<script src="../../../assets-old/js/plugins/bootstrap-notify.js"></script>
|
|
<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
|
|
<script src="../../../assets-old/js/material-dashboard.min.js?v=2.1.0" type="text/javascript"></script>
|
|
<!-- Sharrre libray -->
|
|
<script src="../../../assets-old/demo/jquery.sharrre.js"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
|
|
$('#facebook').sharrre({
|
|
share: {
|
|
facebook: true
|
|
},
|
|
enableHover: false,
|
|
enableTracking: false,
|
|
enableCounter: false,
|
|
click: function(api, options) {
|
|
api.simulateClick();
|
|
api.openPopup('facebook');
|
|
},
|
|
template: '<i class="fab fa-facebook-f"></i> Facebook',
|
|
url: 'https://demos.creative-tim.com/material-dashboard-bs4/examples/dashboard.html'
|
|
});
|
|
|
|
$('#google').sharrre({
|
|
share: {
|
|
googlePlus: true
|
|
},
|
|
enableCounter: false,
|
|
enableHover: false,
|
|
enableTracking: true,
|
|
click: function(api, options) {
|
|
api.simulateClick();
|
|
api.openPopup('googlePlus');
|
|
},
|
|
template: '<i class="fab fa-google-plus"></i> Google',
|
|
url: 'https://demos.creative-tim.com/material-dashboard-bs4/examples/dashboard.html'
|
|
});
|
|
|
|
$('#twitter').sharrre({
|
|
share: {
|
|
twitter: true
|
|
},
|
|
enableHover: false,
|
|
enableTracking: false,
|
|
enableCounter: false,
|
|
buttons: {
|
|
twitter: {
|
|
via: 'CreativeTim'
|
|
}
|
|
},
|
|
click: function(api, options) {
|
|
api.simulateClick();
|
|
api.openPopup('twitter');
|
|
},
|
|
template: '<i class="fab fa-twitter"></i> Twitter',
|
|
url: 'https://demos.creative-tim.com/material-dashboard-bs4/examples/dashboard.html'
|
|
});
|
|
|
|
// Facebook Pixel Code Don't Delete
|
|
! function(f, b, e, v, n, t, s) {
|
|
if (f.fbq) return;
|
|
n = f.fbq = function() {
|
|
n.callMethod ?
|
|
n.callMethod.apply(n, arguments) : n.queue.push(arguments)
|
|
};
|
|
if (!f._fbq) f._fbq = n;
|
|
n.push = n;
|
|
n.loaded = !0;
|
|
n.version = '2.0';
|
|
n.queue = [];
|
|
t = b.createElement(e);
|
|
t.async = !0;
|
|
t.src = v;
|
|
s = b.getElementsByTagName(e)[0];
|
|
s.parentNode.insertBefore(t, s)
|
|
}(window,
|
|
document, 'script', '//connect.facebook.net/en_US/fbevents.js');
|
|
|
|
try {
|
|
fbq('init', '111649226022273');
|
|
fbq('track', "PageView");
|
|
|
|
} catch (err) {
|
|
console.log('Facebook Track Error:', err);
|
|
}
|
|
|
|
});
|
|
</script>
|
|
<noscript>
|
|
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=111649226022273&ev=PageView&noscript=1" />
|
|
</noscript>
|
|
<script>
|
|
$(document).ready(function() {
|
|
$().ready(function() {
|
|
$sidebar = $('.sidebar');
|
|
$sidebar_img_container = $sidebar.find('.sidebar-background');
|
|
|
|
$full_page = $('.full-page');
|
|
|
|
$sidebar_responsive = $('body > .navbar-collapse');
|
|
sidebar_mini_active = true;
|
|
|
|
window_width = $(window).width();
|
|
|
|
fixed_plugin_open = $('.sidebar .sidebar-wrapper .nav li.active a p').html();
|
|
|
|
// if( window_width > 767 && fixed_plugin_open == 'Dashboard' ){
|
|
// if($('.fixed-plugin .dropdown').hasClass('show-dropdown')){
|
|
// $('.fixed-plugin .dropdown').addClass('show');
|
|
// }
|
|
//
|
|
// }
|
|
|
|
$('.fixed-plugin a').click(function(event) {
|
|
// Alex if we click on switch, stop propagation of the event, so the dropdown will not be hide, otherwise we set the section active
|
|
if ($(this).hasClass('switch-trigger')) {
|
|
if (event.stopPropagation) {
|
|
event.stopPropagation();
|
|
} else if (window.event) {
|
|
window.event.cancelBubble = true;
|
|
}
|
|
}
|
|
});
|
|
|
|
$('.fixed-plugin .background-color span').click(function() {
|
|
$(this).siblings().removeClass('active');
|
|
$(this).addClass('active');
|
|
|
|
var new_color = $(this).data('color');
|
|
|
|
if ($sidebar.length != 0) {
|
|
$sidebar.attr('data-color', new_color);
|
|
}
|
|
|
|
if ($full_page.length != 0) {
|
|
$full_page.attr('filter-color', new_color);
|
|
}
|
|
|
|
if ($sidebar_responsive.length != 0) {
|
|
$sidebar_responsive.attr('data-color', new_color);
|
|
}
|
|
});
|
|
|
|
$('.fixed-plugin .img-holder').click(function() {
|
|
$full_page_background = $('.full-page-background');
|
|
|
|
$(this).parent('li').siblings().removeClass('active');
|
|
$(this).parent('li').addClass('active');
|
|
|
|
|
|
var new_image = $(this).find("img").attr('src');
|
|
|
|
if ($sidebar_img_container.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
|
|
$sidebar_img_container.fadeOut('fast', function() {
|
|
$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
|
|
$sidebar_img_container.fadeIn('fast');
|
|
});
|
|
}
|
|
|
|
if ($full_page_background.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
|
|
var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');
|
|
|
|
$full_page_background.fadeOut('fast', function() {
|
|
$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
|
|
$full_page_background.fadeIn('fast');
|
|
});
|
|
}
|
|
|
|
if ($('.switch-sidebar-image input:checked').length == 0) {
|
|
var new_image = $('.fixed-plugin li.active .img-holder').find("img").attr('src');
|
|
var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');
|
|
|
|
$sidebar_img_container.css('background-image', 'url("' + new_image + '")');
|
|
$full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
|
|
}
|
|
|
|
if ($sidebar_responsive.length != 0) {
|
|
$sidebar_responsive.css('background-image', 'url("' + new_image + '")');
|
|
}
|
|
});
|
|
|
|
$('.switch-sidebar-image input').on("switchChange.bootstrapSwitch", function() {
|
|
$full_page_background = $('.full-page-background');
|
|
|
|
$input = $(this);
|
|
|
|
if ($input.is(':checked')) {
|
|
if ($sidebar_img_container.length != 0) {
|
|
$sidebar_img_container.fadeIn('fast');
|
|
$sidebar.attr('data-image', '#');
|
|
}
|
|
|
|
if ($full_page_background.length != 0) {
|
|
$full_page_background.fadeIn('fast');
|
|
$full_page.attr('data-image', '#');
|
|
}
|
|
|
|
background_image = true;
|
|
} else {
|
|
if ($sidebar_img_container.length != 0) {
|
|
$sidebar.removeAttr('data-image');
|
|
$sidebar_img_container.fadeOut('fast');
|
|
}
|
|
|
|
if ($full_page_background.length != 0) {
|
|
$full_page.removeAttr('data-image', '#');
|
|
$full_page_background.fadeOut('fast');
|
|
}
|
|
|
|
background_image = false;
|
|
}
|
|
});
|
|
|
|
$('.switch-sidebar-mini input').on("switchChange.bootstrapSwitch", function() {
|
|
var $btn = $(this);
|
|
|
|
if (sidebar_mini_active == true) {
|
|
$('body').removeClass('sidebar-mini');
|
|
sidebar_mini_active = false;
|
|
materialDashboard.showSidebarMessage('Sidebar mini deactivated...');
|
|
} else {
|
|
$('body').addClass('sidebar-mini');
|
|
sidebar_mini_active = true;
|
|
materialDashboard.showSidebarMessage('Sidebar mini activated...');
|
|
}
|
|
|
|
// we simulate the window Resize so the charts will get updated in realtime.
|
|
var simulateWindowResize = setInterval(function() {
|
|
window.dispatchEvent(new Event('resize'));
|
|
}, 180);
|
|
|
|
// we stop the simulation of Window Resize after the animations are completed
|
|
setTimeout(function() {
|
|
clearInterval(simulateWindowResize);
|
|
}, 1000);
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
if ($('.card-header.card-chart').length != 0) {
|
|
md.initDashboardPageCharts();
|
|
}
|
|
|
|
if ($('#websiteViewsChart').length != 0) {
|
|
md.initDocumentationCharts();
|
|
}
|
|
|
|
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|