Verwende Bootstrap 5.3.8 mit seiner tatsächlichen Abstandsskala, semantischen Farben, responsiven Rasterdarstellung und Komponenten-APIs. Probiere ein funktionierendes Reservierungsformular, eine Fehlerübersicht, einen Tabellenfilter, ein modales Fenster und einen Farbschema-Umschalter aus und verwende anschließend den dokumentierten Code erneut.
Natives Bootstrap 5.3.8 CSS und JavaScript, lokal bereitgestellt. Reservierungsdaten und Anwendungsverhalten sind eigens erstellte Beispiele. · Implementierungsreferenz
02
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.
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.
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.
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.
Ü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.
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.
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.
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.
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.
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.
Das Ergebnis der tatsächlichen Einschränkungsprüfung kontrollieren, bevor das Feld als fehlerhaft markiert wird.
Den Fehlertext mit dem Feld verknüpfen und den Fehlerzustand kenntlich machen.
Den Fokus nach dem Absenden auf eine hilfreiche Übersicht oder das erste fehlerhafte Feld setzen.
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.
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.
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.
javascript
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();
});
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.
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.
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.
html
<!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/[email protected]/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/[email protected]/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>
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.
.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.
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.
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.
04
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.
sh
# 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
Agenten-Prompt
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.
05
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.
