提交 97533535 编写于 作者: A Abdullah Almsaeed

Updated docs

上级 5c93ffc6
......@@ -1363,4 +1363,151 @@
</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'/>
<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'/>
<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>
\ No newline at end of file
......@@ -1999,6 +1999,153 @@
&LT;/div>&LT;!-- /.box-footer-->
&LT;/div>&LT;!--/.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'/>
<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'/>
<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>
<!-- ============================================================= -->
......
......@@ -7,8 +7,7 @@
}
#components > h3 {
font-size: 25px;
border-bottom: 1px solid #dedede;
font-size: 25px;
color: #000;
}
......@@ -17,8 +16,8 @@
color: #000;
}
.page-header {
border-bottom: 1px solid #ddd;
margin: 20px 0 10px 0;
/*border-bottom: 1px solid #ddd; */
margin: 20px 0 20px 0;
position: relative;
z-index: 1;
font-size: 30px;
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册