src/ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/documentation/index.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta charset="utf-8">
   5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
   6     <title>AdminLTE 2 | Documentation</title>
   7     <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
   8     <!-- Bootstrap 3.3.6 -->
   9     <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
  10     <!-- Font Awesome -->
  11     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
  12     <!-- Ionicons -->
  13     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
  14     <!-- Theme style -->
  15     <link rel="stylesheet" href="../dist/css/AdminLTE.min.css">
  16     <link rel="stylesheet" href="../dist/css/skins/_all-skins.min.css">
  17     <link rel="stylesheet" href="style.css">
  18
  19     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  20     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  21     <!--[if lt IE 9]>
  22         <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  23         <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  24     <![endif]-->
  25   </head>
  26   <body class="skin-blue fixed" data-spy="scroll" data-target="#scrollspy">
  27     <div class="wrapper">
  28
  29       <header class="main-header">
  30         <!-- Logo -->
  31         <!-- Logo -->
  32         <a href="../index2.html" class="logo">
  33           <!-- mini logo for sidebar mini 50x50 pixels -->
  34           <span class="logo-mini"><b>A</b>LT</span>
  35           <!-- logo for regular state and mobile devices -->
  36           <span class="logo-lg"><b>Admin</b>LTE</span>
  37         </a>
  38         <!-- Header Navbar: style can be found in header.less -->
  39         <nav class="navbar navbar-static-top" role="navigation">
  40           <!-- Sidebar toggle button-->
  41           <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
  42             <span class="sr-only">Toggle navigation</span>
  43           </a>
  44           <!-- Navbar Right Menu -->
  45           <div class="navbar-custom-menu">
  46             <ul class="nav navbar-nav">
  47               <li><a href="http://almsaeedstudio.com">Almsaeed Studio</a></li>
  48               <li><a href="http://almsaeedstudio.com/premium">Premium Templates</a></li>
  49             </ul>
  50           </div>
  51         </nav>
  52       </header>
  53       <!-- Left side column. contains the logo and sidebar -->
  54       <aside class="main-sidebar">
  55         <!-- sidebar: style can be found in sidebar.less -->
  56         <div class="sidebar" id="scrollspy">
  57
  58           <!-- sidebar menu: : style can be found in sidebar.less -->
  59           <ul class="nav sidebar-menu">
  60             <li class="header">TABLE OF CONTENTS</li>
  61             <li class="active"><a href="#introduction"><i class="fa fa-circle-o"></i> Introduction</a></li>
  62             <li><a href="#download"><i class="fa fa-circle-o"></i> Download</a></li>
  63             <li><a href="#dependencies"><i class="fa fa-circle-o"></i> Dependencies</a></li>
  64             <li><a href="#advice"><i class="fa fa-circle-o"></i> Advice</a></li>
  65             <li><a href="#layout"><i class="fa fa-circle-o"></i> Layout</a></li>
  66             <li><a href="#adminlte-options"><i class="fa fa-circle-o"></i> Javascript Options</a></li>
  67             <li class="treeview" id="scrollspy-components">
  68               <a href="javascript:void(0)"><i class="fa fa-circle-o"></i> Components</a>
  69               <ul class="nav treeview-menu">
  70                 <li><a href="#component-main-header">Main Header</a></li>
  71                 <li><a href="#component-sidebar">Sidebar</a></li>
  72                 <li><a href="#component-control-sidebar">Control Sidebar</a></li>
  73                 <li><a href="#component-info-box">Info Box</a></li>
  74                 <li><a href="#component-box">Boxes</a></li>
  75                 <li><a href="#component-direct-chat">Direct Chat</a></li>
  76               </ul>
  77             </li>
  78             <li><a href="#plugins"><i class="fa fa-circle-o"></i> Plugins</a></li>
  79             <li><a href="#browsers"><i class="fa fa-circle-o"></i> Browser Support</a></li>
  80             <li><a href="#upgrade"><i class="fa fa-circle-o"></i> Upgrade Guide</a></li>
  81             <li><a href="#implementations"><i class="fa fa-circle-o"></i> Implementations</a></li>
  82             <li><a href="#faq"><i class="fa fa-circle-o"></i> FAQ</a></li>
  83             <li><a href="#license"><i class="fa fa-circle-o"></i> License</a></li>
  84           </ul>
  85         </div>
  86         <!-- /.sidebar -->
  87       </aside>
  88
  89       <!-- Content Wrapper. Contains page content -->
  90       <div class="content-wrapper">
  91         <!-- Content Header (Page header) -->
  92         <div class="content-header">
  93           <h1>
  94             AdminLTE Documentation
  95             <small>Current version 2.3.0</small>
  96           </h1>
  97           <ol class="breadcrumb">
  98             <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
  99             <li class="active">Documentation</li>
 100           </ol>
 101         </div>
 102
 103         <!-- Main content -->
 104         <div class="content body">
 105
 106 <section id="introduction">
 107   <h2 class="page-header"><a href="#introduction">Introduction</a></h2>
 108   <p class="lead">
 109     <b>AdminLTE</b> is a popular open source WebApp template for admin dashboards and control panels.
 110     It is a responsive HTML template that is based on the CSS framework Bootstrap 3.
 111     It utilizes all of the Bootstrap components in its design and re-styles many
 112     commonly used plugins to create a consistent design that can be used as a user
 113     interface for backend applications. AdminLTE is based on a modular design, which
 114     allows it to be easily customized and built upon. This documentation will guide you through
 115     installing the template and exploring the various components that are bundled with the template.
 116   </p>
 117 </section><!-- /#introduction -->
 118
 119
 120 <!-- ============================================================= -->
 121
 122 <section id="download">
 123   <h2 class="page-header"><a href="#download">Download</a></h2>
 124   <p class="lead">
 125     AdminLTE can be downloaded in two different versions, each appealing to different skill levels and use case.
 126   </p>
 127   <div class="row">
 128     <div class="col-sm-6">
 129       <div class="box box-primary">
 130         <div class="box-header with-border">
 131           <h3 class="box-title">Ready</h3>
 132           <span class="label label-primary pull-right"><i class="fa fa-html5"></i></span>
 133         </div><!-- /.box-header -->
 134         <div class="box-body">
 135           <p>Compiled and ready to use in production. Download this version if you don't want to customize AdminLTE's LESS files.</p>
 136           <a href="http://almsaeedstudio.com/download/AdminLTE-dist" class="btn btn-primary"><i class="fa fa-download"></i> Download</a>
 137         </div><!-- /.box-body -->
 138       </div><!-- /.box -->
 139     </div><!-- /.col -->
 140     <div class="col-sm-6">
 141       <div class="box box-danger">
 142         <div class="box-header with-border">
 143           <h3 class="box-title">Source Code</h3>
 144           <span class="label label-danger pull-right"><i class="fa fa-database"></i></span>
 145         </div><!-- /.box-header -->
 146         <div class="box-body">
 147           <p>All files including the compiled CSS. Download this version if you plan on customizing the template. <b>Requires a LESS compiler.</b></p>
 148           <a href="http://almsaeedstudio.com/download/AdminLTE" class="btn btn-danger"><i class="fa fa-download"></i> Download</a>
 149         </div><!-- /.box-body -->
 150       </div><!-- /.box -->
 151     </div><!-- /.col -->
 152   </div><!-- /.row -->
 153   <pre class="hierarchy bring-up"><code class="language-bash" data-lang="bash">File Hierarchy of the Source Code Package
 154
 155 AdminLTE/
 156 ├── dist/
 157 │   ├── CSS/
 158 │   ├── JS
 159 │   ├── img
 160 ├── build/
 161 │   ├── less/
 162 │   │   ├── AdminLTE's Less files
 163 │   └── Bootstrap-less/ (Only for reference. No modifications have been made)
 164 │       ├── mixins/
 165 │       ├── variables.less
 166 │       ├── mixins.less
 167 └── plugins/
 168     ├── All the customized plugins CSS and JS files</code></pre>
 169 </section>
 170
 171
 172 <!-- ============================================================= -->
 173
 174 <section id="dependencies">
 175   <h2 class="page-header"><a href="#dependencies">Dependencies</a></h2>
 176   <p class="lead">AdminLTE depends on two main frameworks.
 177     The downloadable package contains both of these libraries, so you don't have to manually download them.</p>
 178   <ul class="bring-up">
 179     <li><a href="http://getbootstrap.com" target="_blank">Bootstrap 3</a></li>
 180     <li><a href="http://jquery.com/" target="_blank">jQuery 1.11+</a></li>
 181     <li><a href="#plugins">All other plugins are listed below</a></li>
 182   </ul>
 183 </section>
 184
 185
 186 <!-- ============================================================= -->
 187
 188 <section id="advice">
 189   <h2 class="page-header"><a href="#advice">A Word of Advice</a></h2>
 190   <p class="lead">
 191     Before you go to see your new awesome theme, here are few tips on how to familiarize yourself with it:
 192   </p>
 193
 194   <ul>
 195     <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>
 196     <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>
 197     <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.</li>
 198     <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>
 199     <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>
 200   </ul>
 201   <p>
 202     <b>Note:</b> LESS files are better commented than the compiled CSS file.
 203   </p>
 204 </section>
 205
 206
 207 <!-- ============================================================= -->
 208
 209 <section id="layout">
 210   <h2 class="page-header"><a href="#layout">Layout</a></h2>
 211   <p class="lead">The layout consists of four major parts:</p>
 212   <ul>
 213     <li>Wrapper <code>.wrapper</code>. A div that wraps the whole site.</li>
 214     <li>Main Header <code>.main-header</code>. Contains the logo and navbar.</li>
 215     <li>Sidebar <code>.sidebar-wrapper</code>. Contains the user panel and sidebar menu.</li>
 216     <li>Content <code>.content-wrapper</code>. Contains the page header and content.</li>
 217   </ul>
 218   <div class="callout callout-danger lead">
 219     <h4>Tip!</h4>
 220     <p>The <a href="../starter.html">starter page</a> is a good place to start building your app if you'd like to start from scratch.</p>
 221   </div>
 222
 223   <h3>Layout Options</h3>
 224   <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
 225     to the body tag to get the desired goal.</p>
 226   <ul>
 227     <li><b>Fixed:</b> use the class <code>.fixed</code> to get a fixed header and sidebar.</li>
 228     <li><b>Collapsed Sidebar:</b> use the class <code>.sidebar-collapse</code> to have a collapsed sidebar upon loading.</li>
 229     <li><b>Boxed Layout:</b> use the class <code>.layout-boxed</code> to get a boxed layout that stretches only to 1250px.</li>
 230     <li><b>Top Navigation</b> use the class <code>.layout-top-nav</code> to remove the sidebar and have your links at the top navbar.</li>
 231   </ul>
 232   <p><b>Note:</b> you cannot use both layout-boxed and fixed at the same time. Anything else can be mixed together.</p>
 233
 234   <h3>Skins</h3>
 235   <p class="lead">Skins can be found in the dist/css/skins folder.
 236     Choose and the skin file that you want then add the appropriate
 237     class to the body tag to change the template's appearance. Here is the list of available skins:</p>
 238   <div class="box box-solid" style="max-width: 300px;">
 239     <div class="box-body no-padding">
 240       <table id="layout-skins-list" class="table table-striped bring-up nth-2-center">
 241         <thead>
 242           <tr>
 243             <th style="width: 210px;">Skin Class</th>
 244             <th>Preview</th>
 245           </tr>
 246         </thead>
 247         <tbody>
 248           <tr>
 249             <td><code>skin-blue</code></td>
 250             <td><a href="#" data-skin="skin-blue" class="btn btn-primary btn-xs"><i class="fa fa-eye"></i></a></td>
 251           </tr>
 252           <tr>
 253             <td><code>skin-blue-light</code></td>
 254             <td><a href="#" data-skin="skin-blue-light" class="btn btn-primary btn-xs"><i class="fa fa-eye"></i></a></td>
 255           </tr>
 256           <tr>
 257             <td><code>skin-yellow</code></td>
 258             <td><a href="#" data-skin="skin-yellow" class="btn btn-warning btn-xs"><i class="fa fa-eye"></i></a></td>
 259           </tr>
 260           <tr>
 261             <td><code>skin-yellow-light</code></td>
 262             <td><a href="#" data-skin="skin-yellow-light" class="btn btn-warning btn-xs"><i class="fa fa-eye"></i></a></td>
 263           </tr>
 264           <tr>
 265             <td><code>skin-green</code></td>
 266             <td><a href="#" data-skin="skin-green" class="btn btn-success btn-xs"><i class="fa fa-eye"></i></a></td>
 267           </tr>
 268           <tr>
 269             <td><code>skin-green-light</code></td>
 270             <td><a href="#" data-skin="skin-green-light" class="btn btn-success btn-xs"><i class="fa fa-eye"></i></a></td>
 271           </tr>
 272           <tr>
 273             <td><code>skin-purple</code></td>
 274             <td><a href="#" data-skin="skin-purple" class="btn bg-purple btn-xs"><i class="fa fa-eye"></i></a></td>
 275           </tr>
 276           <tr>
 277             <td><code>skin-purple-light</code></td>
 278             <td><a href="#" data-skin="skin-purple-light" class="btn bg-purple btn-xs"><i class="fa fa-eye"></i></a></td>
 279           </tr>
 280           <tr>
 281             <td><code>skin-red</code></td>
 282             <td><a href="#" data-skin="skin-red" class="btn btn-danger btn-xs"><i class="fa fa-eye"></i></a></td>
 283           </tr>
 284           <tr>
 285             <td><code>skin-red-light</code></td>
 286             <td><a href="#" data-skin="skin-red-light" class="btn btn-danger btn-xs"><i class="fa fa-eye"></i></a></td>
 287           </tr>
 288           <tr>
 289             <td><code>skin-black</code></td>
 290             <td><a href="#" data-skin="skin-black" class="btn bg-black btn-xs"><i class="fa fa-eye"></i></a></td>
 291           </tr>
 292           <tr>
 293             <td><code>skin-black-light</code></td>
 294             <td><a href="#" data-skin="skin-black-light" class="btn bg-black btn-xs"><i class="fa fa-eye"></i></a></td>
 295           </tr>
 296         </tbody>
 297       </table>
 298     </div><!-- /.box-body -->
 299   </div><!-- /.box -->
 300 </section>
 301
 302
 303 <!-- ============================================================= -->
 304
 305 <section id="adminlte-options">
 306   <h2 class="page-header"><a href="#adminlte-options">AdminLTE Javascript Options</a></h2>
 307   <p class="lead">Modifying the options of AdminLTE's app.js can be done using one of the following ways.</p>
 308
 309   <h3>Editing app.js</h3>
 310   <p>Within the main Javascript file, modify the <code>$.AdminLTE.options</code> object to suit your use case.</p>
 311
 312   <h3>Defining AdminLTEOptions</h3>
 313   <p>Alternatively, you can define a global options variable named <code>AdminLTEOptions</code> and initialize it before loading app.js.</p>
 314   <p>Example</p>
 315   <pre class="prettyprint"><code class="html">&LT;script>
 316   var AdminLTEOptions = {
 317     //Enable sidebar expand on hover effect for sidebar mini
 318     //This option is forced to true if both the fixed layout and sidebar mini
 319     //are used together
 320     sidebarExpandOnHover: true,
 321     //BoxRefresh Plugin
 322     enableBoxRefresh: true,
 323     //Bootstrap.js tooltip
 324     enableBSToppltip: true
 325   };
 326 &LT;/script>
 327 &LT;script src="dist/js/app.js" type="text/javascript">&LT;/script></code></pre>
 328
 329   <h3>Available AdminLTE Options</h3>
 330   <pre class="prettyprint"><code class="javascript">{
 331   //Add slimscroll to navbar menus
 332   //This requires you to load the slimscroll plugin
 333   //in every page before app.js
 334   navbarMenuSlimscroll: true,
 335   navbarMenuSlimscrollWidth: "3px", //The width of the scroll bar
 336   navbarMenuHeight: "200px", //The height of the inner menu
 337   //General animation speed for JS animated elements such as box collapse/expand and
 338   //sidebar treeview slide up/down. This options accepts an integer as milliseconds,
 339   //'fast', 'normal', or 'slow'
 340   animationSpeed: 500,
 341   //Sidebar push menu toggle button selector
 342   sidebarToggleSelector: "[data-toggle='offcanvas']",
 343   //Activate sidebar push menu
 344   sidebarPushMenu: true,
 345   //Activate sidebar slimscroll if the fixed layout is set (requires SlimScroll Plugin)
 346   sidebarSlimScroll: true,
 347   //Enable sidebar expand on hover effect for sidebar mini
 348   //This option is forced to true if both the fixed layout and sidebar mini
 349   //are used together
 350   sidebarExpandOnHover: false,
 351   //BoxRefresh Plugin
 352   enableBoxRefresh: true,
 353   //Bootstrap.js tooltip
 354   enableBSToppltip: true,
 355   BSTooltipSelector: "[data-toggle='tooltip']",
 356   //Enable Fast Click. Fastclick.js creates a more
 357   //native touch experience with touch devices. If you
 358   //choose to enable the plugin, make sure you load the script
 359   //before AdminLTE's app.js
 360   enableFastclick: true,
 361   //Control Sidebar Options
 362   enableControlSidebar: true,
 363   controlSidebarOptions: {
 364     //Which button should trigger the open/close event
 365     toggleBtnSelector: "[data-toggle='control-sidebar']",
 366     //The sidebar selector
 367     selector: ".control-sidebar",
 368     //Enable slide over content
 369     slide: true
 370   },
 371   //Box Widget Plugin. Enable this plugin
 372   //to allow boxes to be collapsed and/or removed
 373   enableBoxWidget: true,
 374   //Box Widget plugin options
 375   boxWidgetOptions: {
 376     boxWidgetIcons: {
 377       //Collapse icon
 378       collapse: 'fa-minus',
 379       //Open icon
 380       open: 'fa-plus',
 381       //Remove icon
 382       remove: 'fa-times'
 383     },
 384     boxWidgetSelectors: {
 385       //Remove button selector
 386       remove: '[data-widget="remove"]',
 387       //Collapse button selector
 388       collapse: '[data-widget="collapse"]'
 389     }
 390   },
 391   //Direct Chat plugin options
 392   directChat: {
 393     //Enable direct chat by default
 394     enable: true,
 395     //The button to open and close the chat contacts pane
 396     contactToggleSelector: '[data-widget="chat-pane-toggle"]'
 397   },
 398   //Define the set of colors to use globally around the website
 399   colors: {
 400     lightBlue: "#3c8dbc",
 401     red: "#f56954",
 402     green: "#00a65a",
 403     aqua: "#00c0ef",
 404     yellow: "#f39c12",
 405     blue: "#0073b7",
 406     navy: "#001F3F",
 407     teal: "#39CCCC",
 408     olive: "#3D9970",
 409     lime: "#01FF70",
 410     orange: "#FF851B",
 411     fuchsia: "#F012BE",
 412     purple: "#8E24AA",
 413     maroon: "#D81B60",
 414     black: "#222222",
 415     gray: "#d2d6de"
 416   },
 417   //The standard screen sizes that bootstrap uses.
 418   //If you change these in the variables.less file, change
 419   //them here too.
 420   screenSizes: {
 421     xs: 480,
 422     sm: 768,
 423     md: 992,
 424     lg: 1200
 425   }
 426 }</code></pre>
 427 </section>
 428
 429
 430 <!-- ============================================================= -->
 431
 432 <section id="components" data-spy="scroll" data-target="#scrollspy-components">
 433   <h2 class="page-header"><a href="#components">Components</a></h2>
 434   <div class="callout callout-info lead">
 435     <h4>Reminder!</h4>
 436     <p>
 437       AdminLTE uses all of Bootstrap 3 components. It's a good start to review
 438       the <a href="http://getbootstrap.com">Bootstrap documentation</a> to get an idea of the various components
 439       that this documentation <b>does not</b> cover.
 440     </p>
 441   </div>
 442   <div class="callout callout-danger lead">
 443     <h4>Tip!</h4>
 444     <p>
 445       If you go through the example pages and would like to copy a component, right-click on
 446       the component and choose "inspect element" to get to the HTML quicker than scanning
 447       the HTML page.
 448     </p>
 449   </div>
 450   <h3 id="component-main-header">Main Header</h3>
 451   <p class="lead">The main header contains the logo and navbar. Construction of the
 452     navbar differs slightly from Bootstrap because it has components that Bootstrap doesn't provide.
 453     The navbar can be constructed in two way. This an example for the normal navbar and next we will provide an example for
 454     the top nav layout.</p>
 455   <div class="box box-solid">
 456     <div class="box-body" style="position: relative;">
 457       <span class="eg">Main Header Example</span>
 458       <header class="main-header" style="position: relative;">
 459         <!-- Logo -->
 460         <a href="index2.html" class="logo" style="position: relative;"><b>Admin</b>LTE</a>
 461         <!-- Header Navbar: style can be found in header.less -->
 462         <nav class="navbar" role="navigation" style="border: 0;max-height: 50px;">
 463           <!-- Sidebar toggle button-->
 464           <a href="#" class="sidebar-toggle" role="button">
 465             <span class="sr-only">Toggle navigation</span>
 466           </a>
 467           <!-- Navbar Right Menu -->
 468           <div class="navbar-custom-menu">
 469             <ul class="nav navbar-nav">
 470               <!-- Messages: style can be found in dropdown.less-->
 471               <li class="dropdown messages-menu">
 472                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 473                   <i class="fa fa-envelope-o"></i>
 474                   <span class="label label-success">4</span>
 475                 </a>
 476                 <ul class="dropdown-menu">
 477                   <li class="header">You have 4 messages</li>
 478                   <li>
 479                     <!-- inner menu: contains the actual data -->
 480                     <ul class="menu">
 481                       <li><!-- start message -->
 482                         <a href="#">
 483                           <div class="pull-left">
 484                             <img src="../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
 485                           </div>
 486                           <h4>
 487                             Support Team
 488                             <small><i class="fa fa-clock-o"></i> 5 mins</small>
 489                           </h4>
 490                           <p>Why not buy a new awesome theme?</p>
 491                         </a>
 492                       </li><!-- end message -->
 493                     </ul>
 494                   </li>
 495                   <li class="footer"><a href="#">See All Messages</a></li>
 496                 </ul>
 497               </li>
 498               <!-- Notifications: style can be found in dropdown.less -->
 499               <li class="dropdown notifications-menu">
 500                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 501                   <i class="fa fa-bell-o"></i>
 502                   <span class="label label-warning">10</span>
 503                 </a>
 504                 <ul class="dropdown-menu">
 505                   <li class="header">You have 10 notifications</li>
 506                   <li>
 507                     <!-- inner menu: contains the actual data -->
 508                     <ul class="menu">
 509                       <li>
 510                         <a href="#">
 511                           <i class="fa fa-users text-aqua"></i> 5 new members joined today
 512                         </a>
 513                       </li>
 514                     </ul>
 515                   </li>
 516                   <li class="footer"><a href="#">View all</a></li>
 517                 </ul>
 518               </li>
 519               <!-- Tasks: style can be found in dropdown.less -->
 520               <li class="dropdown tasks-menu">
 521                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 522                   <i class="fa fa-flag-o"></i>
 523                   <span class="label label-danger">9</span>
 524                 </a>
 525                 <ul class="dropdown-menu">
 526                   <li class="header">You have 9 tasks</li>
 527                   <li>
 528                     <!-- inner menu: contains the actual data -->
 529                     <ul class="menu">
 530                       <li><!-- Task item -->
 531                         <a href="#">
 532                           <h3>
 533                             Design some buttons
 534                             <small class="pull-right">20%</small>
 535                           </h3>
 536                           <div class="progress xs">
 537                             <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 538                               <span class="sr-only">20% Complete</span>
 539                             </div>
 540                           </div>
 541                         </a>
 542                       </li><!-- end task item -->
 543                     </ul>
 544                   </li>
 545                   <li class="footer">
 546                     <a href="#">View all tasks</a>
 547                   </li>
 548                 </ul>
 549               </li>
 550               <!-- User Account: style can be found in dropdown.less -->
 551               <li class="dropdown user user-menu">
 552                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 553                   <img src="../dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
 554                   <span class="hidden-xs">Alexander Pierce</span>
 555                 </a>
 556                 <ul class="dropdown-menu">
 557                   <!-- User image -->
 558                   <li class="user-header">
 559                     <img src="../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
 560                     <p>
 561                       Alexander Pierce - Web Developer
 562                       <small>Member since Nov. 2012</small>
 563                     </p>
 564                   </li>
 565                   <!-- Menu Body -->
 566                   <li class="user-body">
 567                     <div class="col-xs-4 text-center">
 568                       <a href="#">Followers</a>
 569                     </div>
 570                     <div class="col-xs-4 text-center">
 571                       <a href="#">Sales</a>
 572                     </div>
 573                     <div class="col-xs-4 text-center">
 574                       <a href="#">Friends</a>
 575                     </div>
 576                   </li>
 577                   <!-- Menu Footer-->
 578                   <li class="user-footer">
 579                     <div class="pull-left">
 580                       <a href="#" class="btn btn-default btn-flat">Profile</a>
 581                     </div>
 582                     <div class="pull-right">
 583                       <a href="#" class="btn btn-default btn-flat">Sign out</a>
 584                     </div>
 585                   </li>
 586                 </ul>
 587               </li>
 588             </ul>
 589           </div>
 590         </nav>
 591       </header>
 592     </div>
 593   </div>
 594   <pre class="prettyprint">&LT;header class="main-header">
 595   &LT;a href="../../index2.html" class="logo">
 596     &LT;!-- LOGO -->
 597     AdminLTE
 598   &LT;/a>
 599   &LT;!-- Header Navbar: style can be found in header.less -->
 600   &LT;nav class="navbar navbar-static-top" role="navigation">
 601     &LT;!-- Navbar Right Menu -->
 602     &LT;div class="navbar-custom-menu">
 603       &LT;ul class="nav navbar-nav">
 604         &LT;!-- Messages: style can be found in dropdown.less-->
 605         &LT;li class="dropdown messages-menu">
 606           &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">
 607             &LT;i class="fa fa-envelope-o">&LT;/i>
 608             &LT;span class="label label-success">4&LT;/span>
 609           &LT;/a>
 610           &LT;ul class="dropdown-menu">
 611             &LT;li class="header">You have 4 messages&LT;/li>
 612             &LT;li>
 613               &LT;!-- inner menu: contains the actual data -->
 614               &LT;ul class="menu">
 615                 &LT;li>&LT;!-- start message -->
 616                   &LT;a href="#">
 617                     &LT;div class="pull-left">
 618                       &LT;img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
 619                     &LT;/div>
 620                     &LT;h4>
 621                       Sender Name
 622                       &LT;small>&LT;i class="fa fa-clock-o">&LT;/i> 5 mins&LT;/small>
 623                     &LT;/h4>
 624                     &LT;p>Message Excerpt&LT;/p>
 625                   &LT;/a>
 626                 &LT;/li>&LT;!-- end message -->
 627                 ...
 628               &LT;/ul>
 629             &LT;/li>
 630             &LT;li class="footer">&LT;a href="#">See All Messages&LT;/a>&LT;/li>
 631           &LT;/ul>
 632         &LT;/li>
 633         &LT;!-- Notifications: style can be found in dropdown.less -->
 634         &LT;li class="dropdown notifications-menu">
 635           &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">
 636             &LT;i class="fa fa-bell-o">&LT;/i>
 637             &LT;span class="label label-warning">10&LT;/span>
 638           &LT;/a>
 639           &LT;ul class="dropdown-menu">
 640             &LT;li class="header">You have 10 notifications&LT;/li>
 641             &LT;li>
 642               &LT;!-- inner menu: contains the actual data -->
 643               &LT;ul class="menu">
 644                 &LT;li>
 645                   &LT;a href="#">
 646                     &LT;i class="ion ion-ios-people info">&LT;/i> Notification title
 647                   &LT;/a>
 648                 &LT;/li>
 649                 ...
 650               &LT;/ul>
 651             &LT;/li>
 652             &LT;li class="footer">&LT;a href="#">View all&LT;/a>&LT;/li>
 653           &LT;/ul>
 654         &LT;/li>
 655         &LT;!-- Tasks: style can be found in dropdown.less -->
 656         &LT;li class="dropdown tasks-menu">
 657           &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">
 658             &LT;i class="fa fa-flag-o">&LT;/i>
 659             &LT;span class="label label-danger">9&LT;/span>
 660           &LT;/a>
 661           &LT;ul class="dropdown-menu">
 662             &LT;li class="header">You have 9 tasks&LT;/li>
 663             &LT;li>
 664               &LT;!-- inner menu: contains the actual data -->
 665               &LT;ul class="menu">
 666                 &LT;li>&LT;!-- Task item -->
 667                   &LT;a href="#">
 668                     &LT;h3>
 669                       Design some buttons
 670                       &LT;small class="pull-right">20%&LT;/small>
 671                     &LT;/h3>
 672                     &LT;div class="progress xs">
 673                       &LT;div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
 674                         &LT;span class="sr-only">20% Complete&LT;/span>
 675                       &LT;/div>
 676                     &LT;/div>
 677                   &LT;/a>
 678                 &LT;/li>&LT;!-- end task item -->
 679                 ...
 680               &LT;/ul>
 681             &LT;/li>
 682             &LT;li class="footer">
 683               &LT;a href="#">View all tasks&LT;/a>
 684             &LT;/li>
 685           &LT;/ul>
 686         &LT;/li>
 687         &LT;!-- User Account: style can be found in dropdown.less -->
 688         &LT;li class="dropdown user user-menu">
 689           &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">
 690             &LT;img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
 691             &LT;span class="hidden-xs">Alexander Pierce&LT;/span>
 692           &LT;/a>
 693           &LT;ul class="dropdown-menu">
 694             &LT;!-- User image -->
 695             &LT;li class="user-header">
 696               &LT;img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
 697               &LT;p>
 698                 Alexander Pierce - Web Developer
 699                 &LT;small>Member since Nov. 2012&LT;/small>
 700               &LT;/p>
 701             &LT;/li>
 702             &LT;!-- Menu Body -->
 703             &LT;li class="user-body">
 704               &LT;div class="col-xs-4 text-center">
 705                 &LT;a href="#">Followers&LT;/a>
 706               &LT;/div>
 707               &LT;div class="col-xs-4 text-center">
 708                 &LT;a href="#">Sales&LT;/a>
 709               &LT;/div>
 710               &LT;div class="col-xs-4 text-center">
 711                 &LT;a href="#">Friends&LT;/a>
 712               &LT;/div>
 713             &LT;/li>
 714             &LT;!-- Menu Footer-->
 715             &LT;li class="user-footer">
 716               &LT;div class="pull-left">
 717                 &LT;a href="#" class="btn btn-default btn-flat">Profile&LT;/a>
 718               &LT;/div>
 719               &LT;div class="pull-right">
 720                 &LT;a href="#" class="btn btn-default btn-flat">Sign out&LT;/a>
 721               &LT;/div>
 722             &LT;/li>
 723           &LT;/ul>
 724         &LT;/li>
 725       &LT;/ul>
 726     &LT;/div>
 727   &LT;/nav>
 728 &LT;/header></pre>
 729   <h4>Top Nav Layout. Main Header Example.</h4>
 730   <div class="callout callout-info lead">
 731     <h4>Reminder!</h4>
 732     <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>
 733   </div>
 734   <div class="box box-solid">
 735     <div class="box-body layout-top-nav">
 736       <span class="eg">Top Nav Example</span>
 737       <header class="main-header">
 738         <nav class="navbar navbar-static-top">
 739           <div class="container-fluid">
 740             <div class="navbar-header">
 741               <a href="../../index2.html" class="navbar-brand"><b>Admin</b>LTE</a>
 742               <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
 743                 <i class="fa fa-bars"></i>
 744               </button>
 745             </div>
 746
 747             <!-- Collect the nav links, forms, and other content for toggling -->
 748             <div class="collapse navbar-collapse" id="navbar-collapse">
 749               <ul class="nav navbar-nav">
 750                 <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
 751                 <li><a href="#">Link</a></li>
 752                 <li class="dropdown">
 753                   <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
 754                   <ul class="dropdown-menu" role="menu">
 755                     <li><a href="#">Action</a></li>
 756                     <li><a href="#">Another action</a></li>
 757                     <li><a href="#">Something else here</a></li>
 758                     <li class="divider"></li>
 759                     <li><a href="#">Separated link</a></li>
 760                     <li class="divider"></li>
 761                     <li><a href="#">One more separated link</a></li>
 762                   </ul>
 763                 </li>
 764               </ul>
 765               <form class="navbar-form navbar-left" role="search">
 766                 <div class="form-group">
 767                   <input type="text" class="form-control" id="navbar-search-input" placeholder="Search">
 768                 </div>
 769               </form>
 770               <ul class="nav navbar-nav navbar-right">
 771                 <li><a href="#">Link</a></li>
 772                 <li class="dropdown">
 773                   <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
 774                   <ul class="dropdown-menu" role="menu">
 775                     <li><a href="#">Action</a></li>
 776                     <li><a href="#">Another action</a></li>
 777                     <li><a href="#">Something else here</a></li>
 778                     <li class="divider"></li>
 779                     <li><a href="#">Separated link</a></li>
 780                   </ul>
 781                 </li>
 782               </ul>
 783             </div><!-- /.navbar-collapse -->
 784           </div><!-- /.container-fluid -->
 785         </nav>
 786       </header>
 787     </div>
 788   </div>
 789   <pre class="prettyprint">
 790 &LT;header class="main-header">
 791   &LT;nav class="navbar navbar-static-top">
 792     &LT;div class="container-fluid">
 793     &LT;div class="navbar-header">
 794       &LT;a href="../../index2.html" class="navbar-brand">&LT;b>Admin&LT;/b>LTE&LT;/a>
 795       &LT;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
 796         &LT;i class="fa fa-bars">&LT;/i>
 797       &LT;/button>
 798     &LT;/div>
 799
 800     &LT;!-- Collect the nav links, forms, and other content for toggling -->
 801     &LT;div class="collapse navbar-collapse" id="navbar-collapse">
 802       &LT;ul class="nav navbar-nav">
 803         &LT;li class="active">&LT;a href="#">Link &LT;span class="sr-only">(current)&LT;/span>&LT;/a>&LT;/li>
 804         &LT;li>&LT;a href="#">Link&LT;/a>&LT;/li>
 805         &LT;li class="dropdown">
 806           &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown &LT;span class="caret">&LT;/span>&LT;/a>
 807           &LT;ul class="dropdown-menu" role="menu">
 808             &LT;li>&LT;a href="#">Action&LT;/a>&LT;/li>
 809             &LT;li>&LT;a href="#">Another action&LT;/a>&LT;/li>
 810             &LT;li>&LT;a href="#">Something else here&LT;/a>&LT;/li>
 811             &LT;li class="divider">&LT;/li>
 812             &LT;li>&LT;a href="#">Separated link&LT;/a>&LT;/li>
 813             &LT;li class="divider">&LT;/li>
 814             &LT;li>&LT;a href="#">One more separated link&LT;/a>&LT;/li>
 815           &LT;/ul>
 816         &LT;/li>
 817       &LT;/ul>
 818       &LT;form class="navbar-form navbar-left" role="search">
 819         &LT;div class="form-group">
 820           &LT;input type="text" class="form-control" id="navbar-search-input" placeholder="Search">
 821         &LT;/div>
 822       &LT;/form>
 823       &LT;ul class="nav navbar-nav navbar-right">
 824         &LT;li>&LT;a href="#">Link&LT;/a>&LT;/li>
 825         &LT;li class="dropdown">
 826           &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown &LT;span class="caret">&LT;/span>&LT;/a>
 827           &LT;ul class="dropdown-menu" role="menu">
 828             &LT;li>&LT;a href="#">Action&LT;/a>&LT;/li>
 829             &LT;li>&LT;a href="#">Another action&LT;/a>&LT;/li>
 830             &LT;li>&LT;a href="#">Something else here&LT;/a>&LT;/li>
 831             &LT;li class="divider">&LT;/li>
 832             &LT;li>&LT;a href="#">Separated link&LT;/a>&LT;/li>
 833           &LT;/ul>
 834         &LT;/li>
 835       &LT;/ul>
 836     &LT;/div>&LT;!-- /.navbar-collapse -->
 837     &LT;/div>&LT;!-- /.container-fluid -->
 838   &LT;/nav>
 839 &LT;/header></pre>
 840
 841   <!-- ===================================================================== -->
 842
 843   <h3 id="component-sidebar">Sidebar</h3>
 844   <p class="lead">
 845     The sidebar used in this page to the left provides an example of what your sidebar should like.
 846     Construction of a sidebar:
 847   </p>
 848   <pre class="prettyprint">
 849 &LT;div class="main-sidebar">
 850   &LT;!-- Inner sidebar -->
 851   &LT;div class="sidebar">
 852     &LT;!-- user panel (Optional) -->
 853     &LT;div class="user-panel">
 854       &LT;div class="pull-left image">
 855         &LT;img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
 856       &LT;/div>
 857       &LT;div class="pull-left info">
 858         &LT;p>User Name&LT;/p>
 859
 860         &LT;a href="#">&LT;i class="fa fa-circle text-success">&LT;/i> Online&LT;/a>
 861       &LT;/div>
 862     &LT;/div>&LT;!-- /.user-panel -->
 863
 864     &LT;!-- Search Form (Optional) -->
 865     &LT;form action="#" method="get" class="sidebar-form">
 866       &LT;div class="input-group">
 867         &LT;input type="text" name="q" class="form-control" placeholder="Search...">
 868         &LT;span class="input-group-btn">
 869           &LT;button type="submit" name="search" id="search-btn" class="btn btn-flat">&LT;i class="fa fa-search">&LT;/i>&LT;/button>
 870         &LT;/span>
 871       &LT;/div>
 872     &LT;/form>&LT;!-- /.sidebar-form -->
 873
 874     &LT;!-- Sidebar Menu -->
 875     &LT;ul class="sidebar-menu">
 876       &LT;li class="header">HEADER&LT;/li>
 877       &LT;!-- Optionally, you can add icons to the links -->
 878       &LT;li class="active">&LT;a href="#">&LT;span>Link&LT;/span>&LT;/a>&LT;&LT;/li>
 879       &LT;li>&LT;a href="#">&LT;span>Another Link&LT;/span>&LT;/a>&LT;/li>
 880       &LT;li class="treeview">
 881         &LT;a href="#">&LT;span>Multilevel&LT;/span> &LT;i class="fa fa-angle-left pull-right">&LT;/i>&LT;/a>
 882         &LT;ul class="treeview-menu">
 883           &LT;li>&LT;a href="#">Link in level 2&LT;/a>&LT;/li>
 884           &LT;li>&LT;a href="#">Link in level 2&LT;/a>&LT;/li>
 885         &LT;/ul>
 886       &LT;/li>
 887     &LT;/ul>&LT;!-- /.sidebar-menu -->
 888
 889   &LT;/div>&LT;!-- /.sidebar -->
 890 &LT;/div>&LT;!-- /.main-sidebar --></pre>
 891
 892   <h3 id="component-control-sidebar">Control Sidebar</h3>
 893   <p class="lead">Control sidebar is the right side bar. It can be used for many purposes and is extremely easy
 894     to create. The sidebar ships with two different show/hide styles. The first allows the sidebar to
 895   slide over the content. The second pushes the content to make space for the sidebar. Either of
 896   these methods can be set through the <a href="#adminlte-options">Javascript options</a>.</p>
 897   <p class="lead">The following code should be placed within the <code>.wrapper</code> div. I prefer
 898   to place it right after the footer.</p>
 899   <p class="lead">Dark Sidebar Markup</p>
 900 <pre class="prettyprint"><code class="lang-html">&LT;!-- The Right Sidebar -->
 901 &LT;aside class="control-sidebar control-sidebar-dark">
 902   &LT;!-- Content of the sidebar goes here -->
 903 &LT;/aside>
 904 &LT;!-- The sidebar's background -->
 905 &LT;!-- This div must placed right after the sidebar for it to work-->
 906 &LT;div class="control-sidebar-bg">&LT;/div></code></pre>
 907
 908   <p class="lead">Light Sidebar Markup</p>
 909 <pre class="prettyprint"><code class="lang-html">&LT;!-- The Right Sidebar -->
 910 &LT;aside class="control-sidebar control-sidebar-light">
 911   &LT;!-- Content of the sidebar goes here -->
 912 &LT;/aside>
 913 &LT;!-- The sidebar's background -->
 914 &LT;!-- This div must placed right after the sidebar for it to work-->
 915 &LT;div class="control-sidebar-bg">&LT;/div></code></pre>
 916
 917   <p class="lead">Once you create the sidebar, you will need a toggle button to open/close it.
 918   By adding the attribute <code>data-toggle="control-sidebar"</code> to any button, it will
 919   automatically act as the toggle button.</p>
 920
 921   <p class="lead">Toggle Button Example</p>
 922   <button class="btn btn-primary" data-toggle="control-sidebar">Toggle Right Sidebar</button><br><br>
 923
 924   <p class="lead">Sidebar Toggle Markup</p>
 925   <pre class="prettyprint"><code class="lang-html">&LT;button class="btn btn-default" data-toggle="control-sidebar">Toggle Right Sidebar&LT;/button></code></pre>
 926   <!-- ===================================================================== -->
 927
 928   <h3 id="component-info-box">Info Box</h3>
 929   <p class="lead">Info boxes are used to display statistical snippets. There are two types of info boxes.</p>
 930   <h4>First Type of Info Boxes</h4>
 931   <!-- Info Boxes -->
 932   <div class="row">
 933     <div class="col-md-3 col-sm-6 col-xs-12">
 934       <div class="info-box">
 935         <span class="info-box-icon bg-aqua"><i class="fa fa-envelope-o"></i></span>
 936         <div class="info-box-content">
 937           <span class="info-box-text">Messages</span>
 938           <span class="info-box-number">1,410</span>
 939         </div><!-- /.info-box-content -->
 940       </div><!-- /.info-box -->
 941     </div><!-- /.col -->
 942     <div class="col-md-3 col-sm-6 col-xs-12">
 943       <div class="info-box">
 944         <span class="info-box-icon bg-green"><i class="fa fa-flag-o"></i></span>
 945         <div class="info-box-content">
 946           <span class="info-box-text">Bookmarks</span>
 947           <span class="info-box-number">410</span>
 948         </div><!-- /.info-box-content -->
 949       </div><!-- /.info-box -->
 950     </div><!-- /.col -->
 951     <div class="col-md-3 col-sm-6 col-xs-12">
 952       <div class="info-box">
 953         <span class="info-box-icon bg-yellow"><i class="fa fa-files-o"></i></span>
 954         <div class="info-box-content">
 955           <span class="info-box-text">Uploads</span>
 956           <span class="info-box-number">13,648</span>
 957         </div><!-- /.info-box-content -->
 958       </div><!-- /.info-box -->
 959     </div><!-- /.col -->
 960     <div class="col-md-3 col-sm-6 col-xs-12">
 961       <div class="info-box">
 962         <span class="info-box-icon bg-red"><i class="fa fa-star-o"></i></span>
 963         <div class="info-box-content">
 964           <span class="info-box-text">Likes</span>
 965           <span class="info-box-number">93,139</span>
 966         </div><!-- /.info-box-content -->
 967       </div><!-- /.info-box -->
 968     </div><!-- /.col -->
 969   </div><!-- /.row -->
 970   <p class="lead">Markup</p>
 971   <pre class="prettyprint"><code class="lang-html">&LT;div class="info-box">
 972   &LT;!-- Apply any bg-* class to to the icon to color it -->
 973   &LT;span class="info-box-icon bg-red">&LT;i class="fa fa-star-o">&LT;/i>&LT;/span>
 974   &LT;div class="info-box-content">
 975     &LT;span class="info-box-text">Likes&LT;/span>
 976     &LT;span class="info-box-number">93,139&LT;/span>
 977   &LT;/div>&LT;!-- /.info-box-content -->
 978 &LT;/div>&LT;!-- /.info-box --></code></pre>
 979
 980   <h4>Second Type of Info Boxes</h4>
 981   <div class="row">
 982     <div class="col-md-3 col-sm-6 col-xs-12">
 983       <div class="info-box bg-aqua">
 984         <span class="info-box-icon"><i class="fa fa-bookmark-o"></i></span>
 985         <div class="info-box-content">
 986           <span class="info-box-text">Bookmarks</span>
 987           <span class="info-box-number">41,410</span>
 988           <div class="progress">
 989             <div class="progress-bar" style="width: 70%"></div>
 990           </div>
 991           <span class="progress-description">
 992             70% Increase in 30 Days
 993           </span>
 994         </div><!-- /.info-box-content -->
 995       </div><!-- /.info-box -->
 996     </div><!-- /.col -->
 997     <div class="col-md-3 col-sm-6 col-xs-12">
 998       <div class="info-box bg-green">
 999         <span class="info-box-icon"><i class="fa fa-thumbs-o-up"></i></span>
1000         <div class="info-box-content">
1001           <span class="info-box-text">Likes</span>
1002           <span class="info-box-number">41,410</span>
1003           <div class="progress">
1004             <div class="progress-bar" style="width: 70%"></div>
1005           </div>
1006           <span class="progress-description">
1007             70% Increase in 30 Days
1008           </span>
1009         </div><!-- /.info-box-content -->
1010       </div><!-- /.info-box -->
1011     </div><!-- /.col -->
1012     <div class="col-md-3 col-sm-6 col-xs-12">
1013       <div class="info-box bg-yellow">
1014         <span class="info-box-icon"><i class="fa fa-calendar"></i></span>
1015         <div class="info-box-content">
1016           <span class="info-box-text">Events</span>
1017           <span class="info-box-number">41,410</span>
1018           <div class="progress">
1019             <div class="progress-bar" style="width: 70%"></div>
1020           </div>
1021           <span class="progress-description">
1022             70% Increase in 30 Days
1023           </span>
1024         </div><!-- /.info-box-content -->
1025       </div><!-- /.info-box -->
1026     </div><!-- /.col -->
1027     <div class="col-md-3 col-sm-6 col-xs-12">
1028       <div class="info-box bg-red">
1029         <span class="info-box-icon"><i class="fa fa-comments-o"></i></span>
1030         <div class="info-box-content">
1031           <span class="info-box-text">Comments</span>
1032           <span class="info-box-number">41,410</span>
1033           <div class="progress">
1034             <div class="progress-bar" style="width: 70%"></div>
1035           </div>
1036           <span class="progress-description">
1037             70% Increase in 30 Days
1038           </span>
1039         </div><!-- /.info-box-content -->
1040       </div><!-- /.info-box -->
1041     </div><!-- /.col -->
1042   </div><!-- /.row -->
1043   <p class="lead">Markup</p>
1044   <pre class="prettyprint"><code class="lang-html">&LT;!-- Apply any bg-* class to to the info-box to color it -->
1045 &LT;div class="info-box bg-red">
1046   &LT;span class="info-box-icon">&LT;i class="fa fa-comments-o">&LT;/i>&LT;/span>
1047   &LT;div class="info-box-content">
1048     &LT;span class="info-box-text">Likes&LT;/span>
1049     &LT;span class="info-box-number">41,410&LT;/span>
1050     &LT;!-- The progress section is optional -->
1051     &LT;div class="progress">
1052       &LT;div class="progress-bar" style="width: 70%">&LT;/div>
1053     &LT;/div>
1054     &LT;span class="progress-description">
1055       70% Increase in 30 Days
1056     &LT;/span>
1057   &LT;/div>&LT;!-- /.info-box-content -->
1058 &LT;/div>&LT;!-- /.info-box --></code></pre>
1059   <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
1060     first style apply any bg-* class to the icon itself. For the other style, apply the bg-* class to the info-box div.</p>
1061   <!-- ===================================================================== -->
1062
1063   <h3 id="component-box">Box</h3>
1064   <p class="lead">The box component is the most widely used component through out this template. You can
1065     use it for anything from displaying charts to just blocks of text. It comes in many different
1066     styles that we will explore below.</p>
1067   <h4>Default Box Markup</h4>
1068   <div class="box">
1069     <div class="box-header with-border">
1070       <h3 class="box-title">Default Box Example</h3>
1071       <div class="box-tools pull-right">
1072         <!-- Buttons, labels, and many other things can be placed here! -->
1073         <!-- Here is a label for example -->
1074         <span class="label label-primary">Label</span>
1075       </div><!-- /.box-tools -->
1076     </div><!-- /.box-header -->
1077     <div class="box-body">
1078       The body of the box
1079     </div><!-- /.box-body -->
1080     <div class="box-footer">
1081       The footer of the box
1082     </div><!-- box-footer -->
1083   </div><!-- /.box -->
1084   <pre class="prettyprint">&LT;div class="box">
1085   &LT;div class="box-header with-border">
1086     &LT;h3 class="box-title">Default Box Example&LT;/h3>
1087     &LT;div class="box-tools pull-right">
1088       &LT;!-- Buttons, labels, and many other things can be placed here! -->
1089       &LT;!-- Here is a label for example -->
1090       &LT;span class="label label-primary">Label&LT;/span>
1091     &LT;/div>&LT;!-- /.box-tools -->
1092   &LT;/div>&LT;!-- /.box-header -->
1093   &LT;div class="box-body">
1094     The body of the box
1095   &LT;/div>&LT;!-- /.box-body -->
1096   &LT;div class="box-footer">
1097     The footer of the box
1098   &LT;/div>&LT;!-- box-footer -->
1099 &LT;/div>&LT;!-- /.box --></pre>
1100   <h4>Box Variants</h4>
1101   <p class="lead">You can change the style of the box by adding any of the contextual classes.</p>
1102   <div class="row">
1103     <div class="col-md-4">
1104       <div class="box">
1105         <div class="box-header with-border">
1106           <h3 class="box-title">Default Box Example</h3>
1107         </div><!-- /.box-header -->
1108         <div class="box-body">
1109           The body of the box
1110         </div><!-- /.box-body -->
1111       </div><!-- /.box -->
1112     </div>
1113     <div class="col-md-4">
1114       <div class="box box-primary">
1115         <div class="box-header with-border">
1116           <h3 class="box-title">Primary Box Example</h3>
1117         </div><!-- /.box-header -->
1118         <div class="box-body">
1119           The body of the box
1120         </div><!-- /.box-body -->
1121       </div><!-- /.box -->
1122     </div>
1123     <div class="col-md-4">
1124       <div class="box box-info">
1125         <div class="box-header with-border">
1126           <h3 class="box-title">Info Box Example</h3>
1127         </div><!-- /.box-header -->
1128         <div class="box-body">
1129           The body of the box
1130         </div><!-- /.box-body -->
1131       </div><!-- /.box -->
1132     </div>
1133     <div class="clearfix"></div>
1134     <div class="col-md-4">
1135       <div class="box box-warning">
1136         <div class="box-header with-border">
1137           <h3 class="box-title">Warning Box Example</h3>
1138         </div><!-- /.box-header -->
1139         <div class="box-body">
1140           The body of the box
1141         </div><!-- /.box-body -->
1142       </div><!-- /.box -->
1143     </div>
1144     <div class="col-md-4">
1145       <div class="box box-success">
1146         <div class="box-header with-border">
1147           <h3 class="box-title">Success Box Example</h3>
1148         </div><!-- /.box-header -->
1149         <div class="box-body">
1150           The body of the box
1151         </div><!-- /.box-body -->
1152       </div><!-- /.box -->
1153     </div>
1154     <div class="col-md-4">
1155       <div class="box box-danger">
1156         <div class="box-header with-border">
1157           <h3 class="box-title">Danger Box Example</h3>
1158         </div><!-- /.box-header -->
1159         <div class="box-body">
1160           The body of the box
1161         </div><!-- /.box-body -->
1162       </div><!-- /.box -->
1163     </div>
1164   </div><!-- /.row -->
1165   <pre class="prettyprint">&LT;div class="box box-default">...&LT;/div>
1166 &LT;div class="box box-primary">...&LT;/div>
1167 &LT;div class="box box-info">...&LT;/div>
1168 &LT;div class="box box-warning">...&LT;/div>
1169 &LT;div class="box box-success">...&LT;/div>
1170 &LT;div class="box box-danger">...&LT;/div></pre>
1171
1172   <h4>Solid Box</h4>
1173   <p class="lead">Solid Boxes are alternative ways to display boxes.
1174     They can be created by simply adding the box-solid class to the box component.
1175     You may also use contextual classes with you solid boxes.</p>
1176   <div class="row">
1177     <div class="col-md-4">
1178       <div class="box box-solid box-default">
1179         <div class="box-header">
1180           <h3 class="box-title">Default Solid Box Example</h3>
1181         </div><!-- /.box-header -->
1182         <div class="box-body">
1183           The body of the box
1184         </div><!-- /.box-body -->
1185       </div><!-- /.box -->
1186     </div>
1187     <div class="col-md-4">
1188       <div class="box box-solid box-primary">
1189         <div class="box-header">
1190           <h3 class="box-title">Primary Solid Box Example</h3>
1191         </div><!-- /.box-header -->
1192         <div class="box-body">
1193           The body of the box
1194         </div><!-- /.box-body -->
1195       </div><!-- /.box -->
1196     </div>
1197     <div class="col-md-4">
1198       <div class="box box-solid box-info">
1199         <div class="box-header">
1200           <h3 class="box-title">Info Solid Box Example</h3>
1201         </div><!-- /.box-header -->
1202         <div class="box-body">
1203           The body of the box
1204         </div><!-- /.box-body -->
1205       </div><!-- /.box -->
1206     </div>
1207     <div class="clearfix"></div>
1208     <div class="col-md-4">
1209       <div class="box box-solid box-warning">
1210         <div class="box-header">
1211           <h3 class="box-title">Warning Solid Box Example</h3>
1212         </div><!-- /.box-header -->
1213         <div class="box-body">
1214           The body of the box
1215         </div><!-- /.box-body -->
1216       </div><!-- /.box -->
1217     </div>
1218     <div class="col-md-4">
1219       <div class="box box-solid box-success">
1220         <div class="box-header">
1221           <h3 class="box-title">Success Solid Box Example</h3>
1222         </div><!-- /.box-header -->
1223         <div class="box-body">
1224           The body of the box
1225         </div><!-- /.box-body -->
1226       </div><!-- /.box -->
1227     </div>
1228     <div class="col-md-4">
1229       <div class="box box-solid box-danger">
1230         <div class="box-header">
1231           <h3 class="box-title">Danger Solid Box Example</h3>
1232         </div><!-- /.box-header -->
1233         <div class="box-body">
1234           The body of the box
1235         </div><!-- /.box-body -->
1236       </div><!-- /.box -->
1237     </div>
1238   </div><!-- /.row -->
1239   <pre class="prettyprint">
1240 &LT;div class="box box-solid box-default">...&LT;/div>
1241 &LT;div class="box box-solid box-primary">...&LT;/div>
1242 &LT;div class="box box-solid box-info">...&LT;/div>
1243 &LT;div class="box box-solid box-warning">...&LT;/div>
1244 &LT;div class="box box-solid box-success">...&LT;/div>
1245 &LT;div class="box box-solid box-danger">...&LT;/div></pre>
1246   <h4>Box Tools</h4>
1247   <p class="lead">Boxes can contain tools to deploy a specific event or provide simple info. The following examples makes use
1248     of multiple AdminLTE components within the header of the box.</p>
1249   <p>AdminLTE data-widget attribute provides boxes with the ability to collapse or be removed. The buttons
1250     are placed in the box-tools which is placed in the box-header.</p>
1251   <pre class="prettyprint">
1252 &LT;!-- This will cause the box to be removed when clicked -->
1253 &LT;button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">&LT;i class="fa fa-times">&LT;/i>&LT;/button>
1254 &LT;!-- This will cause the box to collapse when clicked -->
1255 &LT;button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">&LT;i class="fa fa-minus">&LT;/i>&LT;/button></pre>
1256   <div class="row">
1257     <div class="col-md-4">
1258       <div class="box box-default">
1259         <div class="box-header with-border">
1260           <h3 class="box-title">Collapsable</h3>
1261           <div class="box-tools pull-right">
1262             <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
1263           </div><!-- /.box-tools -->
1264         </div><!-- /.box-header -->
1265         <div class="box-body">
1266           The body of the box
1267         </div><!-- /.box-body -->
1268       </div><!-- /.box -->
1269       <pre class="prettyprint">
1270 &LT;div class="box box-default">
1271   &LT;div class="box-header with-border">
1272     &LT;h3 class="box-title">Collapsable&LT;/h3>
1273     &LT;div class="box-tools pull-right">
1274       &LT;button class="btn btn-box-tool" data-widget="collapse">&LT;i class="fa fa-minus">&LT;/i>&LT;/button>
1275     &LT;/div>&LT;!-- /.box-tools -->
1276   &LT;/div>&LT;!-- /.box-header -->
1277   &LT;div class="box-body">
1278     The body of the box
1279   &LT;/div>&LT;!-- /.box-body -->
1280 &LT;/div>&LT;!-- /.box --></pre>
1281     </div>
1282     <div class="col-md-4">
1283       <div class="box box-default">
1284         <div class="box-header with-border">
1285           <h3 class="box-title">Removable</h3>
1286           <div class="box-tools pull-right">
1287             <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
1288           </div><!-- /.box-tools -->
1289         </div><!-- /.box-header -->
1290         <div class="box-body">
1291           The body of the box
1292         </div><!-- /.box-body -->
1293       </div><!-- /.box -->
1294       <pre class="prettyprint">
1295 &LT;div class="box box-default">
1296   &LT;div class="box-header with-border">
1297     &LT;h3 class="box-title">Removable&LT;/h3>
1298     &LT;div class="box-tools pull-right">
1299       &LT;button class="btn btn-box-tool" data-widget="remove">&LT;i class="fa fa-times">&LT;/i>&LT;/button>
1300     &LT;/div>&LT;!-- /.box-tools -->
1301   &LT;/div>&LT;!-- /.box-header -->
1302   &LT;div class="box-body">
1303     The body of the box
1304   &LT;/div>&LT;!-- /.box-body -->
1305 &LT;/div>&LT;!-- /.box --></pre>
1306     </div>
1307     <div class="col-md-4">
1308       <div class="box box-default collapsed-box">
1309         <div class="box-header with-border">
1310           <h3 class="box-title">Expandable</h3>
1311           <div class="box-tools pull-right">
1312             <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button>
1313           </div><!-- /.box-tools -->
1314         </div><!-- /.box-header -->
1315         <div class="box-body">
1316           The body of the box
1317         </div><!-- /.box-body -->
1318       </div><!-- /.box -->
1319       <pre class="prettyprint">
1320 &LT;div class="box box-default collapsed-box">
1321   &LT;div class="box-header with-border">
1322     &LT;h3 class="box-title">Expandable&LT;/h3>
1323     &LT;div class="box-tools pull-right">
1324       &LT;button class="btn btn-box-tool" data-widget="collapse">&LT;i class="fa fa-plus">&LT;/i>&LT;/button>
1325     &LT;/div>&LT;!-- /.box-tools -->
1326   &LT;/div>&LT;!-- /.box-header -->
1327   &LT;div class="box-body">
1328     The body of the box
1329   &LT;/div>&LT;!-- /.box-body -->
1330 &LT;/div>&LT;!-- /.box --></pre>
1331     </div>
1332   </div><!-- /.row -->
1333   <p>We can also add labels, badges, pagination, tooltips, inputs and many more in the box tools. A few examples:</p>
1334   <div class="row">
1335     <div class="col-md-4">
1336       <div class="box box-default">
1337         <div class="box-header with-border">
1338           <h3 class="box-title">Labels</h3>
1339           <div class="box-tools pull-right">
1340             <span class="label label-default">Some Label</span>
1341           </div><!-- /.box-tools -->
1342         </div><!-- /.box-header -->
1343         <div class="box-body">
1344           The body of the box
1345         </div><!-- /.box-body -->
1346       </div><!-- /.box -->
1347       <pre class="prettyprint">
1348 &LT;div class="box box-default">
1349   &LT;div class="box-header with-border">
1350     &LT;h3 class="box-title">Labels&LT;/h3>
1351     &LT;div class="box-tools pull-right">
1352       &LT;span class="label label-default">8 New Messages&LT;/span>
1353     &LT;/div>&LT;!-- /.box-tools -->
1354   &LT;/div>&LT;!-- /.box-header -->
1355   &LT;div class="box-body">
1356     The body of the box
1357   &LT;/div>&LT;!-- /.box-body -->
1358 &LT;/div>&LT;!-- /.box --></pre>
1359     </div>
1360     <div class="col-md-4">
1361       <div class="box box-default">
1362         <div class="box-header with-border">
1363           <h3 class="box-title">Input</h3>
1364           <div class="box-tools pull-right">
1365             <div class="has-feedback">
1366               <input type="text" class="form-control input-sm" placeholder="Search...">
1367               <span class="glyphicon glyphicon-search form-control-feedback text-muted"></span>
1368             </div>
1369           </div><!-- /.box-tools -->
1370         </div><!-- /.box-header -->
1371         <div class="box-body">
1372           The body of the box
1373         </div><!-- /.box-body -->
1374       </div><!-- /.box -->
1375       <pre class="prettyprint">
1376 &LT;div class="box box-default">
1377   &LT;div class="box-header with-border">
1378     &LT;h3 class="box-title">Input&LT;/h3>
1379     &LT;div class="box-tools pull-right">
1380       &LT;div class="has-feedback">
1381         &LT;input type="text" class="form-control input-sm" placeholder="Search...">
1382         &LT;span class="glyphicon glyphicon-search form-control-feedback">&LT;/span>
1383       &LT;/div>
1384     &LT;/div>&LT;!-- /.box-tools -->
1385   &LT;/div>&LT;!-- /.box-header -->
1386   &LT;div class="box-body">
1387     The body of the box
1388   &LT;/div>&LT;!-- /.box-body -->
1389 &LT;/div>&LT;!-- /.box --></pre>
1390     </div>
1391     <div class="col-md-4">
1392       <div class="box box-default">
1393         <div class="box-header with-border">
1394           <h3 class="box-title">Tootips on buttons</h3>
1395           <div class="box-tools pull-right">
1396             <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
1397             <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>
1398           </div><!-- /.box-tools -->
1399         </div><!-- /.box-header -->
1400         <div class="box-body">
1401           The body of the box
1402         </div><!-- /.box-body -->
1403       </div><!-- /.box -->
1404       <pre class="prettyprint">
1405 &LT;div class="box box-default">
1406   &LT;div class="box-header with-border">
1407     &LT;h3 class="box-title">Tooltips on buttons&LT;/h3>
1408     &LT;div class="box-tools pull-right">
1409       &LT;button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">&LT;i class="fa fa-minus">&LT;/i>&LT;/button>
1410       &LT;button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">&LT;i class="fa fa-times">&LT;/i>&LT;/button>
1411     &LT;/div>&LT;!-- /.box-tools -->
1412   &LT;/div>&LT;!-- /.box-header -->
1413   &LT;div class="box-body">
1414     The body of the box
1415   &LT;/div>&LT;!-- /.box-body -->
1416 &LT;/div>&LT;!-- /.box --></pre>
1417     </div><!-- /.col -->
1418   </div><!-- /.row -->
1419   <p>
1420     If you inserted a box into the document after <code>app.js</code> was loaded, you have to activate
1421     the collapse/remove buttons explicitly by calling <code>.activateBox()</code>:
1422   </p>
1423   <pre class="prettyprint"><code class="html">&LT;script>
1424     $("#box-widget").activateBox();
1425 &LT;/script></code></pre>
1426
1427   <h4>Loading States</h4>
1428   <div class="row">
1429     <div class="col-md-6">
1430       <div class="box box-default">
1431         <div class="box-header with-border">
1432           <h3 class="box-title">Loading state</h3>
1433         </div>
1434         <div class="box-body">
1435           The body of the box
1436         </div><!-- /.box-body -->
1437         <!-- Loading (remove the following to stop the loading)-->
1438         <div class="overlay">
1439           <i class="fa fa-refresh fa-spin"></i>
1440         </div>
1441         <!-- end loading -->
1442       </div><!-- /.box -->
1443     </div><!-- /.col -->
1444
1445     <div class="col-md-6">
1446       <div class="box box-default box-solid">
1447         <div class="box-header with-border">
1448           <h3 class="box-title">Loading state (.box-solid)</h3>
1449         </div>
1450         <div class="box-body">
1451           The body of the box
1452         </div><!-- /.box-body -->
1453         <!-- Loading (remove the following to stop the loading)-->
1454         <div class="overlay">
1455           <i class="fa fa-refresh fa-spin"></i>
1456         </div>
1457         <!-- end loading -->
1458       </div><!-- /.box -->
1459     </div><!-- /.col -->
1460   </div><!-- /.row -->
1461   <p class="lead">
1462     To simulate a loading state, simply place this code before the <code>.box</code> closing tag.
1463   </p>
1464   <pre class="prettyprint"><code class="html">&LT;div class="overlay">
1465   &LT;i class="fa fa-refresh fa-spin">&LT;/i>
1466 &LT;/div>
1467 </code></pre>
1468   <h3 id="component-direct-chat">Direct Chat</h3>
1469   <p class="lead">The direct chat widget extends the box component to create a beautiful chat interface. This widget
1470     consists of a required messages pane and an <b>optional</b> contacts pane. Examples:</p>
1471   <!-- Direct Chat -->
1472   <div class="row">
1473     <div class="col-md-3">
1474       <!-- DIRECT CHAT PRIMARY -->
1475       <div class="box box-primary direct-chat direct-chat-primary">
1476         <div class="box-header with-border">
1477           <h3 class="box-title">Direct Chat</h3>
1478           <div class="box-tools pull-right">
1479             <span data-toggle="tooltip" title="3 New Messages" class="badge bg-light-blue">3</span>
1480             <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
1481             <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
1482             <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
1483           </div>
1484         </div><!-- /.box-header -->
1485         <div class="box-body">
1486           <!-- Conversations are loaded here -->
1487           <div class="direct-chat-messages">
1488             <!-- Message. Default to the left -->
1489             <div class="direct-chat-msg">
1490               <div class="direct-chat-info clearfix">
1491                 <span class="direct-chat-name pull-left">Alexander Pierce</span>
1492                 <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
1493               </div><!-- /.direct-chat-info -->
1494               <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
1495               <div class="direct-chat-text">
1496                 Is this template really for free? That's unbelievable!
1497               </div><!-- /.direct-chat-text -->
1498             </div><!-- /.direct-chat-msg -->
1499
1500             <!-- Message to the right -->
1501             <div class="direct-chat-msg right">
1502               <div class="direct-chat-info clearfix">
1503                 <span class="direct-chat-name pull-right">Sarah Bullock</span>
1504                 <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
1505               </div><!-- /.direct-chat-info -->
1506               <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
1507               <div class="direct-chat-text">
1508                 You better believe it!
1509               </div><!-- /.direct-chat-text -->
1510             </div><!-- /.direct-chat-msg -->
1511           </div><!--/.direct-chat-messages-->
1512
1513           <!-- Contacts are loaded here -->
1514           <div class="direct-chat-contacts">
1515             <ul class="contacts-list">
1516               <li>
1517                 <a href="#">
1518                   <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="Contact Avatar">
1519                   <div class="contacts-list-info">
1520                     <span class="contacts-list-name">
1521                       Count Dracula
1522                       <small class="contacts-list-date pull-right">2/28/2015</small>
1523                     </span>
1524                     <span class="contacts-list-msg">How have you been? I was...</span>
1525                   </div><!-- /.contacts-list-info -->
1526                 </a>
1527               </li><!-- End Contact Item -->
1528             </ul><!-- /.contatcts-list -->
1529           </div><!-- /.direct-chat-pane -->
1530         </div><!-- /.box-body -->
1531         <div class="box-footer">
1532           <form action="#" method="post">
1533             <div class="input-group">
1534               <input type="text" name="message" placeholder="Type Message ..." class="form-control">
1535               <span class="input-group-btn">
1536                 <button type="button" class="btn btn-primary btn-flat">Send</button>
1537               </span>
1538             </div>
1539           </form>
1540         </div><!-- /.box-footer-->
1541       </div><!--/.direct-chat -->
1542     </div><!-- /.col -->
1543
1544     <div class="col-md-3">
1545       <!-- DIRECT CHAT SUCCESS -->
1546       <div class="box box-success direct-chat direct-chat-success">
1547         <div class="box-header with-border">
1548           <h3 class="box-title">Direct Chat</h3>
1549           <div class="box-tools pull-right">
1550             <span data-toggle="tooltip" title="3 New Messages" class="badge bg-green">3</span>
1551             <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
1552             <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
1553             <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
1554           </div>
1555         </div><!-- /.box-header -->
1556         <div class="box-body">
1557           <!-- Conversations are loaded here -->
1558           <div class="direct-chat-messages">
1559             <!-- Message. Default to the left -->
1560             <div class="direct-chat-msg">
1561               <div class="direct-chat-info clearfix">
1562                 <span class="direct-chat-name pull-left">Alexander Pierce</span>
1563                 <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
1564               </div><!-- /.direct-chat-info -->
1565               <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
1566               <div class="direct-chat-text">
1567                 Is this template really for free? That's unbelievable!
1568               </div><!-- /.direct-chat-text -->
1569             </div><!-- /.direct-chat-msg -->
1570
1571             <!-- Message to the right -->
1572             <div class="direct-chat-msg right">
1573               <div class="direct-chat-info clearfix">
1574                 <span class="direct-chat-name pull-right">Sarah Bullock</span>
1575                 <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
1576               </div><!-- /.direct-chat-info -->
1577               <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
1578               <div class="direct-chat-text">
1579                 You better believe it!
1580               </div><!-- /.direct-chat-text -->
1581             </div><!-- /.direct-chat-msg -->
1582           </div><!--/.direct-chat-messages-->
1583
1584           <!-- Contacts are loaded here -->
1585           <div class="direct-chat-contacts">
1586             <ul class="contacts-list">
1587               <li>
1588                 <a href="#">
1589                   <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="Contact Avatar">
1590                   <div class="contacts-list-info">
1591                     <span class="contacts-list-name">
1592                       Count Dracula
1593                       <small class="contacts-list-date pull-right">2/28/2015</small>
1594                     </span>
1595                     <span class="contacts-list-msg">How have you been? I was...</span>
1596                   </div><!-- /.contacts-list-info -->
1597                 </a>
1598               </li><!-- End Contact Item -->
1599             </ul><!-- /.contatcts-list -->
1600           </div><!-- /.direct-chat-pane -->
1601         </div><!-- /.box-body -->
1602         <div class="box-footer">
1603           <form action="#" method="post">
1604             <div class="input-group">
1605               <input type="text" name="message" placeholder="Type Message ..." class="form-control">
1606               <span class="input-group-btn">
1607                 <button type="button" class="btn btn-success btn-flat">Send</button>
1608               </span>
1609             </div>
1610           </form>
1611         </div><!-- /.box-footer-->
1612       </div><!--/.direct-chat -->
1613     </div><!-- /.col -->
1614
1615     <div class="col-md-3">
1616       <!-- DIRECT CHAT WARNING -->
1617       <div class="box box-warning direct-chat direct-chat-warning">
1618         <div class="box-header with-border">
1619           <h3 class="box-title">Direct Chat</h3>
1620           <div class="box-tools pull-right">
1621             <span data-toggle="tooltip" title="3 New Messages" class="badge bg-yellow">3</span>
1622             <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
1623             <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
1624             <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
1625           </div>
1626         </div><!-- /.box-header -->
1627         <div class="box-body">
1628           <!-- Conversations are loaded here -->
1629           <div class="direct-chat-messages">
1630             <!-- Message. Default to the left -->
1631             <div class="direct-chat-msg">
1632               <div class="direct-chat-info clearfix">
1633                 <span class="direct-chat-name pull-left">Alexander Pierce</span>
1634                 <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
1635               </div><!-- /.direct-chat-info -->
1636               <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
1637               <div class="direct-chat-text">
1638                 Is this template really for free? That's unbelievable!
1639               </div><!-- /.direct-chat-text -->
1640             </div><!-- /.direct-chat-msg -->
1641
1642             <!-- Message to the right -->
1643             <div class="direct-chat-msg right">
1644               <div class="direct-chat-info clearfix">
1645                 <span class="direct-chat-name pull-right">Sarah Bullock</span>
1646                 <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
1647               </div><!-- /.direct-chat-info -->
1648               <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
1649               <div class="direct-chat-text">
1650                 You better believe it!
1651               </div><!-- /.direct-chat-text -->
1652             </div><!-- /.direct-chat-msg -->
1653           </div><!--/.direct-chat-messages-->
1654
1655           <!-- Contacts are loaded here -->
1656           <div class="direct-chat-contacts">
1657             <ul class="contacts-list">
1658               <li>
1659                 <a href="#">
1660                   <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="Contact Avatar">
1661                   <div class="contacts-list-info">
1662                     <span class="contacts-list-name">
1663                       Count Dracula
1664                       <small class="contacts-list-date pull-right">2/28/2015</small>
1665                     </span>
1666                     <span class="contacts-list-msg">How have you been? I was...</span>
1667                   </div><!-- /.contacts-list-info -->
1668                 </a>
1669               </li><!-- End Contact Item -->
1670             </ul><!-- /.contatcts-list -->
1671           </div><!-- /.direct-chat-pane -->
1672         </div><!-- /.box-body -->
1673         <div class="box-footer">
1674           <form action="#" method="post">
1675             <div class="input-group">
1676               <input type="text" name="message" placeholder="Type Message ..." class="form-control">
1677               <span class="input-group-btn">
1678                 <button type="button" class="btn btn-warning btn-flat">Send</button>
1679               </span>
1680             </div>
1681           </form>
1682         </div><!-- /.box-footer-->
1683       </div><!--/.direct-chat -->
1684     </div><!-- /.col -->
1685
1686     <div class="col-md-3">
1687       <!-- DIRECT CHAT DANGER -->
1688       <div class="box box-danger direct-chat direct-chat-danger">
1689         <div class="box-header with-border">
1690           <h3 class="box-title">Direct Chat</h3>
1691           <div class="box-tools pull-right">
1692             <span data-toggle="tooltip" title="3 New Messages" class="badge bg-red">3</span>
1693             <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
1694             <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
1695             <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
1696           </div>
1697         </div><!-- /.box-header -->
1698         <div class="box-body">
1699           <!-- Conversations are loaded here -->
1700           <div class="direct-chat-messages">
1701             <!-- Message. Default to the left -->
1702             <div class="direct-chat-msg">
1703               <div class="direct-chat-info clearfix">
1704                 <span class="direct-chat-name pull-left">Alexander Pierce</span>
1705                 <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
1706               </div><!-- /.direct-chat-info -->
1707               <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
1708               <div class="direct-chat-text">
1709                 Is this template really for free? That's unbelievable!
1710               </div><!-- /.direct-chat-text -->
1711             </div><!-- /.direct-chat-msg -->
1712
1713             <!-- Message to the right -->
1714             <div class="direct-chat-msg right">
1715               <div class="direct-chat-info clearfix">
1716                 <span class="direct-chat-name pull-right">Sarah Bullock</span>
1717                 <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
1718               </div><!-- /.direct-chat-info -->
1719               <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
1720               <div class="direct-chat-text">
1721                 You better believe it!
1722               </div><!-- /.direct-chat-text -->
1723             </div><!-- /.direct-chat-msg -->
1724           </div><!--/.direct-chat-messages-->
1725
1726           <!-- Contacts are loaded here -->
1727           <div class="direct-chat-contacts">
1728             <ul class="contacts-list">
1729               <li>
1730                 <a href="#">
1731                   <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="Contact Avatar">
1732                   <div class="contacts-list-info">
1733                     <span class="contacts-list-name">
1734                       Count Dracula
1735                       <small class="contacts-list-date pull-right">2/28/2015</small>
1736                     </span>
1737                     <span class="contacts-list-msg">How have you been? I was...</span>
1738                   </div><!-- /.contacts-list-info -->
1739                 </a>
1740               </li><!-- End Contact Item -->
1741             </ul><!-- /.contatcts-list -->
1742           </div><!-- /.direct-chat-pane -->
1743         </div><!-- /.box-body -->
1744         <div class="box-footer">
1745           <form action="#" method="post">
1746             <div class="input-group">
1747               <input type="text" name="message" placeholder="Type Message ..." class="form-control">
1748               <span class="input-group-btn">
1749                 <button type="button" class="btn btn-danger btn-flat">Send</button>
1750               </span>
1751             </div>
1752           </form>
1753         </div><!-- /.box-footer-->
1754       </div><!--/.direct-chat -->
1755     </div><!-- /.col -->
1756   </div><!-- /.row -->
1757   <p class="lead">Direct Chat Markup</p>
1758   <pre class="prettyprint"><code class="html">
1759 &LT;!-- Construct the box with style you want. Here we are using box-danger -->
1760 &LT;!-- Then add the class direct-chat and choose the direct-chat-* contexual class -->
1761 &LT;!-- The contextual class should match the box, so we are using direct-chat-danger -->
1762 &LT;div class="box box-danger direct-chat direct-chat-danger">
1763   &LT;div class="box-header with-border">
1764     &LT;h3 class="box-title">Direct Chat&LT;/h3>
1765     &LT;div class="box-tools pull-right">
1766       &LT;span data-toggle="tooltip" title="3 New Messages" class="badge bg-red">3&LT;/span>
1767       &LT;button class="btn btn-box-tool" data-widget="collapse">&LT;i class="fa fa-minus">&LT;/i>&LT;/button>
1768       &LT;!-- In box-tools add this button if you intend to use the contacts pane -->
1769       &LT;button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle">&LT;i class="fa fa-comments">&LT;/i>&LT;/button>
1770       &LT;button class="btn btn-box-tool" data-widget="remove">&LT;i class="fa fa-times">&LT;/i>&LT;/button>
1771     &LT;/div>
1772   &LT;/div>&LT;!-- /.box-header -->
1773   &LT;div class="box-body">
1774     &LT;!-- Conversations are loaded here -->
1775     &LT;div class="direct-chat-messages">
1776       &LT;!-- Message. Default to the left -->
1777       &LT;div class="direct-chat-msg">
1778         &LT;div class="direct-chat-info clearfix">
1779           &LT;span class="direct-chat-name pull-left">Alexander Pierce&LT;/span>
1780           &LT;span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm&LT;/span>
1781         &LT;/div>&LT;!-- /.direct-chat-info -->
1782         &LT;img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image">&LT;!-- /.direct-chat-img -->
1783         &LT;div class="direct-chat-text">
1784           Is this template really for free? That's unbelievable!
1785         &LT;/div>&LT;!-- /.direct-chat-text -->
1786       &LT;/div>&LT;!-- /.direct-chat-msg -->
1787
1788       &LT;!-- Message to the right -->
1789       &LT;div class="direct-chat-msg right">
1790         &LT;div class="direct-chat-info clearfix">
1791           &LT;span class="direct-chat-name pull-right">Sarah Bullock&LT;/span>
1792           &LT;span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm&LT;/span>
1793         &LT;/div>&LT;!-- /.direct-chat-info -->
1794         &LT;img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image">&LT;!-- /.direct-chat-img -->
1795         &LT;div class="direct-chat-text">
1796           You better believe it!
1797         &LT;/div>&LT;!-- /.direct-chat-text -->
1798       &LT;/div>&LT;!-- /.direct-chat-msg -->
1799     &LT;/div>&LT;!--/.direct-chat-messages-->
1800
1801     &LT;!-- Contacts are loaded here -->
1802     &LT;div class="direct-chat-contacts">
1803       &LT;ul class="contacts-list">
1804         &LT;li>
1805           &LT;a href="#">
1806             &LT;img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="Contact Avatar">
1807             &LT;div class="contacts-list-info">
1808               &LT;span class="contacts-list-name">
1809                 Count Dracula
1810                 &LT;small class="contacts-list-date pull-right">2/28/2015&LT;/small>
1811               &LT;/span>
1812               &LT;span class="contacts-list-msg">How have you been? I was...&LT;/span>
1813             &LT;/div>&LT;!-- /.contacts-list-info -->
1814           &LT;/a>
1815         &LT;/li>&LT;!-- End Contact Item -->
1816       &LT;/ul>&LT;!-- /.contatcts-list -->
1817     &LT;/div>&LT;!-- /.direct-chat-pane -->
1818   &LT;/div>&LT;!-- /.box-body -->
1819   &LT;div class="box-footer">
1820     &LT;div class="input-group">
1821       &LT;input type="text" name="message" placeholder="Type Message ..." class="form-control">
1822       &LT;span class="input-group-btn">
1823         &LT;button type="button" class="btn btn-danger btn-flat">Send&LT;/button>
1824       &LT;/span>
1825     &LT;/div>
1826   &LT;/div>&LT;!-- /.box-footer-->
1827 &LT;/div>&LT;!--/.direct-chat -->
1828 </code></pre>
1829
1830   <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>
1831
1832   <!-- Direct Chat With Solid Boxes -->
1833   <div class="row">
1834     <div class="col-md-6">
1835       <!-- DIRECT CHAT WARNING -->
1836       <div class="box box-primary box-solid direct-chat direct-chat-primary">
1837         <div class="box-header">
1838           <h3 class="box-title">Direct Chat in a Solid Box</h3>
1839           <div class="box-tools pull-right">
1840             <span data-toggle="tooltip" title="3 New Messages" class="badge bg-light-blue">3</span>
1841             <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
1842             <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
1843             <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
1844           </div>
1845         </div><!-- /.box-header -->
1846         <div class="box-body">
1847           <!-- Conversations are loaded here -->
1848           <div class="direct-chat-messages">
1849             <!-- Message. Default to the left -->
1850             <div class="direct-chat-msg">
1851               <div class="direct-chat-info clearfix">
1852                 <span class="direct-chat-name pull-left">Alexander Pierce</span>
1853                 <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
1854               </div><!-- /.direct-chat-info -->
1855               <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
1856               <div class="direct-chat-text">
1857                 Is this template really for free? That's unbelievable!
1858               </div><!-- /.direct-chat-text -->
1859             </div><!-- /.direct-chat-msg -->
1860
1861             <!-- Message to the right -->
1862             <div class="direct-chat-msg right">
1863               <div class="direct-chat-info clearfix">
1864                 <span class="direct-chat-name pull-right">Sarah Bullock</span>
1865                 <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
1866               </div><!-- /.direct-chat-info -->
1867               <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
1868               <div class="direct-chat-text">
1869                 You better believe it!
1870               </div><!-- /.direct-chat-text -->
1871             </div><!-- /.direct-chat-msg -->
1872           </div><!--/.direct-chat-messages-->
1873
1874           <!-- Contacts are loaded here -->
1875           <div class="direct-chat-contacts">
1876             <ul class="contacts-list">
1877               <li>
1878                 <a href="#">
1879                   <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="Contact Avatar">
1880                   <div class="contacts-list-info">
1881                     <span class="contacts-list-name">
1882                       Count Dracula
1883                       <small class="contacts-list-date pull-right">2/28/2015</small>
1884                     </span>
1885                     <span class="contacts-list-msg">How have you been? I was...</span>
1886                   </div><!-- /.contacts-list-info -->
1887                 </a>
1888               </li><!-- End Contact Item -->
1889             </ul><!-- /.contatcts-list -->
1890           </div><!-- /.direct-chat-pane -->
1891         </div><!-- /.box-body -->
1892         <div class="box-footer">
1893           <form action="#" method="post">
1894             <div class="input-group">
1895               <input type="text" name="message" placeholder="Type Message ..." class="form-control">
1896               <span class="input-group-btn">
1897                 <button type="button" class="btn btn-primary btn-flat">Send</button>
1898               </span>
1899             </div>
1900           </form>
1901         </div><!-- /.box-footer-->
1902       </div><!--/.direct-chat -->
1903     </div><!-- /.col -->
1904
1905     <div class="col-md-6">
1906       <!-- DIRECT CHAT DANGER -->
1907       <div class="box box-info box-solid direct-chat direct-chat-info">
1908         <div class="box-header">
1909           <h3 class="box-title">Direct Chat in a Solid Box</h3>
1910           <div class="box-tools pull-right">
1911             <span data-toggle="tooltip" title="3 New Messages" class="badge bg-aqua">3</span>
1912             <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
1913             <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
1914             <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
1915           </div>
1916         </div><!-- /.box-header -->
1917         <div class="box-body">
1918           <!-- Conversations are loaded here -->
1919           <div class="direct-chat-messages">
1920             <!-- Message. Default to the left -->
1921             <div class="direct-chat-msg">
1922               <div class="direct-chat-info clearfix">
1923                 <span class="direct-chat-name pull-left">Alexander Pierce</span>
1924                 <span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
1925               </div><!-- /.direct-chat-info -->
1926               <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
1927               <div class="direct-chat-text">
1928                 Is this template really for free? That's unbelievable!
1929               </div><!-- /.direct-chat-text -->
1930             </div><!-- /.direct-chat-msg -->
1931
1932             <!-- Message to the right -->
1933             <div class="direct-chat-msg right">
1934               <div class="direct-chat-info clearfix">
1935                 <span class="direct-chat-name pull-right">Sarah Bullock</span>
1936                 <span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
1937               </div><!-- /.direct-chat-info -->
1938               <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
1939               <div class="direct-chat-text">
1940                 You better believe it!
1941               </div><!-- /.direct-chat-text -->
1942             </div><!-- /.direct-chat-msg -->
1943           </div><!--/.direct-chat-messages-->
1944
1945           <!-- Contacts are loaded here -->
1946           <div class="direct-chat-contacts">
1947             <ul class="contacts-list">
1948               <li>
1949                 <a href="#">
1950                   <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="Contact Avatar">
1951                   <div class="contacts-list-info">
1952                     <span class="contacts-list-name">
1953                       Count Dracula
1954                       <small class="contacts-list-date pull-right">2/28/2015</small>
1955                     </span>
1956                     <span class="contacts-list-msg">How have you been? I was...</span>
1957                   </div><!-- /.contacts-list-info -->
1958                 </a>
1959               </li><!-- End Contact Item -->
1960             </ul><!-- /.contatcts-list -->
1961           </div><!-- /.direct-chat-pane -->
1962         </div><!-- /.box-body -->
1963         <div class="box-footer">
1964           <form action="#" method="post">
1965             <div class="input-group">
1966               <input type="text" name="message" placeholder="Type Message ..." class="form-control">
1967               <span class="input-group-btn">
1968                 <button type="button" class="btn btn-info btn-flat">Send</button>
1969               </span>
1970             </div>
1971           </form>
1972         </div><!-- /.box-footer-->
1973       </div><!--/.direct-chat -->
1974     </div><!-- /.col -->
1975   </div><!-- /.row -->
1976 </section>
1977
1978
1979 <!-- ============================================================= -->
1980
1981 <section id="plugins">
1982   <h2 class="page-header"><a href="#plugins">Plugins</a></h2>
1983   <p class="lead">AdminLTE makes use of the following plugins. For documentation, updates or license information, please visit the provided links.</p>
1984   <div class="row bring-up">
1985     <div class="col-sm-3">
1986       <ul class="list-unstyled">
1987         <li><h4>Charts</h4></li>
1988         <li><a href="http://www.chartjs.org/" target="_blank">ChartJS</a></li>
1989         <li><a href="http://www.flotcharts.org/" target="_blank">Flot</a></li>
1990         <li><a href="http://morrisjs.github.io/morris.js/" target="_blank">Morris.js</a></li>
1991         <li><a href="http://omnipotent.net/jquery.sparkline/" target="_blank">Sparkline</a></li>
1992       </ul>
1993     </div><!-- /.col -->
1994     <div class="col-sm-3">
1995       <ul class="list-unstyled">
1996         <li><h4>Form Elements</h4></li>
1997         <li><a href="https://github.com/seiyria/bootstrap-slider/">Bootstrap Slider</a></li>
1998         <li><a href="http://ionden.com/a/plugins/ion.rangeSlider/en.html" target="_blank">Ion Slider</a></li>
1999         <li><a href="http://bootstrap-datepicker.readthedocs.org/" target="_blank">Date Picker</a></li>
2000         <li><a href="http://www.daterangepicker.com/" target="_blank">Date Range Picker</a></li>
2001         <li><a href="http://mjolnic.com/bootstrap-colorpicker/" target="_blank">Color Picker</a></li>
2002         <li><a href="https://github.com/jdewit/bootstrap-timepicker/" target="_blank">Time Picker</a></li>
2003         <li><a href="http://fronteed.com/iCheck/" target="_blank">iCheck</a></li>
2004         <li><a href="https://github.com/RobinHerbots/jquery.inputmask/" target="_blank">Input Mask</a></li>
2005       </ul>
2006     </div><!-- /.col -->
2007     <div class="col-sm-3">
2008       <ul class="list-unstyled">
2009         <li><h4>Editors</h4></li>
2010         <li><a href="https://github.com/bootstrap-wysiwyg/bootstrap3-wysiwyg/" target="_blank">Bootstrap WYSIHTML5</a></li>
2011         <li><a href="http://ckeditor.com/" target="_blank">CK Editor</a></li>
2012       </ul>
2013     </div><!-- /. col -->
2014     <div class="col-sm-3">
2015       <ul class="list-unstyled">
2016         <li><h4>Other</h4></li>
2017         <li><a href="https://datatables.net/examples/styling/bootstrap.html" target="_blank">DataTables</a></li>
2018         <li><a href="http://fullcalendar.io/" target="_blank">Full Calendar</a></li>
2019         <li><a href="http://jqueryui.com/" target="_blank">jQuery UI</a></li>
2020         <li><a href="http://anthonyterrien.com/knob/" target="_blank">jQuery Knob</a></li>
2021         <li><a href="http://jvectormap.com/" target="_blank">jVector Map</a></li>
2022         <li><a href="http://rocha.la/jQuery-slimScroll/" target="_blank">Slim Scroll</a></li>
2023         <li><a href="http://github.hubspot.com/pace/docs/welcome/" target="_blank">Pace</a></li>
2024       </ul>
2025     </div><!-- /.col -->
2026   </div><!-- /.row -->
2027 </section>
2028
2029
2030 <!-- ============================================================= -->
2031
2032 <section id="browsers">
2033   <h2 class="page-header"><a href="#browsers">Browser Support</a></h2>
2034   <p class="lead">AdminLTE supports the following browsers:</p>
2035   <ul>
2036     <li>IE9+</li>
2037     <li>Firefox (latest)</li>
2038     <li>Safari (latest)</li>
2039     <li>Chrome (latest)</li>
2040     <li>Opera (latest)</li>
2041   </ul>
2042   <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>
2043 </section>
2044
2045
2046 <!-- ============================================================= -->
2047
2048 <section id="upgrade">
2049   <h2 class="page-header"><a href="#upgrade">Upgrade Guide</a></h2>
2050   <p class="lead">To upgrade from version 1.x to the lateset version, follow this guide.</p>
2051   <h3>New Files</h3>
2052   <p>Make sure you update all CSS and JS files that are related to AdminLTE. Otherwise, the layout will not
2053     function properly. Most important files are AdminLTE.css, skins CSS files, and app.js.</p>
2054   <h3>Layout Changes</h3>
2055   <ol>
2056     <li>The .wrapper div must be placed immediately after the body tag rather than after the header</li>
2057     <li>Change the .header div to .main-header <code>&LT;div class="main-header"></code></li>
2058     <li>Change the .right-side class to .content-wrapper <code>&LT;div class="content-wrapper"></code></li>
2059     <li>Change the .left-side class to .main-sidebar <code>&LT;div class="main-sidebar"></code></li>
2060     <li>In the navbar, change .navbar-right to .navbar-custom-menu <code>&LT;div class="navbar-custom-menu"></code></li>
2061   </ol>
2062   <h3>Navbar Custom Dropdown Menus</h3>
2063   <ol>
2064     <li>The icons in the notification menu do not need bg-* classes. They should be replaced with contextual text color class such as text-aqua or text-red.</li>
2065   </ol>
2066   <h3>Login, Registration and Lockscreen Pages</h3>
2067   <p>There are major changes to the HTML markup and style to these pages. The best way is to copy the page's code and customize it.</p>
2068   <p>And you should be set to go!</p>
2069   <h3>Mailbox</h3>
2070   <p>Mailbox got an upgrade to include three different views. The views are inbox, read mail, and compose new email. To use these views,
2071     you should use the provided HTML files in the pages/mailbox folder.</p>
2072   <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>
2073 </section>
2074
2075
2076 <!-- ============================================================= -->
2077
2078 <section id="implementations">
2079   <h2 class="page-header"><a href="#implementations">Implementations</a></h2>
2080   <p class="lead">Thanks to many of AdminLTE users, there are multiple implementations of the template
2081   for easy integration with back-end frameworks. The following are some of them:</p>
2082
2083   <ul>
2084     <li><a href="https://github.com/mmdsharifi/AdminLTE-RTL">Persian RTL</a> by <a href="https://github.com/mmdsharifi">Mohammad Sharifi</a></li>
2085     <li><a href="https://github.com/dmstr/yii2-adminlte-asset" target="_blank">Yii 2</a> by <a href="https://github.com/schmunk42" target="_blank">Tobias Munk</a></li>
2086     <li><a href="https://github.com/yajra/laravel-admin-template" target="_blank">Laravel</a> by <a href="https://github.com/yajra" target="_blank">Arjay Angeles</a></li>
2087     <li><a href="https://github.com/acacha/adminlte-laravel" target="_blank">Laravel 5 package</a> by <a href="https://github.com/acacha" target="_blank">Sergi Tur Badenas</a></li>
2088     <li><a href="https://github.com/avanzu/AdminThemeBundle" target="_blank">Symfony</a> by <a href="https://github.com/avanzu" target="_blank">Marc Bach</a></li>
2089     <li>Rails gems: <a href="https://github.com/nicolas-besnard/adminlte2-rails" target="_blank">adminlte2-rails</a> by <a href="https://github.com/nicolas-besnard" target="_blank">Nicolas Besnard</a> and <a href="https://github.com/racketlogger/lte-rails" target="_blank">lte-rails</a> (using AdminLTE sources) by <a href="https://github.com/racketlogger" target="_blank">Carlos at RacketLogger</a></li>
2090   </ul>
2091
2092   <p><b class="text-red">Note:</b> these implementations are not supported by Almsaeed Studio. However,
2093     they do provide a good example of how to integrate AdminLTE into different frameworks. For the latest release
2094     of AdminLTE, please visit our <a href="https://github.com/almasaeed2010/AdminLTE">repository</a> or <a href="https://almsaeedstudio.com">website</a></p>
2095 </section>
2096
2097
2098 <!-- ============================================================= -->
2099
2100 <section id="faq">
2101   <h2 class="page-header"><a href="#faq">FAQ</a></h2>
2102   <h3>Can AdminLTE be used with Wordpress?</h3>
2103   <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>
2104
2105   <h3>Is there an integration guide for PHP frameworks such as Yii or Symfony?</h3>
2106   <p class="lead">Short answer, no. However, there are forks and tutorials around the web that provide info on how to integrate with many different frameworks. There are even versions of AdminLTE that are integrated with jQuery ajax, AngularJS and/or MVC5 ASP .NET.</p>
2107
2108   <h3>How do I get notified of new AdminLTE versions?</h3>
2109   <p class="lead">The best option is to subscribe to our mailing list using the <a href="http://almsaeedstudio.com/#subscribe">subscription form on Almsaeed Studio</a>.
2110     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>
2111 </section>
2112
2113
2114 <!-- ============================================================= -->
2115
2116 <section id="license">
2117   <h2 class="page-header"><a href="#license">License</a></h2>
2118   <h3>AdminLTE</h3>
2119   <p class="lead">
2120     AdminLTE is an open source project that is licensed under the <a href="http://opensource.org/licenses/MIT">MIT license</a>.
2121     This allows you to do pretty much anything you want as long as you include
2122     the copyright in "all copies or substantial portions of the Software."
2123     Attribution is not required (though very much appreciated).
2124   </p>
2125 </section>
2126
2127
2128         </div><!-- /.content -->
2129       </div><!-- /.content-wrapper -->
2130
2131       <footer class="main-footer">
2132         <div class="pull-right hidden-xs">
2133           <b>Version</b> 2.3.7
2134         </div>
2135         <strong>Copyright &copy; 2014-2016 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights reserved.
2136       </footer>
2137
2138       <!-- Control Sidebar -->
2139       <aside class="control-sidebar control-sidebar-dark">
2140         <!-- Create the tabs -->
2141         <div class="pad">
2142           This is an example of the control sidebar.
2143         </div>
2144       </aside><!-- /.control-sidebar -->
2145       <!-- Add the sidebar's background. This div must be placed
2146            immediately after the control sidebar -->
2147       <div class="control-sidebar-bg"></div>
2148
2149     </div><!-- ./wrapper -->
2150
2151     <!-- jQuery 2.2.3 -->
2152     <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
2153     <!-- Bootstrap 3.3.6 -->
2154     <script src="../bootstrap/js/bootstrap.min.js"></script>
2155     <!-- FastClick -->
2156     <script src="../plugins/fastclick/fastclick.min.js"></script>
2157     <!-- AdminLTE App -->
2158     <script src="../dist/js/app.min.js"></script>
2159     <!-- SlimScroll 1.3.0 -->
2160     <script src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
2161     <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
2162     <script src="docs.js"></script>
2163   </body>
2164 </html>