Thema: Chat einsetzen
Hinweis: Die obere und untere Seiten sind jeweils der Code in HTML und das Layout im Browser.
1. Code für Chat
<div class='chat-panel panel panel-default'>
<div class='panel-heading'>
<i class='fa fa-comments fa-fw'></i>
Chat
<div class='btn-group pull-right'>
<button type='button' class='btn btn-default btn-xs dropdown-toggle'
data-toggle='dropdown'>
<i class='fa fa-chevron-down'></i>
</button>
<ul class='dropdown-menu slidedown'>
<li>
<a href='#'>
<i class='fa fa-refresh fa-fw'></i> Refresh
</a>
</li>
<li>
<a href='#'>
<i class='fa fa-check-circle fa-fw'></i> Available
</a>
</li>
<li>
<a href='#'>
<i class='fa fa-times fa-fw'></i> Busy
</a>
</li>
<li>
<a href='#'>
<i class='fa fa-clock-o fa-fw'></i> Away
</a>
</li>
<li class='divider'></li>
<li>
<a href='#'>
<i class='fa fa-sign-out fa-fw'></i> Sign Out
</a>
</li>
</ul>
</div>
</div>
<!-- /.panel-heading -->
<div class='panel-body'>
<ul class='chat'>
<li class='left clearfix'>
<span class='chat-img pull-left'>
<img src='http://placehold.it/50/55C1E7/fff' alt='User Avatar'
class='img-circle'/>
</span>
<div class='chat-body clearfix'>
<div class='header'>
<strong class='primary-font'>H&M</strong>
<small class='pull-right text-muted'>
<i class='fa fa-clock-o fa-fw'></i> 12 mins ago
</small>
</div>
<p>
Damen T-Shirt mit V-Ausschnitt, Kirschrot, 97% Bio-Baumwolle und 3% Elasthan
</p>
</div>
</li>
<li class='right clearfix'>
<span class='chat-img pull-right'>
<img src='http://placehold.it/50/FA6F57/fff' alt='User Avatar'
class='img-circle'/>
</span>
<div class='chat-body clearfix'>
<div class='header'>
<small class=' text-muted'>
<i class='fa fa-clock-o fa-fw'></i> 13 mins ago
</small>
<strong class='pull-right primary-font'>Zara</strong>
</div>
<p>
Damen T-Shirt mit Rundausschnitt und glitzem Muster, Olive, 100 % Baumwolle G
</p>
</div>
</li>
<li class='left clearfix'>
<span class='chat-img pull-left'>
<img src='http://placehold.it/50/55C1E7/fff' alt='User Avatar'
class='img-circle'/>
</span>
<div class='chat-body clearfix'>
<div class='header'>
<strong class='primary-font'>H&M</strong>
<small class='pull-right text-muted'>
<i class='fa fa-clock-o fa-fw'></i> 14 mins ago
</small>
</div>
<p>
Damen T-Shirt mit V-Ausschnitt,Purple, 50% Bio-Baumwolle, 47% Baumwolle und 3% Elasthan
</p>
</div>
</li>
<li class='right clearfix'>
<span class='chat-img pull-right'>
<img src='http://placehold.it/50/FA6F57/fff' alt='User Avatar'
class='img-circle'/>
</span>
<div class='chat-body clearfix'>
<div class='header'>
<small class=' text-muted'>
<i class='fa fa-clock-o fa-fw'></i> 15 mins ago
</small>
<strong class='pull-right primary-font'>Zara</strong>
</div>
<p>
Herren T-Shirt mit Rundhalsausschnitt, Rot, 100% Polyester
</p>
</div>
</li>
</ul>
</div>
<!-- /.panel-body -->
<div class='panel-footer'>
<div class='input-group'>
<input id='btn-input' type='text' class='form-control input-sm'
placeholder='Type your message here...'/>
<span class='input-group-btn'>
<button class='btn btn-warning btn-sm' id='btn-chat'>
Send
</button>
</span>
</div>
</div>
<!-- /.panel-footer -->
</div>
1. Ausgabe für Chat
-
H&M 12 mins ago
Damen T-Shirt mit V-Ausschnitt, Kirschrot, 97% Bio-Baumwolle und 3% Elasthan
-
13 mins ago Zara
Damen T-Shirt mit Rundausschnitt und glitzem Muster, Olive, 100 % Baumwolle G
-
H&M 14 mins ago
Damen T-Shirt mit V-Ausschnitt,Purple, 50% Bio-Baumwolle, 47% Baumwolle und 3% Elasthan
-
15 mins ago Zara
Herren T-Shirt mit Rundhalsausschnitt, Rot, 100% Polyester
2. Code für Responsive Timeline
<div class='panel panel-default'>
<div class='panel-heading'>
<i class='fa fa-clock-o fa-fw'></i> Responsive Timeline
</div>
<!-- /.panel-heading -->
<div class='panel-body'>
<ul class='timeline'>
<li>
<div class='timeline-badge'><i class='fa fa-check'></i>
</div>
<div class='timeline-panel'>
<div class='timeline-heading'>
<h4 class='timeline-title'>H&M</h4>
<p>
<small class='text-muted'><i class='fa fa-clock-o'></i> 11 hours ago via
Twitter
</small>
</p>
</div>
<div class='timeline-body'>
<p>Damen T-Shirt mit V-Ausschnitt, Kirschrot, 97% Bio-Baumwolle und 3% Elasthan.</p>
</div>
</div>
</li>
<li class='timeline-inverted'>
<div class='timeline-badge warning'><i class='fa fa-credit-card'></i>
</div>
<div class='timeline-panel'>
<div class='timeline-heading'>
<h4 class='timeline-title'>Zara</h4>
</div>
<div class='timeline-body'>
<p>Herren T-Shirt mit Brusttasche und Rundhalsausschnitt,
Weinrot, 53 % Baumwolle und 47 % Polyester.</p>
<p>Herren Poloshirt mit Kragen, kurzen Ärmeln und Knopfleiste
vorne, Weiß, 100% Polyester.</p>
</div>
</div>
</li>
<li>
<div class='timeline-badge danger'><i class='fa fa-bomb'></i>
</div>
<div class='timeline-panel'>
<div class='timeline-heading'>
<h4 class='timeline-title'>Escada</h4>
</div>
<div class='timeline-body'>
<p>Damen T-shirt kurzärmlig mit Rundhalsausschnitt,
blassgelb, Polyester 50% und Viskose 50%.</p>
</div>
</div>
</li>
<li class='timeline-inverted'>
<div class='timeline-panel'>
<div class='timeline-heading'>
<h4 class='timeline-title'>Gerry Weber</h4>
</div>
<div class='timeline-body'>
<p>Herren Poloshirt mit Kragen,kurzen Ärmeln und Knopfleiste
vorne, Dunkelblau, 100% Baumwolle!</p>
</div>
</div>
</li>
<li>
<div class='timeline-badge info'><i class='fa fa-save'></i>
</div>
<div class='timeline-panel'>
<div class='timeline-heading'>
<h4 class='timeline-title'>S. Oliver</h4>
</div>
<div class='timeline-body'>
<p>Herren T-Shirt mit Rundhalsausschnitt, Orangerot, 40% Merino Wool,
48 % Polyester und 4% Lycra.</p>
<hr>
<div class='btn-group'>
<button type='button' class='btn btn-primary btn-sm dropdown-toggle'
data-toggle='dropdown'>
<i class='fa fa-gear'></i> <span class='caret'></span>
</button>
<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>
</div>
</div>
</div>
</li>
<li>
<div class='timeline-panel'>
<div class='timeline-heading'>
<h4 class='timeline-title'>H&M</h4>
</div>
<div class='timeline-body'>
<p>Herren T-Shirt mit Rundhalsausschnitt, Weiß, 100 % Baumwolle.</p>
</div>
</div>
</li>
<li class='timeline-inverted'>
<div class='timeline-badge success'><i class='fa fa-graduation-cap'></i>
</div>
<div class='timeline-panel'>
<div class='timeline-heading'>
<h4 class='timeline-title'>S. Oliver</h4>
</div>
<div class='timeline-body'>
<p>Herren T-Shirt mit Rundhalsausschnitt, Orangerot,
40% Merino Wool, 48 % Polyester und 4% Lycra.</p>
</div>
</div>
</li>
</ul>
</div>
<!-- /.panel-body -->
</div>
2. Ausgabe für Responsive Timeline
-
H&M
11 hours ago via Twitter
Damen T-Shirt mit V-Ausschnitt, Kirschrot, 97% Bio-Baumwolle und 3% Elasthan.
-
Zara
Herren T-Shirt mit Brusttasche und Rundhalsausschnitt, Weinrot, 53 % Baumwolle und 47 % Polyester.
Herren Poloshirt mit Kragen, kurzen Ärmeln und Knopfleiste vorne, Weiß, 100% Polyester.
-
Escada
Damen T-shirt kurzärmlig mit Rundhalsausschnitt, blassgelb, Polyester 50% und Viskose 50%.
-
Gerry Weber
Herren Poloshirt mit Kragen,kurzen Ärmeln und Knopfleiste vorne, Dunkelblau, 100% Baumwolle!
-
S. Oliver
Herren T-Shirt mit Rundhalsausschnitt, Orangerot, 40% Merino Wool, 48 % Polyester und 4% Lycra.
-
H&M
Herren T-Shirt mit Rundhalsausschnitt, Weiß, 100 % Baumwolle.
-
S. Oliver
Herren T-Shirt mit Rundhalsausschnitt, Orangerot, 40% Merino Wool, 48 % Polyester und 4% Lycra.