github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity
AdminLTE/docs/layout.md

5.9 KiB
Raw Blame History

layout title
page Layout
Tip!

The starter page is a good place to start building your app if you'd like to start from scratch. {: .quote-info .mt-0}

The layout consists of four major parts:

  • Wrapper .wrapper. A div that wraps the whole site.
  • Main Header .main-header. Contains the logo and navbar.
  • Main Sidebar .main-sidebar. Contains the sidebar user panel, search form and menu.
  • Content .content-wrapper. Contains the page header and content.

Layout Options

{: .mt-4}

Note!

You cannot use both layout-boxed and layout-navbar-fixed or layout-footer-fixed at the same time. Anything else can be mixed together. {: .quote-danger}

AdminLTE 3.1 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.

  • Fixed Sidebar: use the class .layout-fixed to get a fixed sidebar.
  • Fixed Navbar: use the class .layout-navbar-fixed to get a fixed navbar.
  • Fixed Footer: use the class .layout-footer-fixed to get a fixed footer.
  • Collapsed Sidebar: use the class .sidebar-collapse to have a collapsed sidebar upon loading.
  • Boxed Layout: use the class .layout-boxed to get a boxed layout that stretches only to 1250px.
  • Top Navigation: use the class .layout-top-nav to remove the sidebar and have your links at the top navbar.
Responsive Variations

You can also use the following classes for responsive changes with placing

  • Fixed Navbar:
    • use the class .layout-*-navbar-fixed to get a fixed navbar.
    • use the class .layout-*-navbar-not-fixed to get a not fixed navbar.
  • Fixed Footer:
    • use the class .layout-*-footer-fixed to get a fixed footer.
    • use the class .layout-*-footer-not-fixed to get a not fixed footer.
Tip!

If you want to use anchors with a fixed navbar, you need to add .anchor to you hidden anchor, e.g. <a id="testAnchor" class="anchor"></a>.

To get a smooth scrolling to the anchor you need to add .scroll-smooth to your HTML tag like this <html class="scroll-smooth"> otherwise it jumps directly to your anchor, .scroll-smooth can cause issues with a Chrome extension called ScrollAnywhere. {: .quote-info}

Preloader

Preloader to avoid https://github.com/ColorlibHQ/AdminLTE/discussions/3319

<div class="wrapper">
  <!-- Preloader -->
  <div class="preloader">
    <img src="dist/img/AdminLTELogo.png" alt="AdminLTELogo" height="60" width="60">
  </div>
</div>
  • Preloader elements should be added inside .wrapper element.
  • You can replace image OR modify size OR include any preload items inside .preloader element.

Dark Mode

AdminLTE 3.1 provides a dark mode option. You can add in body tag:

  • .dark-mode

Color Variations

AdminLTE 3.1 provides a set of color variations to apply to your sidebar (light & dark) & navbar. You can combine any available color with these class prefixes:

  • .navbar-*
  • .sidebar-dark-*
  • .sidebar-light-*
  • .accent-*
New

You can use override the link/accent color in AdminLTE, you can add .accent-* to body. {: .quote-info}

Info

You can combine .navbar-* with .navbar-light or .navbar-dark. {: .quote-info}

Recommended for Dark Mode

You must use only .navbar-dark without only combination. {: .quote-info}

The following colors are available:

Theme Colors
Primary (primary) / Blue (blue)
Secondary (secondary)
Success (success) / Green (green)
Info (info) / Cyan (cyan)
Warning (warning) / Yellow (yellow)
Danger (danger) / Red (red)
Black/White Nuances

{: .mt-4}

Black (black)
Gray Dark (gray-dark)
Gray (gray)
Light (light)
Colors

{: .mt-4}

Indigo (indigo)
Navy (navy)
Purple (purple)
Fuchsia (fuchsia)
Pink (pink)
Maroon (maroon)
Orange (orange)
Lime (lime)
Teal (teal)
Olive (olive)
Tip!

You can use these color variations even with .text-*, .bg-* & much more. {: .quote-info}

Custom Range / Switch

For custom colored custom-checkbox & custom-radio you can add this classes:

  • .custom-control-input-*

You can also change the look to outlined checkbox & radio with adding the .custom-control-input-outline on the custom control input.

For custom colored custom-range you can add this classes:

  • .custom-range-*

For custom colored custom-range you can add this classes:

  • .custom-range-*

For custom colored custom-switch you can add this classes:

  • .custom-switch-off-* (for custom switch off)
  • .custom-switch-on-* (for custom switch on)
Toasts

You can also use bg-* beside the .toast to get a nice colored toast.

Plugin Support

You can use the all the colors above with these plugins:

  • Bootstrap Slider
    • .slider-* (wrapped around the slider)
  • iCheck-Bootstrap
    • .icheck-*