maxmustermann/AdminLTE
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity
AdminLTE/docs/layout.md
REJack dd0794bab2
doc changes + a little info-box overlay bugfix 
- updated assets
- added bootstrap-duallistbox in dependencies
- updated colors section in layout
- finished components/cards
- created & finished components/boxes
- added missing position relative to .info-box
2019-07-28 19:16:16 +02:00

3.4 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.
  • Sidebar .sidebar-wrapper. Contains the user panel and sidebar 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.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.

  • Fixed Sidebar: use the class .layout-fixed to get a fixed sidebar.
  • Fixed Navbar: use the class .layout-navbar-fixed to get a navbar navbar.
  • Fixed Footer: use the class .layout-footer-fixed to get a navbar 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.

Color Variations

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:

  • .navbar-*
  • .sidebar-dark-*
  • .sidebar-light-*
Info

You can combine .navbar-* with .navbar-light or .navbar-dark.

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}