# Bootstrap-Designsystem

## Vorschau der Bootstrap-Designsystem-Oberfläche

Filtere Reservierungen, validiere Felder, überprüfe sie in einem nativen Dialog und wechsle zwischen hellem und dunklem Modus.

## Designreferenz zum Bootstrap-Designsystem

Kompiliertes Standard-CSS von Bootstrap 5.3.8 und die Dokumentation zu Version 5.3. Die Werte sind Standardeinstellungen, keine verbindlichen Markenregeln. Beim Vergleich von Rem- und Pixelwerten wird eine Root-Größe von 16px angenommen; responsive Schriftgrößen können unterhalb des Endpunkts für große Bildschirme abweichen. Die umgebende OpenDesign-Seite behält ihre eigene Typografie.

### Semantische Farben und Oberflächenrollen

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --bs-primary | #0d6efd | Primäraktion und Link-Grundfarbe. |
| --bs-secondary | #6c757d | Sekundäre Theme-Familie; nicht die adaptive Rolle für sekundären Fließtext. |
| --bs-success | #198754 | Grundfarbe für positive Statusmeldungen; zusätzlich eine Beschriftung verwenden. |
| --bs-danger | #dc3545 | Grundfarbe des Fehler-/Zerstörungs-Themes. |
| --bs-warning | #ffc107 | Grundfarbe des Warnungs-Themes; Kontrast des Vordergrunds prüfen. |
| --bs-info | #0dcaf0 | Grundfarbe des Informations-Themes. |
| --bs-body-bg | #fff | Seitenoberfläche im hellen Modus. |
| --bs-body-color | #212529 | Vordergrundfarbe des Fließtexts im hellen Modus. |
| --bs-secondary-bg | #e9ecef | Sekundäre Oberfläche im hellen Modus. |
| --bs-tertiary-bg | #f8f9fa | Zurückhaltende Paneloberfläche im hellen Modus. |
| --bs-primary-bg-subtle | #cfe2ff | Getönte Primäroberfläche im hellen Modus. |
| --bs-primary-text-emphasis | #052c65 | Text für Oberflächen mit dezenten Primärfarben. |
| --bs-border-color | #dee2e6 | Rahmenrolle im hellen Modus. |
### Fließtexttypografie und gut lesbare Hierarchie

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --bs-body-font-size | 1rem | Standardgröße des Fließtexts: 1rem, normalerweise 16px. |
| --bs-body-line-height | 1.5 | Einheitenloser Multiplikator: normalerweise 24px Zeilenhöhe. |
| --bs-body-font-weight | 400 | Normale Stärke des Fließtexts. |
| --bs-body-font-family | var(--bs-font-sans-serif) | Von Bootstrap bereitgestellte Systemoberflächen-Schriftfamilie. |
| --bs-font-monospace | SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace | Code und technische Werte verwenden die Schriftfamilie mit fester Zeichenbreite. |
### Überschriftengrößen und Anzeige-Dienstprogramme

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| h1 / .h1 | 2.5rem | Endpunkt für große Bildschirme; h1–h4 verwenden standardmäßig responsive Schriftgrößen. |
| h2 / .h2 | 2rem | Endpunkt für große Bildschirme; h1–h4 verwenden standardmäßig responsive Schriftgrößen. |
| h3 / .h3 | 1.75rem | Endpunkt für große Bildschirme; h1–h4 verwenden standardmäßig responsive Schriftgrößen. |
| h4 / .h4 | 1.5rem | Endpunkt für große Bildschirme; h1–h4 verwenden standardmäßig responsive Schriftgrößen. |
| h5 / .h5 | 1.25rem | Feste Standardgröße für Überschriften. |
| h6 / .h6 | 1rem | Feste Standardgröße für Überschriften. |
| .lead | 1.25rem / weight 300 | Einleitungstext; kein Ersatz für eine Überschrift. |
| .small | 0.875em | Relativ kleine Schrift; sparsam für Metadaten verwenden. |
### Abstandsskala der Dienstprogramme

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| 0 | 0 | Mit m/p/gap/g-Dienstprogrammen verwenden, z. B. p-0. |
| 1 | 0.25rem | Mit m/p/gap/g-Dienstprogrammen verwenden, z. B. p-1. |
| 2 | 0.5rem | Mit m/p/gap/g-Dienstprogrammen verwenden, z. B. p-2. |
| 3 | 1rem | Mit m/p/gap/g-Dienstprogrammen verwenden, z. B. p-3. |
| 4 | 1.5rem | Mit m/p/gap/g-Dienstprogrammen verwenden, z. B. p-4. |
| 5 | 3rem | Mit m/p/gap/g-Dienstprogrammen verwenden, z. B. p-5. |
| ms / me | inline start / end | Logische Seitenkonvention; anders als ml/mr in älteren Versionen von Bootstrap. |
| p-3 p-md-4 | 1rem → 1.5rem at md | Responsive Innenabstände im Beispiel. |
| gap-2 | 0.5rem | Abstand zwischen Flex-/Rasterelementen. |
### Responsive Raster-Breakpoints

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| xs / .col- | 0 | Basisstufe ohne xs-Infix. |
| sm / .col-sm- | 576px | Kleine Stufe; .container maximale Breite 540px. |
| md / .col-md- | 768px | Mittlere Stufe; .container maximale Breite 720px. |
| lg / .col-lg- | 992px | Große Stufe; .container maximale Breite 960px. |
| xl / .col-xl- | 1200px | Extra große Stufe; .container maximale Breite 1140px. |
| xxl / .col-xxl- | 1400px | Größte Standardstufe; .container maximale Breite 1320px. |
| Grid columns | 12 | Eine Kombination aus col-lg-7 und col-lg-5 füllt eine Zeile aus. |
| Default horizontal gutter | 1.5rem | 0.75rem Innenabstand pro Spaltenseite; die Zeile gleicht dies mit negativen Außenabständen aus. |
### Rahmen, Rundungen und Höhenstufen

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --bs-border-width | 1px | Standard-Rahmenbreite. |
| --bs-border-radius | 0.375rem | Eingabefelder, Karten und standardmäßig abgerundete Ecken. |
| --bs-border-radius-sm | 0.25rem | Kompakte Rundung. |
| --bs-border-radius-lg | 0.5rem | Stärker abgerundete Gestaltung. |
| --bs-border-radius-xl | 1rem | Stark abgerundete Oberfläche. |
| --bs-border-radius-xxl | 2rem | Extra stark abgerundete Oberfläche. |
| --bs-border-radius-pill | 50rem | Pillenform, kein festgelegter Radius für Komponenten. |
| --bs-box-shadow-sm | 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) | Dezente Höhenstufe. |
| --bs-box-shadow | 0 0.5rem 1rem rgba(0, 0, 0, 0.15) | Standard-Höhenstufe. |
| --bs-box-shadow-lg | 0 1rem 3rem rgba(0, 0, 0, 0.175) | Starke Höhenstufe; nicht auf jede Oberfläche anwenden. |
### Schaltflächengrößen und Statusvariablen

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --bs-btn-padding-x | 0.75rem | Standardmäßiger horizontaler Innenabstand von Schaltflächen. |
| --bs-btn-padding-y | 0.375rem | Standardmäßiger vertikaler Innenabstand von Schaltflächen. |
| --bs-btn-font-size | 1rem | Standardmäßige Schriftgröße für Schaltflächenbeschriftungen. |
| --bs-btn-line-height | 1.5 | Standardmäßiger Zeilenhöhenfaktor für Beschriftungen. |
| --bs-btn-border-width | 1px | Standardmäßige Rahmenstärke. |
| --bs-btn-border-radius | var(--bs-border-radius) | Standardmäßiger Eckenradius von Schaltflächen. |
| --bs-btn-disabled-opacity | 0.65 | Visuelle Darstellung; verwenden Sie zusätzlich das tatsächliche disabled-Attribut. |
### Rollenänderungen im hellen und dunklen Modus

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --bs-body-bg | light #fff / dark #212529 | Der Seitenhintergrund richtet sich nach data-bs-theme. |
| --bs-body-color | light #212529 / dark #dee2e6 | Die Vordergrundfarbe passt sich der Hintergrundfläche an. |
| --bs-border-color | light #dee2e6 / dark #495057 | Rahmen, der das Theme berücksichtigt. |
| --bs-primary-bg-subtle | light #cfe2ff / dark #031633 | Der getönte Statushintergrund ändert sich je nach Modus. |
| --bs-primary-text-emphasis | light #052c65 / dark #6ea8fe | Mit der dazugehörigen dezenten Hintergrundfläche verwenden. |
| data-bs-theme | light \| dark | Global auf html oder in einem lokalen Teilbaum festlegen. |
## Bootstrap-Designsystem: vollständiger Leitfaden

Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface.

Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen.

## Bootstrap-Designsystem: CSS von Bootstrap und Zuständigkeiten von JavaScript auswählen

### Ein Stylesheet, optionales Komponentenverhalten

> Das kompilierte Stylesheet von Bootstrap stellt das Raster, die Typografie, die Hilfsklassen und die Darstellung der Komponenten bereit. Das Bundle von JavaScript ergänzt interaktive Plugins wie Modal, Collapse und Dropdown. Eine gestaltete Schaltfläche benötigt JavaScript nicht; ein Modal-Trigger mit data-bs-toggle dagegen schon. Die funktionierende Vorschau lädt das passende Stylesheet und Bundle in Version 5.3.8 lokal, sodass die Steuerelemente diese tatsächlichen Voraussetzungen veranschaulichen.

Die Filterung der Reservierungstabelle, die Fehlerübersicht und das lokale Hinzufügen von Zeilen sind Anwendungscode. Wenn diese Abgrenzung sichtbar bleibt, lassen sich die fiktiven Datensätze durch einen Dienst ersetzen, ohne Bootstrap selbst Buchungsfunktionen zuzuschreiben.

- CSS: Layout, Typografie, Schaltflächen, Eingabefelder, Tabellen und Statusdarstellung.

- Bootstrap JavaScript: Öffnen des Modals, Hintergrundüberlagerung, Escape- und Fokusverhalten.

- Anwendungs-JavaScript: Validierungsmeldungen, Datensatzfilterung und lokale Datenaktualisierungen.

Unterstützende Spezifikation lesen

### Kompiliertes CSS oder einen Sass-Build auswählen

Verwenden Sie das kompilierte CSS für einen schnellen Einstieg oder ein Produkt, das den standardmäßigen Satz an Hilfsklassen übernehmen kann. Verwenden Sie den Sass-Quellcode, wenn Sie Theme-Maps, die Generierung von Hilfsklassen oder das Raster zur Build-Zeit ändern möchten. Die benutzerdefinierten Eigenschaften von CSS zur Laufzeit eignen sich für Anpassungen auf Komponentenebene. Wenn Sie jedoch eine Farbvariable auf der Root-Ebene ändern, werden nicht automatisch alle vorkompilierten Varianten neu erstellt.

```
$primary: #3159a5;
$border-radius: .5rem;
@import "bootstrap/scss/bootstrap";
```

Code-Referenz

Unterstützende Spezifikation lesen

## Bootstrap-Designsystem: semantische Farben und Farbmodi einsetzen

### Hintergrundfläche und Vordergrund einer Statusanzeige aufeinander abstimmen

Die Reservierungs-Badges verwenden bg-primary-subtle mit text-primary-emphasis. Dabei handelt es sich um aufeinander abgestimmte semantische Rollen: Vorder- und Hintergrund passen sich beide an, wenn sich data-bs-theme ändert. Ein beliebiger blauer Hintergrund mit einer willkürlich gewählten grauen Textfarbe bildet diesen Zusammenhang nicht ab. Außerdem bleiben „Reserviert“, „In Verwendung“ und „Entwurf“ als Textbeschriftungen erhalten; die Farbe ist nicht ihre einzige Bedeutung.

```
<span class="badge text-primary-emphasis bg-primary-subtle">Reserved</span>
<section data-bs-theme="dark">
  <div class="bg-body text-body border rounded p-3">Theme-scoped content</div>
</section>
```

Code-Referenz

Unterstützende Spezifikation lesen

### Anpassungen auf Komponentenebene begrenzen

Überschreiben Sie für eine einzelne benutzerdefinierte Aktion die lokalen --bs-btn-*-Eigenschaften. Legen Sie neben dem normalen Hintergrund auch Werte für Hover- und Aktivzustände fest. Das folgende Beispiel zeigt eine Anwendungsvariante und keinen Standard von Bootstrap. Belassen Sie diese Klasse auf der betreffenden Schaltfläche, damit sie nicht unbemerkt jede primäre Aktion in einem anderen Bereich der Seite verändert.

```
.btn-reserve {
  --bs-btn-color: #fff;
  --bs-btn-bg: #3159a5;
  --bs-btn-border-color: #3159a5;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #274783;
  --bs-btn-hover-border-color: #274783;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #203a6b;
  --bs-btn-active-border-color: #203a6b;
}
```

Code-Referenz

Unterstützende Spezifikation lesen

## Bootstrap-Designsystem: die tatsächliche Typografieskala verwenden

### Dokumentsemantik und visuelle Größe voneinander trennen

Der Haupttitel der Vorschau ist ein h1 mit der Klasse h3: Er bleibt die Hauptüberschrift der Seite, verwendet aber die kleinere visuelle Größe, die für ein Tool passend ist. Abschnittsüberschriften sind h2-Elemente mit h5-Stil. Bootstrap bietet sowohl Standardstile für Elemente als auch entsprechende Überschriftenklassen. So lassen sich diese Ebenen unterscheiden, ohne Überschriftenebenen im Dokument zu überspringen.

Der Standardtext hat eine Größe von 1rem und eine Zeilenhöhe von 1.5. Die Größen von h1 bis h4 passen sich responsiv an, bevor sie die Werte aus der Referenztabelle erreichen. Ein Screenshot bei einer bestimmten Breite legt daher nicht die gesamte Typografieskala fest. Verwenden Sie die kompilierten Stile oder das dokumentierte Sass-Verhalten, statt eine gemessene Pixelgröße aus einem einzigen Ansichtsfenster zu übernehmen.

Unterstützende Spezifikation lesen

### Sekundärtext mit einer Theme-abhängigen Rolle versehen

text-body-secondary richtet sich nach dem Farbmodus des Fließtexts. Die Klasse eignet sich für ergänzende Datensatzinformationen, etwa den Namen der verantwortlichen Person unter dem Titel eines Geräts. Die Klasse small verkleinert den Text relativ zum Kontext. Auf allen Feldbeschriftungen würde sie das Erfassen des Formulars erschweren. Belassen Sie Beschriftungen bei der normalen Formulargröße und verwenden Sie kompakte Schrift für Hinweise und Metadaten.

```
<h1 class="h3">Equipment reservations</h1>
<p class="text-body-secondary">Review availability before booking.</p>
<small class="text-body-secondary">Local demonstration data</small>
```

Code-Referenz

Unterstützende Spezifikation lesen

## Bootstrap-Designsystem: Abstands-Hilfsklassen und Raster kombinieren

### Die Abstandsskala statt beliebiger Lücken verwenden

p-3 steht für 1rem Innenabstand, p-4 für 1.5rem und p-5 für 3rem. Die Bezeichnungen sind Stufen der Skala und keine festen Pixelangaben. In der Vorschau wächst der äußere Innenabstand durch p-3 p-md-4 bei 768px; mb-3 schafft 1rem Abstand zwischen Feldgruppen. Das ist eine konkrete Vorgabe für dieses Beispiel, keine neue offizielle Abstandsskala.

```
<div class="p-3 p-md-4">
  <div class="d-flex flex-wrap gap-2 mb-3">
    <button class="btn btn-primary">Review</button>
    <button class="btn btn-outline-secondary">Reset</button>
  </div>
</div>
```

Code-Referenz

Unterstützende Spezifikation lesen

### Die Beziehung zwischen Zeile und Spalten beibehalten

Die Demo verwendet row g-4 mit col-lg-7 und col-lg-5. Beide Abschnitte nehmen bis zum lg-Schwellenwert von 992px die gesamte Breite ein und teilen sich danach eine Zeile mit zwölf Spalten. Platzieren Sie Rasterspalten innerhalb einer Zeile: Deren negativer Außenabstand gleicht den Innenabstand der Spalten aus. Ein zusätzlicher beliebiger Außenabstand um jede Spalte kann diese Ausrichtung zunichtemachen.

Unterstützende Spezifikation lesen

## Bootstrap-Designsystem: Eingabefelder mit expliziten Beziehungen gestalten

### Beschriftungen, Hinweise und Rückmeldungen miteinander verknüpfen

form-label gestaltet ein echtes label-Element; sein for-Wert muss mit der id des Eingabefelds übereinstimmen. form-control gestaltet Texteingabefelder, form-select ein Auswahlfeld. Die Vorschau verwendet aria-describedby für Hinweis- und Fehler-IDs sowie required für die tatsächliche Einschränkung. Diese semantischen Beziehungen entstehen nicht automatisch durch die Klassennamen.

```
<label for="equipment" class="form-label">Equipment</label>
<select id="equipment" class="form-select" required
  aria-describedby="equipment-error">
  <option value="">Choose equipment</option>
  <option>Camera kit A</option>
</select>
<div class="invalid-feedback" id="equipment-error">Choose equipment.</div>
```

Code-Referenz

Unterstützende Spezifikation lesen

### Einen echten Fehlerzustand und eine erreichbare Fehlerübersicht verwenden

Beim Absenden prüft das Beispiel jedes Feld, setzt is-invalid und aria-invalid, erstellt Textlinks zu den fehlerhaften Feldern und verschiebt den Fokus auf die Übersicht. Wird ein Feld korrigiert, aktualisiert sich dessen Zustand, ohne die übrigen Antworten zu löschen. Diese Anwendungsebene ist unverzichtbar: Die Validierungsdokumentation von Bootstrap weist darauf hin, dass die benutzerdefinierte visuelle Rückmeldung allein für unterstützende Technologien nicht vollständig zugänglich ist.

1. Das Ergebnis der tatsächlichen Einschränkungsprüfung kontrollieren, bevor das Feld als fehlerhaft markiert wird.

2. Den Fehlertext mit dem Feld verknüpfen und den Fehlerzustand kenntlich machen.

3. Den Fokus nach dem Absenden auf eine hilfreiche Übersicht oder das erste fehlerhafte Feld setzen.

Unterstützende Spezifikation lesen

## Bootstrap-Designsystem: Datensätze verständlich darstellen und filtern

### Die Tabellenkomponente für vergleichbare Daten verwenden

Die Tabelle verfügt über Spaltenüberschriften, Zeilenüberschriften und eine Beschriftung. table-hover sorgt für eine Hover-Darstellung, macht die Zeilen jedoch nicht zu Schaltflächen. Beim Filtern wird der ausgeblendete Zustand passender Zeilen geändert und die Anzahl der Ergebnisse in einem aria-live-Bereich aktualisiert. Der angezeigte Status bleibt Text innerhalb eines Badges, sodass seine Bedeutung auch bei einem Wechsel des Farbmodus erhalten bleibt.

```
<div class="table-responsive">
  <table class="table table-hover">
    <caption>Fictional equipment reservations</caption>
    <thead><tr><th scope="col">Equipment</th><th scope="col">Status</th></tr></thead>
    <tbody><tr><th scope="row">Camera kit A</th><td>Reserved</td></tr></tbody>
  </table>
</div>
```

Code-Referenz

Unterstützende Spezifikation lesen

### Das Scrollen der Tabelle auf die Daten beschränken

table-responsive ermöglicht horizontales Scrollen, wenn eine breite Tabelle nicht in den verfügbaren Platz passt. Vermeiden Sie Dropdowns innerhalb dieses Wrappers, die aus dem ausgeschnittenen Bereich herausragen müssen, ohne dies vorher zu prüfen. Im Beispiel befindet sich der Filter oberhalb der Tabelle. Auf Mobilgeräten darf nur der Datenbereich horizontal scrollen; die Seite selbst sollte in den Viewport passen.

Unterstützende Spezifikation lesen

## Bootstrap Designsystem: Auswahl im Modal überprüfen API

### Erst öffnen, wenn das Formular gültig ist

Das interaktive Beispiel erstellt eine Instanz von Bootstrap Modal oder verwendet eine vorhandene und ruft show nur auf, wenn die Validierung erfolgreich ist. So wird verhindert, dass die Prüfebene Fehler verdeckt, die noch behoben werden müssen. Der Text wird mit den aktuellen Werten befüllt. Über „Angaben bearbeiten“ lässt sich das Modal schließen, während die Formulareingaben erhalten bleiben.

```
const element = document.getElementById("review-modal");
const modal = bootstrap.Modal.getOrCreateInstance(element);
// Run after validation and after populating the review text.
modal.show();
element.addEventListener("hidden.bs.modal", () => {
  document.querySelector("#reservation button[type=submit]").focus();
});
```

Code-Referenz

Unterstützende Spezifikation lesen

### Das Modal als Komponentenlebenszyklus behandeln

Bootstrap steuert den Hintergrund und den Übergang. Verwenden Sie die zugehörigen Methoden und Ereignisse, statt die Anzeige manuell umzuschalten, da sonst Fokus oder Hintergrund inkonsistent sein können. Bei der Bestätigung in dieser Demonstration wird eine lokale Tabellenzeile hinzugefügt und das Modal geschlossen. Es wird kein Reservierungsdienst aufgerufen. Die Erfolgsmeldung beschreibt genau dieses lokale Ergebnis.

Unterstützende Spezifikation lesen

## Bootstrap Designsystem: Dieses Bootstrap-Beispiel integrieren und erweitern

### Eine passende CSS- und JavaScript-Version laden

Das eingebettete Beispiel lädt lokal gespeicherte Dateien von Bootstrap 5.3.8 CSS und dem Bundle. Seine Datenattribute und das Modal-API stammen aus dieser Version. Importieren Sie in einer Vite-Anwendung das kompilierte CSS und das benötigte Plugin wie im Abschnitt zur Einrichtung gezeigt. Vermeiden Sie es, das Bundle zu laden und über einen anderen Wrapper eine zweite Instanz desselben Plugins zu initialisieren.

Unterstützende Spezifikation lesen

### Anhand des tatsächlichen Komponentenvertrags erweitern

Um ein weiteres Formularfeld hinzuzufügen, legen Sie dessen Beschriftung, id, Einschränkung, zugehörige Meldung und Validierungsverhalten fest. Um einen weiteren Datensatzstatus hinzuzufügen, definieren Sie den Text und ein passendes Paar semantischer Badges. Wählen Sie für eine Layoutänderung einen Breakpoint und eine Rasteraufteilung aus der obigen Referenz. Dabei handelt es sich um konkrete Erweiterungen des funktionierenden Beispiels und nicht um die Aufforderung, eine neue Schnittstellenterminologie zu erfinden.

- Verwenden Sie das Beispiel, um Fokus, Schließen des Modals und Theme-Wechsel zu prüfen.

- Anwendungsdatenoperationen vom Verhalten des Bootstrap-Plugins getrennt halten.

- Theme-Überschreibungen in den Zuständen normal, Hover, Fokus, ungültig und deaktiviert erneut prüfen.

Unterstützende Spezifikation lesen

## Bootstrap Designsystem: Komponentenbeispiele

### index.html — vollständiges Reservierungsbeispiel

Eine vollständige Bootstrap-5.3.8-Seite mit Stylesheet, Modal-Laufzeit, Validierung, Filtern und lokaler Bestätigung. Speichern Sie diese Datei als index.html und stellen Sie den Ordner mit dem untenstehenden Befehl bereit. Für die festgelegten CDN-Abhängigkeiten ist eine Netzwerkverbindung erforderlich.

```
<!doctype html><html lang="en" data-bs-theme="light"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Bootstrap equipment reservations — OpenDesign example</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"><style>body{margin:0}main{max-width:1120px;margin:auto}.demo-stat{font-variant-numeric:tabular-nums}.table td,.table th{vertical-align:middle}.table caption{font-size:.875rem}.demo-status:empty{display:none}@media(max-width:575px){.table th,.table td{font-size:.8125rem;padding:.65rem .4rem}.demo-mobile-hide{display:none}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}</style></head><body>
<header class="border-bottom bg-body-tertiary px-3 px-md-4 py-3 d-flex align-items-center justify-content-between gap-3"><div><strong>Studio inventory</strong><span class="badge text-bg-primary ms-2">Bootstrap 5.3.8</span></div><button id="theme" type="button" class="btn btn-outline-secondary btn-sm" aria-pressed="false">Dark mode</button></header>
<main class="p-3 p-md-4"><div class="d-flex align-items-start justify-content-between gap-3 mb-4"><div><p class="text-body-secondary small mb-1">EQUIPMENT / RESERVATIONS</p><h1 class="h3 mb-2">Keep the next shoot ready.</h1><p class="text-body-secondary mb-0">Check equipment, create a local reservation and review its details.</p></div><span class="badge rounded-pill text-primary-emphasis bg-primary-subtle border border-primary-subtle demo-mobile-hide">Interactive example</span></div>
<div class="row g-3 mb-4"><div class="col-4"><div class="border rounded p-3"><div class="text-body-secondary small">Equipment</div><strong class="fs-3 demo-stat">12</strong></div></div><div class="col-4"><div class="border rounded p-3"><div class="text-body-secondary small">Reservations</div><strong id="count" class="fs-3 demo-stat">3</strong></div></div><div class="col-4"><div class="border rounded p-3"><div class="text-body-secondary small">Available</div><strong class="fs-3 demo-stat">8</strong></div></div></div>
<div class="row g-4"><section class="col-lg-7" aria-labelledby="list-title"><div class="d-flex align-items-center justify-content-between gap-3 mb-3"><h2 id="list-title" class="h5 m-0">Reservation list</h2><div><label for="filter" class="visually-hidden">Filter reservations by status</label><select class="form-select form-select-sm" id="filter"><option value="all">All statuses</option><option value="Reserved">Reserved</option><option value="In use">In use</option><option value="Draft">Draft</option></select></div></div><div class="table-responsive border rounded"><table class="table table-hover mb-0"><caption class="px-3">Fictional records. New entries stay in this browser tab.</caption><thead class="table-light"><tr><th scope="col">Equipment</th><th scope="col">Date</th><th scope="col">Status</th></tr></thead><tbody id="rows"><tr data-status="Reserved"><th scope="row" class="fw-medium">Camera kit A<div class="small fw-normal text-body-secondary">Mia Chen</div></th><td>10 Oct</td><td><span class="badge text-primary-emphasis bg-primary-subtle">Reserved</span></td></tr><tr data-status="In use"><th scope="row" class="fw-medium">Lighting studio<div class="small fw-normal text-body-secondary">Alex Kim</div></th><td>10 Oct</td><td><span class="badge text-success-emphasis bg-success-subtle">In use</span></td></tr><tr data-status="Draft"><th scope="row" class="fw-medium">Audio recorder<div class="small fw-normal text-body-secondary">Jules Davis</div></th><td>11 Oct</td><td><span class="badge text-secondary-emphasis bg-secondary-subtle">Draft</span></td></tr></tbody></table></div><p id="empty" class="alert alert-info mt-3" hidden>No reservations match this status.</p><p id="results" class="small text-body-secondary mt-2" aria-live="polite">3 reservations shown</p><div class="alert alert-primary mt-4 mb-0"><strong>Try the system</strong><p class="small mb-0 mt-1">Switch color mode, filter the table, submit an empty form, then review a complete reservation in a Bootstrap modal.</p></div></section>
<section class="col-lg-5" aria-labelledby="form-title"><div class="card"><div class="card-body p-3 p-md-4"><h2 id="form-title" class="h5 mb-3">New reservation</h2><form id="reservation" novalidate><div id="error-summary" class="alert alert-danger" tabindex="-1" role="alert" hidden><strong>Check the reservation details.</strong><ul class="mb-0 mt-2" id="error-links"></ul></div><div class="mb-3"><label class="form-label" for="equipment">Equipment</label><select class="form-select" id="equipment" aria-describedby="equipment-error" required><option value="">Choose equipment</option><option>Camera kit A</option><option>Lighting studio</option><option>Audio recorder</option></select><div id="equipment-error" class="invalid-feedback">Choose equipment for this reservation.</div></div><div class="mb-3"><label class="form-label" for="owner">Reserved by</label><input class="form-control" id="owner" autocomplete="name" aria-describedby="owner-hint owner-error" required><div class="form-text" id="owner-hint">Use a fictional name for this example.</div><div class="invalid-feedback" id="owner-error">Enter the name of the person reserving equipment.</div></div><div class="mb-3"><label class="form-label" for="date">Reservation date</label><input class="form-control" id="date" type="date" aria-describedby="date-error" required><div class="invalid-feedback" id="date-error">Choose a reservation date.</div></div><button type="submit" class="btn btn-primary w-100">Review reservation</button></form><p class="small text-body-secondary mt-3 mb-0">This example validates input locally. It does not reserve real equipment.</p></div></div></section></div><div id="notice" class="alert alert-success mt-4 demo-status" role="status" hidden></div></main>
<div class="modal fade" id="review-modal" tabindex="-1" aria-labelledby="review-title" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="modal-header"><h2 class="modal-title fs-5" id="review-title">Review reservation</h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close review"></button></div><div class="modal-body"><dl class="row mb-0"><dt class="col-4">Equipment</dt><dd class="col-8" id="review-equipment"></dd><dt class="col-4">Reserved by</dt><dd class="col-8" id="review-owner"></dd><dt class="col-4">Date</dt><dd class="col-8" id="review-date"></dd></dl><p class="small text-body-secondary mt-3 mb-0">Confirming adds a row to this local example only.</p></div><div class="modal-footer"><button class="btn btn-outline-secondary" data-bs-dismiss="modal" type="button">Edit details</button><button class="btn btn-primary" id="confirm" type="button">Add to example</button></div></div></div></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script><script>
const $=id=>document.getElementById(id);const fields=['equipment','owner','date'];const review=bootstrap.Modal.getOrCreateInstance($('review-modal'));
$('theme').onclick=()=>{const dark=document.documentElement.dataset.bsTheme!=='dark';document.documentElement.dataset.bsTheme=dark?'dark':'light';$('theme').setAttribute('aria-pressed',String(dark));$('theme').textContent=dark?'Light mode':'Dark mode'};
function filter(){let count=0;for(const row of $('rows').rows){row.hidden=$('filter').value!=='all'&&row.dataset.status!==$('filter').value;if(!row.hidden)count++}$('empty').hidden=count>0;$('results').textContent=count+' reservations shown'}$('filter').onchange=filter;
function validateField(id){const el=$(id),invalid=!el.checkValidity();el.classList.toggle('is-invalid',invalid);el.setAttribute('aria-invalid',String(invalid));return !invalid}
$('reservation').onsubmit=e=>{e.preventDefault();const invalid=fields.filter(id=>!validateField(id));$('error-links').replaceChildren();$('error-summary').hidden=invalid.length===0;if(invalid.length){for(const id of invalid){const li=document.createElement('li'),a=document.createElement('a');a.href='#'+id;a.className='alert-link';a.textContent=$(id+'-error').textContent;a.onclick=e=>{e.preventDefault();$(id).focus()};li.append(a);$('error-links').append(li)}$('error-summary').focus();return}for(const id of fields)$('review-'+id).textContent=$(id).value;review.show()};
for(const id of fields)$(id).addEventListener('input',()=>{if($(id).getAttribute('aria-invalid')==='true')validateField(id)});
$('review-modal').addEventListener('hidden.bs.modal',()=>$('reservation').querySelector('button').focus());
$('confirm').onclick=()=>{const row=document.createElement('tr');row.dataset.status='Reserved';const name=document.createElement('th');name.scope='row';name.className='fw-medium';name.textContent=$('equipment').value;const owner=document.createElement('div');owner.className='small fw-normal text-body-secondary';owner.textContent=$('owner').value;name.append(owner);const date=document.createElement('td');date.textContent=$('date').value;const state=document.createElement('td'),badge=document.createElement('span');badge.className='badge text-primary-emphasis bg-primary-subtle';badge.textContent='Reserved';state.append(badge);row.append(name,date,state);$('rows').prepend(row);$('count').textContent=$('rows').rows.length;$('filter').value='all';filter();review.hide();$('notice').hidden=false;$('notice').textContent='Reservation added to this local example. No data was sent.';$('reservation').reset();for(const id of fields){$(id).classList.remove('is-invalid');$(id).removeAttribute('aria-invalid')}};
</script></body></html>
```

Code-Referenz

- Kein Dienst erhält das Formular. Bestätigte Reservierungen bestehen nur während der Sitzung dieser Seite.

- Die lokale Vorschau enthält dieselben festgelegten Versionen von CSS und JavaScript. Diese Kopie verwendet deren öffentliche CDN-URLs.

### Feldbeschriftung, Hinweis und expliziter Fehlerzustand

Diese eigenständige Feldkomposition verwendet Bootstrap-Formatierung und ein tatsächliches Validierungsergebnis. Das Seitenbeispiel ergänzt eine Fehlerübersicht mit fokussierbaren Links zu den drei Feldern. Ein roter Rahmen allein vermittelt nicht, was korrigiert werden muss.

```
<form id="reservation" novalidate>
  <label for="owner" class="form-label">Reserved by</label>
  <input id="owner" class="form-control" required
    aria-describedby="owner-hint owner-error">
  <div id="owner-hint" class="form-text">Use a fictional name.</div>
  <div id="owner-error" class="invalid-feedback">Enter a name.</div>
  <button class="btn btn-primary mt-3" type="submit">Review reservation</button>
</form>
<script>
const form = document.querySelector('#reservation');
const input = document.querySelector('#owner');
form.addEventListener('submit', event => {
  event.preventDefault();
  const invalid = !input.checkValidity();
  input.classList.toggle('is-invalid', invalid);
  input.setAttribute('aria-invalid', String(invalid));
  if (invalid) input.focus();
});
</script>
```

Code-Referenz

- .is-invalid kann auch ohne .was-validated explizit gesetzt werden.

- aria-describedby verknüpft Hinweis- und Fehlertext; aria-invalid gibt den aktuellen Zustand an.

- Die Dokumentation weist darauf hin, dass eine rein visuelle benutzerdefinierte Validierung assistiven Technologien nicht genügend Informationen bereitstellt.

### Ein natives Prüfmodal mit eindeutiger Beschriftung

Das Modal verwendet das tatsächliche Plugin von Bootstrap, den Hintergrund, die Escape-Tastenbehandlung und die Fokusverwaltung. Platzieren Sie den Titel in modal-header, die Prüfung in modal-body und die Aktionen zum Fortfahren in modal-footer.

```
<button class="btn btn-primary" data-bs-toggle="modal"
  data-bs-target="#review">Review reservation</button>
<div class="modal fade" id="review" tabindex="-1"
  aria-labelledby="review-title" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title fs-5" id="review-title">Review reservation</h2>
        <button class="btn-close" data-bs-dismiss="modal"
          aria-label="Close review"></button>
      </div>
      <div class="modal-body">Camera kit A · 10 October</div>
      <div class="modal-footer">
        <button class="btn btn-outline-secondary" data-bs-dismiss="modal">Edit details</button>
      </div>
    </div>
  </div>
</div>
```

Code-Referenz

- Das passende Bootstrap-JavaScript-Bundle einmal laden.

- Das data-API öffnet ein statisches Beispiel. Das funktionierende Reservierungsformular verwendet nach erfolgreicher Eingabe Modal.getOrCreateInstance.

- Verwenden Sie shown.bs.modal für Verhalten, das erst nach Abschluss des Öffnungsübergangs ausgeführt werden soll.

### Eine responsive Kombination aus Liste und Formular

Die Inventarliste belegt am lg-Breakpoint sieben Spalten, das Formular fünf. Unterhalb von lg werden beide Bereiche untereinander angeordnet. g-4 sorgt für einen Abstand von 1.5rem zwischen den Elementen. Die Spalten beschreiben die Breite; semantische Bereiche und Überschriften beschreiben den Inhalt.

```
<main class="container py-4">
  <div class="row g-4">
    <section class="col-lg-7" aria-labelledby="reservations-title">
      <h2 id="reservations-title" class="h5">Reservations</h2>
      <div class="table-responsive">
        <table class="table table-hover">
          <caption>Fictional equipment reservations</caption>
          <thead><tr><th scope="col">Equipment</th><th scope="col">Status</th></tr></thead>
          <tbody><tr><th scope="row">Camera kit A</th><td>Reserved</td></tr></tbody>
        </table>
      </div>
    </section>
    <section class="col-lg-5" aria-labelledby="new-title">
      <h2 id="new-title" class="h5">New reservation</h2>
    </section>
  </div>
</main>
```

Code-Referenz

- Dasselbe Raster kann col-md-* verwenden, wenn der Inhalt tatsächlich schon bei einem früheren Breakpoint passt.

- Verwenden Sie die obige Breakpoint-Tabelle statt Media Queries mit CSS-Variablen; var() kann keinen Schwellenwert für Media Queries bereitstellen.

## Bootstrap Designsystem: Einrichtung für AI agents

### Ausgangspunkt für die Implementierung

Für dieses vollständige HTML-Beispiel ist kein Build-Schritt erforderlich. Es importiert Bootstrap 5.3.8 über die in der Datei angegebenen, festgelegten CDN-URLs. Die kürzeren Beispiele weiter unten zeigen einzelne Muster aus dieser funktionierenden Seite isoliert.

```
# Save the complete index.html from Component Examples in a new folder.
# Serve that folder with Python 3:
python3 -m http.server 8000
# Open http://localhost:8000/ in a browser.
```

### Ein Prompt für dein Projekt

```
Implementieren Sie mit Bootstrap 5.3.8 und diesem Leitfaden eine Benutzeroberfläche zur Reservierung von Ausrüstung. Verwenden Sie eine Zeile mit g-4 sowie col-lg-7 und col-lg-5, Abstände mit p-3 p-md-4, Theme-abhängige Rollen für Body-, dezente und hervorgehobene Farben, eine semantische Tabelle und beschriftete Formularsteuerelemente. Validieren Sie die Eingaben mit expliziten Fehlern und einer Fehlerübersicht, bevor Sie das native Bootstrap Modal öffnen. Behalten Sie beim Bearbeiten die Eingaben bei. Fügen Sie Datensätze nur zum lokalen Demo-Zustand hinzu, sofern kein echtes API bereitgestellt wird. Unterstützen Sie data-bs-theme light/dark und das Schließen per Tastatur. Ersetzen Sie die vorgegebene Skala nicht durch willkürliche Werte.
```

## Bootstrap Designsystem: Quellen und Geltungsbereich

Anwendungsleitfaden für OpenDesign’s Bootstrap 5.3.8 und ausführbares Beispiel mit nativen Komponenten. Referenzwerte stammen aus der verlinkten Bootstrap-Dokumentation und dem festgelegten, kompilierten CSS. Reservierungsdatensätze, Layoutkomposition und Validierungsübersicht sind eigens erstellter Anwendungscode; es wird keine echte Reservierung übermittelt.

- Bootstrap-5.3-Referenz Versionierte Grundlagen, Dienstprogramme und Komponenten.

- CSS-Variablen und Standardwerte In den Spezifikationstabellen verwendete Namen und Standardwerte.

- Validierungs- und Modalverhalten Hinweise zu Feldzuständen; bei Komponentenbeispielen sind außerdem die genauen API-Seiten verlinkt.

## Bootstrap Designsystem: Verwandte Ressourcen

### Bulma

Erstelle einen redaktionellen Arbeitsplatz mit der tatsächlichen Feld- und Steuerungsstruktur von Bulma, responsiven Spalten, semantischen Farbmodifikatoren und CSS-Variablen sowie vollständigem Validierungscode.

### Chakra UI

Eine Referenz zu Chakra UI v3 für Tokens, semantische Farbrollen, Rezepte und zusammengesetzte Formular-Komponenten. Sieh dir die tatsächlichen Abstands- und Schriftgrößenskalen an und probiere anschließend ein natives Formular für ein Arbeitsbereichsprofil mit Validierung, Simulation eines fehlgeschlagenen Speichervorgangs und heller/dunkler Darstellung aus.

### CoreUI

Eine mit echten 5.9-Theme-Variablen erstellte Prüfwarteschlange für CoreUI mit nativen Tabs, Mehrfachauswahl per Kontrollkästchen und einer dauerhaft eingeblendeten Toast-Meldung, über die sich der letzte lokale Archivierungsvorgang rückgängig machen lässt.


- [Implementierungsreferenz](https://getbootstrap.com/docs/5.3/getting-started/introduction/)
- [Quelle](https://getbootstrap.com/docs/5.3/customize/css-variables/)
- [Quelle](https://getbootstrap.com/docs/5.3/content/typography/)
- [Quelle](https://getbootstrap.com/docs/5.3/utilities/spacing/)
- [Quelle](https://getbootstrap.com/docs/5.3/layout/grid/)
- [Quelle](https://getbootstrap.com/docs/5.3/components/buttons/)
- [Quelle](https://getbootstrap.com/docs/5.3/customize/color-modes/)
- [Unterstützende Spezifikation lesen](https://getbootstrap.com/docs/5.3/getting-started/introduction/)
- [Code-Referenz](https://getbootstrap.com/docs/5.3/customize/sass/)
- [Unterstützende Spezifikation lesen](https://getbootstrap.com/docs/5.3/customize/sass/)
- [Code-Referenz](https://getbootstrap.com/docs/5.3/customize/color-modes/)
- [Unterstützende Spezifikation lesen](https://getbootstrap.com/docs/5.3/customize/color-modes/)
- [Code-Referenz](https://getbootstrap.com/docs/5.3/components/buttons/)
- [Unterstützende Spezifikation lesen](https://getbootstrap.com/docs/5.3/components/buttons/)
- [Unterstützende Spezifikation lesen](https://getbootstrap.com/docs/5.3/content/typography/)
- [Code-Referenz](https://getbootstrap.com/docs/5.3/utilities/colors/)
- [Unterstützende Spezifikation lesen](https://getbootstrap.com/docs/5.3/utilities/colors/)
- [Code-Referenz](https://getbootstrap.com/docs/5.3/utilities/spacing/)
- [Unterstützende Spezifikation lesen](https://getbootstrap.com/docs/5.3/utilities/spacing/)
- [Unterstützende Spezifikation lesen](https://getbootstrap.com/docs/5.3/layout/grid/)
- [Code-Referenz](https://getbootstrap.com/docs/5.3/forms/form-control/)
- [Unterstützende Spezifikation lesen](https://getbootstrap.com/docs/5.3/forms/form-control/)
- [Unterstützende Spezifikation lesen](https://getbootstrap.com/docs/5.3/forms/validation/)
- [Code-Referenz](https://getbootstrap.com/docs/5.3/content/tables/)
- [Unterstützende Spezifikation lesen](https://getbootstrap.com/docs/5.3/content/tables/)
- [Code-Referenz](https://getbootstrap.com/docs/5.3/components/modal/)
- [Unterstützende Spezifikation lesen](https://getbootstrap.com/docs/5.3/components/modal/)
- [Unterstützende Spezifikation lesen](https://getbootstrap.com/docs/5.3/getting-started/vite/)
- [Unterstützende Spezifikation lesen](https://getbootstrap.com/docs/5.3/getting-started/javascript/)
- [Code-Referenz](https://getbootstrap.com/docs/5.3/getting-started/introduction/)
- [Code-Referenz](https://getbootstrap.com/docs/5.3/forms/validation/)
- [Code-Referenz](https://getbootstrap.com/docs/5.3/layout/grid/)
- [Bootstrap-5.3-Referenz Versionierte Grundlagen, Dienstprogramme und Komponenten.](https://getbootstrap.com/docs/5.3/)
- [CSS-Variablen und Standardwerte In den Spezifikationstabellen verwendete Namen und Standardwerte.](https://getbootstrap.com/docs/5.3/customize/css-variables/)
- [Validierungs- und Modalverhalten Hinweise zu Feldzuständen; bei Komponentenbeispielen sind außerdem die genauen API-Seiten verlinkt.](https://getbootstrap.com/docs/5.3/forms/validation/)