Was t3sbootstrap macht

t3sbootstrap bringt Bootstrap 5 als Content-Elemente in TYPO3. Statt Layouts in eigenem CSS nachzubauen, pflegst du im Backend Container, Spalten, Cards, Slider oder Akkordeons – im Frontend entsteht daraus fertiges Bootstrap-Markup.

Diese Seite ist der Einstieg in die Dokumentation. Sie folgt dem Weg, den du bei einem neuen Projekt ohnehin gehst: erst installieren, dann konfigurieren, danach Layout und Komponenten aufbauen und zum Schluss mit den Utilities feinjustieren.

Wenn du tiefer eingreifen willst: unter Fluidtemplate steht, wie du eigene Templates überschreibst. Image Rendering und WebP Support erklären die Bildausgabe, JavaScript beschreibt, welche Skripte wann geladen werden.

Jeder Abschnitt unten gibt einen Überblick über sein Thema und führt auf die ausführliche Seite. Wenn du gezielt suchst, kommst du über die Suche meist schneller ans Ziel als über die Navigation.

Filtern nach
Kategorie
Thema

Quickstart

Der schnellste Weg zu einer ersten Seite mit t3sbootstrap: Extension installieren, Site Set einbinden, T3SB Config anlegen, Backend-Layout wählen und Inhalt einfügen.

Nur das Nötigste, um t3sbootstrap schnell im Frontend zu sehen. Details stehen jeweils auf den verlinkten Seiten. Voraussetzungen: TYPO3 >= 14.3, PHP 8.2 – 8.5 1. Extension installieren composer…

RedakteurIntegrator
#Installation & Update
Mehr über Quickstart

Installation

t3sbootstrap per Composer oder Classic-Mode installieren – inkl. Site Settings, Scheduler Tasks und Bootswatch Themes.

Neu in 5.3.50 Was sich gegenüber 5.3.48 geändert hat Die wichtigste Änderung betrifft die Installation unmittelbar: EXT:t3sb_package wird nicht mehr benötigt. Alle Dateien, die t3sbootstrap selbst…

Integrator
#Installation & Update
Mehr über Installation

Konfiguration

Übersicht über alle Stellschrauben von t3sbootstrap – von der Extension Configuration über TSconfig und TypoScript bis zum Backend-Modul, den Content-Elementen und dem CKEditor.

Integrator
#Konfiguration
Mehr über Konfiguration

Weiterführende Artikel 8

  • Extension ConfigurationExtension ConfigurationAlle grundlegenden Einstellungen der t3sbootstrap Extension Manager Konfiguration im Überblick.
  • SitesSitesSite Sets und Site Settings in t3sbootstrap richtig konfigurieren – erforderliche und optionale Sets im Überblick.
  • TSconfigTSconfigVier registrierte TSconfig-Dateien in t3sbootstrap – Backend-Verhalten und Felder gezielt vorbelegen.
  • TypoScriptTypoScriptTypoScript Constants in t3sbootstrap – alle Einstellungen zentral und übersichtlich verwalten.
  • BE ModulBE ModulDas BE Modul T3SB-Config zentralisiert alle Layout- und Design-Einstellungen von t3sbootstrap im TYPO3-Backend.
  • Content-ElementeContent-ElementeAlle verfügbaren Content-Elemente von t3sbootstrap – vom New Content Element Wizard bis zu erweiterten Optionen.
  • BE LayoutsBE Layouts8 BE Layouts in t3sbootstrap – Grid-System, Breakpoints und Dropdown-Menüs einfach konfigurieren.
  • CKEditorCKEditorCKEditor 5 in t3sbootstrap: Bootstrap Utility-Klassen für Abstände, Farben und Typografie direkt im RTE nutzen.

Layout

Die beiden Bausteine, aus denen jedes Bootstrap-Layout besteht: Container legen Breite und Außenabstand fest, das Grid-System teilt den Platz darin in Zeilen und Spalten.

RedakteurIntegrator
#Grid & Layout
Mehr über Layout

Weiterführende Artikel 2

  • ContainerContainerBootstrap 5 Container-Klassen in t3sbootstrap – global oder per Content-Element individuell steuern.
  • Grid systemGrid systemBootstrap 5 Grid in t3sbootstrap: Mobile-First-Raster mit bis zu 12 Spalten über alle Viewports.

Komponenten

Die interaktiven Bausteine von Bootstrap 5 als eigene TYPO3-Content-Elemente – Buttons, Cards, Slider, Collapse, Media Object, Modal, Tabs und Toasts.

Redakteur
#Komponenten
Mehr über Komponenten

Weiterführende Artikel 8

  • ButtonsButtonsBootstrap Buttons in t3sbootstrap: Vordefinierten Stile, Kontextfarben und Größen im TYPO3-Backend konfigurieren.
  • CardsCardsBootstrap Cards in t3sbootstrap: Flexibler Content-Container mit Header, Body, Footer und Medien.
  • SliderSliderBootstrap Carousel/Slider in t3sbootstrap: Animierte Diashow mit Bildern, Videos und beliebigen Inhalten.
  • CollapseCollapseBootstrap Accordion/Collapse in t3sbootstrap: Inhalte ein- und ausblenden per Klick.
  • Media ObjectMedia ObjectBootstrap Media Object in t3sbootstrap: Bild-Text-Kombination für Blog-Posts, Kommentare und Tweets.
  • ModalModalBootstrap Modal in t3sbootstrap: Dialogfenster für Formulare, Bilder, Videos und Bestätigungen.
  • TabsTabsBootstrap Tabs & Pills in t3sbootstrap: Dynamisch zwischen Inhaltsbereichen wechseln.
  • ToastsToastsBootstrap Toasts in t3sbootstrap: Leichte Benachrichtigungen für Hinweise und Statusmeldungen.

Utilities

Bootstrap 5 Utility-Klassen in t3sbootstrap – Abstände, Farben und mehr ohne eigenes CSS anpassen.

Bootstrap 5 enthält eine breite Palette von Utility-Klassen, um z.B. die Abstände oder Farben eines Elements anzupassen. Diese Utility-Klassen können jedem Inhaltselement, jeder Überschrift und jedem…

RedakteurEntwickler
#Grid & Layout
Mehr über Utilities

Fluidtemplate

Eigene TypoScript-Libraries und Fluid-Templates per Fluidtemplate-CE in t3sbootstrap einbinden.

Mit dem CE "Fluidtemplate", kannst du z.B. eigene "TypoScript-Libraries" einbinden. Anstatt die von TypoScript generierten Inhalte den Variablen des FLUIDTEMPLATE-Objekts zuzuweisen, können…

Entwickler
#Fluid-Templates
Mehr über Fluidtemplate

Image Rendering

Bildgrößen in t3sbootstrap: Automatische Berechnung für optimales responsives Image Rendering.

Mehr Info

IntegratorEntwickler
#Bilder & Medien
Mehr über Image Rendering

WebP Support

WebP in TYPO3: t3sbootstrap unterstützt das moderne Bildformat für maximale Performance.

In aktuellen TYPO3-Installationen ist WebP mittlerweile der Standard für performante Bilder. Da WebP bei gleicher Qualität deutlich kleinere Dateigrößen als JPEG oder PNG liefert, verbessert es dein…

IntegratorEntwickler
#Bilder & Medien
Mehr über WebP Support

JavaScript

JavaScript in t3sbootstrap: Bootstrap 5 ohne jQuery – vanilla JS für moderne TYPO3-Projekte.

Mit der Version 5 wurde jQuery aus den Abhängigkeiten von Bootstrap entfernt!

IntegratorEntwickler
#JavaScript & Animation
Mehr über JavaScript
Zurück zu t3sbootstrap v5