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

  • User Avatar
    H&M 12 mins ago

    Damen T-Shirt mit V-Ausschnitt, Kirschrot, 97% Bio-Baumwolle und 3% Elasthan

  • User Avatar
    13 mins ago Zara

    Damen T-Shirt mit Rundausschnitt und glitzem Muster, Olive, 100 % Baumwolle G

  • User Avatar
    H&M 14 mins ago

    Damen T-Shirt mit V-Ausschnitt,Purple, 50% Bio-Baumwolle, 47% Baumwolle und 3% Elasthan

  • User Avatar
    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

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.