Contao 4.9.2 und Bootstrap Navigation

Druckbare Version

13.04.2020, 20:29
falke2020

Contao 4.9.2 und Bootstrap Navigation

Hallo zusammen,

ich bin neu in der Contao-Gemeinde und versuche mich an einem ersten kleinen Testprojekt mit Contao.

Als erste Hürde steht die Navigation auf der To-Do-Liste. Nach vielem Lesen in Foren etc. würde ich mich mit der Bootsrap-Navigation beschäftigen. Installation der Erweiterungen (Bootstrap Bundle) ist erledigt. Ich bin bisher wie folgt vorgegangen:

1. Klassische Navigation in den Modulen erzeigt.
2. Bootstrap-Navigationsleiste in den Modulen erzeugt und hier die Navigation aus Punkt 1 als Modul angegeben.
3. Im Theme ein Layout (Typ=Bootstrap) angelegt und bei den Frontend-Modulen eingebunden (Kopfzeile)

Nun passiert weiter nichts; es wird das alte klassische Menü angezeigt. Im Seitenquelltext der Seite (head) ist auch von einer Referenz auf Bootstrap-Ressourcen nichts zu sehen. Irgendwas mache ich falsch - aber ich komm nicht dahinter. Kann mir jemand helfen ?

Beste Grüße,
der Falke
14.04.2020, 11:04
falke2020

Man musste wohl erst noch die bootstrap-sourcen hochladen und als externe Stylesheets zuordnen.
Aber so richtig schick ist das trotzdem alles nicht. Ich dachte man könnte sich das einfach zusammenklicken. Leider weit gefehlt. Es gibt auch irgendwie keine richtigen Dokumentationen, wo das step by step erklärt wird, was zu tun ist. Für alte Hasen im Contao sicher kein Problem, für Neulinge sieht das schon nach einer Herausforderung aus, ein schickes Layout auf die Beine zu stellen.
14.04.2020, 11:41
lucina

Ich finde es prima, die Bootstrap-Daten selbst zu verwalten, denn es ermöglicht dabei auch, nur das zu nutzen was eine Seite auch benötigt.

Darüber hinaus ist doch Bootstrap selbst hinreichend dokumentiert, oder? All die Komponenten in Contao funktionieren prinzipiell so, dass Du ihnen entsprechende CSS-Klassen zuweist. Mehr braucht es im Regelfall nicht.

Die Doku für die Navigation findest Du übrigens hier:
https://getbootstrap.com/docs/4.0/components/navs/
https://getbootstrap.com/docs/4.0/components/navbar/
14.04.2020, 19:49
falke2020

Danke für die Antwort.

Ja, die Dokus von Bootstrap sind mir hinreichend bekannt. Und in einem normalen HTML-Editor habe ich eine umwerfende Navigation in kürzester Zeit erstellt. Ich meinte mit Doku, wie man Bootstrap vernünftig mit Contao "verheiratet". An welcher Stelle müssen welche Klassen hinterlegt werden ? Muss evtl. ein Template angepasst werden ? Ich zumindest bekommt mit Contao + Bootstrap auch nach Stundenlangen versuchen nicht mal halbwegs eine vernünftige Navigation auf die Reihe. Leider. Werde aber erstmal noch nicht aufgeben und bin für weitere Hinweise dankbar.
15.04.2020, 06:58
lucina

Puh, am besten in einem kurzen Beitrag hier, ja?

;-)

Das Contao-Bootstrap-Bundle bringt eine Menge Dinge mit. Es gibt eine Komponente für das Seitenlayout, mit der man recht flexibel die gewünschten Seitenbreiche einrichten kann und dabei auch entscheidet, ob sie Full-Width oder als Container gerendert werden. Es gibt Navigationscontainer, denen Klassen zugewiesen werden können und Navigationsmodule, die in die Navicontainer gepackt werrden können und dann ebenfalls per CSS-Klasse angesprochen und formatiert werden können.

Wie das dann ausschaut kannst Du prinzipiell mit Deiner Einbindung des Bootstrap (S)CSS entscheiden. Da wäre die Möglichkeit, entweder das komplette Paket einzubinden oder einen Custom Build zu machen und den dann zu verwenden.

Für Grids gibt es ein eigenes Theme-Modul, das dann seinen Niederschlag in Spaltensets finden kann.

Ich persönlich finde das superflexibel, aber halt nicht zum Zusammenklicken. Wie das prinzipiell funktioniert kannst Du unter https://contao-bootstrap.readthedocs.io/de/latest/ nachlesen. Eine kleine Einführung habe ich vor zwei Jahren auf dem WKE in Erlangen gehalten, die findest Du unter http://wke2018.kikmedia.org/.

Ich denke, dass David (der die Extension gebaut hat) dazu auch einen Vortrag auf der Contao-Konferenz 2018 gehalten hat. Den Link dazu müsste ich jetzt auch googeln, und ich denke, das Du das auch kannst.
15.04.2020, 10:02
falke2020

Liste der Anhänge anzeigen (Anzahl: 6)

Und nochmals vielen Dank :-)

Ich war natürlich nicht untätig, und habe schon viel gegooogelt. Beide von dir genannten Links habe ich schon angeschaut. Aber immer wenn es spannend wird, hört die Info auf :-) Im ersten Link z. B. wie folgt (siehe Screenshot Anhang). Deine Präsentation verrät auch schon einiges und gibt Basiswissen mit. Schon mal sehr gut ! Leider wird es dann aber auch nicht so richtig konkret, so das man erstmal den Einstieg findet. Also, um konkret zu werden, ich möchte testweise eine Navigation nach der Vorlage im Anhang einbauen (Nav-Contao-template.html). Ich bin wir folgt vorgegangen:

- Ich habe in Contao die Seitenstruktur angelegt.
- Dann ein Modul für klassische Navigation erstellt.
- Dann ein Modul für Bootstrap-Navigation erstellt und das klassische hier eingefügt.
- Dann ein Seitenlayout (Bootstrap) erstellt und das Modul für Bootstrap-Navigation in die Kopfzeile eingefügt.
(Entsprechend hier als externes Stylesheet und Java die Bootsrap-Ressourcen aktiviert und JQuery aktiviert.)

Das Ergebnis (siehe Anhang) ist nicht das gewünschte :-) Allerdings bin ich mir auch unsicher, wo jetzt welche Klassen eingetragen werden müssen. Daher wäre ein konkretes Beispiel (vielleicht 2-3 Screenshots zu den Modulen/Seitenlayout) eine super Sache.

Grüße.....
15.04.2020, 15:56
fiedsch

Hast Du im Seitenayout unter "Seitentemplate" "fe_bootstrap" gewählt?
15.04.2020, 18:30
falke2020

Jap. Und für die Navigation auch das Template nav_navbar.
15.04.2020, 20:21
webstar
HTML-Code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

Du verwendest Bootstrap 3.4.1 und nicht Bootstrap 4, git was due extension ausgelegt ist. ;-)

Vom Grundsatz arbeitet die Erweiterung sehr eng an dem, was Contao sonst auch macht. Wenn dir Contao gut vertraut ist, findest du dich in der Regel schnell zu recht.

Ein paar Grundansätze:
- Wenn Templateanpassungen notwendig sind, wird ein separates Templates zur Verfügung gestellt, dass dann ausgewählt werden muss. Somit sind nicht alle Themes bei einem Multidomainbetrieb betroffen
- Bei neu zur Verfügung gestellten Elementen/Modulen ist die Auswahl des Tempaltes prinzipbedingt nicht notwendig
- Die Doku basiert auf den Stand von Contao Bootstrap v1 (Bootstrap 3) und ist veraltet und unvollständig. Initiativen die Mitarbeit an der Dokumentation zu fördern sind gescheitert. Daher wird sich in absehbarer Zeit nichts ändern.
Gerade Anwender, die sich in die Erweiterung eingearbeitet haben, wären prädestiniert Anleitungen zu schreiben. Da diese über Fragen und Probleme stolpern, die ich als Entwickler der Erweiterung und jemand, der mir Software explorativ aneignet, nicht sehen werde.
16.04.2020, 11:16
falke2020

Hallo,

das mit Bootstrap 4 war schon mal ein guter Tipp, es hat sich was verändert. Schön sieht es aber immer noch nicht aus. In die Klassenfelder in Contao kann ich einstellen was ich will, da verändert sich nichts.

Wie oben schon kurz erwähnt, ist mir Contao noch nicht so vertraut. Ich bin so zu sagen Anfänger. Wobei ich glaube, das ich das Grundprinzip des Systems verstanden habe. Aber manche Dinge sind schon sehr unverständlich bzw. ohne Anleitung, die einen da heranführen, kaum zu meistern. Schade.

Ich weiß ja nicht, wie die Contao-Gemeinde so tickt - aber wenn ihr neue Leute dazu haben wollt, muss eben das ein oder andere nachvollziehbar dokumentiert werden. Was ja nicht ausarten muss. Aber zumindest ein paar Schritte, wie man überhaupt irgendwas zum Laufen bekommt. In diesem Falle z. b. die einfachsten Dinge, das die Sourcen von Bootstrap mit als externes Stylesheet eingebunden werden müssen. Ich hätte als Einsteiger jetzt gedacht, die Erweiterung bringt alles mit. Und wundere mich, das nichts funktioniert. Für einen alten Hasen wohl logisch, das das so sein muss. Für mich war das nicht logisch. In irgendeinem YouTube Video habe ich zufällig gesehen, das jemand die Bootstrap-StyleSheets dort eingebunden hat. Aha. Da habe ich echt lange gesucht - die einfachsten Sachen stehen leider nirgends.

Vielleicht hat ja jemand, der das schonmal zum Laufen gebracht hat, Lust hier ein paar Screenshots einer Beispielkonfiguration zur Verfügung zu stellen (von den Modulen und dem Layout).

Beste Grüße,
der Falke.
16.04.2020, 12:13
webstar
Zitat:

Zitat von falke2020

Ich weiß ja nicht, wie die Contao-Gemeinde so tickt - aber wenn ihr neue Leute dazu haben wollt, muss eben das ein oder andere nachvollziehbar dokumentiert werden. Was ja nicht ausarten muss. Aber zumindest ein paar Schritte, wie man überhaupt irgendwas zum Laufen bekommt.

Die Contao-Community tickt so wie viele Communities. Es sind wenige die geben, viele die nehmen. Und manche nehmen und fordern. Dass die Situation verbesserungswürdig ist, keine Frage. Helfende Hände sind immer willkommen. Wie schon in diesem Thread erwähnt habe ich auf der CK 2018 ein Vortrag gehalten und die Erweiterung grob vorgestellt, siehe https://contao-bootstrap.de/neuigkei...renz-2018.html

Zitat:

Zitat von falke2020

In diesem Falle z. b. die einfachsten Dinge, das die Sourcen von Bootstrap mit als externes Stylesheet eingebunden werden müssen. Ich hätte als Einsteiger jetzt gedacht, die Erweiterung bringt alles mit. Und wundere mich, das nichts funktioniert. Für einen alten Hasen wohl logisch, das das so sein muss. Für mich war das nicht logisch. In irgendeinem YouTube Video habe ich zufällig gesehen, das jemand die Bootstrap-StyleSheets dort eingebunden hat. Aha. Da habe ich echt lange gesucht - die einfachsten Sachen stehen leider nirgends.

Guter Hinweis, werde ich bei Gelegenheit mit auf die Homepage aufnehmen. Nirgends ist hier auch nicht korrekt, da hier ein Blick in die betagte Doku doch geholfen hätte:
- https://contao-bootstrap.readthedocs...trap-framework
- https://contao-bootstrap.readthedocs...ok/assets.html
16.04.2020, 12:15
derRenner

Zitat:

Zitat von falke2020

Wie oben schon kurz erwähnt, ist mir Contao noch nicht so vertraut. Ich bin so zu sagen Anfänger. Wobei ich glaube, das ich das Grundprinzip des Systems verstanden habe. Aber manche Dinge sind schon sehr unverständlich bzw. ohne Anleitung, die einen da heranführen, kaum zu meistern. Schade.

Hallo,
als Neueinsteiger bei Contao verstehe ich dein Anliegen - aber hier hilft, wie bei vielen andern grossen CMS natürlich auch viel Recherche, Dokus lesen, Forum lesen, Beiträge und Fragen im Speziellen fragen, ... etc.
'ohne Anleitung' ? » https://docs.contao.org/ ... hier gibt's eine wunderbare Doku, die dich in Contao zurecht finden lässt

Zitat:

Zitat von falke2020

Ich hätte als Einsteiger jetzt gedacht, die Erweiterung bringt alles mit. Und wundere mich, das nichts funktioniert. Für einen alten Hasen wohl logisch, das das so sein muss. Für mich war das nicht logisch. In irgendeinem YouTube Video habe ich zufällig gesehen, das jemand die Bootstrap-StyleSheets dort eingebunden hat. Aha. Da habe ich echt lange gesucht - die einfachsten Sachen stehen leider nirgends.

auch hierzu sei vermerkt, dass es eine Doku gibt ... vielleicht nicht vollständig, aber dass das Bootstrap Framework selbst eingebunden werden muss steht schon da :D
Bootstrap Framework einbinden

Mein Tipp:
alles was du dir jetzt durch Lesen, Try & Error, Erfragen, Recherche etc. aneignest hilft dir im Umgang mit Contao viel weiter. Im Speziellen Zusammenhänge erkennen ... und dann weisst du auch mal irgendwann wie die Contao-Gemeinde so tickt ;)
17.04.2020, 10:45
falke2020
Zitat:
Zitat von webstar

Guter Hinweis, werde ich bei Gelegenheit mit auf die Homepage aufnehmen. Nirgends ist hier auch nicht korrekt, da hier ein Blick in die betagte Doku doch geholfen hätte:

https://contao-bootstrap.readthedocs...trap-framework
https://contao-bootstrap.readthedocs...ok/assets.html
In der Tat - Mein Fehler - Der Absatz ist mir durch die Lappen gegangen.
17.04.2020, 10:49
falke2020

Zitat:

Zitat von derRenner

Mein Tipp:
alles was du dir jetzt durch Lesen, Try & Error, Erfragen, Recherche etc. aneignest hilft dir im Umgang mit Contao viel weiter. Im Speziellen Zusammenhänge erkennen ... und dann weisst du auch mal irgendwann wie die Contao-Gemeinde so tickt ;)

Ja, da hast du sicherlich recht. Nur wenn man "Ewigkeiten" keinen Schirtt weiterkommt, ist das immer do deprimierend :-) Also ich werde mal fröhlich weiter kämpfen und zur Not das Forum hier befragen. Vielleicht gibt's ja noch einen Screenshot zum Navigationsproblem :-)