...ein TYPO3 Fluid Tutorial - Bootstrap integrieren [003]
HTML-код
- Опубликовано: 7 фев 2025
- Nachdem wir im letzten Teil das Framework heruntergeladen und in Betrieb genommen haben, wollen wir nun das Starter Template fluidgerecht zerlegen und mit der Navigation beginnen.
Viel Spass!
Links:
Twitter Bootstrap: www.getbootstra...
![...ein TYPO3 Fluid Tutorial - das Finale (vorerst) [004]](http://i.ytimg.com/vi/HbW63NbGtjg/mqdefault.jpg)
![...ein TYPO3 Fluid Tutorial - das Finale (vorerst) [004]](/img/tr.png)
![...ein TYPO3 Fluid Tutorial - Grundlage [001]](http://i.ytimg.com/vi/KcSUzWQxfBg/mqdefault.jpg)
![... ein Typo3 Tutorial - Installation [001]](/img/1.gif)
Hätte doch mal ne frage zu dem Tutorial - ich habe alles nachgebaut und bei mir wird leider die link class nicht ausgegeben - die ul class schon..mache ich da was verkehrt im Backend mit den Seiten? in der nav.ts passt alles so wie es hier erklärt wird, ich habe also keine Menüpunkte und kann es mir nicht erklären
Hallo Oliver, bitte entschuldige die späte Rückmeldung. Ein Analyse aus der Ferne ist leider recht schwierig ohne den genauen Aufbau Deiner Seite zu kennen oder den Code gesehen zu haben. Wenn Du magst, und der Fehler noch besteht, kannst Du mir Deinen Code an daniel(at)danielmacht.de senden und ich gucke mal ob mir etwas auffällt.
Es könnte an den pageIDs liegen. Wenn im TypoScript die falsche pageID hinterlegt ist hast Du den falschen Einstiegspunkt.
schöne Grüße
Daniel
@@danielmacht8733 Danke für deine Antwort - mittlerweile habe ich eine andere lösung gefunden ohne Link class... siehe hier lib.topnav = HMENU
lib.topnav {
1 = TMENU
1 {
#expAll =1
wrap = |
noBlur = 1
NO = 1
NO {
wrapItemAndSub = |
stdWrap.htmlSpecialChars = 1
ATagTitle.field = title
}
ACT
... Das wäre super! Seit fast einer Woche, nach dem Update auf Typo3 7.6.4, kämpfe ich mit dem Thema Responsive mit Bootstrap.
Vielen Dank noch mal
Viele Grüße
Rosaria
+Rosaria Simari Ok ich nehme den Punkt mit auf und werde in kürze ein Video dazu veröffentlichen!
Ciao Daniel, Vielen Dank für deine arbeit ... Ich glaube es gibt eine kleine verwirrung mit dass css ... Die .min.css isst gleich an die andere Bootstrap.css, nur komprimiert.... Aldo du brauchst nicht beide ein zu binden, du köntest aber das .theme.css einbinden...
Das mit dem bootsrap.min.css und bootstrap.css ist nicht ganz richtig. Die Datei bootsrap.min.css ist einfach die minimierte bzw. die komprimierte Version der bootstrap.css Datei. Das gleiche gilt auch für die JavaScript Dateien. Folglich brauchst Du die Dateien nicht gelichzeitig einbinden. Ansonsten Super Arbeit.
Stimmt. Das wirkt sich ansonsten eigentlich nur negativ auf die Ladezeiten aus.
Erst einmal einen großen Dank für die Mühe die du dir machst mi deinen Tutorials.
Einen Hinweis hätte ich aber: die bootstrap.min.css ist einfach nur eine komprimierte Version der bootstrap.css. Kleinere Datei = kürzere Ladezeiten.
Mit der ".js" und ".min.js" verhält es sich ebenso.
+Iven Schubert Hallo Iven, danke für die Ergänzung! dqa habe ich auch noch etwas dazugelernt!
schöne Grüße
Daniel
Zur Frage, warum man beim Menü nicht mit 10 20 etc. arbeiten darf, sondern 1 2 3 etc. verwenden muss, wenn man es definiert: Es handelt sich um die Menüebene. Man fängt bei 1 an. Das ist eine Ebene unter dem entryLevel. 2 ist also zwei Ebenen unter entryLevel. Wenn man mit 10 beginnt, dann versucht TYPO3 die 10. Ebene anzuzeigen. Die gab es im Beispiel aber nicht ;-)
Hallo, zunächst vielen Dank für deine Tutorials. Leider habe ich das Problem, dass auf Mobilen Geräten die Seite normal angezeigt wird. Auf dem PC jedoch funktioniert beim verkleinern des Fensters der Wechsel auf das andere Menü (mobile-ansicht). Hast du eine Idee woran es liegen kann?
Hallo Marcelo Steinmetz, wenn ich mich richtig erinnere, dann wird das resonsive über JavaScript gesteuert/realisiert. Ggf. unterstütz der von Dir genutzte, mobile Browser das nicht oder nicht richtig. Das wäre spontan eine Erklärung oder eine Idee. Alles Andere müsste ich mir erst einmal wieder angucken. Ist jetzt doch schon etwas her =:0)
schöne Grüße
Daniel
Hallo. Danke für die Rückmeldung ich habe bereits mehrere (Mozilla, chrome) auf dem aktuellsten stand ausprobiert und erhalte das selbe FehlerBild.
Hallo Marcelo,
ich habe das jetzt mal nachgestellt. Das Problem scheint zu sein, dass Typo3 den Inhalt auf die jeweilige Seitengröße optimiert. Dadurch greift dann das JavaScript nicht mehr, da die erwartete Fenstergröße nicht unterschritten wird. Und da man die Fenster im Smartphone in der Größe ja nicht verändern kann (glaube ich) wird das Menü immer vollständig angezeigt.
Ich gucke mal, ob ich das irgendwie gelöst bekomme. Kann aber nichts versprechen.
schöne Grüße
Daniel
Vielen Dank für die Rückmeldung. Über einen Lösungsansatz oder ein alternatives Konzept würde ich mich sehr freuen. Besten Dank!!!
Joo vielen Dank. Es wäre ja auch witzlos eine Mobileansicht zu haben die aber auf Mobilengeräten garnicht angezeigt wird...Hab bis jetzt das Problen nicht lösen können. :(
guten abend
erstmal ein dickes lob =) bisher hat alles super funktioniert allerdings hänge ich an dem menü er will es mir einfach nicht anzeigen obwohl ich alles genau nach der anleitung gemacht habe ich finde einfach den fehler nicht =(
kann mir dort jemand irgendwie weiter helfen ?
Hallo Dominik Bunse,
mit welcher PHP Version und welcher Typo3 Version arbeitest Du? Es kann bei der Nutzung von PHP 7.1 zu Problemen kommen. Versuche mal, wenn Du die Zeile entryLevel=1 mit in dein TypoScript einbaust, ob dann etwas angezeigt wird.
schöne Grüße
Daniel
vielen Dank für die tolle Erklärung. Ich habe ein guten Tutor gefunden ;)
Könnte ich das Bootstrap Paket für meinen alten Template mit Merker (kein Fluid Template) benutzen?
+Rosaria Simari Hi und auch Dir danke ich für das Feedback! Klar kannst Du das Bootstrap Framework auch mit der Markermethode nutzen. Dazu musst Du dann nur das html Template von Bootstrap entsprechend mit Markern versehen, wo wir jetzt die ViewHelper genutzt haben. Bei Bedarf mache ich dazu gern noch ein kurzes Viedeo zu!
Schöne Grüße
Daniel
Hallo,
jetzt bin ich auch dabei eine Vereinsseite "responsive" zu machen und arbeite erstmal dein Tutorial durch. Super gemacht.
Ich bin gerade bei dem Schritt die Starter-Template über Typo3 anzeigen zu lassen. Aber das "rendern" der Seite geht nicht.
Im body stehen einfach die Viewhelperbefehle ohne dass es zur Ausgabe kommt:
Woran kann das liegen?
Sorry, manchmal hat man Tomaten auf den Augen. Ich habe f.render statt f:render geschrieben.
Freude - jetzt kann ich das Tutorial fortsetzen.
Ohne dich wäre ich aufgeschmissen. gibt leider nicht viele brauchbare tutorials bezüglich typo3
Hallo, danke für das Super Video, ich habe nur mal eine kleine Frage, wenn ich bei dem Menü, dem Tag eine Klasse hinzufügen will, wie setze ich das am besten um?
Hallo Carlo, danke für das Feedback! Du kanns mit dem Zusatz "ATagParams = " die Menüdefinition erweitern. Wenn Du z.B. dem aktiven Menüpunkt auf der ersten Ebene die Klasse aktiv mitgeben möchtest, sähe die Zeile dann wie folgt aus:
1.ACT.ATagParams = class="aktiv"
Gleiches geht natürlich auch für den Normalzustand
1.NO.ATagParams = class="normal"
Du bist mit ATagParams aber nicht an Klassen gebunden. Du kannst hier ebenso mit ID oder auch Style arbeiten.
Ich hoffe das hilft Dir weiter =:0)
Schöne Grüße
Daniel
Hallo Daniel. Schönes Tutorial.
Die 1. im HMENU sind die LEVEL also Ebenen des Menu's und nicht frei Wählbare
OBJECT NAMEN
Deswegen geht "1."
und "10." nicht.
10.XXX Wäre der zehnte Level im Menu.
Vielen Dank! Es funktioniert!
Hallo, danke für die super Erklärungen!
Ich möchte noch eine Unterseite zum Menü hinzufügen bekomme es aber nicht hin.
Kannst du mir da weiterhelfen?
Gruß
Marco