Bootstrap

Aus mediawiki.herrmayr.de
Version vom 20. April 2022, 16:11 Uhr von Christian.mayr (Diskussion | Beiträge)
(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)

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]

Screenshot eines Buttons aus einem moodle-Kurs

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/