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,7 +256,7 @@
<!-- 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">
@@ -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:
@@ -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,7 +483,7 @@
<!-- 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.
@@ -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.
@@ -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,9 +1056,9 @@
