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>
<a href="URL" type="button" class="btn btn-default btn-xs btn-block">Default</a>
<a href="URL" type="button" class="btn btn-default btn-sm btn-block">Default</a>
<a href="URL" type="button" class="btn btn-default btn-block">Default</a>
<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>
<a href="URL" type="button" class="btn btn-primary btn-xs btn-block">Primary</a>
<a href="URL" type="button" class="btn btn-primary btn-sm btn-block">Primary</a>
<a href="URL" type="button" class="btn btn-primary btn-block">Primary</a>
<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>
<a href="URL" type="button" class="btn btn-success btn-xs btn-block">Success</a>
<a href="URL" type="button" class="btn btn-success btn-sm btn-block">Success</a>
<a href="URL" type="button" class="btn btn-success btn-block">Success</a>
<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>
<a href="URL" type="button" class="btn btn-info btn-xs btn-block">Info</a>
<a href="URL" type="button" class="btn btn-info btn-sm btn-block">Info</a>
<a href="URL" type="button" class="btn btn-info btn-block">Info</a>
<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>
<a href="URL" type="button" class="btn btn-warning btn-xs btn-block">Warning</a>
<a href="URL" type="button" class="btn btn-warning btn-sm btn-block">Warning</a>
<a href="URL" type="button" class="btn btn-warning btn-block">Warning</a>
<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>
<a href="URL" type="button" class="btn btn-danger btn-xs btn-block">Danger</a>
<a href="URL" type="button" class="btn btn-danger btn-sm btn-block">Danger</a>
<a href="URL" type="button" class="btn btn-danger btn-block">Danger</a>
<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>