wiki:erweiterte_formatierung_bootstrap

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
wiki:erweiterte_formatierung_bootstrap [2021/03/25 09:28]
linhardja
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>​
  • wiki/erweiterte_formatierung_bootstrap.1616660892.txt.gz
  • Zuletzt geändert: 2021/03/25 09:28
  • von linhardja