AdminLTE uses all of Bootstrap 3 components. It's a good start to review the Bootstrap documentation to get an idea of the various components - that this documentation does not cover. + that this documentation does not cover.
To use this main header instead of the regular one, you must add the layout-top-nav class to the body tag.
-<!-- header logo: style can be found in header.less -->
-<header class="main-header">
- <!-- Logo -->
- <a href="../../index2.html" class="logo">AdminLTE</a>
+<header class="main-header">
<nav class="navbar navbar-static-top">
+ <div class="container-fluid">
<div class="navbar-header">
- <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+ <a href="../../index2.html" class="navbar-brand"><b>Admin</b>LTE</a>
+ <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<i class="fa fa-bars"></i>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+ <div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
@@ -857,6 +1169,7 @@ AdminLTE/
</li>
</ul>
</div><!-- /.navbar-collapse -->
+ </div><!-- /.container-fluid -->
</nav>
</header>
@@ -1098,6 +1411,179 @@ AdminLTE/
<div class="box box-solid box-warning">...</div>
<div class="box box-solid box-success">...</div>
<div class="box box-solid box-danger">...</div>
+ Boxes can contain tools to deploy a specific event or provide simple info. The following examples makes use + of multiple AdminLTE components within the header of the box.
+AdminLTE data-widget attribute provides boxes with the ability to collapse or be removed. The buttons + are placed in the box-tools which is placed in the box-header.
++<-- This will cause the box to be removed when clicked --> +<button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button> +<-- This will cause the box to collapse when clicked --> +<button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>+
+<div class="box box-default"> + <div class="box-header with-border"> + <h3 class="box-title">Collapsable</h3> + <div class="box-tools pull-right"> + <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> + </div><!-- /.box-tools --> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> +</div><!-- /.box -->+
+<div class="box box-default"> + <div class="box-header with-border"> + <h3 class="box-title">Removable</h3> + <div class="box-tools pull-right"> + <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> + </div><!-- /.box-tools --> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> +</div><!-- /.box -->+
+<div class="box box-default"> + <div class="box-header with-border"> + <h3 class="box-title">Expandable</h3> + <div class="box-tools pull-right"> + <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button> + </div><!-- /.box-tools --> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> +</div><!-- /.box -->+
We can also add labels, badges, pagination, tooltips, inputs and many more in the box tools. A few examples:
++<div class="box box-default"> + <div class="box-header with-border"> + <h3 class="box-title">Labels</h3> + <div class="box-tools pull-right"> + <span class="label label-default">8 New Messages</span> + </div><!-- /.box-tools --> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> +</div><!-- /.box -->+
+<div class="box box-default"> + <div class="box-header with-border"> + <h3 class="box-title">Input</h3> + <div class="box-tools pull-right"> + <div class="has-feedback"> + <input type="text" class="form-control input-sm" placeholder="Search..."/> + <span class="glyphicon glyphicon-search form-control-feedback"></span> + </div> + </div><!-- /.box-tools --> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> +</div><!-- /.box -->+
+<div class="box box-default"> + <div class="box-header with-border"> + <h3 class="box-title">Tooltips on buttons</h3> + <div class="box-tools pull-right"> + <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button> + <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button> + </div><!-- /.box-tools --> + </div><!-- /.box-header --> + <div class="box-body"> + The body of the box + </div><!-- /.box-body --> +</div><!-- /.box -->+
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.
And you should be set to go!
+Mailbox got an upgrade to include three different views. The views are inbox, read mail, and compose new email. To use these views, + you should use the provided HTML files in the pages/mailbox folder.
+Note: the old mailbox layout has been deprecated in favor of the new one and will be removed by the next release.