Contao-Camp 2024
Ergebnis 1 bis 14 von 14

Thema: Kann mir mal jemand Navbar und Navigation von Bootstrap erklären.

  1. #1
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.264

    Standard Kann mir mal jemand Navbar und Navigation von Bootstrap erklären.

    Hallo zusammen,

    gibts irgendwo ne Anleitung für die Nav Elemente von Bootstrap?


    Es gibt ja wohl irgendwie zwei Wege:
    • Normale Navi "Navigationsmenü" mit nav_bs.html5 oder nav_navbar Template
    • Modul "Navigationsleiste Bootstrap" (bevorzugte Variante)


    Bei Letzterem muss man aber ein anderes Modul angeben!? Was muss da rein?

    Für ich dort ein anderes Navigationsmodul ein klappt das Dropdown nicht.

    Code:
    util.js:85 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': 'test/layout.html' is not a valid selector.
        at Object.getSelectorFromElement (https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js:6:1466)
        at Function.c._getParentFromElement (https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js:6:23736)
        at c.t._getMenuElement (https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js:6:21901)
        at new c (https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js:6:19509)
        at HTMLAnchorElement.<anonymous> (https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js:6:22802)
        at Function.each (https://www.jagdbildungszentrum.de/assets/jquery/js/jquery.min.js?v=4fa9ecee:2:2573)
        at w.fn.init.each (https://www.jagdbildungszentrum.de/assets/jquery/js/jquery.min.js?v=4fa9ecee:2:1240)
        at w.fn.init.c._jQueryInterface [as dropdown] (https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js:6:22754)
        at HTMLAnchorElement.<anonymous> (https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js:6:24876)
        at HTMLDocument.dispatch (https://www.jagdbildungszentrum.de/assets/jquery/js/jquery.min.js?v=4fa9ecee:2:41772)
    Bootstrap wird per zusätzliche Head Tags nach Anleitung von Bootstrap selbst im Layout inkludiert (4.2.1/js/bootstrap.min.js & 1.14.6/umd/popper.min.js)

    Testlink: jagdbildungszentrum.de/test/textelemente.html

    VG Frank

  2. #2
    Administratorin Avatar von lucina
    Registriert seit
    19.06.2009.
    Ort
    Kiel (DE)
    Beiträge
    7.325
    Partner-ID
    152
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Das ist eigentlich ganz einfach: Die "Navigationsleiste" ist ein Container, in die Du andere Dinge hineinpacken kannst. Beispielsweise eine Navigation, die dann die entsprechenden Templates (oder halt eigene, andere, whatever) nutzt und auch Träger der gewünschten CSS-Klassen ist (die Du angeben kannst), eine Suche, ein beliebiges anderes Element.

    Die Leiste stellt also nur die Box zur Verfügung.

  3. #3
    Contao-Fan Avatar von PaddySD
    Registriert seit
    26.10.2016.
    Ort
    Andechs
    Beiträge
    656

    Standard

    Du legst folgende Module an:

    * Navigation (das ganz normale Contao-Modul)
    * Navigation Bootstrap (dort wählst Du das "normale" Nav-Modul aus, optional noch ein Suchmodul usw)

    Fertig

    Das ist dafür da, dass Du dort noch andere Komponenten einbinden kannst, z.B. eine Suche oder ein Logo, oder oder oder...

    EDIT: zu spät...

  4. #4
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.264

    Standard

    Ok, danke. Das ist soweit verständlich und so habe ich es eigentlich auch schon versucht.

    Das normale Core Navigationsmodul muss aber mit einem nav_bs.html5 verwendet werden damit die Codeausgabe für Bootstrap vorhanden ist oder? Warum funktioniert dann das Dropdown nicht?

    Es erzeugt einen JS Fehler...aber nur wenn ich nicht auf der Seite bin die innerhalb der Struktur des Dropdowns ist. Da klappt es dann auf.


    Nachtrag: Das Dropdown funktioniert wenn ich des href="test/layout.html" auf href="" ändere. Das ist aber eigentlich doof....weil der Link zur Hauptseite sollte schon gehen.

    Scheint ein Bug bei Bootstrap zu sein: https://github.com/twbs/bootstrap/issues/27903
    Geändert von Kahmoon (14.01.2019 um 19:28 Uhr)

  5. #5
    Contao-Urgestein
    Registriert seit
    29.10.2009.
    Ort
    Magdeburg
    Beiträge
    2.020
    Partner-ID
    626
    User beschenken
    Wunschliste

    Standard

    Als Ergänzung: Die Navbar-Komponente bringt das Template nav_navbar mit und ist für den Einsatz in der Navigationsleiste konzipiert. Das Template nav_bs ist Teil der Templates-Komponente und für allgemeine Navigationsmodule im Bootstrap-Stil konzipiert (funktioniert wohl trotzdem in der Navbar).

  6. #6
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.264

    Standard

    Ok, das ist allerdings etwas verwirrend dass das Template nav_navbar nicht für die Navigationsleiste sondern die Navigation selbst ist. Zumindest wenn man die Übersetzung 1zu1 zuordnet

    Wähle ich das template nav_navbar bei einer Core Navigation, ignoriert er allerdings die mitgegebenen Klassen z.B. justify-content-center bei "Bootstrap navigation classes" bzw. diese wird gar nicht mit ausgegeben. Mit nav_bs funktioniert das.
    Angehängte Grafiken Angehängte Grafiken
    Geändert von Kahmoon (15.01.2019 um 09:21 Uhr)

  7. #7
    Contao-Urgestein
    Registriert seit
    29.10.2009.
    Ort
    Magdeburg
    Beiträge
    2.020
    Partner-ID
    626
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von Kahmoon Beitrag anzeigen
    Ok, das ist allerdings etwas verwirrend dass das Template nav_navbar nicht für die Navigationsleiste sondern die Navigation selbst ist. Zumindest wenn man die Übersetzung 1zu1 zuordnet
    Naja, der Prefix "nav_" ist halt immer für die Navigationsmodule für Contao bestimmt. Die Navigationsleiste ist kein Navigationsmodul an sich, sondern der Container.

    Zitat Zitat von Kahmoon Beitrag anzeigen
    Wähle ich das template nav_navbar bei einer Core Navigation, ignoriert er allerdings die mitgegebenen Klassen z.B. justify-content-center bei "Bootstrap navigation classes" bzw. diese wird gar nicht mit ausgegeben. Mit nav_bs funktioniert das.
    Ist bekannt. Ursache ist hier die Modularisierung von contao-bootstrap. Das hinzufügen einer Navigationklasse ist ein Feature der Templates-Komponente, die nach der Navbar entstanden ist, und derzeit nur in nav_bs unterstützt. Siehe: https://github.com/contao-bootstrap/navbar/issues/12

  8. #8
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.264

    Standard

    Hmm also gleich zwei Bugs in der Navi von Bootstrap. Da muss man wohl erst al mit einer Alternative arbeiten....

  9. #9
    Contao-Urgestein
    Registriert seit
    29.10.2009.
    Ort
    Magdeburg
    Beiträge
    2.020
    Partner-ID
    626
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von Kahmoon Beitrag anzeigen
    Hmm also gleich zwei Bugs in der Navi von Bootstrap. Da muss man wohl erst al mit einer Alternative arbeiten....
    Der erste Bug ist wahrscheinlich https://github.com/twbs/bootstrap/issues/27903. Was ist der zweite?

  10. #10
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.264

    Standard

    Das Problem das du gerade genannt hast wäre der Showstopper Nr 2 :-). Aber allein schon der Erste is übel.....

    Und so wie ich das verstehe sind die Dropdown Toggler an sich nicht verlinkbar. Sprich die Überseite (Seite B) ist nur der Toggler, ist aber an sich nicht über diese Navigation erreichbar richtig?


    • Seite A
    • Seite B
      • Seite 2
      • Seite 3
    Geändert von Kahmoon (15.01.2019 um 09:35 Uhr)

  11. #11
    Administratorin Avatar von lucina
    Registriert seit
    19.06.2009.
    Ort
    Kiel (DE)
    Beiträge
    7.325
    Partner-ID
    152
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Ja, das ist bei Bootstrap nun mal so.

    Lösung für BT3: https://stackoverflow.com/questions/...able-in-navbar

    Vielleicht kannst Du das ja nachbauen, wenn Du das benötigst.
    Geändert von lucina (15.01.2019 um 10:11 Uhr) Grund: Typo

  12. #12
    Contao-Urgestein Avatar von fiedsch
    Registriert seit
    09.07.2009.
    Ort
    München
    Beiträge
    2.935

    Standard

    Zitat Zitat von Kahmoon Beitrag anzeigen
    Hmm also gleich zwei Bugs in der Navi von Bootstrap. Da muss man wohl erst al mit einer Alternative arbeiten....
    ... oder mithelfen, den Bug zu fixen ;-)
    Contao-Community-Treff Bayern: http://www.contao-bayern.de

  13. #13
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.264

    Standard

    Im Rahmen meiner Möglichkeiten gerne und immer aber das übersteigt vermutlich meine Skills

  14. #14
    Contao-Fan Avatar von Birden
    Registriert seit
    15.01.2011.
    Beiträge
    762

    Standard

    Hat sich mit Bootstrap 4 etwas daran geändert?

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •