Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- wiki:erweiterte_formatierung_bootstrap [2021/01/14 16:43]
linhardja ↷ Seite von bl_intern:wiki nach intern:wiki_konvetionen verschoben und umbenannt
+++ wiki:erweiterte_formatierung_bootstrap [2023/03/29 15:31]
Stefan Reichert [Bootstrap callout]
@@ 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]]</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]]</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 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.
-<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>
+----
+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:===
 <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>