Tabellen



Standart Tabelle


Vorname Nachname Username
Max Mustermann Maxi
Mary Mustermann Mary
Jeniffer Musterfrau Jenny


Einbaucode

<table class="table">
 <thead>
  <tr>
   <th>Vorname</th>
   <th>Nachname</th>
   <th>Username</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th>Max</th>
   <th>Mustermann</th>
   <th>Maxi</th>
  </tr>
  <tr>
   <th>Mary</th>
   <th>Mustermann</th>
   <th>Mary</th>
  </tr>
  <tr>
   <th>Jeniffer</th>
   <th>Musterfrau</th>
   <th>Jenny</th>
  </tr>
 </tbody>
</table>




Farbwechselnde Tabelle


Vorname Nachname Username
Max Mustermann Maxi
Mary Mustermann Mary
Jeniffer Musterfrau Jenny


Einbaucode

<table class="table table-striped">
 <thead>
  <tr>
   <th>Vorname</th>
   <th>Nachname</th>
   <th>Username</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th>Max</th>
   <th>Mustermann</th>
   <th>Maxi</th>
  </tr>
  <tr>
   <th>Mary</th>
   <th>Mustermann</th>
   <th>Mary</th>
  </tr>
  <tr>
   <th>Jeniffer</th>
   <th>Musterfrau</th>
   <th>Jenny</th>
  </tr>
 </tbody>
</table>




Tabelle mit Randlinien


Vorname Nachname Username
Max Mustermann Maxi
Mary Mustermann Mary
Jeniffer Musterfrau Jenny


Einbaucode

<table class="table table-bordered">
 <thead>
  <tr>
   <th>Vorname</th>
   <th>Nachname</th>
   <th>Username</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th>Max</th>
   <th>Mustermann</th>
   <th>Maxi</th>
  </tr>
  <tr>
   <th>Mary</th>
   <th>Mustermann</th>
   <th>Mary</th>
  </tr>
  <tr>
   <th>Jeniffer</th>
   <th>Musterfrau</th>
   <th>Jenny</th>
  </tr>
 </tbody>
</table>




Tabelle mit Hover Effekt


Vorname Nachname Username
Max Mustermann Maxi
Mary Mustermann Mary
Jeniffer Musterfrau Jenny


Einbaucode

<table class="table table-hover">
 <thead>
  <tr>
   <th>Vorname</th>
   <th>Nachname</th>
   <th>Username</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th>Max</th>
   <th>Mustermann</th>
   <th>Maxi</th>
  </tr>
  <tr>
   <th>Mary</th>
   <th>Mustermann</th>
   <th>Mary</th>
  </tr>
  <tr>
   <th>Jeniffer</th>
   <th>Musterfrau</th>
   <th>Jenny</th>
  </tr>
 </tbody>
</table>




Tabelle mit Trennlinien


Vorname Nachname Username
Max Mustermann Maxi
Mary Mustermann Mary
Jeniffer Musterfrau Jenny


Einbaucode

<table class="table table-condensed">
 <thead>
  <tr>
   <th>Vorname</th>
   <th>Nachname</th>
   <th>Username</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th>Max</th>
   <th>Mustermann</th>
   <th>Maxi</th>
  </tr>
  <tr>
   <th>Mary</th>
   <th>Mustermann</th>
   <th>Mary</th>
  </tr>
  <tr>
   <th>Jeniffer</th>
   <th>Musterfrau</th>
   <th>Jenny</th>
  </tr>
 </tbody>
</table>




Farbige Tabelle


Vorname Nachname Username
Max Mustermann Maxi
Mary Mustermann Mary
Jeniffer Musterfrau Jenny


Einbaucode

<table class="table table-condensed">
 <thead>
  <tr>
   <th>Vorname</th>
   <th>Nachname</th>
   <th>Username</th>
  </tr>
 </thead>
 <tbody>
  <tr class="success">
   <th>Max</th>
   <th>Mustermann</th>
   <th>Maxi</th>
  </tr>
  <tr class="danger">
   <th>Mary</th>
   <th>Mustermann</th>
   <th>Mary</th>
  </tr>
  <tr class="info">
   <th>Jeniffer</th>
   <th>Musterfrau</th>
   <th>Jenny</th>
  </tr>
 </tbody>
</table>




Infoboxen



Einbaucode

<div class="alert alert-success" role="alert">hier muss ihr Inhalt eingetragen werden</div>




Einbaucode

<div class="alert alert-info" role="alert">hier muss ihr Inhalt eingetragen werden</div>




Einbaucode

<div class="alert alert-warning" role="alert">hier muss ihr Inhalt eingetragen werden</div>




Einbaucode

<div class="alert alert-danger" role="alert">hier muss ihr Inhalt eingetragen werden</div>




Button



Default Button


Default <a href="URL" type="button" class="btn btn-default btn-xs">Default</a>


Default <a href="URL" type="button" class="btn btn-default btn-sm">Default</a>


Default <a href="URL" type="button" class="btn btn-default">Default</a>


Default <a href="URL" type="button" class="btn btn-default btn-lg">Default</a>


Default

<a href="URL" type="button" class="btn btn-default btn-xs btn-block">Default</a>


Default

<a href="URL" type="button" class="btn btn-default btn-sm btn-block">Default</a>


Default

<a href="URL" type="button" class="btn btn-default btn-block">Default</a>


Default

<a href="URL" type="button" class="btn btn-default btn-lg btn-block">Default</a>




Primary Button


Primary <a href="URL" type="button" class="btn btn-primary btn-xs">Primary</a>


Primary <a href="URL" type="button" class="btn btn-primary btn-sm">Primary</a>


Primary <a href="URL" type="button" class="btn btn-primary">Primary</a>


Primary <a href="URL" type="button" class="btn btn-primary btn-lg">Primary</a>


Primary

<a href="URL" type="button" class="btn btn-primary btn-xs btn-block">Primary</a>


Primary

<a href="URL" type="button" class="btn btn-primary btn-sm btn-block">Primary</a>


Primary

<a href="URL" type="button" class="btn btn-primary btn-block">Primary</a>


Primary

<a href="URL" type="button" class="btn btn-primary btn-lg btn-block">Primary</a>




Success Button


Success <a href="URL" type="button" class="btn btn-success btn-xs">Success</a>


Success <a href="URL" type="button" class="btn btn-success btn-sm">Success</a>


Success <a href="URL" type="button" class="btn btn-success">Success</a>


Success <a href="URL" type="button" class="btn btn-success btn-lg">Success</a>


Success

<a href="URL" type="button" class="btn btn-success btn-xs btn-block">Success</a>


Success

<a href="URL" type="button" class="btn btn-success btn-sm btn-block">Success</a>


Success

<a href="URL" type="button" class="btn btn-success btn-block">Success</a>


Success

<a href="URL" type="button" class="btn btn-success btn-lg btn-block">Success</a>




Info Button


Info <a href="URL" type="button" class="btn btn-info btn-xs">Info</a>


Info <a href="URL" type="button" class="btn btn-info btn-sm">Info</a>


Info <a href="URL" type="button" class="btn btn-info">Info</a>


Info <a href="URL" type="button" class="btn btn-info btn-lg">Info</a>


Info

<a href="URL" type="button" class="btn btn-info btn-xs btn-block">Info</a>


Info

<a href="URL" type="button" class="btn btn-info btn-sm btn-block">Info</a>


Info

<a href="URL" type="button" class="btn btn-info btn-block">Info</a>


Info

<a href="URL" type="button" class="btn btn-info btn-lg btn-block">Info</a>




Warning Button


Warning <a href="URL" type="button" class="btn btn-warning btn-xs">Warning</a>


Warning <a href="URL" type="button" class="btn btn-warning btn-sm">Warning</a>


Warning <a href="URL" type="button" class="btn btn-warning">Warning</a>


Warning <a href="URL" type="button" class="btn btn-warning btn-lg">Warning</a>


Warning

<a href="URL" type="button" class="btn btn-warning btn-xs btn-block">Warning</a>


Warning

<a href="URL" type="button" class="btn btn-warning btn-sm btn-block">Warning</a>


Warning

<a href="URL" type="button" class="btn btn-warning btn-block">Warning</a>


Warning

<a href="URL" type="button" class="btn btn-warning btn-lg btn-block">Warning</a>




Danger Button


Danger <a href="URL" type="button" class="btn btn-danger btn-xs">Danger</a>


Danger <a href="URL" type="button" class="btn btn-danger btn-sm">Danger</a>


Danger <a href="URL" type="button" class="btn btn-danger">Danger</a>


Danger <a href="URL" type="button" class="btn btn-danger btn-lg">Danger</a>


Danger

<a href="URL" type="button" class="btn btn-danger btn-xs btn-block">Danger</a>


Danger

<a href="URL" type="button" class="btn btn-danger btn-sm btn-block">Danger</a>


Danger

<a href="URL" type="button" class="btn btn-danger btn-block">Danger</a>


Danger

<a href="URL" type="button" class="btn btn-danger btn-lg btn-block">Danger</a>




Default Button Disable


<button type="button" class="btn btn-default btn-xs disabled">Default</button>


<button type="button" class="btn btn-default btn-sm disabled">Default</button>


<button type="button" class="btn btn-default disabled">Default</button>


<button type="button" class="btn btn-default btn-lg disabled">Default</button>


<button type="button" class="btn btn-default btn-xs btn-block disabled">Default</button>


<button type="button" class="btn btn-default btn-sm btn-block disabled">Default</button>


<button type="button" class="btn btn-default btn-block disabled">Default</button>


<button type="button" class="btn btn-default btn-lg btn-block disabled">Default</button>




Primary Button Disable


<button type="button" class="btn btn-primary btn-xs disabled">Primary</button>


<button type="button" class="btn btn-primary btn-sm disabled">Primary</button>


<button type="button" class="btn btn-primary disabled">Primary</button>


<button type="button" class="btn btn-primary btn-lg disabled">Primary</button>


<button type="button" class="btn btn-primary btn-xs btn-block disabled">Primary</button>


<button type="button" class="btn btn-primary btn-sm btn-block disabled">Primary</button>


<button type="button" class="btn btn-primary btn-block disabled">Primary</button>


<button type="button" class="btn btn-primary btn-lg btn-block disabled">Primary</button>




Success Button Disable


<button type="button" class="btn btn-success btn-xs disabled">Success</button>


<button type="button" class="btn btn-success btn-sm disabled">Success</button>


<button type="button" class="btn btn-success disabled">Success</button>


<button type="button" class="btn btn-success btn-lg disabled">Success</button>


<button type="button" class="btn btn-success btn-xs btn-block disabled">Success</button>


<button type="button" class="btn btn-success btn-sm btn-block disabled">Success</button>


<button type="button" class="btn btn-success btn-block disabled">Success</button>


<button type="button" class="btn btn-success btn-lg btn-block disabled">Success</button>




Info Button Disable


<button type="button" class="btn btn-info btn-xs disabled">Info</button>


<button type="button" class="btn btn-info btn-sm disabled">Info</button>


<button type="button" class="btn btn-info disabled">Info</button>


<button type="button" class="btn btn-info btn-lg disabled">Info</button>


<button type="button" class="btn btn-info btn-xs btn-block disabled">Info</button>


<button type="button" class="btn btn-info btn-sm btn-block disabled">Info</button>


<button type="button" class="btn btn-info btn-block disabled">Info</button>


<button type="button" class="btn btn-info btn-lg btn-block disabled">Info</button>




Warning Button Disable


<button type="button" class="btn btn-warning btn-xs disabled">Warning</button>


<button type="button" class="btn btn-warning btn-sm disabled">Warning</button>


<button type="button" class="btn btn-warning disabled">Warning</button>


<button type="button" class="btn btn-warning btn-lg disabled">Warning</button>


<button type="button" class="btn btn-warning btn-xs btn-block disabled">Warning</button>


<button type="button" class="btn btn-warning btn-sm btn-block disabled">Warning</button>


<button type="button" class="btn btn-warning btn-block disabled">Warning</button>


<button type="button" class="btn btn-warning btn-lg btn-block disabled">Warning</button>




Danger Button Disable


<button type="button" class="btn btn-danger btn-xs disabled">Danger</button>


<button type="button" class="btn btn-danger btn-sm disabled">Danger</button>


<button type="button" class="btn btn-danger disabled">Danger</button>


<button type="button" class="btn btn-danger btn-lg disabled">Danger</button>


<button type="button" class="btn btn-danger btn-xs btn-block disabled">Danger</button>


<button type="button" class="btn btn-danger btn-sm btn-block disabled">Danger</button>


<button type="button" class="btn btn-danger btn-block disabled">Danger</button>


<button type="button" class="btn btn-danger btn-lg btn-block disabled">Danger</button>

Wir sind auch in sozialen Netzwerken vertreten


Facebook

Twitter

Google Plus

Loginformular