Wenn wir an einem Vanilla HTML-, CSS- und JS-Projekt arbeiten, können wir ein CDN verwenden, um die CSS- und JavaScript-Dateien von Bootstrap direkt in das HTML-Dokument einzubinden, ohne sie auf den lokalen Rechner herunterzuladen.

So können wir Bootstrap über ein CDN in die HTML-Datei einbinden:

<!-- Include Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Include Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>

Verhaltensunterschied

In den folgenden Beispielen werden wir den Unterschied zwischen den Standard-Browserstilen und den mit Bootstrap angewendeten Stilen demonstrieren. Wir werden uns zu diesem Zeitpunkt nicht auf die Verwendung von Bootstrap konzentrieren.

Standard-Browser-Stile

Mit Bootstrap angewandte Stile

Erklärung

Beide Beispiele enthalten ein button-Element, das mit den Klassen btn und btn-primary versehen ist. Das Erscheinungsbild wird ausschließlich durch das Anwenden dieser beiden von Bootstrap bereitgestellten Klassen erreicht, ohne dass zusätzliche CSS-Stile erforderlich sind.