Bootstrap

Aus mediawiki.herrmayr.de
Version vom 20. April 2022, 16:09 Uhr von Christian.mayr (Diskussion | Beiträge) (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 ü…“)
(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

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

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/