Bootstrap … it’s magic ;-)

Was ist das Bootstrap? Und was hat das mit moodle zu tun?

Bootstrap ist ein freies Frontend-CSS-Framework. Es enthält auf HTML und CSS basierende Gestaltungsvorlagen für Typografie, Formulare, Buttons, Tabellen, Grid-Systeme, Navigations- und andere Oberflächengestaltungselemente sowie zusätzliche, optionale JavaScript-Erweiterungen.

Das Standard-Thema Boost nutzt Bootstrap für die Darstellung, aber das wäre ja nur eine unbewusste Nutzung. Tatsächlich kann man Bootstrap-Klassen auch innerhalb von eigenen Text-Elementen nutzen. Dieser Artikel gibt dazu einen kleine Einführung.

 Verbesserung der Tabellen-Darstellung

Auf die Möglichkeiten der Bootstrap-Klassen bin ich über ein Video des moodle-Trainers Dag Klimas gekommen.

Hier wird gezeigt, wie mit kurzen Einträgen zu Klassen in dem <table>-Tag, das Aussehen der Tabellen relativ schnell geändert werden kann. Verwiesen wird unter dem Video auf die Dokumentations-Seite zu Bootstrap, die die Inhalte des Videos zusammenfast.

Weitere Möglichkeiten

Wenn man sich auf der Dokumentations-Seite umschaut, findet man weitere Ideen mit HTML-Tags, von denen ich schon vorher ein paar kennengelernt habe. Alles in allem gibt es da so viele Möglichkeiten … fast wie Zylinder, aus dem man mal schnell etwas herauszaubern kann.

Um es auszuprobieren und vor allem um zu schauen, ob das auch so wie angegeben funktioniert, ist bei den meisten Nutzungs-Ideen ein Code vorgegeben. Man kann den kopieren und dann zum Beispiel in einer Textseite einfügen.

Allerdings … bei meinen Versuchen hat nicht alles geklappt. Das kann natürlich an unterschiedlichen Versionen liegen, denn die Bootstrap-Bibltiothek entwickelt sich weiter. Und vielleicht hat das Boost-Theme, dass wir auf den moodle in Rheinland-Pfalz nutzen, eine „ältere“ Version.

Trotzdem lohnt es sich mal reinschauen, was es da gibt. Einiges lässt sich sicher gebrauchen.

Bootstrap Grid

Für mich recht wichtig ist eine Atto-Erweiterung mit der ich Bilder nebeneinander platzieren und mit einer Beschriftung versehen kann. Für diese Zwecke wurden früher Tabellen verwendet, allerdings sind die nicht responsive, d.h. bei einem schmalen Bildschirm muss man eventuell scrollen, um alles in der Tabelle zu sehen.

Das Bootstrap-Grid bietet die Funktionalität, Spalte zu definieren, die sich bei schmalem Bildschirm untereinander anordnen. Für den Atto-Editor gibt es ein Plugin, durch das man einige vordefinierte Spalten-Kombinationen automatisch erzeugen kann.

Ich nutze solche Spalten um mehrere Bilder nebeneinander anzuordnen. Teilweise auch als eine Art Gallerie. Aber auch, um Text neben einem Bild anzuzeigen. Das kann ich natürlich auch einfach machen, indem ich ein Bild rechts ausrichte, allerdings hat die Variante mit dem Bootstrap-Grid den Vorteil, dass das Bild bei zu schmalem Display dann hinter dem Text angeordnet wird. Außerdem kann ich so Abschnitte besser trennen, denn nur der Text, den ich in das Grid schreibe, wird auch tatsächlich neben dem Bild platziert. Lasse ich das Bild von Text umfließen kann ich das nicht steuern.

 

Außerdem … da weiß ich aber ehrlich gesagt nicht, ob das von dem Bootstrap-Grid kommt … die Bilder in diesen Spalten passen sich sehr flexibel an. So gebe ich meist eine Größe an, die sozusagen die maximale Größe darstellt. Ist der Bildschirm breiter, so gibt die angegebene Größe des Bildes die tatsächliche Größe vor. Wir das Browser-Fenster schmaler,  so passt sich das Bild an die Breite der Spalten an. Leider wird dann auf die gleiche Breite skaliert, die Höhe kann man leider nicht vorgeben.

Das Plugin liefert übrigens sechs verschiedene Varianten an Spalten-Aufteilungen. Schon mal nicht schlecht, aber das Bootstrap-Grid ist eigentlich wesentlich flexibler. Insgesamt sind 12 Spalten vordefiniert und rein theoretisch kann man beliebige Vielfache dieser Zwölftel-Spalten als Breiten nutzen. Natürlich kann man, nachdem man sich eine Vorlage über den Werkzeug-Knopf eingefügt hat, in den HTML-Modus wechseln und dann den Code anpassen. Für zwei Spalten lautet er übrigens:

<div class="atto_bsgrid container-fluid">
   <div class="row-fluid">
    <div class="col-md-6 span6">
        <p>Spalte 1</p></div>
    <div class="col-md-6 span6">
        <p>Spalte 2</p></div>
   </div>
</div>

Mit dem Wissen, dass 12 Spalten maximal vorgesehen sind, kann man die Zahl „6“ verstehen. Hier werden quasi jeweils 6 von 12 Spalten genommen und daher hat man jeweils die Hälfte. Wenn man nun probiert, ob das mit anderen Zahlen funktioniert, etwa …

<div class="atto_bsgrid container-fluid">
   <div class="row-fluid">
    <div class="col-md-5 span5">
        <p>Spalte 1</p></div>
    <div class="col-md-7 span7">
        <p>Spalte 2</p></div>
   </div>
</div>

… dann ist das leider nicht so ganz erfolgreich Hintergrund ist sicher, dass hier Klassen verwendet werden, die nicht den Original-Bootstrap-Grid-Klassen entsprechen sondern von dem Plugin vorgegeben sind. Die bewirken übrigens auch, dass die Spalten in der Bearbeitungsansicht mit einem gestrichelten Rahmen versehen werden, dass hilft, sich zu orientieren, wo man gerade beim Schreiben ist.

Selbst wenn man nicht das Atto-Plugin installiert hat, kann man das Bootstrap Grid System​ nutzen, denn wie schon vorher angesprochen, sind die Klassen ja da. Ich habe eine Seite gefunden, die die Ideen ausführlich erklärt (Bootstrap Grid System auf w3schools.com) . Da lernt man auch was das „md“ bedeutet und findet man den Code, wie man beliebige Spaltengrößen definieren kann.

So kann man dann auch Einteilungen in 5 : 3 : 4 vornehmen:

   <div class="container">
      <div class="row">
         <div class="col-sm-5" style="background-color:yellow;">
            <p>Lorem ipsum...</p>
         </div>
         <div class="col-sm-3" style="background-color:pink;">
            <p>Sed ut perspiciatis...</p>
         </div>
         <div class="col-sm-4" style="background-color:yellow;">
            <p>Lorem ipsum...</p>
         </div>
      </div>
   </div>

Und noch mehr?

Es gilt auf jeden Fall, noch mal ein wenig in den Möglichkeiten zu stöbern. Wer noch mehr Input sucht: ich habe gerade eben erst festgestellt, dass die Seite von w3schools, auf die ich wegen dem Grid-System verwiesen habe, Bestandteil eines Bootstrap-Tutorials ist. Im Nachhinein scheint es mir fast übersichtlicher zu sein als die Bootstrap-Dokumentations-Seite. Man bekommt Beispiel-Code und kann auf speziellen Seiten sowohl den Code testen als auch ändern um zu schauen, wie sich das auswirkt.

Zusammenfassend kann man sagen, dass der HTML-Editor in moodle ein extrem wertvolles Werkzeug ist, wenn man sich traut den HTML-Code anzuschauen. Dennoch sollte man mal erwähnen, dass der der erzeugte Code manchmal echt fürchterlich ist 😉