Funktionen

Hier sehen Sie Beispiele aller Bootstrap CSS Komponenten, die Sie in der Wissensdatenbank und auf den Infoseiten einsetzen können. Wenn Sie Zweifel haben, wie Sie Bootstrap korrekt verwenden, besuchen Sie einfach getbootsstrap.com. Um Konflikte mit osTicket zu vermeiden und den einwandfreien Betrieb zu gewährleisten, haben wir nicht alle zur Verfügung stehenden Bootstrap Komponenten und Stile in unsere DMT Themes integriert. Auch die Javascript-Funktionen stehen aus demselben Grund nur eingeschränkt zur Verfügung.

Sie müssen kein Coder sein um Bootstrap CSS Stile in Ihren Inhalten zu verwenden. Folgen Sie einfach den Beispielen auf der Bootstrap Website, das geht ganz einfach. Wenn Sie den Quellcode nicht bearbeiten wollen, kein Problem. Wir haben die am meisten genutzten Funktionen und Stile von Bootstrap in den Redactor Texteditor integriert. Damit fügen Sie schnell und unkompliziert Vorlagen in Ihre Beiträge ein, die Sie dann ganz einfach anpassen. Wählen Sie einfach die gewünschte Komponente oder Stilvorlage aus und klicken Sie an. Das war's!


Basis Beispiel

Fügen Sie einfach die Klasse .label hinzu, z.B.: <h3>Example heading <span class="label label-default">New!</span> </h3>

Example heading New!

Example heading New!

Example heading New!

Example heading New!

Example heading New!
Example heading New!

Verfügbare Varianten

Fügen Sie einfach einen der folgenden Modifikatoren hinzu um das Erscheinungsbild der Label zu beeinflussen.

Class Appearance
.label-default Nullam id dolor id nibh ultricies vehicula ut id elit. Default!
.label-primary Nullam id dolor id nibh ultricies vehicula ut id elit. Primary!
.label-success Duis mollis, est non commodo luctus, nisi erat porttitor ligula. Success!
.label-info Maecenas sed diam eget risus varius blandit sit amet non magna. Info!
.label-warning Etiam porta sem malesuada magna mollis euismod. Warning!
.label-danger Donec ullamcorper nulla non metus auctor fringilla. Danger!

Eine leichte, flexible Komponente, die optional die gesamte Breite der Seite einnehmen kann, um wichtige Inhalte auf deiner Seite besonders zu präsentieren.

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

Basis Beispiel

Umgeben Sie Ihren Text einfach mit .alert Tags und einer der vier zur Verfügung stehenden kontextbezogenen Klassen ( .alert-success, .alert-info, .alert-warning or .alert-danger ) für Warnhinweise.


Keine Standardklassen

Warnhinweise haben keine Standardklassen, sondern nur eine Basisklasse und kontextbezogene Klassen. Ein grauer Warnhinweis verfehlt einfach seine Wirkung, deswegen müssen Sie zu jedem Warnhinweise auch eine kontextbezogene Klasse hinzufügen um die Farbe zu definieren. Diese Klassen stehen Ihnen zur Verfügung: success, info, warning, oder danger.


Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.

A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small element, as well as most other components (with additional styles).

Easily add a heading container to your panel with .panel-heading. You may also include any <h1>-<h6> with a .panel-title class to add a pre-styled heading. However, the font sizes of <h1>-<h6> are overridden by .panel-heading.

For proper link coloring, be sure to place links in headings within .panel-title.

Panels with header

Lorem Ipsum

Dolor sit amet...

Lorem Ipsum

Dolor sit amet...

Lorem Ipsum

Dolor sit amet...

Lorem Ipsum

Dolor sit amet...

Lorem Ipsum

Dolor sit amet...

Lorem Ipsum

Dolor sit amet...

Panels with header and footer

Lorem Ipsum

Dolor sit amet...

Lorem Ipsum

Dolor sit amet...

Lorem Ipsum

Dolor sit amet...

Lorem Ipsum

Dolor sit amet...

Lorem Ipsum

Dolor sit amet...

Lorem Ipsum

Dolor sit amet...

Bitte warten!

Bitte warten... es dauert eine Sekunde!