1546 lines
70 KiB
HTML
1546 lines
70 KiB
HTML
<section id="components" data-spy="scroll" data-target="#scrollspy-components">
|
|
<h2 class="page-header"><a href="#components">Components</a></h2>
|
|
<div class="callout callout-info lead">
|
|
<h4>Reminder!</h4>
|
|
<p>
|
|
AdminLTE uses all of Bootstrap 3 components. It's a good start to review
|
|
the <a href="http://getbootstrap.com">Bootstrap documentation</a> to get an idea of the various components
|
|
that this documentation <b>does not</b> cover.
|
|
</p>
|
|
</div>
|
|
<div class="callout callout-danger lead">
|
|
<h4>Tip!</h4>
|
|
<p>
|
|
If you go through the example pages and would like to copy a component, right-click on
|
|
the component and choose "inspect element" to get to the HTML quicker than scanning
|
|
the HTML page.
|
|
</p>
|
|
</div>
|
|
<h3 id="component-main-header">Main Header</h3>
|
|
<p class="lead">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 ways. This is an example for the normal navbar and next we will provide an example for
|
|
the top nav layout.</p>
|
|
<div class="box box-solid">
|
|
<div class="box-body" style="position: relative;">
|
|
<span class="eg">Main Header Example</span>
|
|
<header class="main-header" style="position: relative;">
|
|
<!-- Logo -->
|
|
<a href="index2.html" class="logo" style="position: relative;"><b>Admin</b>LTE</a>
|
|
<!-- Header Navbar: style can be found in header.less -->
|
|
<nav class="navbar" role="navigation" style="border: 0;max-height: 50px;">
|
|
<!-- Sidebar toggle button-->
|
|
<a href="#" class="sidebar-toggle" role="button">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
</a>
|
|
<!-- Navbar Right Menu -->
|
|
<div class="navbar-custom-menu">
|
|
<ul class="nav navbar-nav">
|
|
<!-- Messages: style can be found in dropdown.less-->
|
|
<li class="dropdown messages-menu">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
|
<i class="fa fa-envelope-o"></i>
|
|
<span class="label label-success">4</span>
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="header">You have 4 messages</li>
|
|
<li>
|
|
<!-- inner menu: contains the actual data -->
|
|
<ul class="menu">
|
|
<li><!-- start message -->
|
|
<a href="#">
|
|
<div class="pull-left">
|
|
<img src="../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
|
|
</div>
|
|
<h4>
|
|
Support Team
|
|
<small><i class="fa fa-clock-o"></i> 5 mins</small>
|
|
</h4>
|
|
<p>Why not buy a new awesome theme?</p>
|
|
</a>
|
|
</li><!-- end message -->
|
|
</ul>
|
|
</li>
|
|
<li class="footer"><a href="#">See All Messages</a></li>
|
|
</ul>
|
|
</li>
|
|
<!-- Notifications: style can be found in dropdown.less -->
|
|
<li class="dropdown notifications-menu">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
|
<i class="fa fa-bell-o"></i>
|
|
<span class="label label-warning">10</span>
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="header">You have 10 notifications</li>
|
|
<li>
|
|
<!-- inner menu: contains the actual data -->
|
|
<ul class="menu">
|
|
<li>
|
|
<a href="#">
|
|
<i class="fa fa-users text-aqua"></i> 5 new members joined today
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="footer"><a href="#">View all</a></li>
|
|
</ul>
|
|
</li>
|
|
<!-- Tasks: style can be found in dropdown.less -->
|
|
<li class="dropdown tasks-menu">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
|
<i class="fa fa-flag-o"></i>
|
|
<span class="label label-danger">9</span>
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="header">You have 9 tasks</li>
|
|
<li>
|
|
<!-- inner menu: contains the actual data -->
|
|
<ul class="menu">
|
|
<li><!-- Task item -->
|
|
<a href="#">
|
|
<h3>
|
|
Design some buttons
|
|
<small class="pull-right">20%</small>
|
|
</h3>
|
|
<div class="progress xs">
|
|
<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
|
|
<span class="sr-only">20% Complete</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li><!-- end task item -->
|
|
</ul>
|
|
</li>
|
|
<li class="footer">
|
|
<a href="#">View all tasks</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<!-- 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">
|
|
<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">
|
|
<p>
|
|
Alexander Pierce - Web Developer
|
|
<small>Member since Nov. 2012</small>
|
|
</p>
|
|
</li>
|
|
<!-- Menu Body -->
|
|
<li class="user-body">
|
|
<div class="col-xs-4 text-center">
|
|
<a href="#">Followers</a>
|
|
</div>
|
|
<div class="col-xs-4 text-center">
|
|
<a href="#">Sales</a>
|
|
</div>
|
|
<div class="col-xs-4 text-center">
|
|
<a href="#">Friends</a>
|
|
</div>
|
|
</li>
|
|
<!-- Menu Footer-->
|
|
<li class="user-footer">
|
|
<div class="pull-left">
|
|
<a href="#" class="btn btn-default btn-flat">Profile</a>
|
|
</div>
|
|
<div class="pull-right">
|
|
<a href="#" class="btn btn-default btn-flat">Sign out</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
</div>
|
|
</div>
|
|
<pre class="prettyprint"><header class="main-header">
|
|
<a href="../../index2.html" class="logo">
|
|
<!-- LOGO -->
|
|
AdminLTE
|
|
</a>
|
|
<!-- Header Navbar: style can be found in header.less -->
|
|
<nav class="navbar navbar-static-top" role="navigation">
|
|
<!-- Navbar Right Menu -->
|
|
<div class="navbar-custom-menu">
|
|
<ul class="nav navbar-nav">
|
|
<!-- Messages: style can be found in dropdown.less-->
|
|
<li class="dropdown messages-menu">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
|
<i class="fa fa-envelope-o"></i>
|
|
<span class="label label-success">4</span>
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="header">You have 4 messages</li>
|
|
<li>
|
|
<!-- inner menu: contains the actual data -->
|
|
<ul class="menu">
|
|
<li><!-- start message -->
|
|
<a href="#">
|
|
<div class="pull-left">
|
|
<img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
|
|
</div>
|
|
<h4>
|
|
Sender Name
|
|
<small><i class="fa fa-clock-o"></i> 5 mins</small>
|
|
</h4>
|
|
<p>Message Excerpt</p>
|
|
</a>
|
|
</li><!-- end message -->
|
|
...
|
|
</ul>
|
|
</li>
|
|
<li class="footer"><a href="#">See All Messages</a></li>
|
|
</ul>
|
|
</li>
|
|
<!-- Notifications: style can be found in dropdown.less -->
|
|
<li class="dropdown notifications-menu">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
|
<i class="fa fa-bell-o"></i>
|
|
<span class="label label-warning">10</span>
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="header">You have 10 notifications</li>
|
|
<li>
|
|
<!-- inner menu: contains the actual data -->
|
|
<ul class="menu">
|
|
<li>
|
|
<a href="#">
|
|
<i class="ion ion-ios-people info"></i> Notification title
|
|
</a>
|
|
</li>
|
|
...
|
|
</ul>
|
|
</li>
|
|
<li class="footer"><a href="#">View all</a></li>
|
|
</ul>
|
|
</li>
|
|
<!-- Tasks: style can be found in dropdown.less -->
|
|
<li class="dropdown tasks-menu">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
|
<i class="fa fa-flag-o"></i>
|
|
<span class="label label-danger">9</span>
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="header">You have 9 tasks</li>
|
|
<li>
|
|
<!-- inner menu: contains the actual data -->
|
|
<ul class="menu">
|
|
<li><!-- Task item -->
|
|
<a href="#">
|
|
<h3>
|
|
Design some buttons
|
|
<small class="pull-right">20%</small>
|
|
</h3>
|
|
<div class="progress xs">
|
|
<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
|
|
<span class="sr-only">20% Complete</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li><!-- end task item -->
|
|
...
|
|
</ul>
|
|
</li>
|
|
<li class="footer">
|
|
<a href="#">View all tasks</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<!-- 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">
|
|
<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">
|
|
<p>
|
|
Alexander Pierce - Web Developer
|
|
<small>Member since Nov. 2012</small>
|
|
</p>
|
|
</li>
|
|
<!-- Menu Body -->
|
|
<li class="user-body">
|
|
<div class="col-xs-4 text-center">
|
|
<a href="#">Followers</a>
|
|
</div>
|
|
<div class="col-xs-4 text-center">
|
|
<a href="#">Sales</a>
|
|
</div>
|
|
<div class="col-xs-4 text-center">
|
|
<a href="#">Friends</a>
|
|
</div>
|
|
</li>
|
|
<!-- Menu Footer-->
|
|
<li class="user-footer">
|
|
<div class="pull-left">
|
|
<a href="#" class="btn btn-default btn-flat">Profile</a>
|
|
</div>
|
|
<div class="pull-right">
|
|
<a href="#" class="btn btn-default btn-flat">Sign out</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</header></pre>
|
|
<h4>Top Nav Layout. Main Header Example.</h4>
|
|
<div class="callout callout-info lead">
|
|
<h4>Reminder!</h4>
|
|
<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>
|
|
</div>
|
|
<div class="box box-solid">
|
|
<div class="box-body layout-top-nav">
|
|
<span class="eg">Top Nav Example</span>
|
|
<header class="main-header">
|
|
<nav class="navbar navbar-static-top">
|
|
<div class="container-fluid">
|
|
<div class="navbar-header">
|
|
<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="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>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a href="#">Action</a></li>
|
|
<li><a href="#">Another action</a></li>
|
|
<li><a href="#">Something else here</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="#">Separated link</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="#">One more separated link</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<form class="navbar-form navbar-left" role="search">
|
|
<div class="form-group">
|
|
<input type="text" class="form-control" id="navbar-search-input" placeholder="Search">
|
|
</div>
|
|
</form>
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<li><a href="#">Link</a></li>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a href="#">Action</a></li>
|
|
<li><a href="#">Another action</a></li>
|
|
<li><a href="#">Something else here</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="#">Separated link</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div><!-- /.navbar-collapse -->
|
|
</div><!-- /.container-fluid -->
|
|
</nav>
|
|
</header>
|
|
</div>
|
|
</div>
|
|
<pre class="prettyprint">
|
|
<header class="main-header">
|
|
<nav class="navbar navbar-static-top">
|
|
<div class="container-fluid">
|
|
<div class="navbar-header">
|
|
<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="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>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a href="#">Action</a></li>
|
|
<li><a href="#">Another action</a></li>
|
|
<li><a href="#">Something else here</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="#">Separated link</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="#">One more separated link</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<form class="navbar-form navbar-left" role="search">
|
|
<div class="form-group">
|
|
<input type="text" class="form-control" id="navbar-search-input" placeholder="Search">
|
|
</div>
|
|
</form>
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<li><a href="#">Link</a></li>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li><a href="#">Action</a></li>
|
|
<li><a href="#">Another action</a></li>
|
|
<li><a href="#">Something else here</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="#">Separated link</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div><!-- /.navbar-collapse -->
|
|
</div><!-- /.container-fluid -->
|
|
</nav>
|
|
</header></pre>
|
|
|
|
<!-- ===================================================================== -->
|
|
|
|
<h3 id="component-sidebar">Sidebar</h3>
|
|
<p class="lead">
|
|
The sidebar used in this page to the left provides an example of what your sidebar should like.
|
|
Construction of a sidebar:
|
|
</p>
|
|
<pre class="prettyprint">
|
|
<div class="main-sidebar">
|
|
<!-- Inner sidebar -->
|
|
<div class="sidebar">
|
|
<!-- user panel (Optional) -->
|
|
<div class="user-panel">
|
|
<div class="pull-left image">
|
|
<img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
|
|
</div>
|
|
<div class="pull-left info">
|
|
<p>User Name</p>
|
|
|
|
<a href="#"><i class="fa fa-circle text-success"></i> Online</a>
|
|
</div>
|
|
</div><!-- /.user-panel -->
|
|
|
|
<!-- Search Form (Optional) -->
|
|
<form action="#" method="get" class="sidebar-form">
|
|
<div class="input-group">
|
|
<input type="text" name="q" class="form-control" placeholder="Search...">
|
|
<span class="input-group-btn">
|
|
<button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i></button>
|
|
</span>
|
|
</div>
|
|
</form><!-- /.sidebar-form -->
|
|
|
|
<!-- Sidebar Menu -->
|
|
<ul class="sidebar-menu">
|
|
<li class="header">HEADER</li>
|
|
<!-- Optionally, you can add icons to the links -->
|
|
<li class="active"><a href="#"><span>Link</span></a><</li>
|
|
<li><a href="#"><span>Another Link</span></a></li>
|
|
<li class="treeview">
|
|
<a href="#"><span>Multilevel</span> <i class="fa fa-angle-left pull-right"></i></a>
|
|
<ul class="treeview-menu">
|
|
<li><a href="#">Link in level 2</a></li>
|
|
<li><a href="#">Link in level 2</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul><!-- /.sidebar-menu -->
|
|
|
|
</div><!-- /.sidebar -->
|
|
</div><!-- /.main-sidebar --></pre>
|
|
|
|
<h3 id="component-control-sidebar">Control Sidebar</h3>
|
|
<p class="lead">Control sidebar is the right side bar. It can be used for many purposes and is extremely easy
|
|
to create. The sidebar ships with two different show/hide styles. The first allows the sidebar to
|
|
slide over the content. The second pushes the content to make space for the sidebar. Either of
|
|
these methods can be set through the <a href="#adminlte-options">Javascript options</a>.</p>
|
|
<p class="lead">The following code should be placed within the <code>.wrapper</code> div. I prefer
|
|
to place it right after the footer.</p>
|
|
<p class="lead">Dark Sidebar Markup</p>
|
|
<pre class="prettyprint"><code class="lang-html"><!-- The Right Sidebar -->
|
|
<aside class="control-sidebar control-sidebar-dark">
|
|
<!-- Content of the sidebar goes here -->
|
|
</aside>
|
|
<!-- The sidebar's background -->
|
|
<!-- This div must placed right after the sidebar for it to work-->
|
|
<div class="control-sidebar-bg"></div></code></pre>
|
|
|
|
<p class="lead">Light Sidebar Markup</p>
|
|
<pre class="prettyprint"><code class="lang-html"><!-- The Right Sidebar -->
|
|
<aside class="control-sidebar control-sidebar-light">
|
|
<!-- Content of the sidebar goes here -->
|
|
</aside>
|
|
<!-- The sidebar's background -->
|
|
<!-- This div must placed right after the sidebar for it to work-->
|
|
<div class="control-sidebar-bg"></div></code></pre>
|
|
|
|
<p class="lead">Once you create the sidebar, you will need a toggle button to open/close it.
|
|
By adding the attribute <code>data-toggle="control-sidebar"</code> to any button, it will
|
|
automatically act as the toggle button.</p>
|
|
|
|
<p class="lead">Toggle Button Example</p>
|
|
<button class="btn btn-primary" data-toggle="control-sidebar">Toggle Right Sidebar</button><br><br>
|
|
|
|
<p class="lead">Sidebar Toggle Markup</p>
|
|
<pre class="prettyprint"><code class="lang-html"><button class="btn btn-default" data-toggle="control-sidebar">Toggle Right Sidebar</button></code></pre>
|
|
<!-- ===================================================================== -->
|
|
|
|
<h3 id="component-info-box">Info Box</h3>
|
|
<p class="lead">Info boxes are used to display statistical snippets. There are two types of info boxes.</p>
|
|
<h4>First Type of Info Boxes</h4>
|
|
<!-- Info Boxes -->
|
|
<div class="row">
|
|
<div class="col-md-3 col-sm-6 col-xs-12">
|
|
<div class="info-box">
|
|
<span class="info-box-icon bg-aqua"><i class="fa fa-envelope-o"></i></span>
|
|
<div class="info-box-content">
|
|
<span class="info-box-text">Messages</span>
|
|
<span class="info-box-number">1,410</span>
|
|
</div><!-- /.info-box-content -->
|
|
</div><!-- /.info-box -->
|
|
</div><!-- /.col -->
|
|
<div class="col-md-3 col-sm-6 col-xs-12">
|
|
<div class="info-box">
|
|
<span class="info-box-icon bg-green"><i class="fa fa-flag-o"></i></span>
|
|
<div class="info-box-content">
|
|
<span class="info-box-text">Bookmarks</span>
|
|
<span class="info-box-number">410</span>
|
|
</div><!-- /.info-box-content -->
|
|
</div><!-- /.info-box -->
|
|
</div><!-- /.col -->
|
|
<div class="col-md-3 col-sm-6 col-xs-12">
|
|
<div class="info-box">
|
|
<span class="info-box-icon bg-yellow"><i class="fa fa-files-o"></i></span>
|
|
<div class="info-box-content">
|
|
<span class="info-box-text">Uploads</span>
|
|
<span class="info-box-number">13,648</span>
|
|
</div><!-- /.info-box-content -->
|
|
</div><!-- /.info-box -->
|
|
</div><!-- /.col -->
|
|
<div class="col-md-3 col-sm-6 col-xs-12">
|
|
<div class="info-box">
|
|
<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>
|
|
<span class="info-box-number">93,139</span>
|
|
</div><!-- /.info-box-content -->
|
|
</div><!-- /.info-box -->
|
|
</div><!-- /.col -->
|
|
</div><!-- /.row -->
|
|
<p class="lead">Markup</p>
|
|
<pre class="prettyprint"><code class="lang-html"><div class="info-box">
|
|
<!-- 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>
|
|
<span class="info-box-number">93,139</span>
|
|
</div><!-- /.info-box-content -->
|
|
</div><!-- /.info-box --></code></pre>
|
|
|
|
<h4>Second Type of Info Boxes</h4>
|
|
<div class="row">
|
|
<div class="col-md-3 col-sm-6 col-xs-12">
|
|
<div class="info-box bg-aqua">
|
|
<span class="info-box-icon"><i class="fa fa-bookmark-o"></i></span>
|
|
<div class="info-box-content">
|
|
<span class="info-box-text">Bookmarks</span>
|
|
<span class="info-box-number">41,410</span>
|
|
<div class="progress">
|
|
<div class="progress-bar" style="width: 70%"></div>
|
|
</div>
|
|
<span class="progress-description">
|
|
70% Increase in 30 Days
|
|
</span>
|
|
</div><!-- /.info-box-content -->
|
|
</div><!-- /.info-box -->
|
|
</div><!-- /.col -->
|
|
<div class="col-md-3 col-sm-6 col-xs-12">
|
|
<div class="info-box bg-green">
|
|
<span class="info-box-icon"><i class="fa fa-thumbs-o-up"></i></span>
|
|
<div class="info-box-content">
|
|
<span class="info-box-text">Likes</span>
|
|
<span class="info-box-number">41,410</span>
|
|
<div class="progress">
|
|
<div class="progress-bar" style="width: 70%"></div>
|
|
</div>
|
|
<span class="progress-description">
|
|
70% Increase in 30 Days
|
|
</span>
|
|
</div><!-- /.info-box-content -->
|
|
</div><!-- /.info-box -->
|
|
</div><!-- /.col -->
|
|
<div class="col-md-3 col-sm-6 col-xs-12">
|
|
<div class="info-box bg-yellow">
|
|
<span class="info-box-icon"><i class="fa fa-calendar"></i></span>
|
|
<div class="info-box-content">
|
|
<span class="info-box-text">Events</span>
|
|
<span class="info-box-number">41,410</span>
|
|
<div class="progress">
|
|
<div class="progress-bar" style="width: 70%"></div>
|
|
</div>
|
|
<span class="progress-description">
|
|
70% Increase in 30 Days
|
|
</span>
|
|
</div><!-- /.info-box-content -->
|
|
</div><!-- /.info-box -->
|
|
</div><!-- /.col -->
|
|
<div class="col-md-3 col-sm-6 col-xs-12">
|
|
<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">Comments</span>
|
|
<span class="info-box-number">41,410</span>
|
|
<div class="progress">
|
|
<div class="progress-bar" style="width: 70%"></div>
|
|
</div>
|
|
<span class="progress-description">
|
|
70% Increase in 30 Days
|
|
</span>
|
|
</div><!-- /.info-box-content -->
|
|
</div><!-- /.info-box -->
|
|
</div><!-- /.col -->
|
|
</div><!-- /.row -->
|
|
<p class="lead">Markup</p>
|
|
<pre class="prettyprint"><code class="lang-html"><!-- 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 -->
|
|
<div class="progress">
|
|
<div class="progress-bar" style="width: 70%"></div>
|
|
</div>
|
|
<span class="progress-description">
|
|
70% Increase in 30 Days
|
|
</span>
|
|
</div><!-- /.info-box-content -->
|
|
</div><!-- /.info-box --></code></pre>
|
|
<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
|
|
first style apply any bg-* class to the icon itself. For the other style, apply the bg-* class to the info-box div.</p>
|
|
<!-- ===================================================================== -->
|
|
|
|
<h3 id="component-box">Box</h3>
|
|
<p class="lead">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.</p>
|
|
<h4>Default Box Markup</h4>
|
|
<div class="box">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">Default Box Example</h3>
|
|
<div class="box-tools pull-right">
|
|
<!-- Buttons, labels, and many other things can be placed here! -->
|
|
<!-- Here is a label for example -->
|
|
<span class="label label-primary">Label</span>
|
|
</div><!-- /.box-tools -->
|
|
</div><!-- /.box-header -->
|
|
<div class="box-body">
|
|
The body of the box
|
|
</div><!-- /.box-body -->
|
|
<div class="box-footer">
|
|
The footer of the box
|
|
</div><!-- box-footer -->
|
|
</div><!-- /.box -->
|
|
<pre class="prettyprint"><div class="box">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">Default Box Example</h3>
|
|
<div class="box-tools pull-right">
|
|
<!-- Buttons, labels, and many other things can be placed here! -->
|
|
<!-- Here is a label for example -->
|
|
<span class="label label-primary">Label</span>
|
|
</div><!-- /.box-tools -->
|
|
</div><!-- /.box-header -->
|
|
<div class="box-body">
|
|
The body of the box
|
|
</div><!-- /.box-body -->
|
|
<div class="box-footer">
|
|
The footer of the box
|
|
</div><!-- box-footer -->
|
|
</div><!-- /.box --></pre>
|
|
<h4>Box Variants</h4>
|
|
<p class="lead">You can change the style of the box by adding any of the contextual classes.</p>
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="box">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">Default Box Example</h3>
|
|
</div><!-- /.box-header -->
|
|
<div class="box-body">
|
|
The body of the box
|
|
</div><!-- /.box-body -->
|
|
</div><!-- /.box -->
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="box box-primary">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">Primary Box Example</h3>
|
|
</div><!-- /.box-header -->
|
|
<div class="box-body">
|
|
The body of the box
|
|
</div><!-- /.box-body -->
|
|
</div><!-- /.box -->
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="box box-info">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">Info Box Example</h3>
|
|
</div><!-- /.box-header -->
|
|
<div class="box-body">
|
|
The body of the box
|
|
</div><!-- /.box-body -->
|
|
</div><!-- /.box -->
|
|
</div>
|
|
<div class="clearfix"></div>
|
|
<div class="col-md-4">
|
|
<div class="box box-warning">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">Warning Box Example</h3>
|
|
</div><!-- /.box-header -->
|
|
<div class="box-body">
|
|
The body of the box
|
|
</div><!-- /.box-body -->
|
|
</div><!-- /.box -->
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="box box-success">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">Success Box Example</h3>
|
|
</div><!-- /.box-header -->
|
|
<div class="box-body">
|
|
The body of the box
|
|
</div><!-- /.box-body -->
|
|
</div><!-- /.box -->
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="box box-danger">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">Danger Box Example</h3>
|
|
</div><!-- /.box-header -->
|
|
<div class="box-body">
|
|
The body of the box
|
|
</div><!-- /.box-body -->
|
|
</div><!-- /.box -->
|
|
</div>
|
|
</div><!-- /.row -->
|
|
<pre class="prettyprint"><div class="box box-default">...</div>
|
|
<div class="box box-primary">...</div>
|
|
<div class="box box-info">...</div>
|
|
<div class="box box-warning">...</div>
|
|
<div class="box box-success">...</div>
|
|
<div class="box box-danger">...</div></pre>
|
|
|
|
<h4>Solid Box</h4>
|
|
<p class="lead">Solid Boxes are alternative ways to display boxes.
|
|
They can be created by simply adding the box-solid class to the box component.
|
|
You may also use contextual classes with you solid boxes.</p>
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="box box-solid box-default">
|
|
<div class="box-header">
|
|
<h3 class="box-title">Default Solid Box Example</h3>
|
|
</div><!-- /.box-header -->
|
|
<div class="box-body">
|
|
The body of the box
|
|
</div><!-- /.box-body -->
|
|
</div><!-- /.box -->
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="box box-solid box-primary">
|
|
<div class="box-header">
|
|
<h3 class="box-title">Primary Solid Box Example</h3>
|
|
</div><!-- /.box-header -->
|
|
<div class="box-body">
|
|
The body of the box
|
|
</div><!-- /.box-body -->
|
|
</div><!-- /.box -->
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="box box-solid box-info">
|
|
<div class="box-header">
|
|
<h3 class="box-title">Info Solid Box Example</h3>
|
|
</div><!-- /.box-header -->
|
|
<div class="box-body">
|
|
The body of the box
|
|
</div><!-- /.box-body -->
|
|
</div><!-- /.box -->
|
|
</div>
|
|
<div class="clearfix"></div>
|
|
<div class="col-md-4">
|
|
<div class="box box-solid box-warning">
|
|
<div class="box-header">
|
|
<h3 class="box-title">Warning Solid Box Example</h3>
|
|
</div><!-- /.box-header -->
|
|
<div class="box-body">
|
|
The body of the box
|
|
</div><!-- /.box-body -->
|
|
</div><!-- /.box -->
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="box box-solid box-success">
|
|
<div class="box-header">
|
|
<h3 class="box-title">Success Solid Box Example</h3>
|
|
</div><!-- /.box-header -->
|
|
<div class="box-body">
|
|
The body of the box
|
|
</div><!-- /.box-body -->
|
|
</div><!-- /.box -->
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="box box-solid box-danger">
|
|
<div class="box-header">
|
|
<h3 class="box-title">Danger Solid Box Example</h3>
|
|
</div><!-- /.box-header -->
|
|
<div class="box-body">
|
|
The body of the box
|
|
</div><!-- /.box-body -->
|
|
</div><!-- /.box -->
|
|
</div>
|
|
</div><!-- /.row -->
|
|
<pre class="prettyprint">
|
|
<div class="box box-solid box-default">...</div>
|
|
<div class="box box-solid box-primary">...</div>
|
|
<div class="box box-solid box-info">...</div>
|
|
<div class="box box-solid box-warning">...</div>
|
|
<div class="box box-solid box-success">...</div>
|
|
<div class="box box-solid box-danger">...</div></pre>
|
|
<h4>Box Tools</h4>
|
|
<p class="lead">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.</p>
|
|
<p>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.</p>
|
|
<pre class="prettyprint">
|
|
<!-- 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></pre>
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<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 -->
|
|
<pre class="prettyprint">
|
|
<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 --></pre>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<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 -->
|
|
<pre class="prettyprint">
|
|
<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 --></pre>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="box box-default collapsed-box">
|
|
<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 -->
|
|
<pre class="prettyprint">
|
|
<div class="box box-default collapsed-box">
|
|
<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 --></pre>
|
|
</div>
|
|
</div><!-- /.row -->
|
|
<p>We can also add labels, badges, pagination, tooltips, inputs and many more in the box tools. A few examples:</p>
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<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">Some Label</span>
|
|
</div><!-- /.box-tools -->
|
|
</div><!-- /.box-header -->
|
|
<div class="box-body">
|
|
The body of the box
|
|
</div><!-- /.box-body -->
|
|
</div><!-- /.box -->
|
|
<pre class="prettyprint">
|
|
<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 --></pre>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<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 text-muted"></span>
|
|
</div>
|
|
</div><!-- /.box-tools -->
|
|
</div><!-- /.box-header -->
|
|
<div class="box-body">
|
|
The body of the box
|
|
</div><!-- /.box-body -->
|
|
</div><!-- /.box -->
|
|
<pre class="prettyprint">
|
|
<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 --></pre>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="box box-default">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">Tootips 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 -->
|
|
<pre class="prettyprint">
|
|
<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 --></pre>
|
|
</div><!-- /.col -->
|
|
</div><!-- /.row -->
|
|
<p>
|
|
If you inserted a box into the document after <code>app.js</code> was loaded, you have to activate
|
|
the collapse/remove buttons explicitly by calling <code>.activateBox()</code>:
|
|
</p>
|
|
<pre class="prettyprint"><code class="html"><script>
|
|
$("#box-widget").activateBox();
|
|
</script></code></pre>
|
|
|
|
<h4>Loading States</h4>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="box box-default">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">Loading state</h3>
|
|
</div>
|
|
<div class="box-body">
|
|
The body of the box
|
|
</div><!-- /.box-body -->
|
|
<!-- Loading (remove the following to stop the loading)-->
|
|
<div class="overlay">
|
|
<i class="fa fa-refresh fa-spin"></i>
|
|
</div>
|
|
<!-- end loading -->
|
|
</div><!-- /.box -->
|
|
</div><!-- /.col -->
|
|
|
|
<div class="col-md-6">
|
|
<div class="box box-default box-solid">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">Loading state (.box-solid)</h3>
|
|
</div>
|
|
<div class="box-body">
|
|
The body of the box
|
|
</div><!-- /.box-body -->
|
|
<!-- Loading (remove the following to stop the loading)-->
|
|
<div class="overlay">
|
|
<i class="fa fa-refresh fa-spin"></i>
|
|
</div>
|
|
<!-- end loading -->
|
|
</div><!-- /.box -->
|
|
</div><!-- /.col -->
|
|
</div><!-- /.row -->
|
|
<p class="lead">
|
|
To simulate a loading state, simply place this code before the <code>.box</code> closing tag.
|
|
</p>
|
|
<pre class="prettyprint"><code class="html"><div class="overlay">
|
|
<i class="fa fa-refresh fa-spin"></i>
|
|
</div>
|
|
</code></pre>
|
|
<h3 id="component-direct-chat">Direct Chat</h3>
|
|
<p class="lead">The direct chat widget extends the box component to create a beautiful chat interface. This widget
|
|
consists of a required messages pane and an <b>optional</b> contacts pane. Examples:</p>
|
|
<!-- Direct Chat -->
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<!-- DIRECT CHAT PRIMARY -->
|
|
<div class="box box-primary direct-chat direct-chat-primary">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">Direct Chat</h3>
|
|
<div class="box-tools pull-right">
|
|
<span data-toggle="tooltip" title="3 New Messages" class="badge bg-light-blue">3</span>
|
|
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
|
|
<button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
|
|
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
|
|
</div>
|
|
</div><!-- /.box-header -->
|
|
<div class="box-body">
|
|
<!-- Conversations are loaded here -->
|
|
<div class="direct-chat-messages">
|
|
<!-- Message. Default to the left -->
|
|
<div class="direct-chat-msg">
|
|
<div class="direct-chat-info clearfix">
|
|
<span class="direct-chat-name pull-left">Alexander Pierce</span>
|
|
<span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
|
|
</div><!-- /.direct-chat-info -->
|
|
<img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
|
|
<div class="direct-chat-text">
|
|
Is this template really for free? That's unbelievable!
|
|
</div><!-- /.direct-chat-text -->
|
|
</div><!-- /.direct-chat-msg -->
|
|
|
|
<!-- Message to the right -->
|
|
<div class="direct-chat-msg right">
|
|
<div class="direct-chat-info clearfix">
|
|
<span class="direct-chat-name pull-right">Sarah Bullock</span>
|
|
<span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
|
|
</div><!-- /.direct-chat-info -->
|
|
<img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
|
|
<div class="direct-chat-text">
|
|
You better believe it!
|
|
</div><!-- /.direct-chat-text -->
|
|
</div><!-- /.direct-chat-msg -->
|
|
</div><!--/.direct-chat-messages-->
|
|
|
|
<!-- Contacts are loaded here -->
|
|
<div class="direct-chat-contacts">
|
|
<ul class="contacts-list">
|
|
<li>
|
|
<a href="#">
|
|
<img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="Contact Avatar">
|
|
<div class="contacts-list-info">
|
|
<span class="contacts-list-name">
|
|
Count Dracula
|
|
<small class="contacts-list-date pull-right">2/28/2015</small>
|
|
</span>
|
|
<span class="contacts-list-msg">How have you been? I was...</span>
|
|
</div><!-- /.contacts-list-info -->
|
|
</a>
|
|
</li><!-- End Contact Item -->
|
|
</ul><!-- /.contatcts-list -->
|
|
</div><!-- /.direct-chat-pane -->
|
|
</div><!-- /.box-body -->
|
|
<div class="box-footer">
|
|
<form action="#" method="post">
|
|
<div class="input-group">
|
|
<input type="text" name="message" placeholder="Type Message ..." class="form-control">
|
|
<span class="input-group-btn">
|
|
<button type="button" class="btn btn-primary btn-flat">Send</button>
|
|
</span>
|
|
</div>
|
|
</form>
|
|
</div><!-- /.box-footer-->
|
|
</div><!--/.direct-chat -->
|
|
</div><!-- /.col -->
|
|
|
|
<div class="col-md-3">
|
|
<!-- DIRECT CHAT SUCCESS -->
|
|
<div class="box box-success direct-chat direct-chat-success">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">Direct Chat</h3>
|
|
<div class="box-tools pull-right">
|
|
<span data-toggle="tooltip" title="3 New Messages" class="badge bg-green">3</span>
|
|
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
|
|
<button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
|
|
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
|
|
</div>
|
|
</div><!-- /.box-header -->
|
|
<div class="box-body">
|
|
<!-- Conversations are loaded here -->
|
|
<div class="direct-chat-messages">
|
|
<!-- Message. Default to the left -->
|
|
<div class="direct-chat-msg">
|
|
<div class="direct-chat-info clearfix">
|
|
<span class="direct-chat-name pull-left">Alexander Pierce</span>
|
|
<span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
|
|
</div><!-- /.direct-chat-info -->
|
|
<img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
|
|
<div class="direct-chat-text">
|
|
Is this template really for free? That's unbelievable!
|
|
</div><!-- /.direct-chat-text -->
|
|
</div><!-- /.direct-chat-msg -->
|
|
|
|
<!-- Message to the right -->
|
|
<div class="direct-chat-msg right">
|
|
<div class="direct-chat-info clearfix">
|
|
<span class="direct-chat-name pull-right">Sarah Bullock</span>
|
|
<span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
|
|
</div><!-- /.direct-chat-info -->
|
|
<img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
|
|
<div class="direct-chat-text">
|
|
You better believe it!
|
|
</div><!-- /.direct-chat-text -->
|
|
</div><!-- /.direct-chat-msg -->
|
|
</div><!--/.direct-chat-messages-->
|
|
|
|
<!-- Contacts are loaded here -->
|
|
<div class="direct-chat-contacts">
|
|
<ul class="contacts-list">
|
|
<li>
|
|
<a href="#">
|
|
<img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="Contact Avatar">
|
|
<div class="contacts-list-info">
|
|
<span class="contacts-list-name">
|
|
Count Dracula
|
|
<small class="contacts-list-date pull-right">2/28/2015</small>
|
|
</span>
|
|
<span class="contacts-list-msg">How have you been? I was...</span>
|
|
</div><!-- /.contacts-list-info -->
|
|
</a>
|
|
</li><!-- End Contact Item -->
|
|
</ul><!-- /.contatcts-list -->
|
|
</div><!-- /.direct-chat-pane -->
|
|
</div><!-- /.box-body -->
|
|
<div class="box-footer">
|
|
<form action="#" method="post">
|
|
<div class="input-group">
|
|
<input type="text" name="message" placeholder="Type Message ..." class="form-control">
|
|
<span class="input-group-btn">
|
|
<button type="button" class="btn btn-success btn-flat">Send</button>
|
|
</span>
|
|
</div>
|
|
</form>
|
|
</div><!-- /.box-footer-->
|
|
</div><!--/.direct-chat -->
|
|
</div><!-- /.col -->
|
|
|
|
<div class="col-md-3">
|
|
<!-- DIRECT CHAT WARNING -->
|
|
<div class="box box-warning direct-chat direct-chat-warning">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">Direct Chat</h3>
|
|
<div class="box-tools pull-right">
|
|
<span data-toggle="tooltip" title="3 New Messages" class="badge bg-yellow">3</span>
|
|
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
|
|
<button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
|
|
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
|
|
</div>
|
|
</div><!-- /.box-header -->
|
|
<div class="box-body">
|
|
<!-- Conversations are loaded here -->
|
|
<div class="direct-chat-messages">
|
|
<!-- Message. Default to the left -->
|
|
<div class="direct-chat-msg">
|
|
<div class="direct-chat-info clearfix">
|
|
<span class="direct-chat-name pull-left">Alexander Pierce</span>
|
|
<span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
|
|
</div><!-- /.direct-chat-info -->
|
|
<img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
|
|
<div class="direct-chat-text">
|
|
Is this template really for free? That's unbelievable!
|
|
</div><!-- /.direct-chat-text -->
|
|
</div><!-- /.direct-chat-msg -->
|
|
|
|
<!-- Message to the right -->
|
|
<div class="direct-chat-msg right">
|
|
<div class="direct-chat-info clearfix">
|
|
<span class="direct-chat-name pull-right">Sarah Bullock</span>
|
|
<span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
|
|
</div><!-- /.direct-chat-info -->
|
|
<img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
|
|
<div class="direct-chat-text">
|
|
You better believe it!
|
|
</div><!-- /.direct-chat-text -->
|
|
</div><!-- /.direct-chat-msg -->
|
|
</div><!--/.direct-chat-messages-->
|
|
|
|
<!-- Contacts are loaded here -->
|
|
<div class="direct-chat-contacts">
|
|
<ul class="contacts-list">
|
|
<li>
|
|
<a href="#">
|
|
<img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="Contact Avatar">
|
|
<div class="contacts-list-info">
|
|
<span class="contacts-list-name">
|
|
Count Dracula
|
|
<small class="contacts-list-date pull-right">2/28/2015</small>
|
|
</span>
|
|
<span class="contacts-list-msg">How have you been? I was...</span>
|
|
</div><!-- /.contacts-list-info -->
|
|
</a>
|
|
</li><!-- End Contact Item -->
|
|
</ul><!-- /.contatcts-list -->
|
|
</div><!-- /.direct-chat-pane -->
|
|
</div><!-- /.box-body -->
|
|
<div class="box-footer">
|
|
<form action="#" method="post">
|
|
<div class="input-group">
|
|
<input type="text" name="message" placeholder="Type Message ..." class="form-control">
|
|
<span class="input-group-btn">
|
|
<button type="button" class="btn btn-warning btn-flat">Send</button>
|
|
</span>
|
|
</div>
|
|
</form>
|
|
</div><!-- /.box-footer-->
|
|
</div><!--/.direct-chat -->
|
|
</div><!-- /.col -->
|
|
|
|
<div class="col-md-3">
|
|
<!-- DIRECT CHAT DANGER -->
|
|
<div class="box box-danger direct-chat direct-chat-danger">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">Direct Chat</h3>
|
|
<div class="box-tools pull-right">
|
|
<span data-toggle="tooltip" title="3 New Messages" class="badge bg-red">3</span>
|
|
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
|
|
<button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
|
|
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
|
|
</div>
|
|
</div><!-- /.box-header -->
|
|
<div class="box-body">
|
|
<!-- Conversations are loaded here -->
|
|
<div class="direct-chat-messages">
|
|
<!-- Message. Default to the left -->
|
|
<div class="direct-chat-msg">
|
|
<div class="direct-chat-info clearfix">
|
|
<span class="direct-chat-name pull-left">Alexander Pierce</span>
|
|
<span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
|
|
</div><!-- /.direct-chat-info -->
|
|
<img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
|
|
<div class="direct-chat-text">
|
|
Is this template really for free? That's unbelievable!
|
|
</div><!-- /.direct-chat-text -->
|
|
</div><!-- /.direct-chat-msg -->
|
|
|
|
<!-- Message to the right -->
|
|
<div class="direct-chat-msg right">
|
|
<div class="direct-chat-info clearfix">
|
|
<span class="direct-chat-name pull-right">Sarah Bullock</span>
|
|
<span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
|
|
</div><!-- /.direct-chat-info -->
|
|
<img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
|
|
<div class="direct-chat-text">
|
|
You better believe it!
|
|
</div><!-- /.direct-chat-text -->
|
|
</div><!-- /.direct-chat-msg -->
|
|
</div><!--/.direct-chat-messages-->
|
|
|
|
<!-- Contacts are loaded here -->
|
|
<div class="direct-chat-contacts">
|
|
<ul class="contacts-list">
|
|
<li>
|
|
<a href="#">
|
|
<img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="Contact Avatar">
|
|
<div class="contacts-list-info">
|
|
<span class="contacts-list-name">
|
|
Count Dracula
|
|
<small class="contacts-list-date pull-right">2/28/2015</small>
|
|
</span>
|
|
<span class="contacts-list-msg">How have you been? I was...</span>
|
|
</div><!-- /.contacts-list-info -->
|
|
</a>
|
|
</li><!-- End Contact Item -->
|
|
</ul><!-- /.contatcts-list -->
|
|
</div><!-- /.direct-chat-pane -->
|
|
</div><!-- /.box-body -->
|
|
<div class="box-footer">
|
|
<form action="#" method="post">
|
|
<div class="input-group">
|
|
<input type="text" name="message" placeholder="Type Message ..." class="form-control">
|
|
<span class="input-group-btn">
|
|
<button type="button" class="btn btn-danger btn-flat">Send</button>
|
|
</span>
|
|
</div>
|
|
</form>
|
|
</div><!-- /.box-footer-->
|
|
</div><!--/.direct-chat -->
|
|
</div><!-- /.col -->
|
|
</div><!-- /.row -->
|
|
<p class="lead">Direct Chat Markup</p>
|
|
<pre class="prettyprint"><code class="html">
|
|
<!-- Construct the box with style you want. Here we are using box-danger -->
|
|
<!-- Then add the class direct-chat and choose the direct-chat-* contexual class -->
|
|
<!-- The contextual class should match the box, so we are using direct-chat-danger -->
|
|
<div class="box box-danger direct-chat direct-chat-danger">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">Direct Chat</h3>
|
|
<div class="box-tools pull-right">
|
|
<span data-toggle="tooltip" title="3 New Messages" class="badge bg-red">3</span>
|
|
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
|
|
<!-- In box-tools add this button if you intend to use the contacts pane -->
|
|
<button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
|
|
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
|
|
</div>
|
|
</div><!-- /.box-header -->
|
|
<div class="box-body">
|
|
<!-- Conversations are loaded here -->
|
|
<div class="direct-chat-messages">
|
|
<!-- Message. Default to the left -->
|
|
<div class="direct-chat-msg">
|
|
<div class="direct-chat-info clearfix">
|
|
<span class="direct-chat-name pull-left">Alexander Pierce</span>
|
|
<span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
|
|
</div><!-- /.direct-chat-info -->
|
|
<img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
|
|
<div class="direct-chat-text">
|
|
Is this template really for free? That's unbelievable!
|
|
</div><!-- /.direct-chat-text -->
|
|
</div><!-- /.direct-chat-msg -->
|
|
|
|
<!-- Message to the right -->
|
|
<div class="direct-chat-msg right">
|
|
<div class="direct-chat-info clearfix">
|
|
<span class="direct-chat-name pull-right">Sarah Bullock</span>
|
|
<span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
|
|
</div><!-- /.direct-chat-info -->
|
|
<img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
|
|
<div class="direct-chat-text">
|
|
You better believe it!
|
|
</div><!-- /.direct-chat-text -->
|
|
</div><!-- /.direct-chat-msg -->
|
|
</div><!--/.direct-chat-messages-->
|
|
|
|
<!-- Contacts are loaded here -->
|
|
<div class="direct-chat-contacts">
|
|
<ul class="contacts-list">
|
|
<li>
|
|
<a href="#">
|
|
<img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="Contact Avatar">
|
|
<div class="contacts-list-info">
|
|
<span class="contacts-list-name">
|
|
Count Dracula
|
|
<small class="contacts-list-date pull-right">2/28/2015</small>
|
|
</span>
|
|
<span class="contacts-list-msg">How have you been? I was...</span>
|
|
</div><!-- /.contacts-list-info -->
|
|
</a>
|
|
</li><!-- End Contact Item -->
|
|
</ul><!-- /.contatcts-list -->
|
|
</div><!-- /.direct-chat-pane -->
|
|
</div><!-- /.box-body -->
|
|
<div class="box-footer">
|
|
<div class="input-group">
|
|
<input type="text" name="message" placeholder="Type Message ..." class="form-control">
|
|
<span class="input-group-btn">
|
|
<button type="button" class="btn btn-danger btn-flat">Send</button>
|
|
</span>
|
|
</div>
|
|
</div><!-- /.box-footer-->
|
|
</div><!--/.direct-chat -->
|
|
</code></pre>
|
|
|
|
<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>
|
|
|
|
<!-- Direct Chat With Solid Boxes -->
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<!-- DIRECT CHAT WARNING -->
|
|
<div class="box box-primary box-solid direct-chat direct-chat-primary">
|
|
<div class="box-header">
|
|
<h3 class="box-title">Direct Chat in a Solid Box</h3>
|
|
<div class="box-tools pull-right">
|
|
<span data-toggle="tooltip" title="3 New Messages" class="badge bg-light-blue">3</span>
|
|
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
|
|
<button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
|
|
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
|
|
</div>
|
|
</div><!-- /.box-header -->
|
|
<div class="box-body">
|
|
<!-- Conversations are loaded here -->
|
|
<div class="direct-chat-messages">
|
|
<!-- Message. Default to the left -->
|
|
<div class="direct-chat-msg">
|
|
<div class="direct-chat-info clearfix">
|
|
<span class="direct-chat-name pull-left">Alexander Pierce</span>
|
|
<span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
|
|
</div><!-- /.direct-chat-info -->
|
|
<img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
|
|
<div class="direct-chat-text">
|
|
Is this template really for free? That's unbelievable!
|
|
</div><!-- /.direct-chat-text -->
|
|
</div><!-- /.direct-chat-msg -->
|
|
|
|
<!-- Message to the right -->
|
|
<div class="direct-chat-msg right">
|
|
<div class="direct-chat-info clearfix">
|
|
<span class="direct-chat-name pull-right">Sarah Bullock</span>
|
|
<span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
|
|
</div><!-- /.direct-chat-info -->
|
|
<img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
|
|
<div class="direct-chat-text">
|
|
You better believe it!
|
|
</div><!-- /.direct-chat-text -->
|
|
</div><!-- /.direct-chat-msg -->
|
|
</div><!--/.direct-chat-messages-->
|
|
|
|
<!-- Contacts are loaded here -->
|
|
<div class="direct-chat-contacts">
|
|
<ul class="contacts-list">
|
|
<li>
|
|
<a href="#">
|
|
<img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="Contact Avatar">
|
|
<div class="contacts-list-info">
|
|
<span class="contacts-list-name">
|
|
Count Dracula
|
|
<small class="contacts-list-date pull-right">2/28/2015</small>
|
|
</span>
|
|
<span class="contacts-list-msg">How have you been? I was...</span>
|
|
</div><!-- /.contacts-list-info -->
|
|
</a>
|
|
</li><!-- End Contact Item -->
|
|
</ul><!-- /.contatcts-list -->
|
|
</div><!-- /.direct-chat-pane -->
|
|
</div><!-- /.box-body -->
|
|
<div class="box-footer">
|
|
<form action="#" method="post">
|
|
<div class="input-group">
|
|
<input type="text" name="message" placeholder="Type Message ..." class="form-control">
|
|
<span class="input-group-btn">
|
|
<button type="button" class="btn btn-primary btn-flat">Send</button>
|
|
</span>
|
|
</div>
|
|
</form>
|
|
</div><!-- /.box-footer-->
|
|
</div><!--/.direct-chat -->
|
|
</div><!-- /.col -->
|
|
|
|
<div class="col-md-6">
|
|
<!-- DIRECT CHAT DANGER -->
|
|
<div class="box box-info box-solid direct-chat direct-chat-info">
|
|
<div class="box-header">
|
|
<h3 class="box-title">Direct Chat in a Solid Box</h3>
|
|
<div class="box-tools pull-right">
|
|
<span data-toggle="tooltip" title="3 New Messages" class="badge bg-aqua">3</span>
|
|
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
|
|
<button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
|
|
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
|
|
</div>
|
|
</div><!-- /.box-header -->
|
|
<div class="box-body">
|
|
<!-- Conversations are loaded here -->
|
|
<div class="direct-chat-messages">
|
|
<!-- Message. Default to the left -->
|
|
<div class="direct-chat-msg">
|
|
<div class="direct-chat-info clearfix">
|
|
<span class="direct-chat-name pull-left">Alexander Pierce</span>
|
|
<span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm</span>
|
|
</div><!-- /.direct-chat-info -->
|
|
<img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
|
|
<div class="direct-chat-text">
|
|
Is this template really for free? That's unbelievable!
|
|
</div><!-- /.direct-chat-text -->
|
|
</div><!-- /.direct-chat-msg -->
|
|
|
|
<!-- Message to the right -->
|
|
<div class="direct-chat-msg right">
|
|
<div class="direct-chat-info clearfix">
|
|
<span class="direct-chat-name pull-right">Sarah Bullock</span>
|
|
<span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm</span>
|
|
</div><!-- /.direct-chat-info -->
|
|
<img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="message user image"><!-- /.direct-chat-img -->
|
|
<div class="direct-chat-text">
|
|
You better believe it!
|
|
</div><!-- /.direct-chat-text -->
|
|
</div><!-- /.direct-chat-msg -->
|
|
</div><!--/.direct-chat-messages-->
|
|
|
|
<!-- Contacts are loaded here -->
|
|
<div class="direct-chat-contacts">
|
|
<ul class="contacts-list">
|
|
<li>
|
|
<a href="#">
|
|
<img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="Contact Avatar">
|
|
<div class="contacts-list-info">
|
|
<span class="contacts-list-name">
|
|
Count Dracula
|
|
<small class="contacts-list-date pull-right">2/28/2015</small>
|
|
</span>
|
|
<span class="contacts-list-msg">How have you been? I was...</span>
|
|
</div><!-- /.contacts-list-info -->
|
|
</a>
|
|
</li><!-- End Contact Item -->
|
|
</ul><!-- /.contatcts-list -->
|
|
</div><!-- /.direct-chat-pane -->
|
|
</div><!-- /.box-body -->
|
|
<div class="box-footer">
|
|
<form action="#" method="post">
|
|
<div class="input-group">
|
|
<input type="text" name="message" placeholder="Type Message ..." class="form-control">
|
|
<span class="input-group-btn">
|
|
<button type="button" class="btn btn-info btn-flat">Send</button>
|
|
</span>
|
|
</div>
|
|
</form>
|
|
</div><!-- /.box-footer-->
|
|
</div><!--/.direct-chat -->
|
|
</div><!-- /.col -->
|
|
</div><!-- /.row -->
|
|
</section>
|