Beide Seiten der vorigen Revision Vorhergehende Überarbeitung Nächste Überarbeitung | Vorhergehende Überarbeitung |
wiki:erweiterte_formatierung_bootstrap [2021/07/27 17:20] – linhardja | wiki:erweiterte_formatierung_bootstrap [2023/04/24 09:23] (aktuell) – haasju |
---|
====== Erweiterte Formatierung mit Bootstrap ====== | ====== Erweiterte Formatierung mit Bootstrap ====== |
Mit einem Klick auf den Code in einem grauen Kasten wird dieser direkt in die Zwischenablage kopiert. | Mit einem Klick auf den Code in einem grauen Kasten wird dieser direkt in die Zwischenablage kopiert. |
====Bootstrap callout==== | =====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. | 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> | <callout>Das ist ein Callout.</callout> |
<code><callout icon="fa fa-building" color="blue" title="Mit Titel Text"> und benutzerdefiniertem Icon</callout></code> | <code><callout icon="fa fa-building" color="blue" title="Mit Titel Text"> und benutzerdefiniertem Icon</callout></code> |
| |
| <callout icon="fa fa-youtube-play" color="red" title="What ist Moodle LMS 4.0?">[[https://www.youtube.com/watch?v=sZxZ_YzsD_w|Hier geht es zum Video auf YouTube]]</callout> |
| <code><callout icon="fa fa-youtube-play" color="red" title="What ist Moodle LMS 4.0?">[[https://www.youtube.com/watch?v=sZxZ_YzsD_w|Hier geht es zum Video auf YouTube]]</callout></code> |
\\ | \\ |
\\ | \\ |
| |
====Bootstrap panel==== | =====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. | 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> | <grid> |
\\ | \\ |
| |
====Bootstrap grid:==== | =====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. | 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> | <grid> |
| |
<code><grid><col md="4"> | <code><grid><col md="4"> |
===== Überschrift 1 ===== | ==== Überschrift 1 ==== |
TEXT1</col><col md="4"> | TEXT1</col><col md="4"> |
===== Überschrift 2 ===== | ==== Überschrift 2 ==== |
TEXT2</col><col md="4"> | TEXT2</col><col md="4"> |
===== Überschrift 3 ===== | ==== Überschrift 3 ==== |
TEXT3</col></grid></code> | TEXT3</col></grid></code> |
---- | ---- |
\\ | \\ |
| |
==== Weitere Elemente ==== | ===== Weitere Elemente ===== |
| |
| ==== Quickmenü für eine Artikel-Serie ==== |
| |
===Bootstrap button=== | Artikel-Serie: **Lehrvideos erstellen** \\ |
| <btn type="primary">[[:medienproduktion:lehrvideoproduktion|Überblick]]</btn> |
| <btn type="default">[[:medienproduktion:vorbereitung_einer_videoproduktion|Vorbereitung]]</btn> |
| <btn type="default">[[:medienproduktion:videos_aufzeichnen|Aufzeichnen]]</btn> |
| <btn type="default">[[:medienproduktion:videos_bearbeiten|Bearbeiten]]</btn> |
| <btn type="default">[[:medienproduktion:videos_komprimieren|Exportieren]]</btn> |
| <btn type="default">[[medienproduktion:umsetzungsbeispiele|Umsetzungsbeispiele]]</btn> |
| <btn type="default">[[:medienproduktion:plattformen|Videos teilen]]</btn> |
| <code><btn type="primary">[[:medienproduktion:lehrvideoproduktion|Überblick]]</btn> |
| <btn type="default">[[:medienproduktion:vorbereitung_einer_videoproduktion|Vorbereitung]]</btn> ... </code> |
| ====Bootstrap button==== |
<btn type="warning" size="xs">Moodle</btn> | <btn type="warning" size="xs">Moodle</btn> |
<code><btn type="warning" size="xs">Moodle</btn></code> | <code><btn type="warning" size="xs">Moodle</btn></code> |
===Bootstrap label=== | ====Bootstrap label==== |
<btn type="warning" icon="fa fa-wikipedia-w">wiki</btn> | <btn type="warning" icon="fa fa-wikipedia-w">wiki</btn> |
<code><btn type="warning" icon="fa fa-wikipedia-w">wiki</btn></code> | <code><btn type="warning" icon="fa fa-wikipedia-w">wiki</btn></code> |
===Bootstrap badge=== | ====Bootstrap badge==== |
Einen Kurs in Moodle anlegen <badge>Einsteiger</badge> | Einen Kurs in Moodle anlegen <badge>Einsteiger</badge> |
Bedingte Herausgabe von Musterlösungen <badge>Fortgeschritten</badge> | Bedingte Herausgabe von Musterlösungen <badge>Fortgeschritten</badge> |
<code><badge>Einsteiger</badge></code> | <code><badge>Einsteiger</badge></code> |
===Bootstrap images=== | ====Bootstrap images==== |
<image shape="circle"> | <image shape="circle"> |
{{:bildalternative_blendedlearning-wiki.jpg?nolink&100x100|}} | {{:bildalternative_blendedlearning-wiki.jpg?nolink&100x100|}} |
</image> | </image> |
<code><image shape="circle">{{:bildalternative_blendedlearning-wiki.jpg?nolink&100x100|}}</image></code> | <code><image shape="circle">{{:bildalternative_blendedlearning-wiki.jpg?nolink&100x100|}}</image></code> |
===Bootstrap modal=== | ====Bootstrap modal==== |
<btn type="primary" modal="modal-remote">Vorschau der Seite "Digitale Lehrmaterialien"</btn> | <btn type="primary" modal="modal-remote">Vorschau der Seite "Digitale Lehrmaterialien"</btn> |
<modal size="lg" id="modal-remote" remote=":medienproduktion:start"></modal> | <modal size="lg" id="modal-remote" remote=":medienproduktion:start"></modal> |