mirror of https://github.com/ColorlibHQ/AdminLTE
Added compnent box documentation
almasaeed2010
parent
c9065c46ee
commit
50cfcf7c46
|
|
@ -38,8 +38,9 @@
|
|||
section[id] {
|
||||
padding: 20px 0 0 0;
|
||||
}
|
||||
h3 {
|
||||
margin-bottom: 5px;
|
||||
#components > h3 {
|
||||
font-size: 25px;
|
||||
border-bottom: 1px solid #dedede;
|
||||
}
|
||||
.page-header span {
|
||||
z-index: 5;
|
||||
|
|
@ -50,7 +51,7 @@
|
|||
.page-header::before {
|
||||
content: " ";
|
||||
display: block;
|
||||
background: #ededed;
|
||||
background: #ccc;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
|
|
@ -88,7 +89,7 @@
|
|||
border: none;
|
||||
}
|
||||
/* desert scheme ported from vim to google prettify */
|
||||
pre.prettyprint { display: block; background-color: #333; max-height: 300px; border: none!important;}
|
||||
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 }
|
||||
|
|
@ -165,6 +166,7 @@
|
|||
<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>
|
||||
<li><a href="#plugins"><i class='fa fa-circle-o'></i> Plugins</a></li>
|
||||
<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>
|
||||
<li><a href="#faq"><i class='fa fa-circle-o'></i> FAQ</a></li>
|
||||
|
|
@ -301,6 +303,10 @@ AdminLTE/
|
|||
<li>Sidebar <code>.sidebar-wrapper</code>. Contains the user panel and sidebar menu.</li>
|
||||
<li>Content <code>.content-wrapper</code>. Contains the page header and content.</li>
|
||||
</ul>
|
||||
<div class="callout callout-danger lead">
|
||||
<h4>Tip!</h4>
|
||||
<p>Use the blank example page located in pages/examples/blank.html to build your own pages.</p>
|
||||
</div>
|
||||
<p>A full layout example for a quick start</p>
|
||||
<pre class='prettyprint'>
|
||||
<!DOCTYPE html>
|
||||
|
|
@ -411,11 +417,14 @@ AdminLTE/
|
|||
|
||||
<section id='components'>
|
||||
<h2 class='page-header'><span>Components</span></h2>
|
||||
<p class='alert alert-info lead'>
|
||||
AdminLTE makes use of all of Bootstrap 3 components. It's a good start to review
|
||||
the <a href="http://getbootstrap.com">Bootstrap documentation</a> to get an idea of the various components
|
||||
that this documentation does not cover.
|
||||
</p>
|
||||
<div class='callout callout-info lead'>
|
||||
<h4>Reminder!</h4>
|
||||
<p>
|
||||
AdminLTE makes use of all of Bootstrap 3 components. It's a good start to review
|
||||
the <a href="http://getbootstrap.com">Bootstrap documentation</a> to get an idea of the various components
|
||||
that this documentation does not cover.
|
||||
</p>
|
||||
</div>
|
||||
<h3>Main Header</h3>
|
||||
<p class='lead'>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.
|
||||
|
|
@ -458,7 +467,7 @@ AdminLTE/
|
|||
</h4>
|
||||
<p>Why not buy a new awesome theme?</p>
|
||||
</a>
|
||||
</li><!-- end message -->
|
||||
</li><!-- end message -->
|
||||
</ul>
|
||||
</li>
|
||||
<li class="footer"><a href="#">See All Messages</a></li>
|
||||
|
|
@ -479,7 +488,7 @@ AdminLTE/
|
|||
<a href="#">
|
||||
<i class="ion ion-ios-people info"></i> 5 new members joined today
|
||||
</a>
|
||||
</li>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="footer"><a href="#">View all</a></li>
|
||||
|
|
@ -508,7 +517,7 @@ AdminLTE/
|
|||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li><!-- end task item -->
|
||||
</li><!-- end task item -->
|
||||
</ul>
|
||||
</li>
|
||||
<li class="footer">
|
||||
|
|
@ -697,7 +706,10 @@ AdminLTE/
|
|||
</nav>
|
||||
</header></pre>
|
||||
<h4>Top Nav Layout. Main Header Example.</h4>
|
||||
<div class="callout callout-info">To use this main header instead of the regular one, you must add the layout-top-nav class to the body tag.</div>
|
||||
<div class="callout callout-info lead">
|
||||
<h4>Reminder!</h4>
|
||||
<p>To use this main header instead of the regular one, you must add the <code>layout-top-nav</code> class to the body tag.</p>
|
||||
</div>
|
||||
<div class="box box-solid">
|
||||
<div class="box-body">
|
||||
<span class="eg">Top Nav Example</span>
|
||||
|
|
@ -805,7 +817,253 @@ AdminLTE/
|
|||
</header>
|
||||
</pre>
|
||||
|
||||
<!-- ----------------------------------------------------------- -->
|
||||
|
||||
<h3>Sidebar</h3>
|
||||
<p class="lead">
|
||||
The sidebar used in this page to the left provides an example of what your sidebar should like.
|
||||
Construction of a sidebar:
|
||||
</p>
|
||||
<pre class="prettyprint">
|
||||
<div class="main-sidebar">
|
||||
<!-- Inner sidebar -->
|
||||
<div class="sidebar">
|
||||
<!-- 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" />
|
||||
</div>
|
||||
<div class="pull-left info">
|
||||
<p>User Name</p>
|
||||
|
||||
<a href="#"><i class="fa fa-circle text-success"></i> Online</a>
|
||||
</div>
|
||||
</div><!-- /.user-panel -->
|
||||
|
||||
<!-- Search Form (Optional) -->
|
||||
<form action="#" method="get" class="sidebar-form">
|
||||
<div class="input-group">
|
||||
<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>
|
||||
</span>
|
||||
</div>
|
||||
</form><!-- /.sidebar-form -->
|
||||
|
||||
<!-- Sidebar Menu -->
|
||||
<ul class="sidebar-menu">
|
||||
<li class="active"><a href="#">Link</a></li>
|
||||
<li><a href="#">Another Link</a></li>
|
||||
<li class="treeview">
|
||||
<a href="#">Second Level</a>
|
||||
<ul class="treeview-menu">
|
||||
<li><a href="#">Link in level 2</a></li>
|
||||
<li><a href="#">Link in level 2</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul><!-- /.sidebar-menu -->
|
||||
|
||||
</div><!-- /.sidebar -->
|
||||
</div><!-- /.main-sidebar -->
|
||||
</pre>
|
||||
|
||||
<!-- ----------------------------------------------------------- -->
|
||||
|
||||
<h3>Box</h3>
|
||||
<p class="lead">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.</p>
|
||||
<h4>Default Box Markup</h4>
|
||||
<div class="box">
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">Default Box Example</h3>
|
||||
<div class="box-tools pull-right">
|
||||
<!-- Buttons, labels, and many other things can be placed here! -->
|
||||
<!-- Here is a label for example -->
|
||||
<span class="label label-primary">Label</span>
|
||||
</div><!-- /.box-tools -->
|
||||
</div><!-- /.box-header -->
|
||||
<div class="box-body">
|
||||
The body of the box
|
||||
</div><!-- /.box-body -->
|
||||
<div class="box-footer">
|
||||
The footer of the box
|
||||
</div><!-- box-footer -->
|
||||
</div><!-- /.box -->
|
||||
<pre class="prettyprint">
|
||||
<div class="box">
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">Default Box Example</h3>
|
||||
<div class="box-tools pull-right">
|
||||
<!-- Buttons, labels, and many other things can be placed here! -->
|
||||
<!-- Here is a label for example -->
|
||||
<span class="label label-primary">Label</span>
|
||||
</div><!-- /.box-tools -->
|
||||
</div><!-- /.box-header -->
|
||||
<div class="box-body">
|
||||
The body of the box
|
||||
</div><!-- /.box-body -->
|
||||
<div class="box-footer">
|
||||
The footer of the box
|
||||
</div><!-- box-footer -->
|
||||
</div><!-- /.box --></pre>
|
||||
<h4>Box Variants</h4>
|
||||
<p class="lead">You can change the style of the box by adding any of the contextual classes.</p>
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="box">
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">Default Box Example</h3>
|
||||
</div><!-- /.box-header -->
|
||||
<div class="box-body">
|
||||
The body of the box
|
||||
</div><!-- /.box-body -->
|
||||
</div><!-- /.box -->
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="box box-primary">
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">Primary Box Example</h3>
|
||||
</div><!-- /.box-header -->
|
||||
<div class="box-body">
|
||||
The body of the box
|
||||
</div><!-- /.box-body -->
|
||||
</div><!-- /.box -->
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="box box-info">
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">Info Box Example</h3>
|
||||
</div><!-- /.box-header -->
|
||||
<div class="box-body">
|
||||
The body of the box
|
||||
</div><!-- /.box-body -->
|
||||
</div><!-- /.box -->
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
<div class="col-md-4">
|
||||
<div class="box box-warning">
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">Warning Box Example</h3>
|
||||
</div><!-- /.box-header -->
|
||||
<div class="box-body">
|
||||
The body of the box
|
||||
</div><!-- /.box-body -->
|
||||
</div><!-- /.box -->
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="box box-success">
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">Success Box Example</h3>
|
||||
</div><!-- /.box-header -->
|
||||
<div class="box-body">
|
||||
The body of the box
|
||||
</div><!-- /.box-body -->
|
||||
</div><!-- /.box -->
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="box box-danger">
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">Danger Box Example</h3>
|
||||
</div><!-- /.box-header -->
|
||||
<div class="box-body">
|
||||
The body of the box
|
||||
</div><!-- /.box-body -->
|
||||
</div><!-- /.box -->
|
||||
</div>
|
||||
</div><!-- /.row -->
|
||||
<pre class="prettyprint">
|
||||
<div class="box box-default">...</div>
|
||||
<div class="box box-primary">...</div>
|
||||
<div class="box box-info">...</div>
|
||||
<div class="box box-warning">...</div>
|
||||
<div class="box box-success">...</div>
|
||||
<div class="box box-danger">...</div></pre>
|
||||
|
||||
<h4>Solid Box</h4>
|
||||
<p class="lead">Solid Boxes are alternative ways to display boxes.
|
||||
They can be created by simply adding th box-solid class to the box component.
|
||||
You may also use contextual classes with you solid boxes.</p>
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="box box-solid">
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">Default Solid Box Example</h3>
|
||||
</div><!-- /.box-header -->
|
||||
<div class="box-body">
|
||||
The body of the box
|
||||
</div><!-- /.box-body -->
|
||||
</div><!-- /.box -->
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="box box-solid box-primary">
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">Primary Solid Box Example</h3>
|
||||
</div><!-- /.box-header -->
|
||||
<div class="box-body">
|
||||
The body of the box
|
||||
</div><!-- /.box-body -->
|
||||
</div><!-- /.box -->
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="box box-solid box-info">
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">Info Solid Box Example</h3>
|
||||
</div><!-- /.box-header -->
|
||||
<div class="box-body">
|
||||
The body of the box
|
||||
</div><!-- /.box-body -->
|
||||
</div><!-- /.box -->
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
<div class="col-md-4">
|
||||
<div class="box box-solid box-warning">
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">Warning Solid Box Example</h3>
|
||||
</div><!-- /.box-header -->
|
||||
<div class="box-body">
|
||||
The body of the box
|
||||
</div><!-- /.box-body -->
|
||||
</div><!-- /.box -->
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="box box-solid box-success">
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">Success Solid Box Example</h3>
|
||||
</div><!-- /.box-header -->
|
||||
<div class="box-body">
|
||||
The body of the box
|
||||
</div><!-- /.box-body -->
|
||||
</div><!-- /.box -->
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="box box-solid box-danger">
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">Danger Solid Box Example</h3>
|
||||
</div><!-- /.box-header -->
|
||||
<div class="box-body">
|
||||
The body of the box
|
||||
</div><!-- /.box-body -->
|
||||
</div><!-- /.box -->
|
||||
</div>
|
||||
</div><!-- /.row -->
|
||||
<pre class="prettyprint">
|
||||
<div class="box box-solid">...</div>
|
||||
<div class="box box-solid box-primary">...</div>
|
||||
<div class="box box-solid box-info">...</div>
|
||||
<div class="box box-solid box-warning">...</div>
|
||||
<div class="box box-solid box-success">...</div>
|
||||
<div class="box box-solid box-danger">...</div></pre>
|
||||
</section>
|
||||
|
||||
<!-- ============================================================= -->
|
||||
|
||||
<section id='plugins'>
|
||||
<h2 class='page-header'><span>Plugins</span></h2>
|
||||
<p class="lead">AdminLTE makes use of the following plugins. For documentation and/or updates, please visit the provided links.</p>
|
||||
<ul>
|
||||
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- ============================================================= -->
|
||||
|
|
@ -863,7 +1121,7 @@ AdminLTE/
|
|||
<h1 class="page-header"><span>License</span></h1>
|
||||
<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>.
|
||||
This allows you to do pretty much anything you want with it except selling it without any major modifications.
|
||||
This allows you to do pretty much anything you want with it except selling it without any major modifications.
|
||||
Attribution is not required (though very much appreciated).</p>
|
||||
<h3>AdminLTE Premium Collection</h3>
|
||||
<p class="lead">AdminLTE's premium collection provides a set of non-open source components, plugins and widgets. To use
|
||||
|
|
@ -899,7 +1157,7 @@ AdminLTE/
|
|||
<li>If the item was created using materials which are the subject of a GNU General Public License (GPL), your use of the item is subject to the terms of the GPL in place of the foregoing conditions (to the extent the GPL applies).
|
||||
</ul>
|
||||
</section>
|
||||
</div><!-- /.content -->
|
||||
</div><!-- /.content -->
|
||||
</div><!-- /.content-wrapper -->
|
||||
|
||||
<footer class="main-footer">
|
||||
|
|
|
|||
Loading…
Reference in New Issue