1789 lines
83 KiB
HTML
1789 lines
83 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
|
||
<link rel="apple-touch-icon" sizes="76x76" href="../../../assets/img/dashboard/free/apple-icon.png">
|
||
<link rel="icon" type="image/png" href="../../../assets/img/dashboard/free/favicon.png">
|
||
|
||
<title>
|
||
|
||
Black Dashboard Flask by Creative Tim
|
||
|
||
|
||
|
||
|
||
|
||
</title>
|
||
|
||
|
||
|
||
<!-- Fonts and icons -->
|
||
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet" />
|
||
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
|
||
|
||
<!-- Nucleo Icons -->
|
||
<link href="../../../assets/css/nucleo-icons.css" rel="stylesheet" />
|
||
<!-- CSS Files -->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<link href="../../../assets/css/dashboard-free.css?v=1.0.0" rel="stylesheet" />
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<!-- Documentation extras -->
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
|
||
|
||
<link rel="stylesheet" href="../../../assets/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/demo/dashboard/free/demo.css" rel="stylesheet" />
|
||
|
||
|
||
|
||
</head>
|
||
<body class="bd-docs" data-spy="scroll" data-target=".bd-sidenav-active">
|
||
|
||
|
||
<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 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/black-dashboard-flask" target="_blank">
|
||
Black Dashboard Flask
|
||
</a>
|
||
|
||
<ul class="navbar-nav flex-row d-none d-md-flex">
|
||
<li class="nav-item">
|
||
<a class="nav-link p-2" href="#version">
|
||
1.0.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.0.0
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||
<a class="dropdown-item active" href="/docs/1.0/">BS4 - 1.0.0</a>
|
||
<a class="dropdown-item" href="">BS3 - 1.2.1</a>
|
||
</div>
|
||
</li> -->
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link p-2" href="https://github.com/creativetimofficial/black-dashboard-flask" 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 target="_blank" href="javascript:void(0)" rel="nofollow" class="btn btn-round btn-default disabled"><i class="tim-icons icon-send mr-2"></i>Upgrade to PRO</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="../../../docs/1.0/getting-started/introduction.html"><i class="tim-icons icon-app"></i> Documentation</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="https://www.creative-tim.com/live/black-dashboard-flask"><i class="tim-icons icon-tv-2"></i> Live Preview</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="https://github.com/creativetimofficial/black-dashboard-flask" target="_blank" rel="noopener"><i class="tim-icons icon-shape-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/black-dashboard-flask" class="github-corner" aria-label="View source on Github"><svg width="60" height="60" 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>
|
||
|
||
<!-- <a class="btn btn-white d-none d-lg-inline-block" href="">Download</a> -->
|
||
</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/1.0/getting-started/getting-started-flask.html">
|
||
Getting Started Flask
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/getting-started/license.html">
|
||
License
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="bd-toc-item active">
|
||
<a class="bd-toc-link" href="#docs">
|
||
Foundation
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/foundation/colors.html">
|
||
Colors
|
||
</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/1.0/components/alerts.html">
|
||
Alerts
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/components/badge.html">
|
||
Badge
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/components/breadcrumb.html">
|
||
Breadcrumb
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/components/buttons.html">
|
||
Buttons
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/components/card.html">
|
||
Card
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/components/collapse.html">
|
||
Collapse
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/components/dropdowns.html">
|
||
Dropdowns
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/components/forms.html">
|
||
Forms
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/components/google-maps.html">
|
||
Google Maps
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/components/modal.html">
|
||
Modal
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/components/navs.html">
|
||
Navs
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="active bd-sidenav-active">
|
||
|
||
<a href="../../../docs/1.0/components/navbar.html">
|
||
Navbar
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/components/nucleo-icons.html">
|
||
Nucleo Icons
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/components/tables.html">
|
||
Tables
|
||
</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/1.0/plugins/perfect-scrollbar.html">
|
||
Perfect Scrollbar
|
||
</a>
|
||
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
|
||
<a href="../../../docs/1.0/plugins/chart-js.html">
|
||
Chart.js
|
||
</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="#how-it-works">How it works</a>
|
||
<ul>
|
||
<li class="toc-entry toc-h3"><a href="#nav">Nav</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#forms">Forms</a></li>
|
||
<li class="toc-entry toc-h3"><a href="#text">Text</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="toc-entry toc-h2"><a href="#color-schemes">Color schemes</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#containers">Containers</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#placement">Placement</a></li>
|
||
<li class="toc-entry toc-h2"><a href="#responsive-behaviors">Responsive behaviors</a>
|
||
<ul>
|
||
<li class="toc-entry toc-h3"><a href="#toggler">Toggler</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">Navbar</h1>
|
||
<p class="bd-lead">Documentation and examples for Bootstrap's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.</p>
|
||
<h2 id="how-it-works">How it works</h2>
|
||
|
||
<p>Here’s what you need to know before getting started with the navbar:</p>
|
||
|
||
<ul>
|
||
<li>Navbars require a wrapping <code class="highlighter-rouge">.navbar</code> with <code class="highlighter-rouge">.navbar-expand{-sm|-md|-lg|-xl}</code> for responsive collapsing and <a href="#color-schemes">color scheme</a> classes.</li>
|
||
<li>Navbars and their contents are fluid by default. Use <a href="#containers">optional containers</a> to limit their horizontal width.</li>
|
||
<li>Use our spacing and flex utility classes for controlling spacing and alignment within navbars.</li>
|
||
<li>Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.</li>
|
||
<li>Navbars are hidden by default when printing. Force them to be printed by adding <code class="highlighter-rouge">.d-print</code> to the <code class="highlighter-rouge">.navbar</code>. See the display utility class.</li>
|
||
<li>Ensure accessibility by using a <code class="highlighter-rouge"><nav></code> element or, if using a more generic element such as a <code class="highlighter-rouge"><div></code>, add a <code class="highlighter-rouge">role="navigation"</code> to every navbar to explicitly identify it as a landmark region for users of assistive technologies.</li>
|
||
</ul>
|
||
|
||
<p>Read on for an example and list of supported sub-components.</p>
|
||
|
||
<h3 id="nav">Nav</h3>
|
||
|
||
<p>Navbar navigation links build on our <code class="highlighter-rouge">.nav</code> options with their own modifier class and require the use of <a href="#toggler">toggler classes</a> for proper responsive styling. <strong>Navigation in navbars will also grow to occupy as much horizontal space as possible</strong> to keep your navbar contents securely aligned.</p>
|
||
|
||
<p>Active states—with <code class="highlighter-rouge">.active</code>—to indicate the current page can be applied directly to <code class="highlighter-rouge">.nav-link</code>s or their immediate parent <code class="highlighter-rouge">.nav-item</code>s.</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<nav class="navbar navbar-expand-lg bg-primary">
|
||
<div class="container">
|
||
<a class="navbar-brand" href="#">Navbar</a>
|
||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
</button>
|
||
<div class="collapse navbar-collapse" id="navbarNav">
|
||
<ul class="navbar-nav">
|
||
<li class="nav-item active">
|
||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Features</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Pricing</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link disabled" href="#">Disabled</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</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">"navbar navbar-expand-lg bg-primary"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Navbar<span class="nt"></a></span>
|
||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"navbar-toggler"</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">"#navbarNav"</span> <span class="na">aria-controls=</span><span class="s">"navbarNav"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-label=</span><span class="s">"Toggle navigation"</span><span class="nt">></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"navbar-toggler-bar navbar-kebab"</span><span class="nt">></span></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"navbar-toggler-bar navbar-kebab"</span><span class="nt">></span></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"navbar-toggler-bar navbar-kebab"</span><span class="nt">></span></span>
|
||
<span class="nt"></button></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"collapse navbar-collapse"</span> <span class="na">id=</span><span class="s">"navbarNav"</span><span class="nt">></span>
|
||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"navbar-nav"</span><span class="nt">></span>
|
||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item active"</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>Home <span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>(current)<span class="nt"></span></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>Features<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>Pricing<span class="nt"></a></span>
|
||
<span class="nt"></li></span>
|
||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Disabled<span class="nt"></a></span>
|
||
<span class="nt"></li></span>
|
||
<span class="nt"></ul></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></nav></span></code></pre></div>
|
||
|
||
<p>You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for <code class="highlighter-rouge">.nav-item</code> and <code class="highlighter-rouge">.nav-link</code> as shown below.</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<nav class="navbar navbar-expand-lg bg-primary">
|
||
<div class="container">
|
||
<a class="navbar-brand" href="#">Navbar</a>
|
||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
</button>
|
||
<div class="collapse navbar-collapse" id="navbarNavDropdown">
|
||
<ul class="navbar-nav">
|
||
<li class="nav-item active">
|
||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Features</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Pricing</a>
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
Dropdown link
|
||
</a>
|
||
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</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">"navbar navbar-expand-lg bg-primary"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Navbar<span class="nt"></a></span>
|
||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"navbar-toggler"</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">"#navbarNavDropdown"</span> <span class="na">aria-controls=</span><span class="s">"navbarNavDropdown"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-label=</span><span class="s">"Toggle navigation"</span><span class="nt">></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"navbar-toggler-bar navbar-kebab"</span><span class="nt">></span></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"navbar-toggler-bar navbar-kebab"</span><span class="nt">></span></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"navbar-toggler-bar navbar-kebab"</span><span class="nt">></span></span>
|
||
<span class="nt"></button></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"collapse navbar-collapse"</span> <span class="na">id=</span><span class="s">"navbarNavDropdown"</span><span class="nt">></span>
|
||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"navbar-nav"</span><span class="nt">></span>
|
||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item active"</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>Home <span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>(current)<span class="nt"></span></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>Features<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>Pricing<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 dropdown"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link dropdown-toggle"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">id=</span><span class="s">"navbarDropdownMenuLink"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">></span>
|
||
Dropdown link
|
||
<span class="nt"></a></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby=</span><span class="s">"navbarDropdownMenuLink"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Action<span class="nt"></a></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Another action<span class="nt"></a></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Something else here<span class="nt"></a></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></li></span>
|
||
<span class="nt"></ul></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></nav></span></code></pre></div>
|
||
|
||
<h3 id="forms">Forms</h3>
|
||
|
||
<p>Place various form controls and components within a navbar with <code class="highlighter-rouge">.form-inline</code>.</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<nav class="navbar navbar-expand-lg bg-primary">
|
||
<div class="container">
|
||
<div class="navbar-translate">
|
||
<a class="navbar-brand" href="#">Brand</a>
|
||
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-icon"></span>
|
||
<span class="navbar-toggler-icon"></span>
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="collapse navbar-collapse">
|
||
<ul class="navbar-nav">
|
||
<li class="nav-item active">
|
||
<a href="#pablo" class="nav-link">link</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="#pablo" class="nav-link">link</a>
|
||
</li>
|
||
</ul>
|
||
|
||
<form class="form-inline ml-auto">
|
||
<div class="form-group no-border">
|
||
<input type="text" class="form-control" placeholder="Search" />
|
||
</div>
|
||
<button type="submit" class="btn btn-link btn-icon btn-round">
|
||
<i class="tim-icons icon-zoom-split"></i>
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</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">"navbar navbar-expand-lg bg-primary"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"navbar-translate"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Brand<span class="nt"></a></span>
|
||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"navbar-toggler"</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">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-label=</span><span class="s">"Toggle navigation"</span><span class="nt">></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"navbar-toggler-icon"</span><span class="nt">></span></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"navbar-toggler-icon"</span><span class="nt">></span></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"navbar-toggler-icon"</span><span class="nt">></span></span>
|
||
<span class="nt"></button></span>
|
||
<span class="nt"></div></span>
|
||
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"collapse navbar-collapse"</span><span class="nt">></span>
|
||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"navbar-nav"</span><span class="nt">></span>
|
||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item active"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#pablo"</span> <span class="na">class=</span><span class="s">"nav-link"</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">href=</span><span class="s">"#pablo"</span> <span class="na">class=</span><span class="s">"nav-link"</span><span class="nt">></span>link<span class="nt"></a></span>
|
||
<span class="nt"></li></span>
|
||
<span class="nt"></ul></span>
|
||
|
||
<span class="nt"><form</span> <span class="na">class=</span><span class="s">"form-inline ml-auto"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group no-border"</span><span class="nt">></span>
|
||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Search"</span><span class="nt">></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-link btn-icon btn-round"</span><span class="nt">></span>
|
||
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"tim-icons icon-zoom-split"</span><span class="nt">></i></span>
|
||
<span class="nt"></button></span>
|
||
<span class="nt"></form></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></nav></span></code></pre></div>
|
||
|
||
<h3 id="text">Text</h3>
|
||
|
||
<p>Navbars may contain bits of text with the help of <code class="highlighter-rouge">.navbar-text</code>. This class adjusts vertical alignment and horizontal spacing for strings of text.</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<nav class="navbar navbar-dark bg-primary">
|
||
<div class="container">
|
||
<span class="navbar-text">
|
||
Navbar text with an inline element
|
||
</span>
|
||
</div>
|
||
</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">"navbar navbar-dark bg-primary"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"navbar-text"</span><span class="nt">></span>
|
||
Navbar text with an inline element
|
||
<span class="nt"></span></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></nav></span></code></pre></div>
|
||
|
||
<p>Mix and match with other components and utilities as needed.</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<nav class="navbar navbar-expand-lg bg-primary">
|
||
<div class="container">
|
||
<a class="navbar-brand" href="#">Navbar w/ text</a>
|
||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
</button>
|
||
<div class="collapse navbar-collapse" id="navbarText">
|
||
<ul class="navbar-nav mr-auto">
|
||
<li class="nav-item active">
|
||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Features</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Pricing</a>
|
||
</li>
|
||
</ul>
|
||
<span class="navbar-text">
|
||
Navbar text with an inline element
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</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">"navbar navbar-expand-lg bg-primary"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Navbar w/ text<span class="nt"></a></span>
|
||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"navbar-toggler"</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">"#navbarText"</span> <span class="na">aria-controls=</span><span class="s">"navbarText"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-label=</span><span class="s">"Toggle navigation"</span><span class="nt">></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"navbar-toggler-bar navbar-kebab"</span><span class="nt">></span></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"navbar-toggler-bar navbar-kebab"</span><span class="nt">></span></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"navbar-toggler-bar navbar-kebab"</span><span class="nt">></span></span>
|
||
<span class="nt"></button></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"collapse navbar-collapse"</span> <span class="na">id=</span><span class="s">"navbarText"</span><span class="nt">></span>
|
||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"navbar-nav mr-auto"</span><span class="nt">></span>
|
||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item active"</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>Home <span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>(current)<span class="nt"></span></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>Features<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>Pricing<span class="nt"></a></span>
|
||
<span class="nt"></li></span>
|
||
<span class="nt"></ul></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"navbar-text"</span><span class="nt">></span>
|
||
Navbar text with an inline element
|
||
<span class="nt"></span></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></nav></span></code></pre></div>
|
||
|
||
<h2 id="color-schemes">Color schemes</h2>
|
||
|
||
<p>Theming the navbar has never been easier thanks to the combination of theming classes and <code class="highlighter-rouge">background-color</code> utilities. Choose from <code class="highlighter-rouge">.navbar-light</code> for use with light background colors, or <code class="highlighter-rouge">.navbar-dark</code> for dark background colors. Then, customize with <code class="highlighter-rouge">.bg-*</code> utilities. You can also add a border top using <code class="highlighter-rouge">data-color</code> attribute.</p>
|
||
|
||
<div class="bd-example">
|
||
<nav class="navbar navbar-expand-lg bg-dark" data-color="orange">
|
||
<div class="container">
|
||
<a class="navbar-brand" href="#">Navbar</a>
|
||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
</button>
|
||
|
||
<div class="collapse navbar-collapse" id="navbarColor01">
|
||
<ul class="navbar-nav mr-auto">
|
||
<li class="nav-item active">
|
||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Features</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Pricing</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">About</a>
|
||
</li>
|
||
</ul>
|
||
<form class="form-inline ml-auto">
|
||
<div class="form-group no-border">
|
||
<input type="text" class="form-control" placeholder="Search" />
|
||
</div>
|
||
<button type="submit" class="btn btn-link btn-icon btn-round">
|
||
<i class="tim-icons icon-zoom-split"></i>
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<nav class="navbar navbar-expand-lg bg-success">
|
||
<div class="container">
|
||
<a class="navbar-brand" href="#">Navbar</a>
|
||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
</button>
|
||
|
||
<div class="collapse navbar-collapse" id="navbarColor02">
|
||
<ul class="navbar-nav mr-auto">
|
||
<li class="nav-item active">
|
||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Features</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Pricing</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">About</a>
|
||
</li>
|
||
</ul>
|
||
<form class="form-inline ml-auto">
|
||
<div class="form-group no-border">
|
||
<input type="text" class="form-control" placeholder="Search" />
|
||
</div>
|
||
<button type="submit" class="btn btn-link btn-icon btn-round">
|
||
<i class="tim-icons icon-zoom-split"></i>
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<nav class="navbar navbar-expand-lg bg-danger">
|
||
<div class="container">
|
||
<a class="navbar-brand" href="#">Navbar</a>
|
||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
</button>
|
||
|
||
<div class="collapse navbar-collapse" id="navbarColor03">
|
||
<ul class="navbar-nav mr-auto">
|
||
<li class="nav-item active">
|
||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Features</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Pricing</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">About</a>
|
||
</li>
|
||
</ul>
|
||
<form class="form-inline ml-auto">
|
||
<div class="form-group no-border">
|
||
<input type="text" class="form-control" placeholder="Search" />
|
||
</div>
|
||
<button type="submit" class="btn btn-link btn-icon btn-round">
|
||
<i class="tim-icons icon-zoom-split"></i>
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<nav class="navbar navbar-expand-lg bg-warning">
|
||
<div class="container">
|
||
<a class="navbar-brand" href="#">Navbar</a>
|
||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor04" aria-controls="navbarColor04" aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
</button>
|
||
|
||
<div class="collapse navbar-collapse" id="navbarColor04">
|
||
<ul class="navbar-nav mr-auto">
|
||
<li class="nav-item active">
|
||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Features</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Pricing</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">About</a>
|
||
</li>
|
||
</ul>
|
||
<form class="form-inline ml-auto">
|
||
<div class="form-group no-border">
|
||
<input type="text" class="form-control" placeholder="Search" />
|
||
</div>
|
||
<button type="submit" class="btn btn-link btn-icon btn-round">
|
||
<i class="tim-icons icon-zoom-split"></i>
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<nav class="navbar navbar-expand-lg bg-white">
|
||
<div class="container">
|
||
<a class="navbar-brand" href="#">Navbar</a>
|
||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor05" aria-controls="navbarColor05" aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
</button>
|
||
|
||
<div class="collapse navbar-collapse" id="navbarColor05">
|
||
<ul class="navbar-nav mr-auto">
|
||
<li class="nav-item active">
|
||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Features</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Pricing</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">About</a>
|
||
</li>
|
||
</ul>
|
||
<form class="form-inline ml-auto">
|
||
<div class="form-group">
|
||
<input type="text" class="form-control" placeholder="Search" />
|
||
</div>
|
||
<button type="submit" class="btn btn-info btn-icon btn-round ml-2">
|
||
<i class="tim-icons icon-zoom-split"></i>
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
|
||
<nav class="navbar navbar-expand-lg bg-primary">
|
||
<div class="container">
|
||
<a class="navbar-brand" href="#">Navbar</a>
|
||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor06" aria-controls="navbarColor06" aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
</button>
|
||
|
||
<div class="collapse navbar-collapse" id="navbarColor06">
|
||
<ul class="navbar-nav mr-auto">
|
||
<li class="nav-item active">
|
||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Features</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Pricing</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">About</a>
|
||
</li>
|
||
</ul>
|
||
<form class="form-inline ml-auto">
|
||
<div class="form-group no-border">
|
||
<input type="text" class="form-control" placeholder="Search" />
|
||
</div>
|
||
<button type="submit" class="btn btn-link btn-icon btn-round">
|
||
<i class="tim-icons icon-zoom-split"></i>
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<nav class="navbar navbar-expand-lg bg-info">
|
||
<div class="container">
|
||
<a class="navbar-brand" href="#">Navbar</a>
|
||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor07" aria-controls="navbarColor07" aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
</button>
|
||
|
||
<div class="collapse navbar-collapse" id="navbarColor07">
|
||
<ul class="navbar-nav mr-auto">
|
||
<li class="nav-item active">
|
||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Features</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Pricing</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">About</a>
|
||
</li>
|
||
</ul>
|
||
<form class="form-inline ml-auto">
|
||
<div class="form-group no-border">
|
||
<input type="text" class="form-control" placeholder="Search" />
|
||
</div>
|
||
<button type="submit" class="btn btn-link btn-icon btn-round">
|
||
<i class="tim-icons icon-zoom-split"></i>
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
|
||
<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><nav</span> <span class="na">class=</span><span class="s">"navbar navbar-expand-lg bg-dark"</span> <span class="na">data-color=</span><span class="s">"orange"</span><span class="nt">></span>
|
||
<span class="c"><!-- Navbar content --></span>
|
||
<span class="nt"></nav></span>
|
||
|
||
<span class="nt"><nav</span> <span class="na">class=</span><span class="s">"navbar navbar-expand-lg bg-success"</span><span class="nt">></span>
|
||
<span class="c"><!-- Navbar content --></span>
|
||
<span class="nt"></nav></span>
|
||
|
||
<span class="nt"><nav</span> <span class="na">class=</span><span class="s">"navbar navbar-expand-lg bg-danger"</span><span class="nt">></span>
|
||
<span class="c"><!-- Navbar content --></span>
|
||
<span class="nt"></nav></span>
|
||
|
||
<span class="nt"><nav</span> <span class="na">class=</span><span class="s">"navbar navbar-expand-lg bg-warning"</span><span class="nt">></span>
|
||
<span class="c"><!-- Navbar content --></span>
|
||
<span class="nt"></nav></span>
|
||
|
||
<span class="nt"><nav</span> <span class="na">class=</span><span class="s">"navbar navbar-expand-lg bg-white"</span><span class="nt">></span>
|
||
<span class="c"><!-- Navbar content --></span>
|
||
<span class="nt"></nav></span>
|
||
|
||
<span class="nt"><nav</span> <span class="na">class=</span><span class="s">"navbar navbar-expand-lg bg-primary"</span><span class="nt">></span>
|
||
<span class="c"><!-- Navbar content --></span>
|
||
<span class="nt"></nav></span>
|
||
|
||
<span class="nt"><nav</span> <span class="na">class=</span><span class="s">"navbar navbar-expand-lg bg-info"</span><span class="nt">></span>
|
||
<span class="c"><!-- Navbar content --></span>
|
||
<span class="nt"></nav></span></code></pre></figure>
|
||
|
||
<h2 id="containers">Containers</h2>
|
||
|
||
<p>When the container is within your navbar, its horizontal padding is removed at breakpoints lower than your specified <code class="highlighter-rouge">.navbar-expand{-sm|-md|-lg|-xl}</code> class. This ensures we’re not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed.</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<nav class="navbar navbar-expand-lg navbar-light bg-primary">
|
||
<div class="container">
|
||
<a class="navbar-brand" href="#">Navbar</a>
|
||
</div>
|
||
</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">"navbar navbar-expand-lg navbar-light bg-primary"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Navbar<span class="nt"></a></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></nav></span></code></pre></div>
|
||
|
||
<h2 id="placement">Placement</h2>
|
||
|
||
<p>Use our position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use <code class="highlighter-rouge">position: fixed</code>, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., <code class="highlighter-rouge">padding-top</code> on the <code class="highlighter-rouge"><body></code>) to prevent overlap with other elements.</p>
|
||
|
||
<p>Also note that <strong><code class="highlighter-rouge">.sticky-top</code> uses <code class="highlighter-rouge">position: sticky</code>, which <a href="https://caniuse.com/#feat=css-sticky">isn’t fully supported in every browser</a></strong>.</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<nav class="navbar navbar-light bg-primary">
|
||
<div class="container">
|
||
<a class="navbar-brand" href="#">Default</a>
|
||
</div>
|
||
</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">"navbar navbar-light bg-primary"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Default<span class="nt"></a></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></nav></span></code></pre></div>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<nav class="navbar fixed-top navbar-light bg-primary">
|
||
<div class="container">
|
||
<a class="navbar-brand" href="#">Fixed top</a>
|
||
</div>
|
||
</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">"navbar fixed-top navbar-light bg-primary"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Fixed top<span class="nt"></a></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></nav></span></code></pre></div>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<nav class="navbar fixed-bottom navbar-light bg-primary">
|
||
<div class="container">
|
||
<a class="navbar-brand" href="#">Fixed bottom</a>
|
||
</div>
|
||
</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">"navbar fixed-bottom navbar-light bg-primary"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Fixed bottom<span class="nt"></a></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></nav></span></code></pre></div>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<nav class="navbar sticky-top navbar-light bg-primary">
|
||
<div class="container">
|
||
<a class="navbar-brand" href="#">Sticky top</a>
|
||
</div>
|
||
</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">"navbar sticky-top navbar-light bg-primary"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Sticky top<span class="nt"></a></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></nav></span></code></pre></div>
|
||
|
||
<h2 id="responsive-behaviors">Responsive behaviors</h2>
|
||
|
||
<p>Navbars can utilize <code class="highlighter-rouge">.navbar-toggler</code>, <code class="highlighter-rouge">.navbar-collapse</code>, and <code class="highlighter-rouge">.navbar-expand{-sm|-md|-lg|-xl}</code> classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.</p>
|
||
|
||
<p>For navbars that never collapse, add the <code class="highlighter-rouge">.navbar-expand</code> class on the navbar. For navbars that always collapse, don’t add any <code class="highlighter-rouge">.navbar-expand</code> class.</p>
|
||
|
||
<h3 id="toggler">Toggler</h3>
|
||
|
||
<p>Navbar togglers are left-aligned by default, but should they follow a sibling element like a <code class="highlighter-rouge">.navbar-brand</code>, they’ll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler. Below are examples of different toggle styles.</p>
|
||
|
||
<p>With no <code class="highlighter-rouge">.navbar-brand</code> shown in lowest breakpoint:</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<nav class="navbar navbar-expand-lg bg-primary">
|
||
<div class="container">
|
||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
</button>
|
||
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
|
||
<a class="navbar-brand" href="#">Hidden brand</a>
|
||
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
|
||
<li class="nav-item active">
|
||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
|
||
<form class="form-inline ml-auto">
|
||
<div class="form-group has-white">
|
||
<input type="text" class="form-control" placeholder="Search" />
|
||
</div>
|
||
<button type="submit" class="btn btn-link btn-icon btn-round">
|
||
<i class="tim-icons icon-zoom-split"></i>
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</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">"navbar navbar-expand-lg bg-primary"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
|
||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"navbar-toggler"</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">"#navbarTogglerDemo01"</span> <span class="na">aria-controls=</span><span class="s">"navbarTogglerDemo01"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-label=</span><span class="s">"Toggle navigation"</span><span class="nt">></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"navbar-toggler-bar navbar-kebab"</span><span class="nt">></span></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"navbar-toggler-bar navbar-kebab"</span><span class="nt">></span></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"navbar-toggler-bar navbar-kebab"</span><span class="nt">></span></span>
|
||
<span class="nt"></button></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"collapse navbar-collapse"</span> <span class="na">id=</span><span class="s">"navbarTogglerDemo01"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Hidden brand<span class="nt"></a></span>
|
||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"navbar-nav mr-auto mt-2 mt-lg-0"</span><span class="nt">></span>
|
||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item active"</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>Home <span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>(current)<span class="nt"></span></a></span>
|
||
<span class="nt"></li></span>
|
||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
|
||
<span class="nt"></li></span>
|
||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Disabled<span class="nt"></a></span>
|
||
<span class="nt"></li></span>
|
||
<span class="nt"></ul></span>
|
||
<span class="nt"><form</span> <span class="na">class=</span><span class="s">"form-inline ml-auto"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group has-white"</span><span class="nt">></span>
|
||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Search"</span><span class="nt">></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-link btn-icon btn-round"</span><span class="nt">></span>
|
||
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"tim-icons icon-zoom-split"</span><span class="nt">></i></span>
|
||
<span class="nt"></button></span>
|
||
<span class="nt"></form></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></nav></span></code></pre></div>
|
||
|
||
<p>With a brand name shown on the left and toggler on the right:</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<nav class="navbar navbar-expand-lg bg-primary">
|
||
<div class="container">
|
||
<a class="navbar-brand" href="#">Navbar</a>
|
||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
</button>
|
||
|
||
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
|
||
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
|
||
<li class="nav-item active">
|
||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
|
||
<form class="form-inline ml-auto">
|
||
<div class="form-group no-border">
|
||
<input type="text" class="form-control" placeholder="Search" />
|
||
</div>
|
||
<button type="submit" class="btn btn-link btn-icon btn-round">
|
||
<i class="tim-icons icon-zoom-split"></i>
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</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">"navbar navbar-expand-lg bg-primary"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Navbar<span class="nt"></a></span>
|
||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"navbar-toggler"</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">"#navbarTogglerDemo02"</span> <span class="na">aria-controls=</span><span class="s">"navbarTogglerDemo02"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-label=</span><span class="s">"Toggle navigation"</span><span class="nt">></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"navbar-toggler-bar navbar-kebab"</span><span class="nt">></span></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"navbar-toggler-bar navbar-kebab"</span><span class="nt">></span></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"navbar-toggler-bar navbar-kebab"</span><span class="nt">></span></span>
|
||
<span class="nt"></button></span>
|
||
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"collapse navbar-collapse"</span> <span class="na">id=</span><span class="s">"navbarTogglerDemo02"</span><span class="nt">></span>
|
||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"navbar-nav mr-auto mt-2 mt-lg-0"</span><span class="nt">></span>
|
||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item active"</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>Home <span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>(current)<span class="nt"></span></a></span>
|
||
<span class="nt"></li></span>
|
||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
|
||
<span class="nt"></li></span>
|
||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Disabled<span class="nt"></a></span>
|
||
<span class="nt"></li></span>
|
||
<span class="nt"></ul></span>
|
||
<span class="nt"><form</span> <span class="na">class=</span><span class="s">"form-inline ml-auto"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group no-border"</span><span class="nt">></span>
|
||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Search"</span><span class="nt">></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-link btn-icon btn-round"</span><span class="nt">></span>
|
||
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"tim-icons icon-zoom-split"</span><span class="nt">></i></span>
|
||
<span class="nt"></button></span>
|
||
<span class="nt"></form></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></nav></span></code></pre></div>
|
||
|
||
<p>With a toggler on the left and brand name on the right:</p>
|
||
|
||
<div class="bd-example" data-example-id="">
|
||
<nav class="navbar navbar-expand-lg bg-primary">
|
||
<div class="container">
|
||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
<span class="navbar-toggler-bar navbar-kebab"></span>
|
||
</button>
|
||
<a class="navbar-brand" href="#">Navbar</a>
|
||
|
||
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
|
||
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
|
||
<li class="nav-item active">
|
||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
|
||
<form class="form-inline ml-auto">
|
||
<div class="form-group no-border">
|
||
<input type="text" class="form-control" placeholder="Search" />
|
||
</div>
|
||
<button type="submit" class="btn btn-link btn-icon btn-round">
|
||
<i class="tim-icons icon-zoom-split"></i>
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</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">"navbar navbar-expand-lg bg-primary"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
|
||
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"navbar-toggler"</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">"#navbarTogglerDemo03"</span> <span class="na">aria-controls=</span><span class="s">"navbarTogglerDemo03"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span> <span class="na">aria-label=</span><span class="s">"Toggle navigation"</span><span class="nt">></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"navbar-toggler-bar navbar-kebab"</span><span class="nt">></span></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"navbar-toggler-bar navbar-kebab"</span><span class="nt">></span></span>
|
||
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"navbar-toggler-bar navbar-kebab"</span><span class="nt">></span></span>
|
||
<span class="nt"></button></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"navbar-brand"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Navbar<span class="nt"></a></span>
|
||
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"collapse navbar-collapse"</span> <span class="na">id=</span><span class="s">"navbarTogglerDemo03"</span><span class="nt">></span>
|
||
<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"navbar-nav mr-auto mt-2 mt-lg-0"</span><span class="nt">></span>
|
||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item active"</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>Home <span class="nt"><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>(current)<span class="nt"></span></a></span>
|
||
<span class="nt"></li></span>
|
||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Link<span class="nt"></a></span>
|
||
<span class="nt"></li></span>
|
||
<span class="nt"><li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">></span>
|
||
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"nav-link disabled"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Disabled<span class="nt"></a></span>
|
||
<span class="nt"></li></span>
|
||
<span class="nt"></ul></span>
|
||
<span class="nt"><form</span> <span class="na">class=</span><span class="s">"form-inline ml-auto"</span><span class="nt">></span>
|
||
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"form-group no-border"</span><span class="nt">></span>
|
||
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Search"</span><span class="nt">></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-link btn-icon btn-round"</span><span class="nt">></span>
|
||
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"tim-icons icon-zoom-split"</span><span class="nt">></i></span>
|
||
<span class="nt"></button></span>
|
||
<span class="nt"></form></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></div></span>
|
||
<span class="nt"></nav></span></code></pre></div>
|
||
|
||
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<!-- Core JS Files -->
|
||
<script src="../../../assets/js/core/jquery.min.js" ></script>
|
||
<script src="../../../assets/js/core/popper.min.js" ></script>
|
||
<script src="../../../assets/js/core/bootstrap.min.js" ></script>
|
||
<script src="../../../assets/js/plugins/dashboard/free/perfect-scrollbar.jquery.min.js" ></script>
|
||
|
||
|
||
|
||
|
||
<!-- Google Maps Plugin -->
|
||
|
||
<!-- Place this tag in your head or just before your close body tag. -->
|
||
|
||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
|
||
|
||
|
||
<!-- Chart JS -->
|
||
<script src="../../../assets/js/plugins/dashboard/free/chartjs.min.js"></script>
|
||
|
||
<!-- Notifications Plugin -->
|
||
<script src="../../../assets/js/plugins/dashboard/free/bootstrap-notify.js"></script>
|
||
|
||
|
||
|
||
|
||
|
||
<!-- Control Center for Black Dashboard: parallax effects, scripts for the example pages etc --><script src="../../../assets/js/dashboard-free.js?v=1.0.0"></script><!-- Black Dashboard DEMO methods, don't include it in your project! -->
|
||
<script src="../../../assets/demo/dashboard/free/demo.js"></script>
|
||
|
||
|
||
|
||
<script>
|
||
$(document).ready(function(){
|
||
$().ready(function(){
|
||
$sidebar = $('.sidebar');
|
||
$navbar = $('.navbar');
|
||
$main_panel = $('.main-panel');
|
||
|
||
$full_page = $('.full-page');
|
||
|
||
$sidebar_responsive = $('body > .navbar-collapse');
|
||
sidebar_mini_active = true;
|
||
white_color = false;
|
||
|
||
window_width = $(window).width();
|
||
|
||
fixed_plugin_open = $('.sidebar .sidebar-wrapper .nav li.active a p').html();
|
||
|
||
|
||
|
||
$('.fixed-plugin a').click(function(event){
|
||
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',new_color);
|
||
}
|
||
|
||
if($main_panel.length != 0){
|
||
$main_panel.attr('data',new_color);
|
||
}
|
||
|
||
if($full_page.length != 0){
|
||
$full_page.attr('filter-color',new_color);
|
||
}
|
||
|
||
if($sidebar_responsive.length != 0){
|
||
$sidebar_responsive.attr('data',new_color);
|
||
}
|
||
});
|
||
|
||
$('.switch-sidebar-mini input').on("switchChange.bootstrapSwitch", function(){
|
||
var $btn = $(this);
|
||
|
||
if(sidebar_mini_active == true){
|
||
$('body').removeClass('sidebar-mini');
|
||
sidebar_mini_active = false;
|
||
blackDashboard.showSidebarMessage('Sidebar mini deactivated...');
|
||
}else{
|
||
$('body').addClass('sidebar-mini');
|
||
sidebar_mini_active = true;
|
||
blackDashboard.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);
|
||
});
|
||
|
||
$('.switch-change-color input').on("switchChange.bootstrapSwitch", function(){
|
||
var $btn = $(this);
|
||
|
||
if(white_color == true){
|
||
|
||
$('body').addClass('change-background');
|
||
setTimeout(function(){ $('body').removeClass('change-background');
|
||
$('body').removeClass('white-content'); }, 900);
|
||
white_color = false;
|
||
}else{
|
||
|
||
$('body').addClass('change-background');
|
||
setTimeout(function(){ $('body').removeClass('change-background');
|
||
$('body').addClass('white-content');}, 900);
|
||
|
||
white_color = true;
|
||
}
|
||
|
||
|
||
});
|
||
|
||
$('.light-badge').click(function(){
|
||
$('body').addClass('white-content');
|
||
});
|
||
|
||
$('.dark-badge').click(function(){
|
||
$('body').removeClass('white-content');
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
|
||
|
||
|
||
|
||
<script src="../../../assets/demo/docs.min.js"></script>
|
||
<script src="../../../assets/demo/vendor/anchor.min.js"></script>
|
||
<script src="../../../assets/demo/vendor/clipboard.min.js"></script>
|
||
<script src="../../../assets/demo/vendor/holder.min.js"></script>
|
||
<script src="../../../assets/demo/src/application.js"></script>
|
||
|
||
<script>
|
||
$(document).ready(function(){
|
||
if($('#lineChartExample').length != 0){
|
||
demo.initDocChart();
|
||
}
|
||
|
||
|
||
|
||
|
||
});
|
||
</script>
|
||
|
||
<script>
|
||
Holder.addTheme('gray', {
|
||
bg: '#777',
|
||
fg: 'rgba(255,255,255,.75)',
|
||
font: 'Helvetica',
|
||
fontweight: 'normal'
|
||
})
|
||
</script>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<script src="https://cdn.trackjs.com/agent/v3/latest/t.js"></script><script>
|
||
window.TrackJS &&
|
||
TrackJS.install({
|
||
token: "ee6fab19c5a04ac1a32a645abde4613a",
|
||
application: "black-dashboard-free"
|
||
});
|
||
</script>
|
||
|
||
|
||
</body>
|
||
</html>
|