Style Guide
Beliebte Fluege mit Ü
London
Mallorca
Antalya
Berlin
Paris
New York
Über den Wolken, muss die Beinfreiheit grenzenlos sein …
colors
#00224a
#d6358d
#5cb85c
#009fd9
#a94442
#f0fbff
typography
Basic font-size: 16px
Basic line-height: 1.875
headlines
H1 Überschrift <h1>
H2 Überschrift <h2>
H3 Überschrift <h3>
H4 Überschrift <h4>
H5 Überschrift <h5>
H6 Überschrift <h6>
headlines mit small
Überschrift mit <small>-tag in headlines
<h4>Überschrift <small>mit small in headlines</small></h4>
textformatting
| Class | Description | Example |
|---|---|---|
.lead | Makes a paragraph stand out | Beispieltext mit Formatierung lead |
.small | Schriftgröße 85% (wie <small>-tag) | Beispieltext mit Formatierung small |
.text-left | Linksbündiger Text | Beispieltext mit Formatierung text-left |
.text-center | Zentrierter Text | Beispieltext mit Formatierung text-center |
.text-right | Rechtsbündiger Text | Beispieltext mit Formatierung text-right |
.text-justify | Blocksatz | Beispieltext mit Formatierung text-justify Beispieltext mit Formatierung text-justify Beispieltext mit Formatierung text-justify Beispieltext mit Formatierung text-justify Beispieltext mit Formatierung text-justify Beispieltext mit Formatierung text-justify |
.text-nowrap | Text macht keinen Zeilenumbruch | Beispieltext mit Formatierung text-nowrap |
.text-lowercase | In Kleinbuchstaben umwandeln | Beispieltext mit Formatierung text-lowercase |
.text-uppercase | In Großbuchstaben umwandeln | Beispieltext mit Formatierung text-uppercase |
.text-capitalize | Jedes Wort beginnt mit Großbuchstaben | Beispieltext mit Formatierung text-capitalize |
.text-primary.text-info.text-success.text-warning.text-danger | Text Colors | text-primary (default text color) text-info text-success text-warning text-danger |
.bg-primary.bg-info.bg-success.bg-warning.bg-danger.bg-gray | Text Background-Colors | bg-primary bg-info bg-success bg-warning bg-danger bg-gray (same as this table-row so can’t see it 😉 ) |
grid
12 column grid
Codebeispiel
<div class="row">
<div class="col-xs-12 col-md-4">col-xs-12 col-md-4</div>
<div class="col-xs-12 col-md-6">col-xs-12 col-md-6</div>
<div class="col-xs-12 col-md-2">col-xs-12 col-md-2</div>
</div>
buttons
The button classes can be used on an <a>, <button>, or <input> element
btn
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
btn-sizes
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>
btn-block
Add class .btn-block to create a block level button
<button type="button" class="btn btn-primary btn-block">Block (volle Breite)</button>
btn disabled/active
The class .active makes a button appear pressed, and the class .disabled makes a button unclickable
<button type="button" class="btn btn-primary active">Active</button>
<button type="button" class="btn btn-primary disabled">Disabled</button>
button-groups
Use a <div> element with class .btn-group to create a button group
horizontal button-groups (default)
<div class="btn-group">
<button type="button" class="btn btn-info">Button 1</button>
<button type="button" class="btn btn-info">Button 2</button>
<button type="button" class="btn btn-info">Button 3</button>
</div>
Use a <div> element with classes .btn-group .btn-group-justified to create a justified button group.
Doesn’t work with <button></button> – must be <a></a>
horizontal button-groups justified
<div class="btn-group btn-group-justified">
<a type="button" class="btn btn-primary">Button 1</a>
<a type="button" class="btn btn-primary">Button 2</a>
<a type="button" class="btn btn-primary">Button 3</a>
</div>
button-group sizes
Tip: Instead of applying button sizes to every button in a group, use class .btn-group-* to size all buttons in the group
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-info">Button 1</button>
<button type="button" class="btn btn-info">Button 2</button>
<button type="button" class="btn btn-info">Button 3</button>
</div>
vertical button-groups
Use class .btn-group-vertical for vertical button groups
<div class="btn-group-vertical">
<button type="button" class="btn btn-info">Button 1</button>
<button type="button" class="btn btn-info">Button 2</button>
<button type="button" class="btn btn-info">Button 3</button>
</div>
justified button-groups
Wrap all buttons in a <div> with class .btn-group btn-group-justified and each button within into a <div&rt; with class .btn-group for full width button groups
<div class="btn-group btn-group-justified">
<div class="btn-group"><button class="btn btn-primary" type="button">Button 1</button></div>
<div class="btn-group"><button class="btn btn-primary" type="button">Button 2</button></div>
<div class="btn-group"><button class="btn btn-primary" type="button">Button 3</button></div>
</div>
tables
standard
<table class=“table“>
.table
| th head | th head | th head |
|---|---|---|
| th body | td | td |
| th body | td | td |
table-styling
each table can have the following classes to be style differently. Classes can be combined (the table below has each of those classes combined)
| Class | Description | Usage |
|---|---|---|
| .table-striped | Rows have striped background | <table class=“table table-striped“> |
| .table-bordered | Each table-cell has vertical borders | <table class=“table table-bordered“> |
| .table-condensed | Table-cells habe less padding for saving space | <table class=“table table-condensed“> |
| .table-hover | Row changes background-color while hovering | <table class=“table table-hover“> |
responsive tables
Wrap any table in a div with class .table-responsive. The table will then scroll horizontally on small devices (under 768px)
<div class="table-responsive">
<table>...</table>
</div>
| th head | th head | th head |
|---|---|---|
| th body | td | td |
| th body | td | td |
list groups
List Groups are styled Lists or Links.
List (<li> inside <ul>)
- List-item 1 (class .list-group-item-success)
- List-item 2 (class .list-group-item-success)
- List-item 3 (class .list-group-item-warning)
- List-item 4 (class .list-group-item-danger)
<ul class="list-group">
<li class="list-group-item list-group-item-success">List-item 1 (class .list-group-item-success)</li>
<li class="list-group-item list-group-item-info">List-item 2 (class .list-group-item-success)</li>
<li class="list-group-item list-group-item-warning">List-item 3 (class .list-group-item-warning)</li>
<li class="list-group-item list-group-item-danger">List-item 4 (class .list-group-item-danger)</li>
</ul>
Linked items (<a> inside <div>)
Linked items have to be in one line. Otherwise tags will be added around each <a></a>
<div class="list-group"><a class="list-group-item active" href="#">Linked item (class .active)</a><a class="list-group-item" href="#"><span class="badge">500.000.000</span>linked item with badge</a><a class="list-group-item disabled" href="#">Third item (.disabled)</a><a class="list-group-item bg-info" href="#">Third item (.bg-info)</a></div>
jumbotron & minitron
Make content really stand out with .jumbotron or .minitron
Can be combined with contextual bg-classes like .bg-info (see Minitron-Example)
Jumbotron Headline (h1-h4)
wow this is huuuuuuuuuge!
<div class="jumbotron">
<h1>Jumbotron Headline (h1-h4)</h1>
<p>wow this is huuuuuuuuuge!</p>
</div>
Minitron Headline (h1-h4)
this is not that huuuuuuuuuge!
<div class="minitron bg-info">
<h1>Minitron Headline (h1-h4)</h1>
<p>this is not that huuuuuuuuuge!</p>
</div>
Section Shortcode
Shortcode zum Beginnen einer neuen Section.
sectionSection-Content
Optionale Parameter
- id=“section-id“
- class=“section-class“
Section blau mit Wolken
section class="cloudy"Section-Content
Blaue Section mit class=“cloudy“