Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- wiki:erweiterte_formatierung_bootstrap [2021/01/21 16:43]
linhardja
+++ wiki:erweiterte_formatierung_bootstrap [2023/03/29 15:31]
Stefan Reichert [Bootstrap callout]
@@ 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="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>
@@ Zeile 11: / Zeile 16: @@
 <col md="3"><callout type="tip" icon="true">tip</callout></col>
 </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>
+<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]]</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]]</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>
-<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="info" title="Panel title">info</panel></col>
@@ Zeile 29: / Zeile 36: @@
 <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
@@ 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.
-<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">TEXT2</col>
 <col md="4">TEXT3</col>
 </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">
-===== Überschrift 5 =====
+===== Überschrift 1 =====
 TEXT1</col><col md="4">
-===== Überschrift 5 =====
+===== Überschrift 2 =====
 TEXT2</col><col md="4">
-===== Überschrift 5 =====
+===== Überschrift 3 =====
 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:===
@@ 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====
 <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>
-===== 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>