mirror of https://github.com/ColorlibHQ/AdminLTE
Fixed indentation issue with code examples
Abdullah Almsaeed
parent
59e2ba0e17
commit
41dbb2f9c1
|
|
@ -9,4 +9,4 @@
|
||||||
<li>Opera (latest)</li>
|
<li>Opera (latest)</li>
|
||||||
</ul>
|
</ul>
|
||||||
<p><b>Note:</b> IE9 does not support transitions or animations. The template will function properly but it won't use animations/transitions on IE9.</p>
|
<p><b>Note:</b> IE9 does not support transitions or animations. The template will function properly but it won't use animations/transitions on IE9.</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
@ -406,8 +406,7 @@
|
||||||
</div><!-- /.navbar-collapse -->
|
</div><!-- /.navbar-collapse -->
|
||||||
</div><!-- /.container-fluid -->
|
</div><!-- /.container-fluid -->
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header></pre>
|
||||||
</pre>
|
|
||||||
|
|
||||||
<!-- ----------------------------------------------------------- -->
|
<!-- ----------------------------------------------------------- -->
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -97,47 +97,47 @@
|
||||||
<h4>Warning!</h4>
|
<h4>Warning!</h4>
|
||||||
This documentation is under development. Some information may change as the progress of creating the documentation continues.
|
This documentation is under development. Some information may change as the progress of creating the documentation continues.
|
||||||
</div>
|
</div>
|
||||||
include "introduction.html"
|
include "introduction.html"
|
||||||
|
|
||||||
<!-- ============================================================= -->
|
<!-- ============================================================= -->
|
||||||
|
|
||||||
include "download.html"
|
include "download.html"
|
||||||
|
|
||||||
<!-- ============================================================= -->
|
<!-- ============================================================= -->
|
||||||
|
|
||||||
include "dependencies.html"
|
include "dependencies.html"
|
||||||
|
|
||||||
<!-- ============================================================= -->
|
<!-- ============================================================= -->
|
||||||
|
|
||||||
include "advice.html"
|
include "advice.html"
|
||||||
|
|
||||||
<!-- ============================================================= -->
|
<!-- ============================================================= -->
|
||||||
|
|
||||||
include "layout.html"
|
include "layout.html"
|
||||||
|
|
||||||
<!-- ============================================================= -->
|
<!-- ============================================================= -->
|
||||||
|
|
||||||
include "components.html"
|
include "components.html"
|
||||||
|
|
||||||
<!-- ============================================================= -->
|
<!-- ============================================================= -->
|
||||||
|
|
||||||
include "plugins.html"
|
include "plugins.html"
|
||||||
|
|
||||||
<!-- ============================================================= -->
|
<!-- ============================================================= -->
|
||||||
|
|
||||||
include "browsers.html"
|
include "browsers.html"
|
||||||
|
|
||||||
<!-- ============================================================= -->
|
<!-- ============================================================= -->
|
||||||
|
|
||||||
include "upgrade.html"
|
include "upgrade.html"
|
||||||
|
|
||||||
<!-- ============================================================= -->
|
<!-- ============================================================= -->
|
||||||
|
|
||||||
include "faq.html"
|
include "faq.html"
|
||||||
|
|
||||||
<!-- ============================================================= -->
|
<!-- ============================================================= -->
|
||||||
|
|
||||||
include "license.html"
|
include "license.html"
|
||||||
|
|
||||||
</div><!-- /.content -->
|
</div><!-- /.content -->
|
||||||
</div><!-- /.content-wrapper -->
|
</div><!-- /.content-wrapper -->
|
||||||
|
|
|
||||||
|
|
@ -97,7 +97,7 @@
|
||||||
<h4>Warning!</h4>
|
<h4>Warning!</h4>
|
||||||
This documentation is under development. Some information may change as the progress of creating the documentation continues.
|
This documentation is under development. Some information may change as the progress of creating the documentation continues.
|
||||||
</div>
|
</div>
|
||||||
<section id='introduction'>
|
<section id='introduction'>
|
||||||
<h2 class='page-header'><span>Introduction</span></h2>
|
<h2 class='page-header'><span>Introduction</span></h2>
|
||||||
<p class='lead'>
|
<p class='lead'>
|
||||||
<b>AdminLTE</b> is a popular open source WebApp template for admin dashboards and control panels.
|
<b>AdminLTE</b> is a popular open source WebApp template for admin dashboards and control panels.
|
||||||
|
|
@ -108,11 +108,11 @@
|
||||||
allows it to be easily customized and built upon. This documentation will guide you through
|
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.
|
installing the template and exploring the various components that are bundled with the template.
|
||||||
</p>
|
</p>
|
||||||
</section><!-- /#introduction -->
|
</section><!-- /#introduction -->
|
||||||
|
|
||||||
<!-- ============================================================= -->
|
<!-- ============================================================= -->
|
||||||
|
|
||||||
<section id='download'>
|
<section id='download'>
|
||||||
<h2 class='page-header'><span>Download</span></h2>
|
<h2 class='page-header'><span>Download</span></h2>
|
||||||
<p class='lead'>
|
<p class='lead'>
|
||||||
AdminLTE can be downloaded in two different versions, each appealing to different
|
AdminLTE can be downloaded in two different versions, each appealing to different
|
||||||
|
|
@ -148,25 +148,25 @@
|
||||||
</div><!-- /.row -->
|
</div><!-- /.row -->
|
||||||
<pre class='hierarchy'><code class="language-bash" data-lang="bash">File Hierarchy of the Source Code Package
|
<pre class='hierarchy'><code class="language-bash" data-lang="bash">File Hierarchy of the Source Code Package
|
||||||
|
|
||||||
AdminLTE/
|
AdminLTE/
|
||||||
├── dist/
|
├── dist/
|
||||||
│ ├── CSS/
|
│ ├── CSS/
|
||||||
│ ├── JS
|
│ ├── JS
|
||||||
│ ├── img
|
│ ├── img
|
||||||
├── build/
|
├── build/
|
||||||
│ ├── less/
|
│ ├── less/
|
||||||
│ │ ├── AdminLTE's Less files
|
│ │ ├── AdminLTE's Less files
|
||||||
│ └── Bootstrap-less/ (Only for reference. No modifications have been made)
|
│ └── Bootstrap-less/ (Only for reference. No modifications have been made)
|
||||||
│ ├── mixins/
|
│ ├── mixins/
|
||||||
│ ├── variables.less
|
│ ├── variables.less
|
||||||
│ ├── mixins.less
|
│ ├── mixins.less
|
||||||
└── plugins/
|
└── plugins/
|
||||||
├── All the customized plugins CSS and JS files</code></pre>
|
├── All the customized plugins CSS and JS files</code></pre>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- ============================================================= -->
|
<!-- ============================================================= -->
|
||||||
|
|
||||||
<section id="dependencies">
|
<section id="dependencies">
|
||||||
<h2 class="page-header"><span>Dependencies</span></h2>
|
<h2 class="page-header"><span>Dependencies</span></h2>
|
||||||
<p class="lead">AdminLTE depends on two main frameworks.
|
<p class="lead">AdminLTE depends on two main frameworks.
|
||||||
The downloadable package contains both of these libraries, so you don't have to manually download them.</p>
|
The downloadable package contains both of these libraries, so you don't have to manually download them.</p>
|
||||||
|
|
@ -175,11 +175,11 @@
|
||||||
<li><a href="http://jquery.com/" target="_blank">jQuery 1.11+</a></li>
|
<li><a href="http://jquery.com/" target="_blank">jQuery 1.11+</a></li>
|
||||||
<li><a href="#plugins">All other plugins are listed below</a></li>
|
<li><a href="#plugins">All other plugins are listed below</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- ============================================================= -->
|
<!-- ============================================================= -->
|
||||||
|
|
||||||
<section id='advice'>
|
<section id='advice'>
|
||||||
<h2 class='page-header'><span>A Word of Advice</span></h2>
|
<h2 class='page-header'><span>A Word of Advice</span></h2>
|
||||||
<p class='lead'>
|
<p class='lead'>
|
||||||
Before you go to see your new awesome theme, here are few tips on how to familiarize yourself with it:
|
Before you go to see your new awesome theme, here are few tips on how to familiarize yourself with it:
|
||||||
|
|
@ -195,11 +195,11 @@
|
||||||
<p>
|
<p>
|
||||||
<b>Note:</b> LESS files are better commented than the compiled CSS file.
|
<b>Note:</b> LESS files are better commented than the compiled CSS file.
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- ============================================================= -->
|
<!-- ============================================================= -->
|
||||||
|
|
||||||
<section id='layout'>
|
<section id='layout'>
|
||||||
<h2 class='page-header'><span>Layout</span></h2>
|
<h2 class='page-header'><span>Layout</span></h2>
|
||||||
<p class='lead'>The layout consists of four major parts:</p>
|
<p class='lead'>The layout consists of four major parts:</p>
|
||||||
<ul>
|
<ul>
|
||||||
|
|
@ -214,8 +214,8 @@
|
||||||
</div>
|
</div>
|
||||||
<p>A full layout example for a quick start</p>
|
<p>A full layout example for a quick start</p>
|
||||||
<pre class='prettyprint'>
|
<pre class='prettyprint'>
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>AdminLTE 2 | Dashboard</title>
|
<title>AdminLTE 2 | Dashboard</title>
|
||||||
|
|
@ -605,7 +605,7 @@
|
||||||
<!-- AdminLTE for demo purposes -->
|
<!-- AdminLTE for demo purposes -->
|
||||||
<script src="dist/js/demo.js" type="text/javascript"></script>
|
<script src="dist/js/demo.js" type="text/javascript"></script>
|
||||||
</body>
|
</body>
|
||||||
</html></pre>
|
</html></pre>
|
||||||
|
|
||||||
<h3>Layout Options</h3>
|
<h3>Layout Options</h3>
|
||||||
<p class="lead">AdminLTE 2.0 provides a set of options to apply to your main layout. Each on of these classes can be added
|
<p class="lead">AdminLTE 2.0 provides a set of options to apply to your main layout. Each on of these classes can be added
|
||||||
|
|
@ -630,11 +630,11 @@
|
||||||
<li><code>skin-red</code></li>
|
<li><code>skin-red</code></li>
|
||||||
<li><code>skin-black</code></li>
|
<li><code>skin-black</code></li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- ============================================================= -->
|
<!-- ============================================================= -->
|
||||||
|
|
||||||
<section id='components' data-spy="scroll" data-target="#scrollspy-components">
|
<section id='components' data-spy="scroll" data-target="#scrollspy-components">
|
||||||
<h2 class='page-header'><span>Components</span></h2>
|
<h2 class='page-header'><span>Components</span></h2>
|
||||||
<div class='callout callout-info lead'>
|
<div class='callout callout-info lead'>
|
||||||
<h4>Reminder!</h4>
|
<h4>Reminder!</h4>
|
||||||
|
|
@ -797,7 +797,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<pre class='prettyprint'>
|
<pre class='prettyprint'>
|
||||||
<header class="main-header">
|
<header class="main-header">
|
||||||
<a href="../../index2.html" class="logo">
|
<a href="../../index2.html" class="logo">
|
||||||
<!-- LOGO -->
|
<!-- LOGO -->
|
||||||
AdminLTE
|
AdminLTE
|
||||||
|
|
@ -931,7 +931,7 @@
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</header></pre>
|
</header></pre>
|
||||||
<h4>Top Nav Layout. Main Header Example.</h4>
|
<h4>Top Nav Layout. Main Header Example.</h4>
|
||||||
<div class="callout callout-info lead">
|
<div class="callout callout-info lead">
|
||||||
<h4>Reminder!</h4>
|
<h4>Reminder!</h4>
|
||||||
|
|
@ -993,7 +993,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<pre class='prettyprint'>
|
<pre class='prettyprint'>
|
||||||
<header class="main-header">
|
<header class="main-header">
|
||||||
<nav class="navbar navbar-static-top">
|
<nav class="navbar navbar-static-top">
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class="navbar-header">
|
<div class="navbar-header">
|
||||||
|
|
@ -1042,8 +1042,7 @@
|
||||||
</div><!-- /.navbar-collapse -->
|
</div><!-- /.navbar-collapse -->
|
||||||
</div><!-- /.container-fluid -->
|
</div><!-- /.container-fluid -->
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header></pre>
|
||||||
</pre>
|
|
||||||
|
|
||||||
<!-- ----------------------------------------------------------- -->
|
<!-- ----------------------------------------------------------- -->
|
||||||
|
|
||||||
|
|
@ -1053,7 +1052,7 @@
|
||||||
Construction of a sidebar:
|
Construction of a sidebar:
|
||||||
</p>
|
</p>
|
||||||
<pre class="prettyprint">
|
<pre class="prettyprint">
|
||||||
<div class="main-sidebar">
|
<div class="main-sidebar">
|
||||||
<!-- Inner sidebar -->
|
<!-- Inner sidebar -->
|
||||||
<div class="sidebar">
|
<div class="sidebar">
|
||||||
<!-- user panel (Optional) -->
|
<!-- user panel (Optional) -->
|
||||||
|
|
@ -1094,7 +1093,7 @@
|
||||||
</ul><!-- /.sidebar-menu -->
|
</ul><!-- /.sidebar-menu -->
|
||||||
|
|
||||||
</div><!-- /.sidebar -->
|
</div><!-- /.sidebar -->
|
||||||
</div><!-- /.main-sidebar -->
|
</div><!-- /.main-sidebar -->
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<!-- ----------------------------------------------------------- -->
|
<!-- ----------------------------------------------------------- -->
|
||||||
|
|
@ -1143,15 +1142,15 @@
|
||||||
</div><!-- /.row -->
|
</div><!-- /.row -->
|
||||||
<p class="lead">Markup</p>
|
<p class="lead">Markup</p>
|
||||||
<pre class="prettyprint"><code class="html">
|
<pre class="prettyprint"><code class="html">
|
||||||
<div class="info-box">
|
<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>
|
<span class="info-box-icon bg-red"><i class="fa fa-star-o"></i></span>
|
||||||
<div class="info-box-content">
|
<div class="info-box-content">
|
||||||
<span class="info-box-text">Likes</span>
|
<span class="info-box-text">Likes</span>
|
||||||
<span class="info-box-number">93,139</span>
|
<span class="info-box-number">93,139</span>
|
||||||
</div><!-- /.info-box-content -->
|
</div><!-- /.info-box-content -->
|
||||||
</div><!-- /.info-box -->
|
</div><!-- /.info-box -->
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h4>Second Type of Info Boxes</h4>
|
<h4>Second Type of Info Boxes</h4>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
@ -1218,8 +1217,8 @@
|
||||||
</div><!-- /.row -->
|
</div><!-- /.row -->
|
||||||
<p class="lead">Markup</p>
|
<p class="lead">Markup</p>
|
||||||
<pre class="prettyprint"><code class="html">
|
<pre class="prettyprint"><code class="html">
|
||||||
<-- 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">
|
<div class="info-box bg-red">
|
||||||
<span class="info-box-icon"><i class="fa fa-comments-o"></i></span>
|
<span class="info-box-icon"><i class="fa fa-comments-o"></i></span>
|
||||||
<div class="info-box-content">
|
<div class="info-box-content">
|
||||||
<span class="info-box-text">Likes</span>
|
<span class="info-box-text">Likes</span>
|
||||||
|
|
@ -1232,8 +1231,8 @@
|
||||||
70% Increase in 30 Days
|
70% Increase in 30 Days
|
||||||
</span>
|
</span>
|
||||||
</div><!-- /.info-box-content -->
|
</div><!-- /.info-box-content -->
|
||||||
</div><!-- /.info-box -->
|
</div><!-- /.info-box -->
|
||||||
</code></pre>
|
</code></pre>
|
||||||
<p class="lead">The only thing you need to change to alternate between these style is change the placement of the bg-* class. For the
|
<p class="lead">The only thing you need to change to alternate between these style is change the placement of the bg-* class. For the
|
||||||
first style apply any bg-* class to the icon itself. For the other style, apply the bg-* class to the info-box div.</p>
|
first style apply any bg-* class to the icon itself. For the other style, apply the bg-* class to the info-box div.</p>
|
||||||
<!-- ----------------------------------------------------------- -->
|
<!-- ----------------------------------------------------------- -->
|
||||||
|
|
@ -1260,7 +1259,7 @@
|
||||||
</div><!-- box-footer -->
|
</div><!-- box-footer -->
|
||||||
</div><!-- /.box -->
|
</div><!-- /.box -->
|
||||||
<pre class="prettyprint">
|
<pre class="prettyprint">
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="box-header with-border">
|
<div class="box-header with-border">
|
||||||
<h3 class="box-title">Default Box Example</h3>
|
<h3 class="box-title">Default Box Example</h3>
|
||||||
<div class="box-tools pull-right">
|
<div class="box-tools pull-right">
|
||||||
|
|
@ -1275,7 +1274,7 @@
|
||||||
<div class="box-footer">
|
<div class="box-footer">
|
||||||
The footer of the box
|
The footer of the box
|
||||||
</div><!-- box-footer -->
|
</div><!-- box-footer -->
|
||||||
</div><!-- /.box --></pre>
|
</div><!-- /.box --></pre>
|
||||||
<h4>Box Variants</h4>
|
<h4>Box Variants</h4>
|
||||||
<p class="lead">You can change the style of the box by adding any of the contextual classes.</p>
|
<p class="lead">You can change the style of the box by adding any of the contextual classes.</p>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
@ -1342,12 +1341,12 @@
|
||||||
</div>
|
</div>
|
||||||
</div><!-- /.row -->
|
</div><!-- /.row -->
|
||||||
<pre class="prettyprint">
|
<pre class="prettyprint">
|
||||||
<div class="box box-default">...</div>
|
<div class="box box-default">...</div>
|
||||||
<div class="box box-primary">...</div>
|
<div class="box box-primary">...</div>
|
||||||
<div class="box box-info">...</div>
|
<div class="box box-info">...</div>
|
||||||
<div class="box box-warning">...</div>
|
<div class="box box-warning">...</div>
|
||||||
<div class="box box-success">...</div>
|
<div class="box box-success">...</div>
|
||||||
<div class="box box-danger">...</div></pre>
|
<div class="box box-danger">...</div></pre>
|
||||||
|
|
||||||
<h4>Solid Box</h4>
|
<h4>Solid Box</h4>
|
||||||
<p class="lead">Solid Boxes are alternative ways to display boxes.
|
<p class="lead">Solid Boxes are alternative ways to display boxes.
|
||||||
|
|
@ -1417,22 +1416,22 @@
|
||||||
</div>
|
</div>
|
||||||
</div><!-- /.row -->
|
</div><!-- /.row -->
|
||||||
<pre class="prettyprint">
|
<pre class="prettyprint">
|
||||||
<div class="box box-solid box-default">...</div>
|
<div class="box box-solid box-default">...</div>
|
||||||
<div class="box box-solid box-primary">...</div>
|
<div class="box box-solid box-primary">...</div>
|
||||||
<div class="box box-solid box-info">...</div>
|
<div class="box box-solid box-info">...</div>
|
||||||
<div class="box box-solid box-warning">...</div>
|
<div class="box box-solid box-warning">...</div>
|
||||||
<div class="box box-solid box-success">...</div>
|
<div class="box box-solid box-success">...</div>
|
||||||
<div class="box box-solid box-danger">...</div></pre>
|
<div class="box box-solid box-danger">...</div></pre>
|
||||||
<h4>Box Tools</h4>
|
<h4>Box Tools</h4>
|
||||||
<p class="lead">Boxes can contain tools to deploy a specific event or provide simple info. The following examples makes use
|
<p class="lead">Boxes can contain tools to deploy a specific event or provide simple info. The following examples makes use
|
||||||
of multiple AdminLTE components within the header of the box.</p>
|
of multiple AdminLTE components within the header of the box.</p>
|
||||||
<p>AdminLTE data-widget attribute provides boxes with the ability to collapse or be removed. The buttons
|
<p>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.</p>
|
are placed in the box-tools which is placed in the box-header.</p>
|
||||||
<pre class="prettyprint">
|
<pre class="prettyprint">
|
||||||
<-- 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>
|
<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></pre>
|
<button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button></pre>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-4">
|
<div class="col-md-4">
|
||||||
<div class="box box-default">
|
<div class="box box-default">
|
||||||
|
|
@ -1447,7 +1446,7 @@
|
||||||
</div><!-- /.box-body -->
|
</div><!-- /.box-body -->
|
||||||
</div><!-- /.box -->
|
</div><!-- /.box -->
|
||||||
<pre class="prettyprint">
|
<pre class="prettyprint">
|
||||||
<div class="box box-default">
|
<div class="box box-default">
|
||||||
<div class="box-header with-border">
|
<div class="box-header with-border">
|
||||||
<h3 class="box-title">Collapsable</h3>
|
<h3 class="box-title">Collapsable</h3>
|
||||||
<div class="box-tools pull-right">
|
<div class="box-tools pull-right">
|
||||||
|
|
@ -1457,7 +1456,7 @@
|
||||||
<div class="box-body">
|
<div class="box-body">
|
||||||
The body of the box
|
The body of the box
|
||||||
</div><!-- /.box-body -->
|
</div><!-- /.box-body -->
|
||||||
</div><!-- /.box --></pre>
|
</div><!-- /.box --></pre>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-4">
|
<div class="col-md-4">
|
||||||
<div class="box box-default">
|
<div class="box box-default">
|
||||||
|
|
@ -1472,7 +1471,7 @@
|
||||||
</div><!-- /.box-body -->
|
</div><!-- /.box-body -->
|
||||||
</div><!-- /.box -->
|
</div><!-- /.box -->
|
||||||
<pre class="prettyprint">
|
<pre class="prettyprint">
|
||||||
<div class="box box-default">
|
<div class="box box-default">
|
||||||
<div class="box-header with-border">
|
<div class="box-header with-border">
|
||||||
<h3 class="box-title">Removable</h3>
|
<h3 class="box-title">Removable</h3>
|
||||||
<div class="box-tools pull-right">
|
<div class="box-tools pull-right">
|
||||||
|
|
@ -1482,7 +1481,7 @@
|
||||||
<div class="box-body">
|
<div class="box-body">
|
||||||
The body of the box
|
The body of the box
|
||||||
</div><!-- /.box-body -->
|
</div><!-- /.box-body -->
|
||||||
</div><!-- /.box --></pre>
|
</div><!-- /.box --></pre>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-4">
|
<div class="col-md-4">
|
||||||
<div class="box box-default collapsed-box">
|
<div class="box box-default collapsed-box">
|
||||||
|
|
@ -1497,7 +1496,7 @@
|
||||||
</div><!-- /.box-body -->
|
</div><!-- /.box-body -->
|
||||||
</div><!-- /.box -->
|
</div><!-- /.box -->
|
||||||
<pre class="prettyprint">
|
<pre class="prettyprint">
|
||||||
<div class="box box-default">
|
<div class="box box-default">
|
||||||
<div class="box-header with-border">
|
<div class="box-header with-border">
|
||||||
<h3 class="box-title">Expandable</h3>
|
<h3 class="box-title">Expandable</h3>
|
||||||
<div class="box-tools pull-right">
|
<div class="box-tools pull-right">
|
||||||
|
|
@ -1507,7 +1506,7 @@
|
||||||
<div class="box-body">
|
<div class="box-body">
|
||||||
The body of the box
|
The body of the box
|
||||||
</div><!-- /.box-body -->
|
</div><!-- /.box-body -->
|
||||||
</div><!-- /.box --></pre>
|
</div><!-- /.box --></pre>
|
||||||
</div>
|
</div>
|
||||||
</div><!-- /.row -->
|
</div><!-- /.row -->
|
||||||
<p>We can also add labels, badges, pagination, tooltips, inputs and many more in the box tools. A few examples:</p>
|
<p>We can also add labels, badges, pagination, tooltips, inputs and many more in the box tools. A few examples:</p>
|
||||||
|
|
@ -1525,7 +1524,7 @@
|
||||||
</div><!-- /.box-body -->
|
</div><!-- /.box-body -->
|
||||||
</div><!-- /.box -->
|
</div><!-- /.box -->
|
||||||
<pre class="prettyprint">
|
<pre class="prettyprint">
|
||||||
<div class="box box-default">
|
<div class="box box-default">
|
||||||
<div class="box-header with-border">
|
<div class="box-header with-border">
|
||||||
<h3 class="box-title">Labels</h3>
|
<h3 class="box-title">Labels</h3>
|
||||||
<div class="box-tools pull-right">
|
<div class="box-tools pull-right">
|
||||||
|
|
@ -1535,7 +1534,7 @@
|
||||||
<div class="box-body">
|
<div class="box-body">
|
||||||
The body of the box
|
The body of the box
|
||||||
</div><!-- /.box-body -->
|
</div><!-- /.box-body -->
|
||||||
</div><!-- /.box --></pre>
|
</div><!-- /.box --></pre>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-4">
|
<div class="col-md-4">
|
||||||
<div class="box box-default">
|
<div class="box box-default">
|
||||||
|
|
@ -1553,7 +1552,7 @@
|
||||||
</div><!-- /.box-body -->
|
</div><!-- /.box-body -->
|
||||||
</div><!-- /.box -->
|
</div><!-- /.box -->
|
||||||
<pre class="prettyprint">
|
<pre class="prettyprint">
|
||||||
<div class="box box-default">
|
<div class="box box-default">
|
||||||
<div class="box-header with-border">
|
<div class="box-header with-border">
|
||||||
<h3 class="box-title">Input</h3>
|
<h3 class="box-title">Input</h3>
|
||||||
<div class="box-tools pull-right">
|
<div class="box-tools pull-right">
|
||||||
|
|
@ -1566,7 +1565,7 @@
|
||||||
<div class="box-body">
|
<div class="box-body">
|
||||||
The body of the box
|
The body of the box
|
||||||
</div><!-- /.box-body -->
|
</div><!-- /.box-body -->
|
||||||
</div><!-- /.box --></pre>
|
</div><!-- /.box --></pre>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-4">
|
<div class="col-md-4">
|
||||||
<div class="box box-default">
|
<div class="box box-default">
|
||||||
|
|
@ -1582,7 +1581,7 @@
|
||||||
</div><!-- /.box-body -->
|
</div><!-- /.box-body -->
|
||||||
</div><!-- /.box -->
|
</div><!-- /.box -->
|
||||||
<pre class="prettyprint">
|
<pre class="prettyprint">
|
||||||
<div class="box box-default">
|
<div class="box box-default">
|
||||||
<div class="box-header with-border">
|
<div class="box-header with-border">
|
||||||
<h3 class="box-title">Tooltips on buttons</h3>
|
<h3 class="box-title">Tooltips on buttons</h3>
|
||||||
<div class="box-tools pull-right">
|
<div class="box-tools pull-right">
|
||||||
|
|
@ -1593,7 +1592,7 @@
|
||||||
<div class="box-body">
|
<div class="box-body">
|
||||||
The body of the box
|
The body of the box
|
||||||
</div><!-- /.box-body -->
|
</div><!-- /.box-body -->
|
||||||
</div><!-- /.box --></pre>
|
</div><!-- /.box --></pre>
|
||||||
</div><!-- /.col -->
|
</div><!-- /.col -->
|
||||||
</div><!-- /.row -->
|
</div><!-- /.row -->
|
||||||
|
|
||||||
|
|
@ -1636,8 +1635,8 @@
|
||||||
</p>
|
</p>
|
||||||
<pre class="prettyprint"><code class="html"><div class="overlay">
|
<pre class="prettyprint"><code class="html"><div class="overlay">
|
||||||
<i class="fa fa-refresh fa-spin"></i>
|
<i class="fa fa-refresh fa-spin"></i>
|
||||||
</div>
|
</div>
|
||||||
</code></pre>
|
</code></pre>
|
||||||
<h3 id="component-direct-chat">Direct Chat</h3>
|
<h3 id="component-direct-chat">Direct Chat</h3>
|
||||||
<p class="lead">The direct chat widget extends the box component to create a beautiful chat interface. This widget
|
<p class="lead">The direct chat widget extends the box component to create a beautiful chat interface. This widget
|
||||||
consists of a required messages pane and an <b>optional</b> contacts pane. Examples:</p>
|
consists of a required messages pane and an <b>optional</b> contacts pane. Examples:</p>
|
||||||
|
|
@ -1929,10 +1928,10 @@
|
||||||
</div><!-- /.row -->
|
</div><!-- /.row -->
|
||||||
<p class="lead">Direct Chat Markup</p>
|
<p class="lead">Direct Chat Markup</p>
|
||||||
<pre class="prettyprint"><code class="html">
|
<pre class="prettyprint"><code class="html">
|
||||||
<-- Construct the box with style you want. Here we are using box-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 -->
|
<-- 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 -->
|
<-- 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 box-danger direct-chat direct-chat-danger">
|
||||||
<div class="box-header with-border">
|
<div class="box-header with-border">
|
||||||
<h3 class="box-title">Direct Chat</h3>
|
<h3 class="box-title">Direct Chat</h3>
|
||||||
<div class="box-tools pull-right">
|
<div class="box-tools pull-right">
|
||||||
|
|
@ -1997,8 +1996,8 @@
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div><!-- /.box-footer-->
|
</div><!-- /.box-footer-->
|
||||||
</div><!--/.direct-chat -->
|
</div><!--/.direct-chat -->
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<p>Of course you can use direct chat with a solid box by adding the class <code>solid-box</code> to the box. Here are a couple of examples:</p>
|
<p>Of course you can use direct chat with a solid box by adding the class <code>solid-box</code> to the box. Here are a couple of examples:</p>
|
||||||
|
|
||||||
|
|
@ -2146,11 +2145,11 @@
|
||||||
</div><!--/.direct-chat -->
|
</div><!--/.direct-chat -->
|
||||||
</div><!-- /.col -->
|
</div><!-- /.col -->
|
||||||
</div><!-- /.row -->
|
</div><!-- /.row -->
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- ============================================================= -->
|
<!-- ============================================================= -->
|
||||||
|
|
||||||
<section id='plugins'>
|
<section id='plugins'>
|
||||||
<h2 class='page-header'><span>Plugins</span></h2>
|
<h2 class='page-header'><span>Plugins</span></h2>
|
||||||
<p class="lead">AdminLTE makes use of the following plugins. For documentation, updates or license information, please visit the provided links.</p>
|
<p class="lead">AdminLTE makes use of the following plugins. For documentation, updates or license information, please visit the provided links.</p>
|
||||||
<div class='row'>
|
<div class='row'>
|
||||||
|
|
@ -2196,11 +2195,11 @@
|
||||||
</ul>
|
</ul>
|
||||||
</div><!-- /.col -->
|
</div><!-- /.col -->
|
||||||
</div><!-- /.row -->
|
</div><!-- /.row -->
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- ============================================================= -->
|
<!-- ============================================================= -->
|
||||||
|
|
||||||
<section id='browsers'>
|
<section id='browsers'>
|
||||||
<h2 class='page-header'><span>Browser Support</span></h2>
|
<h2 class='page-header'><span>Browser Support</span></h2>
|
||||||
<p class="lead">AdminLTE supports the following browsers:</p>
|
<p class="lead">AdminLTE supports the following browsers:</p>
|
||||||
<ul>
|
<ul>
|
||||||
|
|
@ -2211,11 +2210,11 @@
|
||||||
<li>Opera (latest)</li>
|
<li>Opera (latest)</li>
|
||||||
</ul>
|
</ul>
|
||||||
<p><b>Note:</b> IE9 does not support transitions or animations. The template will function properly but it won't use animations/transitions on IE9.</p>
|
<p><b>Note:</b> IE9 does not support transitions or animations. The template will function properly but it won't use animations/transitions on IE9.</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- ============================================================= -->
|
<!-- ============================================================= -->
|
||||||
|
|
||||||
<section id='upgrade'>
|
<section id='upgrade'>
|
||||||
<h2 class='page-header'><span>Upgrade Guide</span></h2>
|
<h2 class='page-header'><span>Upgrade Guide</span></h2>
|
||||||
<p class="lead">To upgrade from version 1.x to the lateset version, follow this guide.</p>
|
<p class="lead">To upgrade from version 1.x to the lateset version, follow this guide.</p>
|
||||||
<h3>New Files</h3>
|
<h3>New Files</h3>
|
||||||
|
|
@ -2240,11 +2239,11 @@
|
||||||
<p>Mailbox got an upgrade to include three different views. The views are inbox, read mail, and compose new email. To use these views,
|
<p>Mailbox got an upgrade to include three different views. The views are inbox, read mail, and compose new email. To use these views,
|
||||||
you should use the provided HTML files in the pages/mailbox folder.</p>
|
you should use the provided HTML files in the pages/mailbox folder.</p>
|
||||||
<p><b class="text-red">Note:</b> the old mailbox layout has been deprecated in favor of the new one and will be removed by the next release.</p>
|
<p><b class="text-red">Note:</b> the old mailbox layout has been deprecated in favor of the new one and will be removed by the next release.</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- ============================================================= -->
|
<!-- ============================================================= -->
|
||||||
|
|
||||||
<section id='faq'>
|
<section id='faq'>
|
||||||
<h2 class='page-header'><span>FAQ</span></h2>
|
<h2 class='page-header'><span>FAQ</span></h2>
|
||||||
<h3>Can AdminLTE be used with Wordpress?</h3>
|
<h3>Can AdminLTE be used with Wordpress?</h3>
|
||||||
<p class="lead">AdminLTE is an HTML template that can be used for any purpose. However, it is not made to be easily installed on Wordpress. It will require some effort and enough knowledge of the Wordpress script to do so.</p>
|
<p class="lead">AdminLTE is an HTML template that can be used for any purpose. However, it is not made to be easily installed on Wordpress. It will require some effort and enough knowledge of the Wordpress script to do so.</p>
|
||||||
|
|
@ -2260,11 +2259,11 @@
|
||||||
<a href="http://almsaeedstudio.com/#subscribe">subscription form on Almsaeed Studio</a>.
|
<a href="http://almsaeedstudio.com/#subscribe">subscription form on Almsaeed Studio</a>.
|
||||||
If that's not appealing to you, you may watch the <a href="https://github.com/almasaeed2010/AdminLTE">repository on Github</a>
|
If that's not appealing to you, you may watch the <a href="https://github.com/almasaeed2010/AdminLTE">repository on Github</a>
|
||||||
or visit <a href="http://almsaeedstudio.com">Almsaeed Studio</a> every now and then for updates and announcements.</p>
|
or visit <a href="http://almsaeedstudio.com">Almsaeed Studio</a> every now and then for updates and announcements.</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- ============================================================= -->
|
<!-- ============================================================= -->
|
||||||
|
|
||||||
<section id="license">
|
<section id="license">
|
||||||
<h1 class="page-header"><span>License</span></h1>
|
<h1 class="page-header"><span>License</span></h1>
|
||||||
<h3>AdminLTE</h3>
|
<h3>AdminLTE</h3>
|
||||||
<p class="lead">AdminLTE is an open source project that is licensed under the <a href="http://opensource.org/licenses/MIT">MIT license</a>.
|
<p class="lead">AdminLTE is an open source project that is licensed under the <a href="http://opensource.org/licenses/MIT">MIT license</a>.
|
||||||
|
|
@ -2306,7 +2305,7 @@
|
||||||
</ul>
|
</ul>
|
||||||
</ul>
|
</ul>
|
||||||
<p>For further question about which license you should get, please email us at <a href="mailto:support@almsaeedstudio.com">support@almsaeedstudio.com</a>.</p>
|
<p>For further question about which license you should get, please email us at <a href="mailto:support@almsaeedstudio.com">support@almsaeedstudio.com</a>.</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
</div><!-- /.content -->
|
</div><!-- /.content -->
|
||||||
</div><!-- /.content-wrapper -->
|
</div><!-- /.content-wrapper -->
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue