Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Symfony Grundkurs

Ein Bootstrap-Gerüst anlegen

Testen Sie unsere 2018 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Ein Bootstrap-Grundgerüst dient als Basis für die base.html.twig und lässt sich schnell einbinden. Lydia Schimpf erklärt Ihnen in diesem Video die dazu notwendigen Schritte.
07:26

Transkript

Nachdem ich nicht soviel Zeit für ein Design verwenden möchte, kommen mir fertige Versatzstücke von "Bootstrap" natürlich sehr gelegen. Ich bin also hier auf der Startseite von der deutschsprachigen Bootstrap-Seite: "holdirbootstrap.de" und wenn wir hier auf den Link "Los geht’s" klicken, bekommen wir auf der rechten Seite einen Verweis auf "Beispiele". Und hier haben wir jetzt ein paar vorgefertigte Vorlagen, und ich werde mir gleich diese Basis-Vorlage nehmen und möchte sie, als Grundlage für mein eigenes Template nehmen. Ich hole mir also mit Strg+U den Quelltext und mit Strg+A markiere ich mal den gesamten Text und mit Strg+C kopiere ich ihn mir in die Zwischenablage. Und wechsle jetzt zurück in meine "base.html.twig", weil das ist ist ja der Ort, an dem quasi all das, was auf jeder Seite auftauchen soll, zu liegen kommen sollte. Und ich füge also dieses zukünftige Template unterhalb des bestehenden Textes ein: Strg+V Und jetzt werde ich dann einfach diese einzelnen Teile vom ursprünglichen "base.html" nehmen und in das Template einbauen. Da wäre zum Beispiel mal der Titel. Mit Strg+X schneide ich ihn aus, und ersetze damit den Titel hier mit Strg+V. So. In einem nächsten Schritt kümmern wir uns hier um die "Stylesheets". Und da werden wir mal diesen ganzen Bereich hier nehmen, mit Strg+X ausschneiden und unterhalb des "Bootstrap-CSS" einfügen: Strg+V. Und in einem weiteren Schritt müssen wir schauen, dass wir jetzt zu einem vernünftigen Eintrag kommen, der dann von den Templates ausgefüllt werden kann, das heißt, die Navigation möchte ich ja behalten, die soll überall zu liegen kommen, aber hier habe ich den alles umfassenden "container", und da werde ich mal rauslöschen, was bereits drin steht. Und stattdessen so ein kleines Grundgerüst einbauen, bestehend aus einem "row"-Container und innerhalb des "row"Containers werde ich da noch einen zweiten Container anlegen, der die Spaltenstruktur vorgibt. Wobei wir mit 12 Spalten anfangen werden. So. Und in dieses umfassende Gerüst hinein können wir jetzt diesen den <body-Block legen. Mit Strg+X schneiden wir ihn aus und dann scrolle ich wieder nach unten, und werde ihn hier einfügen. Dieser <body-Block sorgt dafür, dass dann die Kind-Templates eigene Inhalte genau in diesen Bereich einfügen können. Was ich jetzt noch machen muss, ist, dass ich für’s Erste diese CSS- und JavaScript-Dateien angleichen werde, wobei ich mir da jetzt für's Erste einfach vom BootstrapCDN-Server die CDN-Dateien holen werde. Und der BootstrapCDN-Server ist erreichbar über "www.bootstrapcdn.com", und da habe ich nun auf der einen Seite einen CDN-Server, der die CSS-Dateien bereitstellt. Mit Strg+C kopiere ich mir den Link und füge ihn jetzt, statt dem Verweis auf diese Datei, ein, und ähnlich halte ich es mit dem JavaScript, wobei hier noch der JavaScript-Block liegt: Strg+X, den schneide ich aus, und ich werde ihn unterhalb des schließenden Containers, der alles umfasst, wieder einsetzen. Innerhalb dieses Blocks kommen jetzt meine JavaScript-Dateien zum Einsatz, wobei ich hier unten den Verweis auf das "bootstrap"-JavaScript (.js) hier wieder über den CDN-Server erledige. Mit Strg+C hole ich mir jetzt auch diesen zweiten Link, und kann damit diese ursprüngliche Quellenangabe ersetzen: Strg+V. So, wenn ich jetzt noch ein bisschen die Navigation anpasse, dann sollte es das eigentlich fast sein. Ich habe hier noch ein paar Angaben, die jetzt nicht wirklich wichtig sind. Zum Beispiel habe ich noch kein Starter-Template. Das ist nicht so das Drama. Aber hier könnte ich noch ein paar Anpassungen machen. Der Projekttitel ist "Putzplan" und hier lasse ich mal alles noch beim Alten. Eins habe ich noch vergessen. Ich muss hier diese ehemalige Grundstruktur auch noch entfernen, weil sonst hätte ich sie ja doppelt. Aber dann kann ich mit Strg+S für's Speichern sorgen, und muss jetzt eigentlich in meiner "index.twig" nur noch dafür sorgen, dass ich auch tatsächlich dieses "base.html.twig" einbinde und das habe ich schon mal vorgegeben im "default"-Verzeichnis, wo ja ebenfalls eine "index.html.twig" liegt und hier sehen Sie den Twig-Befehl für das Einbinden der "base.html". Mit Strg+C kopiere ich ihn mir und in meine eigene "index" einfügen. Sehr viel mehr brauche ich hier in meiner "index" noch nicht. Das Einzige was ich jetzt noch machen muss, ist, dass ich auf diese "index"-Datei auch tatsächlich verweise. Und das mache ich fürs Erste über den ursprünglichen Controller. Da habe ich noch meinen alten Text. Den werde ich entfernen. Dann muss ich nämlich nur noch hier die Pfadangabe anpassen. Statt des "default"-Verzeichnisses gibt’s ja jetzt mein "plan"-Verzeichnis. Mit Strg+S speichere ich und werde hier die Seite neu laden. Und durch die Veränderung sehen Sie, dass das Einbinden von Bootstrap relativ zügig, gut funktioniert hat.

Symfony Grundkurs

Steigen Sie in die moderne und flexible PHP-Entwicklung mit dem praktischen Framework ein.

2 Std. 35 min (34 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:18.01.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!