$$Ausdruck$$
$$Ausdruck$$
CSS-Bibliothek & Standard Bootstrap-Klassen
Unser Paket stellt Ihnen eine umfassende CSS-Bibliothek zur Verfügung, angereichert mit einer Vielzahl an Design-Möglichkeiten. Dies reicht von diversen Farb- und Schriftartenoptionen bis hin zu besonderen Design-Elementen wie einzigartigen Figuren und individuellen Rändern.
Zudem setzen wir auf die bewährten Bootstrap-Klassen. Bootstrap zählt zu den renommiertesten und weitverbreitetsten Frameworks in der Webentwicklung. Es offeriert eine Fülle an vordefinierten CSS-Klassen, die sowohl das Design als auch die Responsivität einer Webseite erheblich optimieren. Sei es Grid-Systeme, Buttons oder Modals – mit Bootstrap lassen sich effizient und qualitativ hochwertige Webseiten gestalten. Für eine detaillierte Übersicht aller verfügbaren Klassen empfehlen wir einen Blick in die offizielle Bootstrap-Dokumentation.
Design-Element
Design-Element
Design-Element
Farben & Schriftarten
Wählen Sie aus einer breiten Palette von vordefinierten Farbschemata oder erstellen Sie Ihr eigenes. Kombinieren Sie dies mit einer Vielzahl von Schriftarten, um Ihrer Website eine einzigartige Persönlichkeit zu verleihen.
Example body text
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
This line of text is meant to be treated as fine print.
The following is rendered as bold text.
The following is rendered as italicized text.
An abbreviation of the word attribute is attr.
Emphasis classes
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Pellentesque ornare sem lacinia quam venenatis vestibulum.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Spezielle Design-Elemente
Erwecken Sie Ihre Inhalte mit speziellen Design-Elementen zum Leben. Egal ob Hover-Animationen, Parallax-Hintergründe oder andere interaktive Elemente – mit TYPO3 ist es einfach, Ihre Website hervorzuheben.
Sticky Elements
Halten Sie wichtige Elemente immer im Blickfeld. Diese Elemente "kleben" beim Scrollen am Bildschirmrand und bleiben so stets sichtbar.
Ich bin Sticky innerhalb dieser Container
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Image Hover Animation
Verleihen Sie Ihren Bildern Dynamik. Bei Berührung oder Überfahren mit der Maus werden subtile Animationen ausgelöst, die die Aufmerksamkeit Ihrer Besucher fesseln. z.B:
Image Link Hover Effects
Machen Sie Ihre verlinkten Bilder interaktiver. Bei Berührung oder Überfahren mit der Maus ändert sich das Erscheinungsbild, signalisiert Interaktivität und lädt zum Klicken ein. z.B.:
Image Link Hover Effect
Image Link Hover Effect
Image Link Hover Effect
Reordering
Optimieren Sie die Reihenfolge Ihrer Inhalte für verschiedene Bildschirmgrößen. Mit den Bootstrap-Ordering-Klassen können Sie die Position von Elementen innerhalb eines Containers flexibel anpassen. Dies ist besonders nützlich für responsive Designs, bei denen die Anordnung der Elemente auf mobilen Geräten anders sein kann als auf dem Desktop. Durch einfaches Hinzufügen von Klassen wie "order-1" oder "order-md-2" können Sie bestimmen, in welcher Reihenfolge die Elemente angezeigt werden sollen. z.B.:
order-3 order-lg-1
order-1 order-lg-2
order-3 immer
T3S Bootstrap
Dank der integrierten Bootstrap-Bibliothek können Sie im Backend alle oben genannten Elemente individuell anpassen. Passen Sie Abstände (Margin und Padding), Animationsverzögerungen und -dauern an, fügen Sie zusätzliche Klassen hinzu, wählen Sie aus vorgefertigten Bildverhältnissen und Layouts und vieles mehr! Hier wird nur ein kleiner Teil der Möglichkeiten präsentiert, um die Seite übersichtlich zu halten. Mit TYPO3 und Bootstrap stehen Ihnen jedoch nahezu unbegrenzte Designoptionen zur Verfügung.