Installation

Support für TYPO3 10 & 11

Wichtige Informationen zur Version >= 4.5.5

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

  • Container Content Elements - (container)
  • Content Defender - (content_defender)
  • SASS compiler for TYPO3 - (ws_scss) - OPTIONAL
  • Creates WebP copies for images - (webp) - OPTIONAL

Danach kann die EXT:t3sbootstrap installiert/aktiviert werden!

Die Extension Gridelements wird nicht mehr benötigt!

Composer support

composer require t3sbs/t3sbootstrap

 

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

Alternativ kannst du die benötigten JS- & CSS-Dateien nach fileadmin auslagern.
Hierfür 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!

Wenn die EXT:ws_scss geladen ist, kann "Custom Scss" genutzt werden!

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

Jetzt können noch einige Konstanten (im Konstanten-Editor) angepasst werden.

Default Settings:

bootstrap.cdn {
	# Enable CDN - please consider the "GDPR" ("DSGVO"):before CDN can be disabled, run the scheduler task "T3SB CDN to local" to write the required files to fileadmin/T3SB/Resources/Private/
	enable = 1
	# Bootswatch Themes CDN - works only without EXT ws_scss: Override default Bootstrap values with selected Bootswatch Theme (run Scheduler) - Info: bootswatch.com.
	bootswatch = 0
	# Bootstrap:
	bootstrap = 4.6.0
	# Popper js:
	popperjs = 1.16.1
	# Fontawesome:
	fontawesome = 5.15.1
	# jQuery library:
	jquery = 3.6.0
	# jQuery Easing:
	jqueryEasing = 1.4.1
	# Cookieconsent: set to 3 only to get v3.x (latest)
	cookieconsent = 3
	# Highlight: used with codesnippet
	highlight = 10.4.0
	# Lazyload:
	lazyload = 17.3.0
	# Picturefill:
	picturefill = 3.0.3
	# Viewportchecker:
	viewportchecker = 1.8.8
	# Animate CSS:
	animate = 3.7.2
	# Baguette Box:
	baguetteBox = 1.11.1
	# Ekko Lightbox:
	ekkoLightbox = 5.3.0
	# Lightcase:
	lightcase = 2.5.0
	# YouTube player - jquery.mb.YTPlayer:
	ytPlayer = 3.3.5

	# Bootstrap CSS:
	bootstrapCssIntegrity = sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2
	# Bootstrap JS:
	bootstrapJsIntegrity = sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s
	# Popper js:
	popperjsIntegrity = sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN
	# jQuery library:
	jqueryIntegrity =
	# jQuery Easing:
	jqueryEasingIntegrity =
	# Cookieconsent:
	cookieconsentIntegrity =
	# Highlight:
	highlightIntegrity =
	# Lazyload:
	lazyloadIntegrity =
	# Picturefill:
	picturefillIntegrity =
	# Viewportchecker:
	viewportcheckerIntegrity =
	# Baguette Box:
	baguetteBoxIntegrity =
	# Ekko Lightbox:
	ekkoLightboxIntegrity =
	# Lightcase:
	lightcaseIntegrity =
}

bootstrap.image {
	# Min. width: if enabled the minimum "equalMediaWidth" is set to 575px and therefore 100% wide on mobile.
	minimumWidth = 0
	# Ratio: if enabled use width and height for ratio in textmedia, textpic, image, card and media object.
	ratioWithHeight = 0
	# Max. image width Media object: the default max. width for the media object.
	maxWidthMediaObject = 200
	# Max. image width Toast: the default max. width for Bootstrap toast.
	maxWidthToast = 20
	# Disable auto row: the default "Gallery row width in % = auto" is set to "none" if activated.
	disableAutoRow = 0
	# Additional Image Sizes for Desktop min-width 1200px: comma-separated list of either image widths specified in pixels or pixel density descriptors, e. g. "2x".
	srcsetDesktop = 125, 255, 385, 576, 768, 992, 1200, 1440, 1920, 2650
	# Additional Image Sizes for Tablet min-width 576px: comma-separated list of either image widths specified in pixels or pixel density descriptors, e. g. "2x".
	srcsetTablet = 125, 255, 385, 576, 768, 992, 1200
	# Additional Image Sizes for Mobile max-width 575px: comma-separated list of either image widths specified in pixels or pixel density descriptors, e. g. "2x".
	srcsetMobile = 60, 100, 200, 385, 575
	# Threshold for Lazy load: if "lazyLoad" is activated in the EM config, the distance out of the viewport, expressed in pixel, before which to start loading the images.
	lazyLoadThreshold = 0
	# Lazy load for images in the BG-Wrapper: not the BG-image
	lazyLoadBgWrapperImage = 0
	# A responsive image polyfill: Picturefill enables support for the picture element and associated features in browsers that do not yet support them.
	picturefill = 0
}

Default Settings - nicht im Konstanten-Editor:

# 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

# disable default css & js included in ConfigProcessor->includeRequiredFiles
bootstrap.config.disableDefaultCss = 0
# enable the currently available utility colors in the BE Modul
bootstrap.config.enableUtilityColors = 1

# GTM Account ID - include the Google Tag Manager if entered and cookieconsent_status: allow
bootstrap.gtm =
# Mark the Upgrade Wizard as undone (bool) -  after activated, open the BE-Modul run the Upgrade Wizard and set constant back to "0"!
bootstrap.wizardsMarkedUndone = 0

bootstrap.navbar {
	image.defaultPath = /typo3conf/ext/t3sbootstrap/Resources/Public/Images/bootstrap-solid.svg
	image.width = 30
	image.height = 30
	image.altText = Company Logo

	# type=int+; default breakpoints - same like Bootstrap (used as condition for inlineJS e.g. navbar hover)
	breakpoint {
		sm = 576
		md = 768
		lg = 992
		xl = 1200
	}
	# type=int+; subdropdown with two columns if items greater or equal
	subdropdown.twoColumns = 30
	# type=boolean; page uid with search plugin - link to your search plugin
	searchboxLink = 0
	# type=boolean; fe user name in navbar - if logged in
	feUserName = 0
}

# enable in EM config (info: github.com/insites/cookieconsent)
bootstrap.cookieconsent {
	# info, opt-in or opt-out
	type = info
	popup.background = #000
	popup.text = #fff
	button.background = #f1d600
	button.text = #000
	# block (default), edgeless, classic
	theme = edgeless
	# top, bottom, top-left, top-right, bottom-left, bottom-right
	position = top
	message = Diese Website setzt Cookies und verwendet Google Analytics. Durch die Nutzung unserer Website erklären Sie sich damit einverstanden.
	dismiss = Info ausblenden
	allow = zulassen
	link = Mehr erfahren
	deny = Cookies ablehnen
	href = /datenschutzerklaerung/
	revokeBtn = 
	regionalLaw = false
	location = true
}

# include print template
bootstrap.print.enable = 0

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

# pages override
pages.override {
	# 1,2,3,4 or 6 (only)
	smallColumns =
	# sm,md,lg or xl (only)
	breakpoint =
}

Die folgenden Konstanten sind veraltet:

bootstrap.config {
	rootline = 1
	sectionmenuScrolling = 0
}

bootstrap.image {
	default.width.big = 825
	default.width.small = 385
	mediaScalingCorrection = 1
}
bootstrap.ext {
	form.modal = 0
	form.timeout = 5000
}
bootstrap.animateCssInlineJs =

Installation

Ab TYPO3 v.9.5.7

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

  • Grid Elements - (gridelements) ab v.9.3.0
  • SASS compiler for TYPO3 - (ws_scss) ab v.1.1.12
  • DynCss - BaseModule - (dyncss) ab v.0.8.2
  • DynCss - SCSS Parser - (dyncss_scss) ab v.1.1.1

Danach kann die EXT:t3sbootstrap (ab v4.3.4) installiert/aktiviert und unter "Statische Templates" nach Gridelements eingeschlossen werden. Das statische Template "Gridelements w/DataProcessing" darf nicht eingeschlossen werden  (s. Screenshot).

Composer support

composer require t3sbs/t3sbootstrap

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

Jetzt können noch einige Konstanten (im Konstanten-Editor) angepasst werden.

Default Settings:

bootstrap.config {
  # "T3SB Config" on subpages: if disable from rootpage or from rootline if enabled (slide).
  rootline = 1
  # Content Only On Rootpage: disable navbar, jumbotron, breadcrumb and footer on rootpage if enabled.
  contentOnlyOnRootpage = 0
  # jQuery in header: load jquery into the header if activated.
  jqueryHeader = 0
  # Fontawesome icons for Links: loads the required CSS-style for links set in the RTE
  faLinkIcons = 1
  # Compress: compress and concatenate JS and CSS.
  compress = 1	
  # Disable Prefix Comment:
  disablePrefixComment = 1
  # Left Aside Slide: content slide for colPos=1 if enabled
  slideLeftAside = 0
  # Right Aside Slide: content slide for colPos=2 if enabled
  slideRightAside = 0
  # Page Content Extra-Class: e.g. bg-danger or any other classes
  pageContentExtraClass = 
  # Body Extra-Class: e.g. bg-warning or any other classes
  bodyExtraClass = 
  # Page Aside Extra-Class: e.g. bg-danger or any other classes
  asideExtraClass = 
  # Page Main Extra-Class: e.g. bg-warning or any other classes
  mainExtraClass = 
  # Global top padding options: pt-1, pt-2, pt-3, pt-4, pt-5
  globalPaddingTop = pt-5
  # Footer Extra Padding: If you like an extra space between the footer and the content, you can do it here ("footer-sticky" only).
  stickyFooterExtraPadding =
  # Default space (margin-top) for each content-element (colPos=0).
  contentMarginTop = 0
  # Loading Spinner:
  loadingSpinner = 0
  # Loading Spinner Color:
  loadingSpinnerColor = primary
  # Scrolling for Section-Menu - jsFooterInline.5.14
  # deprecated: sidebarSectionmenuScrolling = 0
  sectionmenuScrolling = 0
  # Anchor offset for Section-Menu in (px) - jsFooterInline.5.14
  # deprecated: sidebarSectionmenuOffset = 30
  sectionmenuAnchorOffset = 30
  # Scrollspy offset: in px - to activate the menu item - jsFooterInline.5.14
  # deprecated: sidebarSectionmenuScrollspy = 100
  sectionmenuScrollspyOffset = 100
  # Sticky Top: for submenu or sectionmenu or use .make-me-sticky - jsFooterInline.5.15
  # deprecated: stickyTop = 0
  sectionmenuStickyTop = 0
  # Lightbox selection: options[baguettbox=1, ekkolightbox=2, lightcase=3]
  lightboxSelection = 1
  # Magnifying glass icon for Lightbox: in the center of an image on hover
  magnifying = 0 
  # Background Image: first image from pages media
  backgroundImage.enable = 0
  # Background Image slide: Content Sliding for the background image.
  backgroundImage.slide = 0
  # Last Modified Content Element: display the date of the last modified content on current page in the footer.
  lastModifiedContentElement = 0
  # List of recently updated Content Elements: better solution in the Template MenuRecentlyUpdated.html if enabled.
  recentlyUpdatedContentElements = 0
  # Date Format: the date format to use in ext:t3sbootstrap.
  dateFormat = d.m.Y
  # Subheader Color: Contextual text classes e.g. secondary, danger etc.
  subheaderColor = secondary
  # Sidebar Menu Position: above or below the content
  sidebarMenuPosition = above
  # Padding for Shrinking Navbar: py-x can be set by your stylesheet
  shrinkingNavPadding = 5
  # Favicon: path to your favicon e.g.: EXT:t3sbootstrap/Resources/Public/Icons/favicon.ico
  favicon = 
  # Card Flipper: rotate on click.
  cardFlipperOnClick = 0
  # Language Menu Style: with FA icon or current language with flag.
  langMenuWithFaIcon = 1
  # Fontawesome icons for RTE-Links: loads the required CSS-style for links set in the RTE
  faLinkIcons = 1
}
bootstrap.image {
  # Fallback, wenn keine Bildbreite im CE angegeben wird: Big (colPos=0) / Small (colPos=1 oder 2)
  # Fallback image size in ColPos=0 (in px): only if BE-layout != OneCol && !imgWidth
  default.width.big = 825
  # Fallback image size in ColPos=1 && ColPos=2 (in px): only if BE-layout != OneCol && !imgWidth
  default.width.small = 385
  # Scaling correction: (default) - if disabled: minimum equalMediaWidth is set to 575px and therefore 100% wide on mobile.
  mediaScalingCorrection = 1
  # Additional Image Sizes for Desktop min-width: 1200px: comma-separated list of either image widths specified in pixels or pixel density descriptors, e. g. "2x".
  srcsetDesktop = 385, 576, 768, 992, 1200
  # Additional Image Sizes for Tablet min-width: 576px: comma-separated list of either image widths specified in pixels or pixel density descriptors, e. g. "2x".
  srcsetTablet = 385, 576, 768, 992, 1200
  # Additional Image Sizes for Mobile max-width: 575px: comma-separated list of either image widths specified in pixels or pixel density descriptors, e. g. "2x".
  srcsetMobile = 60, 100, 200, 385, 575
  # Threshold for Lazy load: if "lazyLoad" is activated in the EM config, the distance out of the viewport, expressed in pixel, before which to start loading the images.
  lazyLoadThreshold = 0
  # Lazy load for images in the BG-Wrapper: not the BG-image
  lazyLoadBgWrapperImage = 0
  # A responsive image polyfill: Use picturefill for older browser.
  picturefill = 0
}
bootstrap.ext {
  # Extension form
  ################
  # Wenn "Ajax-Form" verfügbar ist, aktivieren um das Formular im Modal zu öffnen
  form.modal = 0
  # Timeout für Modal: Zeit in Millisekunden, um das Modal nach dem Absenden auszublenden.
  form.timeout = 5000

  # Extension news
  ################
  # Info (list view): zeigt Info (Datum, Kategorien) in List-Ansicht.
  news.list.info = 0
  # Image ratio (list view): z.B.: 16:9, 4:3 - oder 0.
  news.list.imageRatio =
  # Utility class für den "more-button" in der List-Ansicht.
  news.list.buttonClass = primary
  # Image mobile overlay (list view): wenn < 576px nur für Card-Templates.
  news.list.imageOverlay = 1
  # Loading Spinner Position (list view): with ajax pagination.
  news.list.loadingSpinnerPosition = top
  # Info (detail view): zeigt Info (Datum, Kategorie, Tags, Autor) in Detail-Ansicht.
  news.detail.info = 1
  # Image ratio (list view): z.B.: 16:9, 4:3 - oder 0.
  news.detail.imageRatio =
  # Lightbox (detail view): aktivieren für Detail-Ansicht.
  news.detail.enableLightbox = 1
  # Utility class für den "back-button" in der Detail-Ansicht.
  news.detail.buttonClass = primary
  # Teaser class (detail view): z.B.: "lead" oder jede andere.
  news.detail.teaserClass = lead
  # Carousel (detail view): zeigt Bilder im Carousel, wenn aktiviert und mehr als ein Bild.
  news.detail.carousel = 1
  # Breite für linke Spalte (detail view):
  news.detail.leftGrid = 7
  # Media oben (detail view): zeigt Bild oder Video oben, über dem Text.
  news.detail.mediaOnTop = 0
}

Default Settings - nicht im Konstanten-Editor:

# Background Carousel in Jumbotron.html
bootstrap.carousel.interval = 5000
bootstrap.carousel.pause = false

# 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
bootstrap.pagebrowser.prevItem = prev|prevsection
bootstrap.pagebrowser.nextItem = nextsection|next
bootstrap.pagebrowser.entryLevel = 1

bootstrap.backToTop.title = to top
bootstrap.backToTop.class = fa fa-chevron-circle-up fa-4x

bootstrap.animateCssIinlineJs = classToAdd: 'bt_visible',classToRemove: 'bt_hidden',offset: 0

bootstrap.navbar {
  # Default Image-Pfad sowie width & height für das Brand-Image (nicht im Konstanten-Editor)
  image.defaultPath = typo3conf/ext/t3sbootstrap/Resources/Public/Images/bootstrap-solid.svg
  image.width = 30
  image.height = 30
  image.altText = Company Logo
  # Extra Reihe in der Navbar - Info unter "Snippets"
  extraRow = 0
  # type=int+; subdropdown with two columns if items greater or equal
  subdropdown.twoColumns = 30
  # type=string; Comma-separated list of uid`s (pages) for a right menu in the navbar
  rightMenuUidList =
  # type=boolean; page uid with search plugin - link to your search plugin
  searchboxLink = 0
  # type=boolean; fe_user name in navbar - if logged in
  feUserName = 0
  # type=boolean; Show flags in the language menu	
  langFlags = 1
  # type=options[none=0, slideIn (1)=1, slideDown (js)=2, slideIn (2)=3, fade=4], dropdown animation
  dropdownAnimate = 0
}

# include the print template if enabled
bootstrap.print.enable = 0

# overrides some fields from Table "pages"
pages.override {
  # 1,2,3,4,6
  smallColumns =
  # sm, md, lg, xl
  breakpoint =
}

Die folgenden Konstanten sind veraltet:

bootstrap.config {
  # Robot Meta Name:
  robots =
  # Revisit-after Meta Name:
  revisitAfter = 7 days
  # RealUrl: config.tx_realurl_enable = 1 & config.absRefPrefix = /
  realurl = 0
  # Page Title Prefix: e.g.: Company - (if "Metatags & Browsertitle" is enabled in the EM config.)
  pageTitle.prefix =
  # Page Title Suffix: (if "Metatags & Browsertitle" is enabled in the EM config.)
  pageTitle.suffix =
}