RTUI v0.17.5 → Bootstrap 5.3.8

Grundlagen & Komponenten

Bootstrap-Abbildung der RTUI-Grundwerte, Bedienelemente, Komponenten, Zustände und Overlayfamilien.

Grundlagen

RT-Farben, Typografie, Abstände, Radien und Statussemantik werden über Bootstrap-Sass und Bootstrap-Variablen geführt.

Primär
RTUI-Sass-Token: Bootstrap primary
Sekundär
RTUI-Sass-Token: Bootstrap secondary
Erfolg
RTUI-Sass-Token: Bootstrap success
Warnung
RTUI-Sass-Token: Bootstrap warning
Gefahr
RTUI-Sass-Token: Bootstrap danger

Typografie und Achsen

Sora Überschrift

Mulish UI-/Fließtext. Produktiv werden beide Familien lokal bereitgestellt.

4 px8 px12 px16 px24 px32 px48 px

Schaltflächen, Symbolaktionen und Menüs

Standardaktionen, semantische Varianten, Deaktiviert, Dropdown und Tooltip.

Formulare & zusammengesetzte Bedienelemente

Alle einzeiligen Standardcontrols zielen im Sass-Build auf 44 px Außenhöhe. Dateiauswahl nutzt verborgenen nativen Input und deutsche sichtbare Texte.

Hilfetext gehört zum Feld-Stack.
Bitte prüfe die Eingabe.

RT Rich-Text-Editor – Bootstrap-Chrome

Die visuelle Komponente bleibt engine-unabhängig. Der Demo-Toolbar ist bewusst ohne veraltete WYSIWYG-Engine; produktive Inhalte werden serverseitig sanitiziert.

Beispielinhalt

Menschenlesbare Inhalte können Überschriften, Hervorhebungen, Links, Bilder, Listen und Zitate enthalten.

Die UI-Chrome bleibt fest; Inhalt wird sicher bereinigt.

  • Projektbeschreibungen
  • Berichte
  • Hilfetexte und FAQ
const status = 'geprüft';
FeldWert
StatusGeprüft
p > body42 Wörter
Keine Base64-Bilder dauerhaft in Inhaltsdaten; Medien über die zentrale Uploadlogik validieren und speichern.

Cards, Listen, Badges, Metadaten und Fortschritt

Wenige Bootstrap-Grundflächen tragen semantisch unterschiedliche Inhalte.

Status
In Bearbeitung
Letzte Änderung heute
AktivPrüfungFehler

Projektfortschritt

Gesamt75 %
75 %
Max KundeAktiv
Anna TeamIntern

Meldungen, Leerzustände, Ladezustände, Erfolg und Fehler

Farbe ist nie alleiniger Informationsträger. Lade- und Leerzustände bleiben Bootstrap-basiert.

Noch keine Daten

Leere Zustände erklären den nächsten sinnvollen Schritt.

Lädt

Wird geladen

Wartungszustand

Der Bereich ist vorübergehend nicht verfügbar.

Datentabelle, Mobile-Card, Pagination und Zeilenaktionen

Desktop-Tabelle und Mobile-Karten sind zwei Darstellungen derselben Datenlogik.

ProjektStatusFortschrittGeändertAktionen
RT KundenportalWebanwendung
Aktiv72 %03.09.2026
RT Kundenportal
Webanwendung
Aktiv
Fortschritt
72 %
Geändert
03.09.2026

Tabs, Pills, Akkordeon, Breadcrumb und Offcanvas

Bootstrap-eigene Navigations-/Collapse-Komponenten bilden die RTUI-Interaktionsmuster.

Übersichtsinhalt
Aktivitätsinhalt

Damit Komponenten und Zustände aus einer eindeutigen Frameworkbasis stammen.

Modal, Offcanvas, Toast und Tooltip

Überlagerungen verwenden ausschließlich Bootstrap-Komponenten und -APIs.

Sekundärbereich

Für mobile Navigation oder fachlich passende Drawer.
RT UI
Aktion wurde ausgeführt.

Stabilität, lange Inhalte und reduzierte Bewegung

Die Bootstrap-Adaption dokumentiert dieselben QA-Fälle: Wrap, lange deutsche Texte, technische Werte, Fokus, Deaktiviert und reduzierte Bewegung.

Langer Navigationstext

Bildoptimierungseinstellungen und Transparenzverarbeitung muss mehrzeilig nutzbar bleiben und darf die Gesamtseite nicht verbreitern.

Technischer Wert

rt-project-handover-context-v1:2026-09-03:beispiel-sehr-langer-technischer-token-ohne-layoutverlust