2015-02-01 22:25:09 +01:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< title > AdminLTE 2 | Documentation< / title >
< meta content = 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name = 'viewport' >
< link href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel = "stylesheet" type = "text/css" / >
< link href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel = "stylesheet" type = "text/css" / >
<!-- Ionicons -->
< link href = "http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css" rel = "stylesheet" type = "text/css" / >
<!-- Theme style -->
< link href = "../dist/css/AdminLTE.min.css" rel = "stylesheet" type = "text/css" / >
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!-- [if lt IE 9]>
< script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" > < / script >
< script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js" > < / script >
<![endif]-->
< style >
body {
font-family: "proxima-nova", 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 500;
}
.right-side {
2015-02-02 18:39:29 +01:00
background: #f9f9f9;
2015-02-01 22:25:09 +01:00
}
.page-header {
border: 0;
margin: 20px 0;
2015-02-02 18:39:29 +01:00
padding: 0;
2015-02-01 22:25:09 +01:00
position: relative;
2015-02-02 18:39:29 +01:00
z-index: 1;
2015-02-01 22:25:09 +01:00
}
2015-02-02 18:39:29 +01:00
.page-header span {
2015-02-01 22:25:09 +01:00
z-index: 5;
display: inline-block;
background-color: #f9f9f9;
padding: 10px 10px 10px 0;
font-size: 25px;
2015-02-02 18:39:29 +01:00
line-height: 1;
2015-02-01 22:25:09 +01:00
border-radius: 3px;
}
.page-header::before {
content: " ";
display: block;
background: #ededed;
width: 100%;
height: 1px;
position: absolute;
top: 50%;
margin-top: 2px;
2015-02-02 18:39:29 +01:00
z-index: -1;
2015-02-01 22:25:09 +01:00
}
.lead {
font-size: 16px;
2015-02-02 18:39:29 +01:00
font-weight: 400;
2015-02-01 22:25:09 +01:00
}
.content {
padding: 10px 25px;
}
.hierarchy {
background: #333;
color: #fff;
}
pre {
border: none;
}
/* desert scheme ported from vim to google prettify */
pre.prettyprint { display: block; background-color: #333; max-height: 300px; border: none!important;}
pre .nocode { background-color: none; color: #000 }
pre .str { color: #ffa0a0 } /* string - pink */
pre .kwd { color: #f0e68c; font-weight: bold }
pre .com { color: #87ceeb } /* comment - skyblue */
pre .typ { color: #98fb98 } /* type - lightgreen */
pre .lit { color: #cd5c5c } /* literal - darkred */
pre .pun { color: #fff } /* punctuation */
pre .pln { color: #fff } /* plaintext */
pre .tag { color: #f0e68c; font-weight: bold } /* html/xml tag - lightyellow */
pre .atn { color: #bdb76b; font-weight: bold } /* attribute name - khaki */
pre .atv { color: #ffa0a0 } /* attribute value - pink */
pre .dec { color: #98fb98 } /* decimal - lightgreen */
/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE } /* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { }
@media print {
pre.prettyprint { background-color: none }
pre .str, code .str { color: #060 }
pre .kwd, code .kwd { color: #006; font-weight: bold }
pre .com, code .com { color: #600; font-style: italic }
pre .typ, code .typ { color: #404; font-weight: bold }
pre .lit, code .lit { color: #044 }
pre .pun, code .pun { color: #440 }
pre .pln, code .pln { color: #000 }
pre .tag, code .tag { color: #006; font-weight: bold }
pre .atn, code .atn { color: #404 }
pre .atv, code .atv { color: #060 }
}
< / style >
< / head >
< body class = "skin-blue fixed" data-spy = "scroll" data-target = "#scrollspy" >
< div class = "wrapper" >
<!-- header logo: style can be found in header.less -->
< header class = "main-header" >
<!-- Logo -->
< a href = "../index2.html" class = "logo" > AdminLTE< / a >
<!-- Header Navbar: style can be found in header.less -->
< nav class = "navbar navbar-static-top" role = "navigation" >
<!-- Sidebar toggle button -->
< a href = "#" class = "sidebar-toggle" data-toggle = "offcanvas" role = "button" >
< span class = "sr-only" > Toggle navigation< / span >
< / a >
<!-- Navbar Right Menu -->
< div class = "navbar-custom-menu" >
< ul class = "nav navbar-nav" >
< li > < a href = "http://almsaeedstudio.com" > Almsaeed Studio< / a > < / li >
< / ul >
< / div >
< / nav >
< / header >
<!-- Left side column. contains the logo and sidebar -->
2015-02-02 18:39:29 +01:00
< aside class = "main-sidebar" >
2015-02-01 22:25:09 +01:00
<!-- sidebar: style can be found in sidebar.less -->
2015-02-02 18:39:29 +01:00
< section class = "sidebar" id = "scrollspy" >
2015-02-01 22:25:09 +01:00
<!-- sidebar menu: : style can be found in sidebar.less -->
2015-02-02 18:39:29 +01:00
< ul class = "nav sidebar-menu" >
2015-02-01 22:25:09 +01:00
< li class = "header" > TABLE OF CONTENTS< / li >
< li class = 'active' > < a href = "#introduction" > < i class = 'fa fa-circle-o' > < / i > Introduction< / a > < / li >
< li > < a href = "#download" > < i class = 'fa fa-circle-o' > < / i > Download< / a > < / li >
< li > < a href = "#dependencies" > < i class = 'fa fa-circle-o' > < / i > Dependencies< / a > < / li >
< li > < a href = "#advice" > < i class = 'fa fa-circle-o' > < / i > Advice< / a > < / li >
< li > < a href = "#layout" > < i class = 'fa fa-circle-o' > < / i > Layout< / a > < / li >
< li > < a href = "#components" > < i class = 'fa fa-circle-o' > < / i > Components< / a > < / li >
2015-02-02 18:39:29 +01:00
< li > < a href = "#browsers" > < i class = 'fa fa-circle-o' > < / i > Browser Support< / a > < / li >
< li > < a href = "#upgrade" > < i class = 'fa fa-circle-o' > < / i > Upgrade Guide< / a > < / li >
2015-02-01 22:25:09 +01:00
< / ul >
< / section >
<!-- /.sidebar -->
< / aside >
<!-- Right side column. Contains the navbar and content of the page -->
< div class = "right-side" >
<!-- Content Header (Page header) -->
< div class = "content-header" >
< h1 >
AdminLTE Documentation
< small > Current version 2.0< / small >
< / h1 >
< ol class = "breadcrumb" >
< li > < a href = "#" > < i class = "fa fa-dashboard" > < / i > Home< / a > < / li >
< li class = "active" > Documentation< / li >
< / ol >
< / div >
<!-- Main content -->
< div class = "content body" >
< section id = 'introduction' >
< h2 class = 'page-header' > < span > Introduction< / span > < / h2 >
< p class = 'lead' >
< b > AdminLTE< / b > 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
commonly used plugins to create a consistent design that can be used as a user
interface for backend applications. AdminLTE is based on a modular design, which
allows it to be easily customized and built upon. This documentation will guide you through
installing the template and exploring the various components that are bundled with the template.
< / p >
< / section > <!-- /#introduction -->
< section id = 'download' >
< h2 class = 'page-header' > < span > Download< / span > < / h2 >
< p class = 'lead' >
AdminLTE can be downloaded in two different versions, each appealing to different
skill levels and use case.
< / p >
< div class = 'row' >
< div class = 'col-sm-6' >
< div class = 'box box-primary' >
< div class = 'box-header with-border' >
< h3 class = 'box-title' > Ready< / h3 >
< span class = 'label label-primary pull-right' > < i class = 'fa fa-html5' > < / i > < / span >
< / div > <!-- /.box - header -->
< div class = 'box-body' >
< p > Compiled and ready to use in production. Download this version
if you don't want to customize AdminLTE's LESS files.< / p >
< a href = '#' class = 'btn btn-primary' > < i class = 'fa fa-download' > < / i > Download< / a >
< / div > <!-- /.box - body -->
< / div > <!-- /.box -->
< / div > <!-- /.col -->
< div class = 'col-sm-6' >
< div class = 'box box-danger' >
< div class = 'box-header with-border' >
< h3 class = 'box-title' > Source Code< / h3 >
< span class = 'label label-danger pull-right' > < i class = 'fa fa-database' > < / i > < / span >
< / div > <!-- /.box - header -->
< div class = 'box-body' >
< p > All files including the compiled CSS. Download this version
if you plan on customizing the template. < b > Requires a LESS compiler.< / b > < / p >
< a href = '#' class = 'btn btn-danger' > < i class = 'fa fa-download' > < / i > Download< / a >
< / div > <!-- /.box - body -->
< / div > <!-- /.box -->
< / div > <!-- /.col -->
< / div > <!-- /.row -->
< pre class = 'hierarchy' > < code class = "language-bash" data-lang = "bash" > File Hierarchy of the Source Code Package
AdminLTE/
├── dist/
│ ├── CSS/
│ ├── JS
│ ├── img
├── build/
│ ├── less/
│ │ ├── AdminLTE's Less files
│ └── Bootstrap-less/ (Only for reference. No modifications have been made)
│ ├── mixins/
│ ├── variables.less
│ ├── mixins.less
└── plugins/
├── All the customized plugins CSS and JS files< / code > < / pre >
< / section >
< section id = "dependencies" >
2015-02-02 18:39:29 +01:00
< h2 class = "page-header" > < span > Dependencies< / span > < / h2 >
< p class = "lead" > AdminLTE depends on two main frameworks.
2015-02-01 22:25:09 +01:00
The downloadable package contains both of these libraries, so you don't have to manually download them.< / p >
2015-02-02 18:39:29 +01:00
< ul class = "lead" >
2015-02-01 22:25:09 +01:00
< li > < a href = "http://getbootstrap.com" target = "_blank" > Bootstrap 3< / a > < / li >
< li > < a href = "http://jquery.com/" target = "_blank" > jQuery 1.11+< / a > < / li >
< / ul >
< / section >
< section id = 'advice' >
< h2 class = 'page-header' > < span > A Word of Advice< / span > < / h2 >
< p class = 'lead' >
Before you go to see your new awesome theme, here are few tips on how to familiarize yourself with it:
< / p >
< ul class = 'lead' >
< li > < b > AdminLTE is based on < a href = "http://getbootstrap.com/" target = "_blank" > Bootstrap 3< / a > .< / b > If you are unfamiliar with Bootstrap, visit their website and read through the documentation. All of Bootstrap components have been modified to fit the style of AdminLTE and provide a consistent look throughout the template. This way, we guarantee you will get the best of AdminLTE.< / li >
< li > < b > Go through the pages that are bundled with the theme.< / b > Most of the template example pages contain quick tips on how to create or use a component which can be really helpful when you need to create something on the fly.< / li >
< li > < b > Documentation.< / b > We are trying our best to make your experience with AdminLTE be smooth. One way to achieve that is to provide documentation and support. If you think that something is missing from the documentation, please do not hesitate to create an issue to tell us about it. Also, if you would like to contribute, email the support team at support@almsaeedstudio.com.< / li >
< li > < b > Built with < a href = "http://lesscss.org/" target = "_blank" > LESS< / a > .< / b > This theme uses the LESS compiler to make it easier to customize and use. LESS is easy to learn if you know css or SASS. It is not necessary to learn LESS but it will benefit you a lot in the future.< / li >
< li > < b > Hosted on < a href = "https://github.com/almasaeed2010/AdminLTE/" target = "_blank" > GitHub< / a > .< / b > Visit our GitHub repository to view issues, make requests, or contribute to the project.< / li >
< / ul >
< p class = 'lead' >
< b > Note:< / b > LESS files are better commented than the compiled css file.
< / p >
< / section >
< section id = 'layout' >
< h2 class = 'page-header' > < span > Layout< / span > < / h2 >
< p class = 'lead' > The first thing that you probably want to do is understanding the layout
of AdminLTE. The layout consists of four major parts:< / p >
< ul class = 'lead' >
< li > Wrapper < code > .wrapper< / code > < / li >
< li > Main Header < code > .main-header< / code > < / li >
2015-02-02 18:39:29 +01:00
< li > Sidebar < code > .sidebar-wrapper< / code > < / li >
< li > Content < code > .content-wrapper< / code > < / li >
2015-02-01 22:25:09 +01:00
< / ul >
< pre class = 'prettyprint' >
< !DOCTYPE html>
< html>
< head>
< meta charset="UTF-8">
< title>AdminLTE 2 | Dashboard< /title>
< meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
< !-- Bootstrap 3.3.1 loaded from CDN. You can add you own bootstrap copy -->
< !-- AdminLTE won't work without loading Bootstrap first -->
< link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
< !-- FontAwesome Icons -->
< link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
< !-- Ionicons -->
< link href="http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet" type="text/css" />
< !-- ADMINLTE MAIN CSS FILE -->
< link href="../../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
< !-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
< !-- WARNING: Respond.js doesn't work if you view the page via file:// -->
< !--[if lt IE 9]>
< script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js">< /script>
< script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js">< /script>
< ![endif]-->
< /head>
< body class="skin-blue">
< !-- Site wrapper -->
< div class="wrapper">
< !-- header logo: style can be found in header.less -->
< header class="main-header">
< a href="../../index2.html" class="logo">
< !-- LOGO -->
< /a>
< !-- Header Navbar: style can be found in header.less -->
< nav class="navbar navbar-static-top" role="navigation">
< /nav>
< /header>
< !-- =============================================== -->
< !-- Left side column. contains the sidebar -->
2015-02-02 18:39:29 +01:00
< aside class="main-sidebar">
2015-02-01 22:25:09 +01:00
< !-- sidebar: style can be found in sidebar.less -->
< section class="sidebar">
< !-- sidebar menu: : style can be found in sidebar.less -->
< ul class="sidebar-menu">
< /ul>
< /section>
< !-- /.sidebar -->
< /aside>
< !-- =============================================== -->
< !-- Right side column. Contains the content of the page -->
< div class="right-side">
< section class="content-header">
< !-- Page title and breadcrumbs go here -->
< /section>< !-- /.content-header -->
< !-- Main content -->
< section class="content">
< /section>< !-- /.content -->
< /div>< !-- /.right-side -->
< footer class="main-footer">
< div class="pull-right hidden-xs">
< b>Version< /b> 2.0
< /div>
< strong>Copyright © 2014-2015 < a href="http://almsaeedstudio.com">Almsaeed Studio< /a>.< /strong> All rights reserved.
< /footer>
< /div>< !-- ./wrapper -->
< !-- jQuery 2.1.1: both Bootstrap and AdminLTE dependent on jQuery -->
< script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">< /script>
< !-- Bootstrap 3.3.2 JS -->
< script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js" type="text/javascript">< /script>
< !-- AdminLTE App. Required in all pages -->
< script src="../../js/AdminLTE/app.js" type="text/javascript">< /script>
< /body>
< /html>< / pre >
< / section >
< section id = 'components' >
< h2 class = 'page-header' > < span > Components< / span > < / h2 >
2015-02-02 18:39:29 +01:00
< p class = "lead" > Content< / p >
2015-02-01 22:25:09 +01:00
< / section >
< section id = 'browsers' >
< h2 class = 'page-header' > < span > Browser Support< / span > < / h2 >
2015-02-02 18:39:29 +01:00
< p class = "lead" > AdminLTE supports the following browsers:< / p >
< ul >
< li > IE9+< / li >
< li > FireFox (latest)< / li >
< li > Safari (latest)< / li >
< li > Chrome (latest)< / li >
< li > Opera (latest)< / li >
< / ul >
2015-02-01 22:25:09 +01:00
< / section >
2015-02-02 18:39:29 +01:00
< section id = 'upgrade' >
< h2 class = 'page-header' > < span > Upgrade Guide< / span > < / h2 >
< p class = "lead" > Content< / p >
< / section >
< section id = 'faq' >
2015-02-01 22:25:09 +01:00
< h2 class = 'page-header' > < span > FAQ< / span > < / h2 >
2015-02-02 18:39:29 +01:00
< p class = "lead" > Content< / p >
2015-02-01 22:25:09 +01:00
< / section >
< div class = 'box' >
< div class = 'box-header with-border' >
< h3 class = 'box-title' > < / h3 >
< / div > <!-- /.box - header -->
< div class = 'box-body' > < / div > <!-- /.box - body -->
< / div > <!-- /.box -->
< / div > <!-- /.content -->
< / div > <!-- /.content - wrapper -->
< footer class = "main-footer" >
< div class = "pull-right hidden-xs" >
< b > Version< / b > 2.0
< / div >
< strong > Copyright © 2014-2015 < a href = "http://almsaeedstudio.com" > Almsaeed Studio< / a > .< / strong > All rights reserved.
< / footer >
< / div > <!-- ./wrapper -->
< script src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" > < / script >
< script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js" type = "text/javascript" > < / script >
<!-- AdminLTE App -->
2015-02-02 17:52:30 +01:00
< script src = "../dist/js/app.min.js" type = "text/javascript" > < / script >
2015-02-01 22:25:09 +01:00
<!-- SlimScroll 1.3.0 -->
< script src = "../plugins/slimScroll/jquery.slimscroll.min.js" type = "text/javascript" > < / script >
< script src = "https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js" > < / script >
< script src = "//use.typekit.net/yvy0plb.js" > < / script >
2015-02-02 18:39:29 +01:00
< script >
try {
2015-02-01 22:25:09 +01:00
Typekit.load();
} catch (e) {
2015-02-02 18:39:29 +01:00
}
< / script >
< script >
$(function(){
$(".sidebar-menu li a").click(function(){
$(this).parents("ul").find(".active").removeClass("active");
$(this).parent('li').addClass('active');
});
});
< / script >
2015-02-01 22:25:09 +01:00
< / body >
2015-02-02 18:39:29 +01:00
< / html >
