admin-lte
Version:
Responsive open source admin dashboard and control panel.
572 lines (412 loc) • 20.6 kB
HTML
<html lang="en"> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Layout | AdminLTE 3 Documentation</title>
<!-- Begin Jekyll SEO tag v2.5.0 -->
<title>Layout | AdminLTE v3 Documentaion</title>
<meta name="generator" content="Jekyll v3.8.5" />
<meta property="og:title" content="Layout" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="AdminLTE v3 Documentaion" />
<meta property="og:description" content="AdminLTE v3 Documentaion" />
<meta property="og:site_name" content="AdminLTE v3 Documentaion" />
<script type="application/ld+json">
{"description":"AdminLTE v3 Documentaion","@type":"WebPage","url":"/layout.html","headline":"Layout","@context":"http://schema.org"}</script>
<!-- End Jekyll SEO tag -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700">
<link rel="stylesheet" href="/assets/plugins/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="/assets/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
<link rel="stylesheet" href="/assets/css/docs.css">
<link rel="stylesheet" href="/assets/css/highlighter.css">
<link rel="stylesheet" href="/assets/css/adminlte.min.css">
</head>
<body class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed">
<div class="wrapper"> <nav class="main-header navbar navbar-expand navbar-white navbar-light">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link bg-info rounded dropdown-toggle" href="#" id="navbarVersionDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
v3.0
</a>
<div class="dropdown-menu py-0" aria-labelledby="navbarVersionDropdown">
<a class="dropdown-item bg-info disabled" href="#">v3.0</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://adminlte.io/docs/2.4/installation">v2.4</a>
<a class="dropdown-item" href="https://adminlte.io/themes/AdminLTE/documentation/index.html"><= v2.3</a>
</div>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<!-- <li class="nav-item d-none d-sm-inline-block">
<a href="index3.html" class="nav-link">Home</a>
</li> -->
</ul>
<!-- SEARCH FORM -->
<!-- <form class="form-check-inline ml-3">
<div class="input-group input-group-sm">
<input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-navbar" type="submit">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</form> -->
</nav>
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<a href="/index.html" class="brand-link logo-switch">
<img src="/assets/img/logo-xs.png" alt="AdminLTE Docs Logo Small" class="brand-image-xl logo-xs">
<img src="/assets/img/logo-xl.png" alt="AdminLTE Docs Logo Large" class="brand-image-xs logo-xl" style="left: 12px">
</a>
<div class="sidebar">
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar nav-child-indent flex-column" data-widget="treeview" role="menu">
<li class="nav-item ">
<a href="/index.html" class="nav-link ">
<i class="nav-icon fas fa-microchip"></i>
<p>
Installation
</p>
</a>
</li>
<li class="nav-item ">
<a href="/dependencies.html" class="nav-link ">
<i class="nav-icon fas fa-handshake"></i>
<p>
Dependencies & Plugins
</p>
</a>
</li>
<li class="nav-item ">
<a href="/layout.html" class="nav-link active">
<i class="nav-icon fas fa-copy"></i>
<p>
Layout
</p>
</a>
</li>
<li class="nav-item has-treeview ">
<a href="/components" class="nav-link ">
<i class="nav-icon fas fa-th"></i>
<p>
Components
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="/components/main-header.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Main Header</p>
</a>
</li>
<li class="nav-item">
<a href="/components/main-sidebar.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Main Sidebar</p>
</a>
</li>
<li class="nav-item">
<a href="/components/control-sidebar.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Control Sidebar</p>
</a>
</li>
<li class="nav-item">
<a href="/components/cards.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Card</p>
</a>
</li>
<li class="nav-item">
<a href="/components/boxes.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Small-/ Info-Box</p>
</a>
</li>
<li class="nav-item">
<a href="/components/direct-chat.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Direct Chat</p>
</a>
</li>
<li class="nav-item">
<a href="/components/timeline.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Timeline</p>
</a>
</li>
<li class="nav-item">
<a href="/components/ribbons.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Ribbons</p>
</a>
</li>
<li class="nav-item">
<a href="/components/miscellaneous.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Miscellaneous</p>
</a>
</li>
<li class="nav-item">
<a href="/components/plugins.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Plugins</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview ">
<a href="/javascript" class="nav-link ">
<i class="nav-icon fas fa-code"></i>
<p>
JavaScript
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="/javascript/layout.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Layout</p>
</a>
</li>
<li class="nav-item">
<a href="/javascript/push-menu.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Push Menu</p>
</a>
</li>
<li class="nav-item">
<a href="/javascript/treeview.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Treeview</p>
</a>
</li>
<li class="nav-item">
<a href="/javascript/card-widget.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Card Widget</p>
</a>
</li>
<li class="nav-item">
<a href="/javascript/card-refresh.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>CardRefresh</p>
</a>
</li>
<li class="nav-item">
<a href="/javascript/control-sidebar.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Control Sidebar</p>
</a>
</li>
<li class="nav-item">
<a href="/javascript/direct-chat.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Direct Chat</p>
</a>
</li>
<li class="nav-item">
<a href="/javascript/todo-list.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Todo List</p>
</a>
</li>
<li class="nav-item">
<a href="/javascript/toasts.html" class="nav-link ">
<i class="far fa-circle nav-icon"></i>
<p>Toasts</p>
</a>
</li>
</ul>
</li>
<li class="nav-item ">
<a href="/browser-support.html" class="nav-link ">
<i class="nav-icon fab fa-chrome"></i>
<p>
Browser Support
</p>
</a>
</li>
<li class="nav-item ">
<a href="/upgrade-guide.html" class="nav-link ">
<i class="nav-icon fas fa-hand-point-up"></i>
<p>
Upgrade Guide
</p>
</a>
</li>
<li class="nav-item ">
<a href="/implementations.html" class="nav-link ">
<i class="nav-icon fas fa-bookmark"></i>
<p>
Implementations
</p>
</a>
</li>
<li class="nav-item ">
<a href="/faq.html" class="nav-link ">
<i class="nav-icon fas fa-question-circle"></i>
<p>
FAQ
</p>
</a>
</li>
<li class="nav-item ">
<a href="/license.html" class="nav-link ">
<i class="nav-icon fas fa-file-alt"></i>
<p>
License
</p>
</a>
</li>
</ul>
</nav>
</div>
</aside>
<div class="content-wrapper px-4 py-2">
<div class="content-header">
<h1 class="text-dark">Layout</h1>
</div>
<div class="content px-2">
<blockquote class="quote-info mt-0">
<h5>Tip!</h5>
<p>The <a href="https://adminlte.io/themes/v3/starter.html">starter page</a> is a good place to start building your app if you’d like to start from scratch.</p>
</blockquote>
<p>The layout consists of four major parts:</p>
<ul>
<li>Wrapper <code class="highlighter-rouge">.wrapper</code>. A div that wraps the whole site.</li>
<li>Main Header <code class="highlighter-rouge">.main-header</code>. Contains the logo and navbar.</li>
<li>Sidebar <code class="highlighter-rouge">.sidebar-wrapper</code>. Contains the user panel and sidebar menu.</li>
<li>Content <code class="highlighter-rouge">.content-wrapper</code>. Contains the page header and content.</li>
</ul>
<h4 class="mt-4">Layout Options</h4>
<blockquote class="quote-danger">
<h5>Note!</h5>
<p>You cannot use both layout-boxed and layout-navbar-fixed or layout-footer-fixed at the same time. Anything else can be mixed together.</p>
</blockquote>
<p>AdminLTE 3.0 provides a set of options to apply to your main layout. Each one of these classes can be added to the body tag to get the desired goal.</p>
<ul>
<li>Fixed Sidebar: use the class <code class="highlighter-rouge">.layout-fixed</code> to get a fixed sidebar.</li>
<li>Fixed Navbar: use the class <code class="highlighter-rouge">.layout-navbar-fixed</code> to get a fixed navbar.</li>
<li>Fixed Footer: use the class <code class="highlighter-rouge">.layout-footer-fixed</code> to get a fixed footer.</li>
<li>Collapsed Sidebar: use the class <code class="highlighter-rouge">.sidebar-collapse</code> to have a collapsed sidebar upon loading.</li>
<li>Boxed Layout: use the class <code class="highlighter-rouge">.layout-boxed</code> to get a boxed layout that stretches only to 1250px.</li>
<li>Top Navigation: use the class <code class="highlighter-rouge">.layout-top-nav</code> to remove the sidebar and have your links at the top navbar.</li>
</ul>
<h5>Responsive Variations</h5>
<p>You can also use the following classes for responsive changes with placing</p>
<ul>
<li>Fixed Navbar:
<ul>
<li>use the class <code class="highlighter-rouge">.layout-*-navbar-fixed</code> to get a fixed navbar.</li>
<li>use the class <code class="highlighter-rouge">.layout-*-navbar-not-fixed</code> to get a not fixed navbar.</li>
</ul>
</li>
<li>Fixed Footer:
<ul>
<li>use the class <code class="highlighter-rouge">.layout-*-footer-fixed</code> to get a fixed footer.</li>
<li>use the class <code class="highlighter-rouge">.layout-*-footer-not-fixed</code> to get a not fixed footer.</li>
</ul>
</li>
</ul>
<blockquote class="quote-info">
<h5>Tip!</h5>
<p>If you want to use anchors with a fixed navbar, you need to add <code class="highlighter-rouge">.anchor</code> to you hidden anchor, e.g. <code class="highlighter-rouge"><a id="testAnchor" class="anchor"></a></code>.</p>
</blockquote>
<h4>Color Variations</h4>
<p>AdminLTE 3.0 provides a set of color variations to apply to your sidebar (light & dark) & navbar. You can combine any available color with these class prefixes:</p>
<ul>
<li><code class="highlighter-rouge">.navbar-*</code></li>
<li><code class="highlighter-rouge">.sidebar-dark-*</code></li>
<li><code class="highlighter-rouge">.sidebar-light-*</code></li>
<li><code class="highlighter-rouge">.accent-*</code></li>
</ul>
<blockquote class="quote-info">
<h6>New</h6>
<p>You can use override the link/accent color in AdminLTE, you can add <code class="highlighter-rouge">.accent-*</code> to <code class="highlighter-rouge">body</code>.</p>
</blockquote>
<blockquote class="quote-info">
<h6>Info</h6>
<p>You can combine <code class="highlighter-rouge">.navbar-*</code> with <code class="highlighter-rouge">.navbar-light</code> or <code class="highlighter-rouge">.navbar-dark</code>.</p>
</blockquote>
<p>The following colors are available:</p>
<h5>Theme Colors</h5>
<div class="row">
<div class="col-sm-4 col-lg-3 p-3 bg-primary"> Primary (primary) / Blue (blue)</div>
<div class="col-sm-4 col-lg-3 p-3 bg-secondary"> Secondary (secondary)</div>
<div class="col-sm-4 col-lg-3 p-3 bg-success"> Success (success) / Green (green)</div>
<div class="col-sm-4 col-lg-3 p-3 bg-info"> Info (info) / Cyan (cyan)</div>
<div class="col-sm-4 col-lg-3 p-3 bg-warning"> Warning (warning) / Yellow (yellow)</div>
<div class="col-sm-4 col-lg-3 p-3 bg-danger"> Danger (danger) / Red (red)</div>
</div>
<h5 class="mt-4">Black/White Nuances</h5>
<div class="row">
<div class="col-sm-4 col-lg-3 p-3 bg-black"> Black (black)</div>
<div class="col-sm-4 col-lg-3 p-3 bg-gray-dark"> Gray Dark (gray-dark)</div>
<div class="col-sm-4 col-lg-3 p-3 bg-gray"> Gray (gray)</div>
<div class="col-sm-4 col-lg-3 p-3 bg-light"> Light (light)</div>
</div>
<h5 class="mt-4">Colors</h5>
<div class="row">
<div class="col-sm-4 col-lg-3 p-3 bg-indigo"> Indigo (indigo)</div>
<div class="col-sm-4 col-lg-3 p-3 bg-navy"> Navy (navy)</div>
<div class="col-sm-4 col-lg-3 p-3 bg-purple"> Purple (purple)</div>
<div class="col-sm-4 col-lg-3 p-3 bg-fuchsia"> Fuchsia (fuchsia)</div>
<div class="col-sm-4 col-lg-3 p-3 bg-pink"> Pink (pink)</div>
<div class="col-sm-4 col-lg-3 p-3 bg-maroon"> Maroon (maroon)</div>
<div class="col-sm-4 col-lg-3 p-3 bg-orange"> Orange (orange)</div>
<div class="col-sm-4 col-lg-3 p-3 bg-lime"> Lime (lime)</div>
<div class="col-sm-4 col-lg-3 p-3 bg-teal"> Teal (teal)</div>
<div class="col-sm-4 col-lg-3 p-3 bg-olive"> Olive (olive)</div>
</div>
<blockquote class="quote-info">
<h5>Tip!</h5>
<p>You can use these color variations even with <code class="highlighter-rouge">.text-*</code>, <code class="highlighter-rouge">.bg-*</code> & much more.</p>
</blockquote>
<h5>Custom Range / Switch</h5>
<p>For custom colored custom-range you can add this classes:</p>
<ul>
<li><code class="highlighter-rouge">.custom-range-*</code></li>
</ul>
<p>For custom colored custom-switch you can add this classes:</p>
<ul>
<li><code class="highlighter-rouge">.custom-switch-off-*</code> (for custom switch off)</li>
<li><code class="highlighter-rouge">.custom-switch-on-*</code> (for custom switch on)</li>
</ul>
<h5>Toasts</h5>
<p>You can also use <code class="highlighter-rouge">bg-*</code> beside the <code class="highlighter-rouge">.toast</code> to get a nice colored toast.</p>
<h5>Plugin Support</h5>
<p>You can use the all the colors above with these plugins:</p>
<ul>
<li>Bootstrap Slider
<ul>
<li><code class="highlighter-rouge">.slider-*</code> (wrapped around the slider)</li>
</ul>
</li>
<li>iCheck-Bootstrap
<ul>
<li><code class="highlighter-rouge">.icheck-*</code></li>
</ul>
</li>
</ul>
</div>
</div>
<footer class="main-footer">
<div class="float-right d-none d-sm-inline">
v3.0.1
</div>
<strong>Copyright © 2014-2019 <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
</footer>
</div>
<script src="/assets/plugins/jquery/jquery.min.js"></script>
<script src="/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/assets/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<script src="/assets/js/adminlte.min.js"></script>
</body>
</html>