Layout einrichten

Ähnlich wie Layouts mit dem Contao Layout-Builder können mit Contao-Bootstrap Layouts einfach im Backend definiert werden. Anstelle der Höhe und Breite des Layouts werden Klassen angegeben. Auf diese Art kann das Gridsystem von Bootstrap angewandt werden.

Es wird weiterhin das Holy-Grail Layout verwendet, sodass Sie gegebenenfalls mit den pull- und push- Klassen die Spalten verschieben müssen.

 

Die CSS-Klassen für Header und Footer werden in der dem .inside Element hinzugefügt, während die Spaltenklassen den äußeren Div-Elementen hinzugefügt wird.

Eigene Layoutbereiche

Bootstrap für Contao erweitert die eigene Layoutfunktion von Contao. Statt alle eigenen Layoutbereiche einer Position zuzuweisen, können diese flexibel den Positionen zugewiesen werden. Außerdem kann dabei das Template ausgewählt werden, die das Rendering des Layoutbereichs beeinflusst. Auf diese Art und Weise wird der Jumbotron Bereich von Bootstrap implementiert.

Seitentemplate

Damit die Layoutoptionen von Contao-Bootstrap zur Verfügung stehen, muss das Template fe_bootstrap ausgewählt werden.

Bootstrap Assets installieren

Anders als die Vorgängerversion netzmacht/contao-bootstrap ist die jetzige Version Bootstrap für Contao unabhängig von den Bootstrap Assets. Sie können daher selbst bestimmen, auf welche Art und Weise Sie die Pakete installieren können.

Ich empfehle die gewünschten Bootstrap Assets über Composer zu installieren. Somit können Sie leicht Updates installieren. Dabei bieten sich folgende Paketquellen an:

  • components/bootstrap (Components Paket)
  • twbs/bootstrap (offizielles Release)

Aufgrund einer Limitation von Contao können Dateien aus composer/vendor bzw. assets nicht direkt als Stylesheet-Dateien eingebunden werden. Entweder arbeiten Sie mit manuellen Header-Tags oder arbeiten mit Theme+.

Importieren

Setzen Sie Theme+ ein und vermissen die bisherige Import-Version, können Sie netzmacht/contao-theme-plus-importer einsetzen. Die Core-Komponente von Contao-Bootstrap interagiert mit dem Importer und stellt alle Assets aus den Quellen assets/components/bootstrap bzw. composer/vendor/twbs/bootstrap zur Verfügung.

Konfiguration anpassen

Die Beschreibung basiert auf einer manuellen Anpassung der Konfiguration. Inzwischen gibt es auch die Möglichkeit bequem im Backend viele Einstellungen unter Themes > Bootstrap Konfiguration vorzunehmen. Dies ist noch nicht dokumentiert.

Bootstrap von Contao ist von Grund auf modular, erweiterbar und konfigurierbar angelegt. Viele der integrierten Funktionen lassen sich anpassen, deaktivieren oder erweitern.

Manche Einstellungen können über das Backend vorgenommen werden (z.Z. nur die Auswahl des Icon-Sets). Die meisten Einstellungen erschließen sich jedoch erst über die Konfigurationsdateien. Der Core von Contao-Bootstrap scant alle Modulordner nach einer config/onfig-bootstrap.php Datei. Diese gibt ein Array zurück, das zur Konfiguration hinzugefügt wird.

<?php
// system/modules/example/bootstrap-config.php
return array(
    // change the config here
);

Möchten Sie die Konfiguration überschreiben, so sollten sie in der autoload.ini das entsprechende Modul angeben, sodass Ihr Modul als letztes geladen wird.

# system/modules/example/config/autoload.ini

# reuire templates module to override template settings
requires[] = "bootstrap-templates"

Spaltenlayout der Formulare anpassen

Ein Beispiel der Anpassungsmöglichkeiten ist das Spaltenlayout des horizontalen Layouts. Sie können bestimmen, wie die Spalten gesetzt werden sollen.

Dazu müssen Sie zum einen die Abhängigkeit in der autoload.ini setzen sowie die Konfiguration in der contao-bootstrap.php anpassen.

# system/modules/example/config/autoload.ini

requires[] = "bootstrap-form"
<?php

return array(
	'form' => array(
		'horizontal' => array(
			// width of label
			'label'   => 'col-lg-3',
			// width of form control 
			'control' => 'col-lg-9',
			// offset used if no label used
			'offset'  => 'col-lg-offset-3',
		),
	),
);

Konfigurationen in der initconfig.php

Bisher wurde die Änderung der Konfiguration über ein eigenes Modul beschrieben. Weiterhin ist es möglich die Konfiguration über Contaos system/config/initconfig.php anzupassen. Da diese Datei geladen wird nachdem die Konfiguration initiiert wurde, müssen Sie direkt auf die Konfiguration zugreifen.

<?php

use Netzmacht\Bootstrap\Core\Bootstrap;

$config = Bootstrap::getConfig();

// set a single var
$config->set('form.horizontal.label', 'col-lg-3');

// merge an config array
$config->merge(array(
		// width of form control 
		'control' => 'col-lg-9',
		// offset used if no label used
		'offset'  => 'col-lg-offset-3',
	),
	// optional path, where to merge into
	'form.horizontal'
);