Das erforderliche Site Set "T3S Bootstrap - MAIN SETTINGS” ist einzubinden.
dependencies: typo3/fluid-styled-content
    Hiermit wird typo3/fluid-styled-contentautomatisch eingebunden!

Folgende Sets sind optional:

Konstanten

T3S Bootstrap - MAIN SETTINGS

T3SB Templates

Path of Fluid LayoutsPfad zu den Layoutsbootstrap.view.layoutRootPath
Path of Fluid PartialsPfad zu den Partialsbootstrap.view.partialRootPath
Path of Fluid TemplatesPfad zu den Templatesbootstrap.view.templateRootPath

T3SB CDN, SCSS and Google Fonts

Nach einer Änderung muss der Scheduler-Task ausgeführt werden, um die erforderlichen Dateien in das Asset-Verzeichnis zu schreiben – standardmäßig typo3temp/assets/t3sbootstrap/, seit 5.3.59 über die Extension-Konfiguration assetDirverlegbar!

Enable CDNBitte die „DSGVO“ („DSGVO“) beachten.
Bevor CDN deaktiviert werden kann, den Scheduler-Task „T3SB CDN to local“ ausführen.
Abwägung lokal gegen CDN und was bei geleertem typo3temp/ passiert: Deployment & typo3temp.
bootstrap.cdn.enable
Enable Custom SCSSDen Scheduler-Task „T3SB Custom SCSS” einmalig ausführen.
Bevor „Enable Custom SCSS” aktiviert werden kann, muss „Enable CDN” deaktiviert werden.
bootstrap.cdn.customScss
Bootswatch ThemesDen Scheduler-Task „T3SB CDN to local” und „T3SB Custom SCSS” ausführen, wenn „Custom SCSS” aktiviert ist.
Überschreibe die Standardwerte von Bootstrap mit dem ausgewählten Bootswatch-Theme – Info: https://bootswatch.com/
bootstrap.cdn.bootswatch
ENTFÄLLT Keep Bootstrap variablesMit 5.3.57 ersatzlos gestrichen und wird ignoriert – die Einstellung kann aus der Site-Konfiguration entfernt werden.
Sie sollte die SCSS-Datei vor dem Scheduler-Task schützen, hat das aber nie gehalten: beim Speichern im Backend wurde die Datei trotzdem aus dem Konfigurations-Datensatz überschrieben. Quelle ist heute allein der Datensatz – Einzelheiten und das Vorgehen beim Update unter BE Modul.
bootstrap.cdn.keepVariables
Comma separated list with google fontsDen Scheduler-Task „T3SB CDN to local” ausführen.
Integriere Google Fonts „DSGVO”-konform lokal in deiner Website (z. B.: Montserrat, Fira Sans).
bootstrap.cdn.googlefonts
Font-weights for Google fontsDen Scheduler-Task „T3SB CDN to local” ausführen.bootstrap.gooleFontsWeights

5.3.50 Der Scheduler-Task schreibt die Dateien nicht mehr in EXT:t3sb_package/, sondern nach typo3temp/assets/t3sbootstrap/ – seit 5.3.59 über assetDir verlegbar. Am Ablauf ändert sich nichts.

jQuery

Disable jQuery (true by default)Diese Option deaktivieren, wenn jQuery benötigt wird.bootstrap.disable.jquery
Load jQuery into the headerjQuery im Header laden.bootstrap.config.jqueryHeader

T3SB Image settings

Set Cookie with viewport widthNützlich bei Verwendung des Containers „fluid-container” und automatischer Bildbreite.bootstrap.image.viewportWidthCookie

Default Image Size

Min. widthWenn diese Option aktiviert ist, wird die minimale „equalMediaWidth“ auf 575px und damit auf 100 % Breite auf Mobilgeräten festgelegt. Kann überschriebne werden!bootstrap.image.minimumWidth
RatioWenn aktiviert, verwenden Sie Breite und Höhe für das Verhältnis in Textmedien, Textbildern, Bildern, Karten und Medienobjekten.bootstrap.image.ratioWithHeight
Max. image width Media objectDie Standard-Maximalbreite für das Medienobjekt.bootstrap.image.maxWidthMediaObject
Max. image width ToastDie Standard-Maximalbreite für Bootstrap-Toasts.bootstrap.image.maxWidthToast
Disable auto rowDie Standardeinstellung „Gallery row width in % = auto“ wird bei Aktivierung auf „none“ gesetzt.bootstrap.image.disableAutoRow

Additional image sizes

(srcset) das für jedes Inhaltsbild generiert werden sollte

For Desktop min-width 1200pxDurch Kommas getrennte Liste der Bildbreiten, angegeben in Pixeln.bootstrap.image.srcsetDesktop
For for Tablet min-width 576pxDurch Kommas getrennte Liste der Bildbreiten, angegeben in Pixeln.bootstrap.image.srcsetTablet
For Mobile max-width 575pxDurch Kommas getrennte Liste der Bildbreiten, angegeben in Pixeln.bootstrap.image.srcsetMobile
For Background-ImageDurch Kommas getrennte Liste der Bildbreiten, angegeben in Pixeln.bootstrap.image.bgMediaQueries

Lazyloading Threshold

Threshold for Lazy loadWenn „lazyLoad” in der EM-Konfiguration aktiviert ist, der Abstand außerhalb des Ansichtsfensters, in Pixel, vor dem mit dem Laden der Bilder begonnen werden soll.bootstrap.image.lazyLoadThreshold
Lazy load for images in the BG-WrapperJedoch nicht für “backgrond-images”bootstrap.image.lazyLoadBgWrapperImage

T3SB Optimize Bootstrap

Nur sinnvoll mit „Custom SCSS“: Wer eine Komponente abwählt, lässt ihren @import aus dem kompilierten CSS heraus und spart Dateigröße. Nach jeder Änderung den Scheduler-Task t3sbootstrap:customScss ausführen.

progress, tooltip, popover und placeholders werden von t3sbootstrap selbst nicht verwendet.

tables bootstrap.optimize.tables
forms bootstrap.optimize.forms
buttons bootstrap.optimize.buttons
transitions bootstrap.optimize.transitions
dropdown bootstrap.optimize.dropdown
button-group bootstrap.optimize.button-group
nav bootstrap.optimize.nav
navbar bootstrap.optimize.navbar
card bootstrap.optimize.card
accordion bootstrap.optimize.accordion
breadcrumb bootstrap.optimize.breadcrumb
pagination bootstrap.optimize.pagination
badge bootstrap.optimize.badge
alert bootstrap.optimize.alert
progressvon t3sbootstrap nicht verwendetbootstrap.optimize.progress
list-group bootstrap.optimize.list-group
close bootstrap.optimize.close
toasts bootstrap.optimize.toasts
modal bootstrap.optimize.modal
tooltipvon t3sbootstrap nicht verwendetbootstrap.optimize.tooltip
popovervon t3sbootstrap nicht verwendetbootstrap.optimize.popover
carousel bootstrap.optimize.carousel
spinners bootstrap.optimize.spinners
offcanvas bootstrap.optimize.offcanvas
placeholdersvon t3sbootstrap nicht verwendetbootstrap.optimize.placeholders

T3SB Other

Zusätzliche Einstellungen, die zuvor nicht im Konstanten-Editor enthalten waren

Miscellaneous

Include Bootstraps bundle.min.js bundle.min.js (include popper.js) anstelle von 2 Dateienbootstrap.bundle.enable
Add class "section-index" zu jedem Inhaltselement – Wird in einigen seltenen Fällen verwendetbootstrap.config.sectionMenuClass
Disable default CSS - t3sbootstrap.css bootstrap.config.disableDefaultCss
Disable Fontawesome CSS - t3sb-fontawseome.css bootstrap.config.disableFaCss
Clears the cacheWenn T3SB config gespeichert wirdbootstrap.extconf.clearPageCache
Disable scroll to top for accordions bootstrap.disable.accordion.scrollToTop
creating "Skip Links" to navigation, content or footerFür barrierefreien Zugang, wenn aktiviert (in Main.fluid.html)bootstrap.skiplinks
Remove any string from shortcuts Entfernt alle Zeichenfolgen aus shortcuts, wenn diese sich in einem übergeordneten CE/Wrapper befinden.bootstrap.shortcutsremove
Style one for the submenu bootstrap.submenu.styleOne
Enable color mode togglerNur wenn „bootstrap.config.navbarDarkMode” deaktiviert istbootstrap.colorMode.enable
Position-fixed bottom-0 start-0 mb-3 ms-3Info: https://getbootstrap.com/docs/5.3/utilities/position/#center-elementsbootstrap.colorMode.position

Pagebrowser

MORE INFO: https://docs.typo3.org/typo3cms/TyposcriptReference/ContentObjects/Hmenu/Index.html#special-browse

Enable Pagebrowser bootstrap.pagebrowser.enable
Prev and next navigationWenn diese Option aktiviert ist, springen die Navigationen „Zurück“ und „Weiter“ zum nächsten Abschnitt, wenn das Ende der Seiten im aktuellen Abschnitt erreicht ist.bootstrap.pagebrowser.prevnextToSection
Prev itemOptionen: index|up|nextsection|next|prev|prevsectionbootstrap.pagebrowser.prevItem
Next itemOptionen: index|up|nextsection|next|prev|prevsectionbootstrap.pagebrowser.nextItem
Entry Level bootstrap.pagebrowser.entryLevel

Back to top button

Link Title bootstrap.backToTopTitle
ClassFont Awesome HTML classbootstrap.backToTopClass
Iconpack ClassWenn EXT:iconpack aktiviert istbootstrap.backToTopIconpack
Back to top icon for all pages bootstrap.backToTopForAllPages

Navbar

No link title in the navbar links bootstrap.navbar.noLinkTitle
DEPRECATED Navbar brand image pathNur wirksam, wenn navbar_image im Konfigurations-Datensatz leer istbootstrap.navbar.image.defaultPath
DEPRECATED Navbar brand image widthIn px – nur wirksam, wenn navbar_image_width im Konfigurations-Datensatz 0 istbootstrap.navbar.image.width
DEPRECATED Navbar brand image heightIn px – nur wirksam, wenn navbar_image_height im Konfigurations-Datensatz 0 istbootstrap.navbar.image.height
DEPRECATED Navbar brand image alt textNur wirksam, wenn navbar_image_alt im Konfigurations-Datensatz leer istbootstrap.navbar.image.altText
Default small breakpoint (sm)Benötigt für inlineJS, z. B. bei navbar hoverbootstrap.navbar.breakpoint.sm
Default medium breakpoint (md)Benötigt für inlineJS, z. B. bei navbar hoverbootstrap.navbar.breakpoint.md
Default large breakpoint (lg)Benötigt für inlineJS, z. B. bei navbar hoverbootstrap.navbar.breakpoint.lg
Default extra large breakpoint (xl)Benötigt für inlineJS, z. B. bei navbar hoverbootstrap.navbar.breakpoint.xl
Default extra extra large breakpoint (xxl)Benötigt für inlineJS, z. B. bei navbar hoverbootstrap.navbar.breakpoint.xxl
Subdropdown with two columns if items greater or equal bootstrap.navbar.subdropdown.twoColumns
Page UID with search pluginLink zu deinem Search-PlugInbootstrap.navbar.searchboxLink
Fe user name in navbar - if logged in bootstrap.navbar.feUserName
Dropdown icon float right bootstrap.navbar.floatDropdownIconRight

5.3.51 Das Brand-Logo wird jetzt im Konfigurations-Datensatz gepflegt, Tab „Brand (Logo)“: dort stehen neben dem Pfad auch Bildbreite, Bildhöhe und Alternativtext. Die vier Einstellungen bootstrap.navbar.image.* bleiben als Rückfall bestehen und greifen nur noch, solange das jeweilige Feld im Datensatz leer bzw. 0 ist – bestehende Installationen sehen nach dem Update also unverändert aus.

Zu tun: Die drei neuen Felder brauchen eine Datenbankanalyse (neue Spalten navbar_image_width, navbar_image_height, navbar_image_alt). Wer seine Werte bereits hier in den Site-Settings stehen hat, holt sie mit dem Upgrade Wizard „Move the navbar brand image settings into the configuration record“ in die Datensätze – alle vier, den Pfad eingeschlossen. Einzelheiten unter BE Modul.

Die vier Einstellungen tragen im Settings-Editor deshalb jetzt DEPRECATED im Titel.

Global pages override

Container (for the whole page) bootstrap.pages.override.container
Aside columns width bootstrap.pages.override.smallColumns
Dropdown menu right bootstrap.pages.override.dropdownRight
Aside order on mobile bootstrap.pages.override.mobileOrder
Breakpoint bootstrap.pages.override.breakpoint
Title colorHex color codes, RGB or CSS variables e.g. var(--bs-primary)bootstrap.pages.override.titlecolor
Subtitle colorHex color codes, RGB or CSS variables e.g. var(--bs-primary)bootstrap.pages.override.subtitlecolor

T3SB - Version-Settings

Für CDN und den Scheduler-Task „T3SB CDN to local“ verwendete Versionen könne hier angepasst werden – müssen gültig sein:

Bootstrapbootstrap.bundle.min.js, bootstrap.min.js & bootstrap.min.csshttps://getbootstrap.com/
Popper JSpopper.jshttps://popper.js.org/
Masonry JSmasonry.pkgd.min.jshttps://getbootstrap.com/
jQuery libraryjquery.min.jshttps://jquery.com/
Lazyloadlazyload.min.jshttps://github.com/
Animate CSS: animate.compat.cssanimate.compat.csshttps://animate.style
Baguette Box: baguetteBox.min.cssbaguetteBox.min.js & baguetteBox.min.csshttps://feimosi.github.io/
HalkaboxhalkaBox.min.js & halkaBox.min.csshttps://ahmednooor.github.io/
G Lightboxglightbox.min.js & glightbox.min.csshttps://github.com/
Jarallaxjarallax.min.js & jarallax-video.min.jshttps://github.com/
Swiperswiper-bundle.min.js & swiper-bundle.min.csshttps://swiperjs.com

Dieses Set wird nur benötigt, wenn zusätzlich EXT:content_blocks im Einsatz ist. Es hat keine eigenen Einstellungen.

Die Felder von t3sbootstrap – Padding, Margin, „extra class“ und Hintergrund – hängen per addToAllTCAtypes an tt_content und stehen im Formular eines Content Blocks deshalb ohnehin schon. Ausgewertet wurden sie bisher aber nur in den Content-Elementen von t3sbootstrap: dafür sorgt der BootstrapProcessor, und der lief allein unter lib.contentElement.

Das Set hängt ihn zusätzlich an lib.contentBlock, von dem jedes Content Block erbt:

lib.contentBlock {
    dataProcessing {
        5 < lib.contentElement.dataProcessing.5
        6 < lib.contentElement.dataProcessing.224
    }
}

Die Nummern liegen bewusst unter 10: dort hängt EXT:content_blocks seinen eigenen Prozessor ein und ersetzt dabei data durch ein ContentBlockData-Objekt. Die beiden Prozessoren greifen auf data wie auf ein Array zu und müssen davor laufen.

Im frontend.html eines Content Blocks stehen damit dieselben Variablen wie in den Templates von t3sbootstrap:

{classAttr}fertiges class="…" aus Padding, Margin und „extra class“
{styleAttr}fertiges style="…" aus Hintergrundfarbe und „extra style“
{styleInline}derselbe Stil als Regel für einen <style>-Block
{class}nur die Klassen, mit führendem Leerzeichen
{trimClass}dieselben Klassen ohne führendes Leerzeichen
{header}Klassen und Ausrichtung der Überschrift
{parentCType}CType des Containers, falls das Element in einem steckt

Beispiel:

<div id="c{data.uid}"{classAttr -> f:format.raw()}{styleAttr -> f:format.raw()}>