Bootstrap: Unterschied zwischen den Versionen
(Die Seite wurde neu angelegt: „Bootstrap ist ein Webdesign-Framework, auf dem moodle Themes basieren. Dadurch lassen sich die Gestaltungsmöglichkeiten von Bootstrap, die auf https://getbootstrap.com/docs/4.6/getting-started/introduction/ dokumentiert sind, unkompliziert in moodle-Kursen nutzen. === Farbige Kästen === Als wiederkehrende Elemente, z.B. für Aufgabenstellungen, Hinweise und andere "leitende" Elemente, könnten farbige Bootstrap-Kästen genutzt werden. Diese sind ü…“) |
|||
| Zeile 23: | Zeile 23: | ||
Weitere Beispiele und Informationen zu Bootstrap Buttons finden Sie hier: https://getbootstrap.com/docs/4.6/components/buttons/ | Weitere Beispiele und Informationen zu Bootstrap Buttons finden Sie hier: https://getbootstrap.com/docs/4.6/components/buttons/ | ||
[[Kategorie:Moodle]] | |||
[[Kategorie:ELearning]] | |||
[[Kategorie:Design]] | |||
Aktuelle Version vom 20. April 2022, 16:11 Uhr
Bootstrap ist ein Webdesign-Framework, auf dem moodle Themes basieren. Dadurch lassen sich die Gestaltungsmöglichkeiten von Bootstrap, die auf https://getbootstrap.com/docs/4.6/getting-started/introduction/ dokumentiert sind, unkompliziert in moodle-Kursen nutzen.
Farbige Kästen[Bearbeiten | Quelltext bearbeiten]
Als wiederkehrende Elemente, z.B. für Aufgabenstellungen, Hinweise und andere "leitende" Elemente, könnten farbige Bootstrap-Kästen genutzt werden. Diese sind über die Klasse "alerts" nutzbar.
Beispiel
<div class="alert alert-primary" role="alert">
Ein farbiger Kasten in einem blau, das in der Farb-Variable "primary" moodle-weit festgelegt ist.
</div>
Alle Beispiele zu alerts bzw. farbigen Bootstrap-Kästen finden Sie hier: https://getbootstrap.com/docs/4.6/components/alerts/
Buttons[Bearbeiten | Quelltext bearbeiten]
An vielen Stellen im moodle-Kurs bietet es sich an, Links nicht als typisch unterstrichene Texte darzustellen, sondern in Button-Optik.
Mit den Klassen btn btn-primary wandelt man einen Link in einen Button um:
<a href="#" class="btn btn-primary rounded">Anleitung im mebis Infoportal aufrufen</a>
- Die Klasse btn gibt an, dass der Link als Button angezeigt werden soll.
- Die Klasse btn-primary legt die Farbe fest.
- Die Klasse rounded gibt dem Button zeitgemäße, abgerundete Ecken.
Weitere Beispiele und Informationen zu Bootstrap Buttons finden Sie hier: https://getbootstrap.com/docs/4.6/components/buttons/