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/01/14 16:43] linhardja ↷ Seitename wurde von intern:wiki_konvetionen auf intern:wiki geändert |
wiki:erweiterte_formatierung_bootstrap [2023/04/24 09:23] (aktuell) Juliana Haas |
||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
- | ====== Blended Learning Wiki Konventionen ====== | ||
- | ===WRAP alerts: important info alert help todo download tip=== | ||
- | <code><wrap tip> TEXT<wrap></code> | ||
- | <wrap tip>TEXT</wrap> | ||
- | <code><WRAP tip>TEXT</WRAP></code> | ||
- | <WRAP tip>TEXT</WRAP> | ||
- | <code><WRAP center 60% tip>TEXT</WRAP></code> | ||
- | <WRAP center 60% tip>TEXT</WRAP> | ||
- | ===WRAP columns=== | + | ====== Erweiterte Formatierung mit Bootstrap ====== |
- | <WRAP group> | + | Mit einem Klick auf den Code in einem grauen Kasten wird dieser direkt in die Zwischenablage kopiert. |
- | <WRAP column half> | + | =====Bootstrap callout===== |
- | ===== Überschrift 5 ===== | + | 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. |
- | 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. | + | <callout>Das ist ein Callout.</callout> |
- | </WRAP> | + | <code><callout>Das ist ein Callout.</callout></code> |
- | <WRAP column half> | + | ---- |
- | ===== Überschrift 5 ===== | + | Mit der Ergänzung **%%type="info"%%** können 5 vorgefertige Farben verwendet werden, **%%icon="true"%%** aktiviert das entsprechende Icon<grid> |
- | 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. | + | <col md="3"><callout type="info" icon="true">info</callout></col> |
- | </WRAP></WRAP> | + | <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 callout: default primary success info warning danger question tip=== | + | <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 type="warning" icon="true">TEXT</callout></code> | + | <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 type="warning" icon="true">TEXT</callout> | + | \\ |
- | <code><callout type="warning">TEXT</callout></code> | + | \\ |
- | <callout type="warning">TEXT</callout> | + | |
- | <code><callout icon="fa fa-building" color="blue" title="TITEL TEXT"> TEXT </callout></code> [[https://fontawesome.com/v4.7.0/icons/]] | + | =====Bootstrap panel===== |
- | <callout icon="fa fa-building" color="blue" title="TITEL TEXT"> TEXT </callout> | + | 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. |
- | ===Bootstrap warning=== | + | <grid> |
- | <code><alert type="warning" icon="fa fa-warning">**Warning!** Better check yourself, you're not looking too good.</alert></code> | + | <col md="2"><panel type="primary" title="Panel title">primary</panel></col> |
- | <alert type="warning" icon="fa fa-warning">**Warning!** Better check yourself, you're not looking too good.</alert> | + | <col md="2"><panel type="success" title="Panel title">success</panel></col> |
- | ===Bootstrap panel=== | + | <col md="2"><panel type="info" title="Panel title">info</panel></col> |
- | <code><panel type="warning" title="Panel title" subtitle="Panel subtitle" icon="fa fa-warning"> | + | <col md="2"><panel type="warning" title="Panel title">warning</panel></col> |
- | Panel content | + | <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></code> | ||
- | <panel type="warning" title="Panel title" subtitle="Panel subtitle" icon="fa fa-warning"> | + | <panel type="warning" title="Mit Titel" subtitle="und Untertitel" icon="fa fa-warning"> |
- | Panel content | + | und benutzerdefiniertem Icon</panel> |
- | </panel> | + | |
+ | \\ | ||
+ | \\ | ||
- | ===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. | ||
- | <code><grid> | + | <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">TEXT1</col> | ||
<col md="4">TEXT2</col> | <col md="4">TEXT2</col> | ||
<col md="4">TEXT3</col> | <col md="4">TEXT3</col> | ||
</grid></code> | </grid></code> | ||
+ | ---- | ||
+ | Im Grid können alle anderen Elemente angeordnet werden wie Überschriften, Bilder, Panel, Callouts, etc | ||
<grid><col md="4"> | <grid><col md="4"> | ||
- | ===== Überschrift 5 ===== | + | ===== Überschrift 1 ===== |
TEXT1</col><col md="4"> | TEXT1</col><col md="4"> | ||
- | ===== Überschrift 5 ===== | + | ===== Überschrift 2 ===== |
TEXT2</col><col md="4"> | TEXT2</col><col md="4"> | ||
- | ===== Überschrift 5 ===== | + | ===== Überschrift 3 ===== |
TEXT3</col></grid> | 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> | <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> | ||
---- | ---- | ||
- | <grid><col md="9">große Spalte</col><col md="3">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 ===== | ||
+ | ==== Quickmenü für eine Artikel-Serie ==== | ||
+ | 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> | ||
+ | <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> | ||
- | =====todo===== | ||
- | <code>Put this into the file conf/entities.local.conf: | ||
- | (see also https://www.dokuwiki.org/entities) | ||
- | ~~hideeditbutton~~ <style> \#dokuwiki__pagetools li.edit { display: none; } </style> | ||
- | And this into the wiki page: ~~hideeditbutton~~ | ||
- | Tested with Greebo, default template</code> |