Installation

Support für TYPO3 v12 & v13

PHP 8.1 - 8.3

Bevor die EXT:t3sbootstrap installiert werden kann, müssen folgende Extensions installiert werden:

  • Container Content Elements - (container)
  • Content Defender - (content_defender)

EXT:t3sbootstrap installieren/aktivieren und das "Static Template" nach "fluid_styled_content" einbinden!

Composer support

composer require t3sbs/t3sbootstrap

Nach der Installation werden die JS- & CSS-Dateien (wenn möglich) per CDN (extern) geladen.

Alternativ kannst du die benötigten JS- & CSS-Dateien nach fileadmin oder einem Sitepackage t3sb_package auslagern.

Wenn du die Dateien in ein Sitepackage auslagern möchtest, muss die EXT:t3sb_package installiert und aktiviert sein sowie die Option “sitepackage” (unter T3sb) in der EM config aktiviert sein!

Danach muss lediglich im Planer (Scheduler) der Task (Console Command) "T3SB CDN to local" hinzugefügt und einmalig ausgeführt werden.
(Console: ./typo3cms t3sbootstrap:cdnToLocal )

Die Versionen kannst du im Konstanten-Editor unter "T3SB::CDN-SETTINGS" aktualisieren/anpassen!

Bei Bedarf kann "Custom Scss" genutzt werden!

Bildschirmfoto_2021-09-16_um_19

TypoScript Setup

Das Root-Setup sollte, nach der Installation von t3sbootstrap, kein Page-Objekt enthalten!

Bei einigen Installationen, wird standardmäßig ein Page-Objekt eingefügt - z.B.: TS-Setup:

# Default PAGE object:
page = PAGE
page.10 = TEXT
page.10.value = HELLO WORLD!

Dieses ist zu entfernen - ansonsten funktioniert t3sbootstrap nicht!

TypoScript Konstanten

Im Konstanten-Editor kannst du Anpassungen unter 
T3SB CDN - Version-Settings and Google Fonts
T3SB Image settings
T3SB OPTIMIZE-Bootstrap
& T3SB Global pages override vornehmen.

Beim erstellen und bearbeiten der T3SB-Config (BE-Modul) werden die Daten aus der Datenbank in eine Datei geschrieben.
…/T3SB/Configuration/TypoScript/t3sbconstants.typoscript
Die Datei enthält somit die Daten aus der Datenbank als Konstanten.
Diese wird am Ende der Konstanten der EXT:t3sbootstrap eingebunden.

# include Bootstraps bundle.min.js (include popper.js)
bootstrap.bundle.enable = 1

# Pagebrowser - MORE INFO: docs.typo3.org/typo3cms/TyposcriptReference/ContentObjects/Hmenu/Index.html
bootstrap.pagebrowser.enable = 0
bootstrap.pagebrowser.prevnextToSection = 1
# options: index|up|nextsection|next|prev|prevsection
# used in: page.10.dataProcessing.12 -> Page/Template.typoscript
bootstrap.pagebrowser.prevItem = prev|prevsection
bootstrap.pagebrowser.nextItem = nextsection|next
bootstrap.pagebrowser.entryLevel = 1

# enable the currently available utility colors in the BE Modul
bootstrap.config.enableUtilityColors = 1
# hints to increase the website speed in the BE Modul
bootstrap.config.enableInfo = 1

bootstrap.config.sectionMenuClass = 0

# include print template
bootstrap.print.enable = 0

# disable default CSS - t3sbootstrap.css
bootstrap.config.disableDefaultCss = 0

# back to top button
bootstrap.backToTopTitle = to top
bootstrap.backToTopClass = fa fa-chevron-circle-up fa-4x
bootstrap.backToTopForAllPages = 0

# Google fontsweights 
bootstrap.gooleFontsWeights = 300, regular, 700

# Clears the cache when the config is saved
bootstrap.extconf.clearPageCache = 1

# disable jQuery by default
bootstrap.disable.jquery = 1
# load jquery into the header if activated
bootstrap.config.jqueryHeader = 0

# disable scroll to top for accordions
bootstrap.disable.accordion.scrollToTop = 0

# Bootstrap navbar
bootstrap.navbar {
    image.defaultPath = EXT:t3sbootstrap/Resources/Public/Images/bootstrap-logo-white.svg
    image.width = 30
    image.height = 24
    image.altText = Company Logo
    # (int+) default breakpoints - same like Bootstrap (used as condition for inlineJS e.g. navbar hover)
    breakpoint {
        sm = 576
        md = 768
        lg = 992
        xl = 1200
        xxl = 1400
    }
    # (int+) subdropdown with two columns if items greater or equal
    subdropdown.twoColumns = 30
    # (boolean) page uid with search plugin - link to your search plugin
    searchboxLink = 0
    # (boolean) fe user name in navbar - if logged in
    feUserName = 0
    # Dropdown icon float right
    floatDropdownIconRight = 0
}

# Color mode toggler - only if "bootstrap.config.navbarDarkMode" is disabled
bootstrap.colorMode {
    enable = 0
    # e.g.: position-fixed bottom-0 start-0 mb-3 ms-3 | info: getbootstrap.com/docs/5.3/utilities/position/
    position = position-fixed bottom-0 end-0 mb-3 me-3
}

# style one for the submenu (0 = default)
bootstrap.submenu.styleOne = 0

# creating "Skip Links" to navigation, content or footer for barrier-free accessibility if activated (in Main.html)
bootstrap.skiplinks = 0

# remove any string (e.g. a class name) from shortcuts if in parent CE/wrapper
bootstrap.shortcutsremove =

# Color mode toggler - only if "bootstrap.config.navbarDarkMode" is disabled
bootstrap.colorMode {
    enable = 0
    # e.g.: position-fixed bottom-0 start-0 mb-3 ms-3 | info: getbootstrap.com/docs/5.3/utilities/position/
    position = position-fixed bottom-0 end-0 mb-3 me-3
}

styles.content.allowTags:= addToList( s, mark)

# in px (preset)
styles.content.textmedia.maxW = 1320
styles.content.textmedia.linkWrap.width = 1320m
styles.content.textmedia.linkWrap.height = 800m

UPDATE - Best practice

Update-Info auf v5.0.0 von älteren Versionen!
Update-Info auf v4.5.5 von älteren Versionen!
Update-Info auf v5.3.20 von älteren Versionen!

Upgrade Wizard:
v5.3.20 - UpgradeWizard - FA icon Migration für Iconpack & “Expandet Content” nach Backend-Layouts
v5.3.3 - BgOpacityUpgradeWizard - change settings from e.g. 80 to 0.8 - Wizard wurde in v5.3.13 entfernt!
v5.1.5 - t3sbs_carousel migrate image -> assets (Local-Video und "original image" in Carousel) - Wizard wurde in v5.3 entfernt!
v5.0.0 - Hiermit werden die eingesetzten Utility-Classes umbenannt (INFO) - Wizard wurde in v5.3 entfernt!
v4.5.5 - Migrate tx_gridelements to tx_container - Wizard wurde in v5 entfernt!