Erweiterte Formatierung mit Bootstrap [Wiki Digitale Lehre]

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.

====== Erweiterte Formatierung mit Bootstrap ======
Mit einem Klick auf den Code in einem grauen Kasten wird dieser direkt in die Zwischenablage kopiert.
=====Bootstrap callout=====
Ein Callout hat standardmäßig am linken Rand einen farbigen oder grauen Strich, optional ein Icon und kann in 5 Standardfarben verwendet werden. Zwischen **%%<callout>%%** und **%%</callout>%%** befindet sich der Text.
<callout>Das ist ein Callout.</callout>
<code><callout>Das ist ein Callout.</callout></code>
----
Mit der Ergänzung **%%type="info"%%** können 5 vorgefertige Farben verwendet werden, **%%icon="true"%%** aktiviert das entsprechende Icon<grid>
<col md="3"><callout type="info" icon="true">info</callout></col>
<col md="3"><callout type="primary" icon="true">primary</callout></col>
<col md="3"><callout type="success" icon="true">success</callout></col>
<col md="3"><callout type="warning" icon="true">warning</callout></col>
<col md="3"><callout type="danger" icon="true">danger</callout></col>
<col md="3"><callout type="question" icon="true">question</callout></col>
<col md="3"><callout type="tip" icon="true">tip</callout></col>
</grid>
<code><callout type="warning" icon="true">Hier steht Text</callout></code>
----
Callouts können auch mit Titel und benutzerdefinierter Farbe und Icon verwendet werden. Titel und Farben können mit **%%title="Titel Text"%%** und **%%color="blue"%%** (englische Farbnamen oder Hex #FF3300) eingefügt werden. Das Icon kann aus der folgenden Liste ausgewält werden: [[https://fontawesome.com/v4.7.0/icons/]] und wird mit **%%icon="fa fa-building"%%** eingefügt, wobei nur der letzte Teil (building) mit dem entsprechenden Icon-Code ersetzt wird.
<callout icon="fa fa-building" color="blue" title="Mit Titel Text"> und benutzerdefiniertem Icon</callout>
<code><callout icon="fa fa-building" color="blue" title="Mit Titel Text"> und benutzerdefiniertem Icon</callout></code> 


\\
\\

=====Bootstrap panel=====
Panels funktionieren ähnlich wie Callouts und können auch mit Typ, Titel und Icon versehen werden. Die Farbe kann aber nicht frei ausgewählt werden.
<grid>
<col md="2"><panel type="primary" title="Panel title">primary</panel></col>
<col md="2"><panel type="success" title="Panel title">success</panel></col>
<col md="2"><panel type="info" title="Panel title">info</panel></col>
<col md="2"><panel type="warning" title="Panel title">warning</panel></col>
<col md="2"><panel type="danger" title="Panel title">danger</panel></col>
</grid>
<code><panel type="primary" title="Panel title">primary</panel></code>
----
<code><panel type="warning" title="Mit Titel" subtitle="und Untertitel" icon="fa fa-warning">
und benutzerdefiniertem Icon
</panel></code>
<panel type="warning" title="Mit Titel" subtitle="und Untertitel" icon="fa fa-warning">
und benutzerdefiniertem Icon</panel>

\\
\\

=====Bootstrap grid:=====
Mit ''%%<grid>%%'' und ''%%<col md="4">%%'' können Spalten erzeugt werden. Die Zahl gibt an, wie breit jede Spalte ist. Die Summe ist immer 12. Es können also zB 12 sehr schmale Spalten mit Breite 1 oder 3 Spalten mit Breite 4 angegeben werden. Oder eine große Spalte mit Breite 9 und eine schmale Spalte mit Breite 3.
<grid>
<col md="4">TEXT1</col>
<col md="4">TEXT2</col>
<col md="4">TEXT3</col>
</grid>
\\
<code>
<grid>
<col md="4">TEXT1</col>
<col md="4">TEXT2</col>
<col md="4">TEXT3</col>
</grid></code>
----
Im Grid können alle anderen Elemente angeordnet werden wie Überschriften, Bilder, Panel, Callouts, etc
<grid><col md="4">
===== Überschrift 1 ===== 
TEXT1</col><col md="4">
===== Überschrift 2 =====
TEXT2</col><col md="4">
===== Überschrift 3 =====
TEXT3</col></grid>

<code><grid><col md="4">
==== Überschrift 1 ====
TEXT1</col><col md="4">
==== Überschrift 2 ====
TEXT2</col><col md="4">
==== Überschrift 3 ====
TEXT3</col></grid></code>
----
===12 schmale Spalten:===
<grid><col md="1">schmale Spalte</col><col md="1">schmale Spalte</col><col md="1">schmale Spalte</col><col md="1">schmale Spalte</col><col md="1">schmale Spalte</col><col md="1">schmale Spalte</col><col md="1">schmale Spalte</col><col md="1">schmale Spalte</col><col md="1">schmale Spalte</col><col md="1">schmale Spalte</col><col md="1">schmale Spalte</col><col md="1">schmale Spalte</col></grid>
----
===Breite und schmale Spalte:===
<grid>
<col md="9">breite Spalte</col><col md="3">schmale Spalte</col>
<col md="9">breite Spalte</col><col md="3">schmale Spalte</col>
</grid>
----
===mit Panels / Wells:===
<grid>
<col md="9"><panel>breite Spalte - panel</panel></col><col md="3"><panel>schmale Spalte</panel></col>
<col md="9"><well>breite Spalte - well</well></col><col md="3"><well>schmale Spalte</well></col>
</grid>

\\
\\

===== Weitere Elemente =====

====Bootstrap button====
<btn type="warning" size="xs">Moodle</btn>
<code><btn type="warning" size="xs">Moodle</btn></code>
====Bootstrap label====
<btn type="warning" icon="fa fa-wikipedia-w">wiki</btn>
<code><btn type="warning" icon="fa fa-wikipedia-w">wiki</btn></code>
====Bootstrap badge====
Einen Kurs in Moodle anlegen <badge>Einsteiger</badge>
Bedingte Herausgabe von Musterlösungen <badge>Fortgeschritten</badge>
<code><badge>Einsteiger</badge></code>
====Bootstrap images====
<image shape="circle">
{{:bildalternative_blendedlearning-wiki.jpg?nolink&100x100|}}
</image>
<code><image shape="circle">{{:bildalternative_blendedlearning-wiki.jpg?nolink&100x100|}}</image></code>
====Bootstrap modal====
<btn type="primary" modal="modal-remote">Vorschau der Seite "Digitale Lehrmaterialien"</btn>
<modal size="lg" id="modal-remote" remote=":medienproduktion:start"></modal>
<code><btn type="primary" modal="modal-remote">Vorschau der Seite "Digitale Lehrmaterialien"</btn>
<modal size="lg" id="modal-remote" remote=":medienproduktion:start"></modal></code>