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/21 16:43] linhardja |
wiki:erweiterte_formatierung_bootstrap [2023/04/24 09:23] (aktuell) Juliana Haas |
||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
- | ====== Blended Learning Wiki Konventionen ====== | ||
- | ====Bootstrap callout==== | + | ====== Erweiterte Formatierung mit Bootstrap ====== |
- | <grid> | + | Mit einem Klick auf den Code in einem grauen Kasten wird dieser direkt in die Zwischenablage kopiert. |
- | <col md="3"><callout type="primary" icon="true">primary</callout></col> | + | =====Bootstrap callout===== |
- | <col md="3"><callout type="success" icon="true">succes</callout></col> | + | 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="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="warning" icon="true">warning</callout></col> | ||
<col md="3"><callout type="danger" icon="true">danger</callout></col> | <col md="3"><callout type="danger" icon="true">danger</callout></col> | ||
Zeile 11: | Zeile 16: | ||
<col md="3"><callout type="tip" icon="true">tip</callout></col> | <col md="3"><callout type="tip" icon="true">tip</callout></col> | ||
</grid> | </grid> | ||
- | <code><callout type="warning" icon="true">TEXT</callout></code> | + | <code><callout type="warning" icon="true">Hier steht Text</callout></code> |
- | <callout type="warning" icon="true">mit Icon</callout> | + | ---- |
- | <code><callout type="warning">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 type="warning">ohne Icon</callout> | + | |
- | <code><callout icon="fa fa-building" color="blue" title="Mit Titel Text"> und benutzerdefiniertem Icon</callout></code> [[https://fontawesome.com/v4.7.0/icons/]] | + | |
<callout icon="fa fa-building" color="blue" title="Mit Titel Text"> und benutzerdefiniertem Icon</callout> | <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> | ||
+ | <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. | ||
<grid> | <grid> | ||
- | <col md="2"><panel type="warning" title="Panel title"> primary</panel></col> | + | <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="success" title="Panel title">success</panel></col> | ||
<col md="2"><panel type="info" title="Panel title">info</panel></col> | <col md="2"><panel type="info" title="Panel title">info</panel></col> | ||
Zeile 29: | Zeile 36: | ||
<col md="2"><panel type="danger" title="Panel title">danger</panel></col> | <col md="2"><panel type="danger" title="Panel title">danger</panel></col> | ||
</grid> | </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"> | <code><panel type="warning" title="Mit Titel" subtitle="und Untertitel" icon="fa fa-warning"> | ||
und benutzerdefiniertem Icon | und benutzerdefiniertem Icon | ||
Zeile 38: | 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. | ||
- | <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> | ||
- | ===Mit Überschrift und Text:=== | + | ---- |
+ | 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:=== | ===12 schmale Spalten:=== | ||
Zeile 72: | Zeile 97: | ||
\\ | \\ | ||
- | ===Bootstrap warning=== | + | ===== Weitere Elemente ===== |
- | <code><alert type="warning" icon="fa fa-warning">**Warning!** Better check yourself, you're not looking too good.</alert></code> | + | |
- | <alert type="warning" icon="fa fa-warning">**Warning!** Better check yourself, you're not looking too good.</alert> | + | |
- | \\ | + | ==== Quickmenü für eine Artikel-Serie ==== |
- | \\ | + | |
- | ====Bootstrap modal==== | + | Artikel-Serie: **Lehrvideos erstellen** \\ |
- | <btn type="primary" modal="modal-remote">Welcome to DokuWiki!</btn> | + | <btn type="primary">[[:medienproduktion:lehrvideoproduktion|Überblick]]</btn> |
- | + | <btn type="default">[[:medienproduktion:vorbereitung_einer_videoproduktion|Vorbereitung]]</btn> | |
- | <modal size="lg" id="modal-remote" remote=":medienproduktion:start"></modal> | + | <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==== | ====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> | ||
====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> | ||
====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> | ||
====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> | ||
+ | ====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> | ||
- | |||
- | |||
- | ===== Veraltet ===== | ||
- | ===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=== | ||
- | <WRAP group> | ||
- | <WRAP column half> | ||
- | === Überschrift 5 === | ||
- | 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. | ||
- | </WRAP> | ||
- | <WRAP column half> | ||
- | === Überschrift 5 === | ||
- | 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. | ||
- | </WRAP></WRAP> |