mirror of https://github.com/ColorlibHQ/AdminLTE
Updated docs
Abdullah Almsaeed
parent
d9aae29254
commit
c78bf1f4d5
|
|
@ -186,7 +186,9 @@
|
|||
<ul class='nav treeview-menu'>
|
||||
<li><a href='#component-main-header'>Main Header</a></li>
|
||||
<li><a href='#component-sidebar'>Sidebar</a></li>
|
||||
<li><a href='#component-info-box'>Info Box</a></li>
|
||||
<li><a href='#component-box'>Boxes</a></li>
|
||||
<li><a href='#component-direct-chat'>Direct Chat</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#plugins"><i class='fa fa-circle-o'></i> Plugins</a></li>
|
||||
|
|
@ -332,7 +334,7 @@ AdminLTE/
|
|||
</ul>
|
||||
<div class="callout callout-danger lead">
|
||||
<h4>Tip!</h4>
|
||||
<p>Use the blank example page located in <a href="../pages/examples/blank.html">pages/examples/blank.html</a> to build your own pages.</p>
|
||||
<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>
|
||||
</div>
|
||||
<p>A full layout example for a quick start</p>
|
||||
<pre class='prettyprint'>
|
||||
|
|
@ -1219,6 +1221,144 @@ AdminLTE/
|
|||
|
||||
<!-- ----------------------------------------------------------- -->
|
||||
|
||||
<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. Example of the first type:</p>
|
||||
<!-- 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="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="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
|
||||
|
|
@ -1408,7 +1548,7 @@ AdminLTE/
|
|||
<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>
|
||||
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>
|
||||
|
|
@ -1577,6 +1717,409 @@ AdminLTE/
|
|||
</div><!-- /.box --></pre>
|
||||
</div><!-- /.col -->
|
||||
</div><!-- /.row -->
|
||||
|
||||
<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'/>
|
||||
<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'/>
|
||||
<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'/>
|
||||
<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'/>
|
||||
<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'/>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<!-- ============================================================= -->
|
||||
|
|
@ -1651,7 +2194,7 @@ AdminLTE/
|
|||
<p class="lead">To upgrade from version 1.x to the lateset version, follow this guide.</p>
|
||||
<h3>New Files</h3>
|
||||
<p>Make sure you update all CSS and JS files that are related to AdminLTE. Otherwise, the layout will not
|
||||
function properly. Most important files are AdminLTE.css, skins CSS files, and app.js.</p>
|
||||
function properly. Most important files are AdminLTE.css, skins CSS files, and app.js.</p>
|
||||
<h3>Layout Changes</h3>
|
||||
<ol>
|
||||
<li>The .wrapper div must be placed immediately after the body tag rather than after the header</li>
|
||||
|
|
@ -1669,7 +2212,7 @@ AdminLTE/
|
|||
<p>And you should be set to go!</p>
|
||||
<h3>Mailbox</h3>
|
||||
<p>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.</p>
|
||||
you should use the provided HTML files in the pages/mailbox folder.</p>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
|
|
@ -1772,7 +2315,6 @@ AdminLTE/
|
|||
}, 500);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in New Issue