From 50cfcf7c4679eab7a29baa50e3a31f32a8eac782 Mon Sep 17 00:00:00 2001 From: almasaeed2010 Date: Tue, 3 Feb 2015 12:25:15 -0500 Subject: [PATCH] Added compnent box documentation --- documentation/index.html | 288 +++++++++++++++++++++++++++++++++++++-- 1 file changed, 273 insertions(+), 15 deletions(-) diff --git a/documentation/index.html b/documentation/index.html index 7ba1c8d2..36ff5443 100755 --- a/documentation/index.html +++ b/documentation/index.html @@ -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 @@
  • Advice
  • Layout
  • Components
    • +
  • Plugins
  • Browser Support
  • Upgrade Guide
  • FAQ
    • @@ -301,6 +303,10 @@ AdminLTE/
  • Sidebar .sidebar-wrapper. Contains the user panel and sidebar menu.
  • Content .content-wrapper. Contains the page header and content.
    • +
    +

    Tip!

    +

    Use the blank example page located in pages/examples/blank.html to build your own pages.

    +

    A full layout example for a quick start

     <!DOCTYPE html>
@@ -411,11 +417,14 @@ AdminLTE/
 
           
    
             
    Components
    
-            
    
-              AdminLTE makes use of all of Bootstrap 3 components. It's a good start to review
-              the Bootstrap documentation to get an idea of the various components
-              that this documentation does not cover.
-            
    
+            
    
+              
    Reminder!
    
+              
    
+                AdminLTE makes use of all of Bootstrap 3 components. It's a good start to review
+                the Bootstrap documentation to get an idea of the various components
+                that this documentation does not cover.
+              
    
+            
    
             
    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.
@@ -458,7 +467,7 @@ AdminLTE/
                                     
                                     
    Why not buy a new awesome theme?
    
                                   
-                                                                
+                                
                               
                             
                             
  • See All Messages
    • 
@@ -479,7 +488,7 @@ AdminLTE/
                                   
                                      5 new members joined today
                                   
-                                                                
+                                
                               
                             
                             
  • View all
    • 
@@ -508,7 +517,7 @@ AdminLTE/
                                       
                                     
                                   
-                                                                
+                                
                               
                             
                             
  • 
@@ -697,7 +706,10 @@ AdminLTE/
   </nav>
 </header>

    • Top Nav Layout. Main Header Example.

    -
    To use this main header instead of the regular one, you must add the layout-top-nav class to the body tag.
    +
    +

    Reminder!

    +

    To use this main header instead of the regular one, you must add the layout-top-nav class to the body tag.

    +
    Top Nav Example @@ -805,7 +817,253 @@ AdminLTE/ </header> + + +

    Sidebar

    +

    + The sidebar used in this page to the left provides an example of what your sidebar should like. + Construction of a sidebar: +

    + 
    +<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 -->
+
    + + + +

    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.

    +

    Default Box Markup

    +
    +
    +

    Default Box Example

    +
    + + + Label +
    +
    +
    + The body of the box +
    +
    + The footer of the box +
    +
    + 
    +<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 -->
    +

    Box Variants

    +

    You can change the style of the box by adding any of the contextual classes.

    +
    +
    +
    +
    +

    Default Box Example

    +
    +
    + The body of the box +
    +
    +
    +
    +
    +
    +

    Primary Box Example

    +
    +
    + The body of the box +
    +
    +
    +
    +
    +
    +

    Info Box Example

    +
    +
    + The body of the box +
    +
    +
    +
    +
    +
    +
    +

    Warning Box Example

    +
    +
    + The body of the box +
    +
    +
    +
    +
    +
    +

    Success Box Example

    +
    +
    + The body of the box +
    +
    +
    +
    +
    +
    +

    Danger Box Example

    +
    +
    + The body of the box +
    +
    +
    +
    + 
    +<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>
    + +

    Solid Box

    +

    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.

    +
    +
    +
    +
    +

    Default Solid Box Example

    +
    +
    + The body of the box +
    +
    +
    +
    +
    +
    +

    Primary Solid Box Example

    +
    +
    + The body of the box +
    +
    +
    +
    +
    +
    +

    Info Solid Box Example

    +
    +
    + The body of the box +
    +
    +
    +
    +
    +
    +
    +

    Warning Solid Box Example

    +
    +
    + The body of the box +
    +
    +
    +
    +
    +
    +

    Success Solid Box Example

    +
    +
    + The body of the box +
    +
    +
    +
    +
    +
    +

    Danger Solid Box Example

    +
    +
    + The body of the box +
    +
    +
    +
    + 
    +<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>
    + + + + +
    +

    Plugins

    +

    AdminLTE makes use of the following plugins. For documentation and/or updates, please visit the provided links.

    +
      +
    @@ -863,7 +1121,7 @@ AdminLTE/

    License

    AdminLTE

    AdminLTE is an open source project that is licensed under the MIT license. - 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).

    AdminLTE Premium Collection

    AdminLTE's premium collection provides a set of non-open source components, plugins and widgets. To use @@ -899,7 +1157,7 @@ AdminLTE/

  • 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). -
    • +