Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen Revision Vorhergehende Überarbeitung Nächste Überarbeitung | Vorhergehende Überarbeitung | ||
wiki:erweiterte_formatierung_bootstrap [2021/03/25 09:28] linhardja ↷ Seite von intern:wiki nach erweiterte_formatierung_bootstrap verschoben und umbenannt |
wiki:erweiterte_formatierung_bootstrap [2023/04/24 09:23] (aktuell) Juliana Haas |
||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
- | ~~NOTOC~~ | + | |
====== 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> | ||
Zeile 22: | Zeile 22: | ||
<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> | ||
Zeile 46: | Zeile 47: | ||
\\ | \\ | ||
- | ====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> | ||
Zeile 71: | Zeile 72: | ||
<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> | ||
---- | ---- | ||
Zeile 96: | Zeile 97: | ||
\\ | \\ | ||
- | ==== 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> |