Thema: Panels einsetzen


Hinweis: Die linke und rechte Seiten sind jeweils der Code in HTML und das Layout im Browser.

1. Code für Default Panels


<div class='panel panel-default'>
  <div class='panel-heading'>
      Dunkelblaues Herren T-Shirt von Domyos
  </div>
  <div class='panel-body'>
      <img style='width:240px; height:320px;' src='images/domyosxbx.jpg'>
  </div>
  <div class='panel-footer'>
      Herren T-Shirt mit Rundhalsausschnitt, Dunkelblau, 75% Polyamide und 25% Elasthan
  </div>
</div>

1. Ausgabe für Default Panels

Dunkelblaues Herren T-Shirt von Domyos

2. Code für Primary Panels


<div class='panel panel-primary'>
  <div class='panel-heading'>
      Olives und Weißes Damen T-Shirt von Gerry Weber
  </div>
  <div class='panel-body'>
      <img style='width:240px; height:320px;' src='images/gerryweberxxa.jpg'>
  </div>
  <div class='panel-footer'>
      Herren T-Shirt mit Rundhalsausschnitt, Dunkelblau, 75% Polyamide und 25% Elasthan
  </div>
</div>

2. Ausgabe für Primary Panels

Olives und Weißes Damen T-Shirt von Gerry Weber

3. Code für Danger Panels


<div class='panel panel-danger'>
  <div class='panel-heading'>
      	Purples Damen T-Shirt von H&M
  </div>
  <div class='panel-body'>
      <img style='width:240px; height:320px;' src='images/hundmxbx3.jpg'>
  </div>
  <div class='panel-footer'>
      Damen T-Shirt mit V-Ausschnitt,Purple, 50% Bio-Baumwolle, 47% Baumwolle und 3% Elasthan
  </div>
</div>

3. Ausgabe für Danger Panels

Purples Damen T-Shirt von H&M

4. Code für Info Panels


<div class='panel panel-info'>
  <div class='panel-heading'>
      	Hellokeres Damen T-Shirt von H & M
  </div>
  <div class='panel-body'>
      <img style='width:240px; height:320px;' src='images/hundmxxa.jpg'>
  </div>
  <div class='panel-footer'>
      Damen T-Shirt mit breitem Rundausschnitt, Helloker, 100% Viskose
  </div>
</div>

4. Ausgabe für Info Panels

Hellokeres Damen T-Shirt von H & M

5. Code für Success Panels


<div class='panel panel-success'>
  <div class='panel-heading'>
      	Weißes Herren Poloshirt von Mikava
  </div>
  <div class='panel-body'>
      <img style='width:240px; height:320px;' src='images/mikavaxxa.jpg'>
  </div>
  <div class='panel-footer'>
      Damen T-Shirt mit breitem Rundausschnitt, Helloker, 100% Viskose
  </div>
</div>

5. Ausgabe für Success Panels

Weißes Herren Poloshirt von Mikava