Große Fußstapfen | erste Versuche mit Bootstrap

**Spelmann** · 22.02.2016, 17:49

Drei Seiten habe ich inzwischen mit Contao realisiert und das CMS hat mein Herz gewonnen.
Nun möchte ich's ein bisschen doller!

Composer installiert. Hui, das war holprig!! Bis auf Metamodels scheint aber alles geklappt zu haben.
Auch [contao-bootstrap] (also das Neue, nicht die legacy), habe ich installiert.
Nicht als Bundle (da macht STRATO nicht mit), sondern in Teilen.
Diese Erweiterung wartet nun darauf entdeckt zu werden.
Und wartet, und wartet, und ..., na ihr versteht schon.

Eine Navigation habe ich dank des Videos von Netzmacht zwar hinbekommen.
Für alles Weitere stehen aber eher Fragen im Raum:

Wie verwende ich das GRID?
Wie setze ich ein solches Konstrukt um:

HTML-Code:

<div class="row">
    <div class="col-md-2">Inhaltselement</div>
    <div class="col-md-4">Inhaltselement</div>
    <div class="col-md-6">Inhaltselement</div>
</div>

lege ich da ein eigenes Template an und arbeite mit Inserttags oder geht das smarter?
Ein Feld wie hier beschrieben finde ich in meiner Installation nicht.
Gehört der Elementtyp Spaltenumschlag mit Umschlag Anfang- und Ende sowie Spalte Anfang- und Ende zu Contao 3.5.6 oder zu Bootstrap?

CSS
In allen Anleitungen die ich gefunden habe, werden CSS- und JS-Files über assets/irgendwas... eingebunden.
In meinem Fall liegen die Dateien aber unter:

Code:

composer/vendor/components/bootstrap/css/ (bzw.) /js/

Hab ich da was bei der Installation falsch gemacht?

Was in dem Zusammenhang aber wichtiger ist, wo konfiguriere ich die CSS?
Unter oberem Pfad, oder lege ich eine eigene an und überschreibe da die betreffenden Styles?

Das sind erstmal meine brennendsten Fragen. Wenn mich da jemand auf den richtigen Weg schubsen könnte, wär das Klasse!

**konabi** · 23.02.2016, 10:53

Hallo,

Wie verwende ich das GRID?
Wie setze ich ein solches Konstrukt um:
HTML-Code:

<div class="row">
<div class="col-md-2">Inhaltselement</div>
<div class="col-md-4">Inhaltselement</div>
<div class="col-md-6">Inhaltselement</div>
</div>

lege ich da ein eigenes Template an und arbeite mit Inserttags oder geht das smarter?
Ein Feld wie hier beschrieben finde ich in meiner Installation nicht.
Gehört der Elementtyp Spaltenumschlag mit Umschlag Anfang- und Ende sowie Spalte Anfang- und Ende zu Contao 3.5.6 oder zu Bootstrap?

Den Menüpunkt zum Konfigurieren von Spaltensets findest Du im Backend unter Layout.
Dein Spaltenset könnte dann so aussehen: 2016-02-23_11h09_43.png

Damit Du das Spaltenset nutzen kannst benötigst Du entwender die Erweiterung "sematec_html5" oder "Subcolumns"

Anbei ein beispiel wie Du das Spaltenset mit Hilfe von "sematec_html5" in einem Artikel verenden kannst: 2016-02-23_11h16_30.png

Und hier die Konfiguration der sematec_html5 Elemente für Reihe (row) und Spalte:

row: sematec_html_row.png
spalte: sematec_html_spalte.png

Ähnlich funktioniert das mit Subcolumns. Subcolumns kann man dann auch in Formularen verwenden, sematec_html5 nicht.

CSS
In allen Anleitungen die ich gefunden habe, werden CSS- und JS-Files über assets/irgendwas... eingebunden.
In meinem Fall liegen die Dateien aber unter:
Code:

composer/vendor/components/bootstrap/css/ (bzw.) /js/

Hab ich da was bei der Installation falsch gemacht?

Die css und js Dateien habe ich auch so eingebunden.
Vieleicht ein Fehler in der Anleitung?

Was in dem Zusammenhang aber wichtiger ist, wo konfiguriere ich die CSS?
Unter oberem Pfad, oder lege ich eine eigene an und überschreibe da die betreffenden Styles?

Ich habe eine eigene css Datei erstellt und diese dann hinter der bootstrap.css eingebunden um vorhande Klassen zu überschreiben oder eigene Klassen zu definieren.
Ich denke das ist auch so der gängige Weg.

Ansonsten bin ich letzte Woche über die selben Fragen gestolpert wie Du als ich mit bootstrap und conta angefangen habe.

Also sollten wir gemeinsam schauen eine Dokumentation zu erstellen.
Hallo,

Wie verwende ich das GRID?
Wie setze ich ein solches Konstrukt um:
HTML-Code:

<div class="row">
<div class="col-md-2">Inhaltselement</div>
<div class="col-md-4">Inhaltselement</div>
<div class="col-md-6">Inhaltselement</div>
</div>

lege ich da ein eigenes Template an und arbeite mit Inserttags oder geht das smarter?
Ein Feld wie hier beschrieben finde ich in meiner Installation nicht.
Gehört der Elementtyp Spaltenumschlag mit Umschlag Anfang- und Ende sowie Spalte Anfang- und Ende zu Contao 3.5.6 oder zu Bootstrap?

Den Menüpunkt zum Konfigurieren von Spaltensets findest Du im Backend unter Layout.
Dein Spaltenset könnte dann so aussehen: 2016-02-23_11h09_43.png

Damit Du das Spaltenset nutzen kannst benötigst Du entwender die Erweiterung "sematec_html5" oder "Subcolumns"

Anbei ein beispiel wie Du das Spaltenset mit Hilfe von "sematec_html5" in einem Artikel verenden kannst: 2016-02-23_11h16_30.png

Und hier die Konfiguration der sematec_html5 Elemente für Reihe (row) und Spalte:

row: sematec_html_row.png
spalte: sematec_html_spalte.png

Ähnlich funktioniert das mit Subcolumns. Subcolumns kann man dann auch in Formularen verwenden, sematec_html5 nicht.

CSS
In allen Anleitungen die ich gefunden habe, werden CSS- und JS-Files über assets/irgendwas... eingebunden.
In meinem Fall liegen die Dateien aber unter:
Code:

composer/vendor/components/bootstrap/css/ (bzw.) /js/

Hab ich da was bei der Installation falsch gemacht?

Die css und js Dateien habe ich auch so eingebunden.
Vieleicht eun Fehler in der Anleitung?

Was in dem Zusammenhang aber wichtiger ist, wo konfiguriere ich die CSS?
Unter oberem Pfad, oder lege ich eine eigene an und überschreibe da die betreffenden Styles?

Ich habe eine eigene css Datei erstellt und diese dann hinter der bootstrap.css eingebunden um vorhande Klassen zu überschreiben oder eigene Klassen zu definieren.
Ich denke das ist auch so der gängige Weg.

Ansonsten bin ich letzte Woche über die selben Fragen gestolpert wie Du als ich mit contao-bootstrap angefangen habe.

Also Community, wir sollte schauen dass wir eine Dokumention fertig stellen!
https://community.contao.org/de/show...-Dokumentation

Grüße
Sven

**Spelmann** · 25.02.2016, 11:13

Hi konabi,
vielen Dank für die Mühe die Du dir gemacht hast.

Ich würde gern an der Doku mitwirken. Ich kann komplexe Inhalte ganz gut beschreiben, allerdings muss ich sie dafür selbst erstmal verstehen und davon bin ich bei contao Modulen in Teilen noch weit entfernt.
Meistens sind dann andere schneller in der Hilfestellung. Texte vereinfachen und didaktisch aufbereiten kann ich aber gut, da kann ich auf alle Fälle helfen. Ich habe jedoch noch nie an einer Doku mitgearbeitet, weiß also nix über den Workflow.

**konabi** · 03.03.2016, 07:22

Hallo Spelmann,
die Dokumentation ist in reStructuredText geschrieben und nutzt Sphinx. Verwaltet wird das Projekt als Git-Repository.
Ich denke viele werden bei der Idee an der Doku mitzuwirken davor abgeschreckt sich mit Sphinx und Git beschäftigen zu müssen.

Deshalb mein Angebot: Wenn jemand an der Doku arbeiten möchte kann er mir seinen Text und seine Screenshots zusenden.
Ich würde das ganze dann in reStructuredText umsetzen und ins Git-Repository einbringen.

Mittlerweile habe ich mal als Anfang den Grid-Editor in der Doku beschrieben:
http://contao-bootstrap.readthedocs....id-editor.html

(Sollte man das jetzt in den Bereich "Contao-Bootstrap Dokumentation" verschieben?)

Grüße Sven

**webstar** · 04.03.2016, 09:39

Zitat von konabi

Hallo Spelmann,
die Dokumentation ist in reStructuredText geschrieben und nutzt Sphinx. Verwaltet wird das Projekt als Git-Repository.
Ich denke viele werden bei der Idee an der Doku mitzuwirken davor abgeschreckt sich mit Sphinx und Git beschäftigen zu müssen.

Deshalb mein Angebot: Wenn jemand an der Doku arbeiten möchte kann er mir seinen Text und seine Screenshots zusenden.
Ich würde das ganze dann in reStructuredText umsetzen und ins Git-Repository einbringen.

Mittlerweile habe ich mal als Anfang den Grid-Editor in der Doku beschrieben:
http://contao-bootstrap.readthedocs....id-editor.html

(Sollte man das jetzt in den Bereich "Contao-Bootstrap Dokumentation" verschieben?)

Grüße Sven

Ich habe den Beitrag mal in den Dokumentations-Thread kopiert: https://community.contao.org/de/show...-Dokumentation

**Spelmann** · 07.03.2016, 12:54

Deshalb mein Angebot: Wenn jemand an der Doku arbeiten möchte kann er mir seinen Text und seine Screenshots zusenden.
Ich würde das ganze dann in reStructuredText umsetzen und ins Git-Repository einbringen.

Das ist ein tolles Angebot von Dir.

Im meinem laufenden Projekt habe ich keine Luft, nebenher zu dokumentieren. Ich glaube mein momentaner Workaround aus Überschreibungen der bootstrap.css ist auch alles andere als elegant und nicht würdig an andere weitergereicht zu werden

.
Im Anschluss des Projekts setze ich mich nochmal ohne Zeittdruck ran und bastel ein Beispiel in dem ich dann auch alle möglichen Fallen und Fehlschritte mitbeschreiben kann. Ist ja mein erstes Mal mit bootstrap überhaupt. Ich brauch ein bisschen, bis ich alles verstehe (immer wieder auftauchende Überhänge über den container z.B.).

**Webbaumeister** · 07.03.2016, 15:46

Ich verwende Bootstrap mit Contao ohne dieses Plugin.

Es braucht dafür gar nicht so viel (zumindest für die Verwendung des Grids).

Folgendes musste ich anpassen:

Bootstrap-CSS und -JS-Dateien im Layout einbinden
Template mod_article anpassen, siehe unten
Bei jedem Inhaltselement eine Col-Klasse hinzufügen (col-md-12)

Code:

//Template mod_article
<article class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
    <div class="container">
	<div class="row">
...
// und am Ende schliessen