<div class="info-box">
- <-- Apply any bg-* class to to the icon to color it -->
+ <!-- Apply any bg-* class to to the icon to color it -->
<span class="info-box-icon bg-red"><i class="fa fa-star-o"></i></span>
<div class="info-box-content">
<span class="info-box-text">Likes</span>
@@ -610,13 +610,13 @@
Markup
- <-- Apply any bg-* class to to the info-box to color it -->
+ <!-- Apply any bg-* class to to the info-box to color it -->
<div class="info-box bg-red">
<span class="info-box-icon"><i class="fa fa-comments-o"></i></span>
<div class="info-box-content">
<span class="info-box-text">Likes</span>
<span class="info-box-number">41,410</span>
- <-- The progress section is optional -->
+ <!-- The progress section is optional -->
<div class="progress">
<div class="progress-bar" style="width: 70%"></div>
</div>
@@ -818,9 +818,9 @@
AdminLTE data-widget attribute provides boxes with the ability to collapse or be removed. The buttons
are placed in the box-tools which is placed in the box-header.
-<-- This will cause the box to be removed when clicked -->
+<!-- This will cause the box to be removed when clicked -->
<button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>
-<-- This will cause the box to collapse when clicked -->
+<!-- This will cause the box to collapse when clicked -->
<button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
@@ -1325,16 +1325,16 @@
Direct Chat Markup
-<-- Construct the box with style you want. Here we are using box-danger -->
-<-- Then add the class direct-chat and choose the direct-chat-* contexual class -->
-<-- The contextual class should match the box, so we are using direct-chat-danger -->
+<!-- Construct the box with style you want. Here we are using box-danger -->
+<!-- Then add the class direct-chat and choose the direct-chat-* contexual class -->
+<!-- The contextual class should match the box, so we are using direct-chat-danger -->
<div class="box box-danger direct-chat direct-chat-danger">
<div class="box-header with-border">
<h3 class="box-title">Direct Chat</h3>
<div class="box-tools pull-right">
<span data-toggle="tooltip" title="3 New Messages" class="badge bg-red">3</span>
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
- <-- In box-tools add this button if you intend to use the contacts pane -->
+ <!-- In box-tools add this button if you intend to use the contacts pane -->
<button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
diff --git a/documentation/index.html b/documentation/index.html
index 2807abb88..9f37cb5ef 100644
--- a/documentation/index.html
+++ b/documentation/index.html
@@ -4,17 +4,17 @@
AdminLTE 2 | Documentation
-
+
-
+
-
+
-
+
-
-
-
+
+
+
@@ -58,29 +58,29 @@
@@ -103,9 +103,9 @@
-
- Introduction
-
+
+ Introduction
+
AdminLTE is a popular open source WebApp template for admin dashboards and control panels.
It is a responsive HTML template that is based on the CSS framework Bootstrap 3.
It utilizes all of the Bootstrap components in its design and re-styles many
@@ -116,43 +116,41 @@
+
-
- Download
-
- AdminLTE can be downloaded in two different versions, each appealing to different
- skill levels and use case.
+
+ Download
+
+ AdminLTE can be downloaded in two different versions, each appealing to different skill levels and use case.
-
-
-
-
- Ready
-
+
+
+
+
+ Ready
+
-
-
-
-
- Source Code
-
+
+
+
+ Source Code
+
-
- File Hierarchy of the Source Code Package
+ File Hierarchy of the Source Code Package
AdminLTE/
├── dist/
@@ -170,6 +168,7 @@ AdminLTE/
├── All the customized plugins CSS and JS files
+
@@ -185,9 +184,9 @@ AdminLTE/
-
- A Word of Advice
-
+
+ A Word of Advice
+
Before you go to see your new awesome theme, here are few tips on how to familiarize yourself with it:
@@ -203,11 +202,12 @@ AdminLTE/
+
-
- Layout
- The layout consists of four major parts:
+
+ Layout
+ 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.
@@ -298,10 +298,11 @@ AdminLTE/
+
-
- AdminLTE Javascript Options
+
+ AdminLTE Javascript Options
Modifying the options of AdminLTE's app.js can be done using one of the following ways.
Editing app.js
@@ -310,7 +311,7 @@ AdminLTE/
Defining AdminLTEOptions
Alternatively, you can define a global options variable named AdminLTEOptions and initialize it before loading app.js.
Example
- <script>
+ <script>
var AdminLTEOptions = {
//Enable sidebar expand on hover effect for sidebar mini
//This option is forced to true if both the fixed layout and sidebar mini
@@ -322,17 +323,17 @@ AdminLTE/
enableBSToppltip: true
};
</script>
-<script src='dist/js/app.js' type='text/javascript'></script>
+<script src="dist/js/app.js" type="text/javascript"></script>
Available AdminLTE Options
- {
+ {
//Add slimscroll to navbar menus
//This requires you to load the slimscroll plugin
//in every page before app.js
navbarMenuSlimscroll: true,
navbarMenuSlimscrollWidth: "3px", //The width of the scroll bar
navbarMenuHeight: "200px", //The height of the inner menu
- //General animation speed for JS animated elements such as box collapse/expand and
+ //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,
@@ -424,11 +425,12 @@ AdminLTE/
}
+
-
- Components
-
+
+ Components
+
Reminder!
AdminLTE uses all of Bootstrap 3 components. It's a good start to review
@@ -436,7 +438,7 @@ AdminLTE/
that this documentation does not cover.
-
+
Tip!
If you go through the example pages and would like to copy a component, right-click on
@@ -444,8 +446,8 @@ AdminLTE/
the HTML page.
- Main Header
- The main header contains the logo and navbar. Construction of the
+
Main Header
+ The main header contains the logo and navbar. Construction of the
navbar differs slightly from Bootstrap because it has components that Bootstrap doesn't provide.
The navbar can be constructed in two way. This an example for the normal navbar and next we will provide an example for
the top nav layout.
@@ -454,7 +456,7 @@ AdminLTE/
Main Header Example
- AdminLTE
+ AdminLTE
- <header class="main-header">
+ <header class="main-header">
<a href="../../index2.html" class="logo">
<!-- LOGO -->
AdminLTE
@@ -612,7 +614,7 @@ AdminLTE/
<li><!-- start message -->
<a href="#">
<div class="pull-left">
- <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"/>
+ <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
</div>
<h4>
Sender Name
@@ -684,13 +686,13 @@ AdminLTE/
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
- <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image"/>
+ <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
<span class="hidden-xs">Alexander Pierce</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
- <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
+ <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
<p>
Alexander Pierce - Web Developer
<small>Member since Nov. 2012</small>
@@ -783,7 +785,7 @@ AdminLTE/
-
+
<header class="main-header">
<nav class="navbar navbar-static-top">
<div class="container-fluid">
@@ -837,7 +839,7 @@ AdminLTE/
- Sidebar
+ Sidebar
The sidebar used in this page to the left provides an example of what your sidebar should like.
Construction of a sidebar:
@@ -849,7 +851,7 @@ AdminLTE/
<!-- user panel (Optional) -->
<div class="user-panel">
<div class="pull-left image">
- <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
+ <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>User Name</p>
@@ -861,9 +863,9 @@ AdminLTE/
<!-- Search Form (Optional) -->
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
- <input type="text" name="q" class="form-control" placeholder="Search..."/>
+ <input type="text" name="q" class="form-control" placeholder="Search...">
<span class="input-group-btn">
- <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+ <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i></button>
</span>
</div>
</form><!-- /.sidebar-form -->
@@ -911,12 +913,12 @@ AdminLTE/
<!-- This div must placed right after the sidebar for it to work-->
<div class="control-sidebar-bg"></div>
- Once you create the sidebar, you will need a toggle button to open/close it.
+
Once you create the sidebar, you will need a toggle button to open/close it.
By adding the attribute data-toggle="control-sidebar" to any button, it will
automatically act as the toggle button.
Toggle Button Example
-
+
Sidebar Toggle Markup
<button class="btn btn-default" data-toggle="control-sidebar">Toggle Right Sidebar</button>
@@ -1057,7 +1059,7 @@ AdminLTE/
first style apply any bg-* class to the icon itself. For the other style, apply the bg-* class to the info-box div.
- Box
+ Box
The box component is the most widely used component through out this template. You can
use it for anything from displaying charts to just blocks of text. It comes in many different
styles that we will explore below.
@@ -1327,7 +1329,7 @@ AdminLTE/
</div><!-- /.box -->
- We can also add labels, badges, pagination, tooltips, inputs and many more in the box tools. A few examples:
+ We can also add labels, badges, pagination, tooltips, inputs and many more in the box tools. A few examples:
@@ -1360,7 +1362,7 @@ AdminLTE/
Input
-
+
@@ -1375,7 +1377,7 @@ AdminLTE/
<h3 class="box-title">Input</h3>
<div class="box-tools pull-right">
<div class="has-feedback">
- <input type="text" class="form-control input-sm" placeholder="Search..."/>
+ <input type="text" class="form-control input-sm" placeholder="Search...">
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</div><!-- /.box-tools -->
@@ -1417,7 +1419,7 @@ AdminLTE/
If you inserted a box into the document after app.js was loaded, you have to activate
the collapse/remove buttons explicitly by calling .activateBox():
- <script>
+ <script>
$("#box-widget").activateBox();
</script>
@@ -1473,7 +1475,7 @@ AdminLTE/
Direct Chat
- 3
+ 3
@@ -1484,11 +1486,11 @@ AdminLTE/
-
- Alexander Pierce
-
+
+ Alexander Pierce
+
- 
+
Is this template really for free? That's unbelievable!
@@ -1496,11 +1498,11 @@ AdminLTE/
+