Bootstrap

Benötigt:

        "contao-bootstrap/core": "^2.0",
        "contao-bootstrap/layout": "^2.0",
        "contao-bootstrap/navbar": "^2.0",

Backendeinstellungen

Layout

  • Layout "Typ des Layouts" auf "Bootstrap" stellen

Module für die Bootstrap navbar

  • Navigationsmenü

    • als "Navigationstemplate" nav_navbar wählen

  • Navigationsleiste (Bootstrap). Hier wird

    • unter dem Konfigurationspunkt "Module" das Navigationsmenü in die Navigationsleiste eingefügt
    • die "Toggleable size" auf md gesetzt

  • Bsp: Dunkler navbar mit eigener Hintergrundfarbe z.B. navbar-dark bg-primary als CSS Klassen im Modul "Navigationsleiste (Bootstrap)" hinzufügen (siehe auch https://getbootstrap.com/docs/4.0/components/navbar/#color-schemes)

Layout

  • Bootstrap herunterladen (https://getbootstrap.com/, wir verwenden hier die "Source files" für die SASS-Version) und in der Dateiverwaltung von Contao ablegen (hier Dateisystem: bootstrap-4.0.0). Die für uns relevanten Teile sind dann bootstrap-4.0.0/scss/* und das JS unter bootstrap-4.0.0/dist/js/bootstrap.min.js.
  • Anstelle bootstrap-4.0.0/scss/bootstrap.scss im Contao-Layout direkt einzubinden, binden wie eine selbst erstellte my_bootstrap/scss/my_bootstrap.scss ein, die dann bootstrap.scss einbindet (@import ../../bootstrap-4.0.0/scss/bootstrap";) oder nur die benötigten Teile einzeln (siehe https://getbootstrap.com/docs/4.0/getting-started/theming/)

TODOs

  • (S)CSS Anpassungen beschreiben
  • Bootstrap Grid verwenden
  • ...