AdminLTE-2.2.0 Learning

The goods are based on Bootstrap 3 (which provides a uniform style that overrides the default), so the official recommendation is to understand Bootstrap 3 first.

# layout Layouts

The layout consists of four main parts:

• Wrapper (. Wrapper). A div to wrap the entire site.
• Main Header (. main-header). Includes logo and navigation bar.
• Sidebar (. sidebar-wrapper). Contains the user panel and the sidebar menu.
• Content (. content-wrapper). Contains the page header and content.

Layouts Option Layout Options

Adminlte 2.0 provides some options for these layout. Each of the following classes can be added to the <body/> to get the desired results.

• Fixed: Use Class (. Fixed) to get a fixed header and sidebar.
• Collapsed Sidebar (convergent sidebar): Use Class (. sidebar-collapse) to get a convergent sidebar when loading (that is, the default sidebar is shrunk after loading).
• Boxed layout (box layouts): Use Class (. layout-boxed) to get a box-type layout-stretching only to 1250px.
• Top Navigation: Use Class (. layout-top-nav) to remove the sidebar and display the connection at the top navigation bar.

It is important to note that layout-boxed and fixed cannot be used at the same time. All the others can be used in combination.

<class= "Skin-blue sidebar-mini">... </ Body >

Skin Skins

Located under the Dist/css/skins folder. Adding the corresponding class to the <body/> will change the display of the template.

The class of all skins is as follows:

Skin-black-light, Skin-black-light.min, Skin-black, Skin-black.min, Skin-blue-light, Skin-blue-light.min, Skin-blue, Skin-blue.min, Skin-green-light, Skin-green-light.min, Skin-green, Skin-green.min, Skin-purple-light, Skin-purple-light.min, Skin-purple, Skin-purple.min, Skin-red-light, Skin-red-light.min, skin-red, Skin-red.min, Skin-yellow-light, Skin-yellow-light.min, Skin-yellow, skin-yellow.min

<class= "Skin-blue sidebar-mini">... </ Body >

# Adminlte Javascript Options

You can modify the app.js of the Adminlte in the following ways:

Edit App.js

In the JS file, modify the $. The Adminlte.options object.

Define Adminlteoptions

Define a global option variable whose name is adminlteoptions and then initialize it before loading app.js.

Cases:

<Script>  varadminlteoptions= {    //Enable Sidebar expand on hover effect for sidebar mini    //This option was forced to true if both the fixed layout and sidebar mini    //is used togetherSidebarexpandonhover:true,    //Boxrefresh PluginEnableboxrefresh:true,    //bootstrap.js tooltipEnablebstoppltip:true  };</Script><Scriptsrc= ' Dist/js/app.js 'type= ' Text/javascript '></Script>

Available Adminlte options

{  //Add slimscroll to NavBar menus  //This requires your to load the Slimscroll plugin  //In every page before App.jsNavbarmenuslimscroll:true, Navbarmenuslimscrollwidth:"3px",//The width of the scroll barNavbarmenuheight: "200px",//The height of the inner menu  //General animation speed for JS animated elements such as box Collapse/expand and  //sidebar treeview Slide Up/down. This options accepts an integer as milliseconds,  //' fast ', ' normal ', or ' slow 'animationspeed:500,  //Sidebar Push Menu toggle button SelectorSidebartoggleselector: "[data-toggle= ' Offcanvas ']",  //Activate Sidebar Push menuSidebarpushmenu:true,  //Activate Sidebar Slimscroll If the fixed layout is set (Requires Slimscroll Plugin)Sidebarslimscroll:true,  //Enable Sidebar expand on hover effect for sidebar mini  //This option was forced to true if both the fixed layout and sidebar mini  //is used togetherSidebarexpandonhover:false,  //Boxrefresh PluginEnableboxrefresh:true,  //bootstrap.js tooltipEnablebstoppltip:true, Bstooltipselector:"[data-toggle= ' tooltip ']",  //Enable Fast Click. Fastclick.js creates a more  //Native touch experience with touch devices. If You  //choose to enable the plugin, make sure you load the script  //before Adminlte ' s app.jsEnablefastclick:true,  //Control Sidebar OptionsEnablecontrolsidebar:true, controlsidebaroptions: {//which button should trigger the Open/close eventTogglebtnselector: "[data-toggle= ' Control-sidebar ']",    //The sidebar selectorSelector: ". Control-sidebar",    //Enable slide over contentSlidetrue  },  //Box Widget Plugin. Enable This plugin  //To allow boxes to be collapsed and/or removedEnableboxwidget:true,  //Box Widget Plugin optionsboxwidgetoptions: {boxwidgeticons: {//Collapse iconCollapse: ' Fa-minus ',      //Open iconOpen: ' Fa-plus ',      //Remove iconRemove: ' Fa-times '}, Boxwidgetselectors: {//Remove button SelectorRemove: ' [data-widget= ' remove '] ',      //Collapse button SelectorCollapse: ' [data-widget= ' collapse '] '    }  },  //Direct Chat Plugin optionsdirectchat: {//Enable Direct Chat by defaultEnabletrue,    //The button to open and close the Chat contacts paneContacttoggleselector: ' [data-widget= ' chat-pane-toggle '] '  },  //Define The set of colors to use globally around the websitecolors: {lightblue:"#3c8dbc", Red:"#f56954", Green:"#00a65a", Aqua:"#00c0ef", Yellow:"#f39c12", Blue:"#0073b7", Navy:"#001F3F", Teal:"#39CCCC", Olive:"#3D9970", Lime:"#01FF70", Orange:"#FF851B", Fuchsia:"#F012BE", Purple:"#8E24AA", maroon:"#D81B60", Black:"#222222", Gray:"#d2d6de"  },  //The standard screens sizes that Bootstrap uses.  //If You change these in the Variables.less file, change  //them here too.screensizes: {xs:480, SM:768, MD:992, LG:1200  }}

# components

AdminLTE-2.2.0 Learning