Components
-Components
+Reminder!
AdminLTE uses all of Bootstrap 3 components. It's a good start to review @@ -8,7 +8,7 @@ that this documentation does not cover.
Tip!
If you go through the example pages and would like to copy a component, right-click on @@ -16,8 +16,8 @@ the HTML page.
Main Header
-The main header contains the logo and navbar. Construction of the +
Main Header
+The main header contains the logo and navbar. Construction of the navbar differs slightly from Bootstrap because it has components that Bootstrap doesn't provide. The navbar can be constructed in two way. This an example for the normal navbar and next we will provide an example for the top nav layout.
@@ -26,7 +26,7 @@ Main Header Example<header class="main-header">
+ <header class="main-header">
<a href="../../index2.html" class="logo">
<!-- LOGO -->
AdminLTE
@@ -184,7 +184,7 @@
<li><!-- start message -->
<a href="#">
<div class="pull-left">
- <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"/>
+ <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
</div>
<h4>
Sender Name
@@ -256,13 +256,13 @@
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
- <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image"/>
+ <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
<span class="hidden-xs">Alexander Pierce</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
- <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
+ <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
<p>
Alexander Pierce - Web Developer
<small>Member since Nov. 2012</small>
@@ -355,7 +355,7 @@
-
+
<header class="main-header">
<nav class="navbar navbar-static-top">
<div class="container-fluid">
@@ -409,7 +409,7 @@
- Sidebar
+ Sidebar
The sidebar used in this page to the left provides an example of what your sidebar should like.
Construction of a sidebar:
@@ -421,7 +421,7 @@
<!-- user panel (Optional) -->
<div class="user-panel">
<div class="pull-left image">
- <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
+ <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>User Name</p>
@@ -433,9 +433,9 @@
<!-- Search Form (Optional) -->
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
- <input type="text" name="q" class="form-control" placeholder="Search..."/>
+ <input type="text" name="q" class="form-control" placeholder="Search...">
<span class="input-group-btn">
- <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+ <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i></button>
</span>
</div>
</form><!-- /.sidebar-form -->
@@ -483,12 +483,12 @@
<!-- This div must placed right after the sidebar for it to work-->
<div class="control-sidebar-bg"></div>
- Once you create the sidebar, you will need a toggle button to open/close it.
+
Once you create the sidebar, you will need a toggle button to open/close it.
By adding the attribute data-toggle="control-sidebar" to any button, it will
automatically act as the toggle button.
Toggle Button Example
-
+
Sidebar Toggle Markup
<button class="btn btn-default" data-toggle="control-sidebar">Toggle Right Sidebar</button>
@@ -538,7 +538,7 @@
Markup
<div class="info-box">
- <-- Apply any bg-* class to to the icon to color it -->
+ <!-- Apply any bg-* class to to the icon to color it -->
<span class="info-box-icon bg-red"><i class="fa fa-star-o"></i></span>
<div class="info-box-content">
<span class="info-box-text">Likes</span>
@@ -610,13 +610,13 @@
Markup
- <-- Apply any bg-* class to to the info-box to color it -->
+ <!-- Apply any bg-* class to to the info-box to color it -->
<div class="info-box bg-red">
<span class="info-box-icon"><i class="fa fa-comments-o"></i></span>
<div class="info-box-content">
<span class="info-box-text">Likes</span>
<span class="info-box-number">41,410</span>
- <-- The progress section is optional -->
+ <!-- The progress section is optional -->
<div class="progress">
<div class="progress-bar" style="width: 70%"></div>
</div>
@@ -629,7 +629,7 @@
first style apply any bg-* class to the icon itself. For the other style, apply the bg-* class to the info-box div.
- Box
+ Box
The box component is the most widely used component through out this template. You can
use it for anything from displaying charts to just blocks of text. It comes in many different
styles that we will explore below.
@@ -818,9 +818,9 @@
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 -->
+<!-- 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 -->
+<!-- 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>
@@ -899,7 +899,7 @@
</div><!-- /.box -->
- We can also add labels, badges, pagination, tooltips, inputs and many more in the box tools. A few examples:
+ We can also add labels, badges, pagination, tooltips, inputs and many more in the box tools. A few examples:
@@ -932,7 +932,7 @@
Input
-
+
@@ -947,7 +947,7 @@
<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..."/>
+ <input type="text" class="form-control input-sm" placeholder="Search...">
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</div><!-- /.box-tools -->
@@ -989,7 +989,7 @@
If you inserted a box into the document after app.js was loaded, you have to activate
the collapse/remove buttons explicitly by calling .activateBox():
- <script>
+ <script>
$("#box-widget").activateBox();
</script>
@@ -1045,7 +1045,7 @@
Direct Chat
- 3
+ 3
@@ -1056,11 +1056,11 @@
-
- Alexander Pierce
-
+
+ Alexander Pierce
+
- 
+
Is this template really for free? That's unbelievable!
@@ -1068,11 +1068,11 @@
+