Hinweis: Die obere und untere Seiten sind jeweils der Code in HTML und das Layout im Browser.
1. Code für Wells
<div class='well'>
<h4>Normal Well</h4>
<p>Herren T-Shirt mit Rundhalsausschnitt, Dunkelblau, 75% Polyamide und 25% Elasthan.</p>
</div>
<div class='well well-lg'>
<h4>Large Well</h4>
<p>Herren T-Shirt mit Rundhalsausschnitt, Dunkelblau, 75% Polyamide und 25% Elasthan.</p>
</div>
<div class='well well-sm'>
<h4>Small Well</h4>
<p>Herren T-Shirt mit Rundhalsausschnitt, Dunkelblau, 75% Polyamide und 25% Elasthan.</p>
</div>
1. Ausgabe für Normal Well
Herren T-Shirt mit Rundhalsausschnitt, Dunkelblau, 75% Polyamide und 25% Elasthan.
1. Ausgabe für Large Well
Herren T-Shirt mit Rundhalsausschnitt, Dunkelblau, 75% Polyamide und 25% Elasthan.
1. Ausgabe für Small Well
Herren T-Shirt mit Rundhalsausschnitt, Dunkelblau, 75% Polyamide und 25% Elasthan.
Hinweis: Die linke und rechte Seiten sind jeweils der Code in HTML und das Layout im Browser.
2. Code für Hero Widget
<div class='hero-widget well well-sm'>
<div class='icon'>
<i class='glyphicon glyphicon-user'></i>
</div>
<div class='text'>
<span class='value'>3</span>
<label class='text-muted'>Hero Widget</label>
</div>
<div class='options'>
<a href='javascript:;' class='btn btn-primary btn-lg'><i class='glyphicon glyphicon-plus'></i> Primary Action</a>
</div>
</div>
2. Ausgabe für Hero Widget
3. Code für Hero Widget
<div class='hero-widget well well-sm'>
<div class='icon'>
<i class='glyphicon glyphicon-star'></i>
</div>
<div class='text'>
<span class='value'>614</span>
<label class='text-muted'>Hero Widget</label>
</div>
<div class='options'>
<a href='javascript:;' class='btn btn-default btn-lg'><i class='glyphicon glyphicon-search'></i> Secondary Action</a>
</div>
</div>
3. Ausgabe für Hero Widget
4. Code für Hero Widget
<div class='hero-widget well well-sm'>
<div class='icon'>
<i class='glyphicon glyphicon-tags'></i>
</div>
<div class='text'>
<span class='value'>73</span>
<label class='text-muted'>Hero Widget</label>
</div>
<div class='options'>
<a href='javascript:;' class='btn btn-default btn-lg'><i class='glyphicon glyphicon-search'></i> Secondary Action</a>
</div>
</div>
4. Ausgabe für Hero Widget
5. Code für Hero Widget
<div class='hero-widget well well-sm'>
<div class='icon'>
<i class='glyphicon glyphicon-cog'></i>
</div>
<div class='text'>
<span class='value'>75%</span>
<label class='text-muted'>Hero Widget</label>
</div>
<div class='options'>
<a href='javascript:;' class='btn btn-default btn-lg'><i class='glyphicon glyphicon-wrench'></i> Secondary Action</a>
</div>
</div>
5. Ausgabe für Hero Widget