> Hinweis
>
> Alle Herausforderungen folgen demselben Format wie unten dargestellt:
> - Es wird eine Aufgabe präsentiert, die erledigt werden muss;
> - Anschließend erscheint ein Codeblock, in dem Änderungen entsprechend der Aufgabe vorgenommen werden sollen;
> - Mit dem **Run Code**-Button kann die Live-Seite angezeigt werden;
> - Unterhalb des Codeblocks befinden sich zwei Schaltflächen: **Hinweis** und **Lösung**;
>    - Die **Hinweis**-Schaltfläche bietet eine Hilfestellung zur Aufgabe;
>    - Die **Lösung**-Schaltfläche zeigt die korrekte Lösung an.
> - Es wird empfohlen, die Aufgabe zunächst eigenständig zu bearbeiten, bevor die **Lösung**-Schaltfläche verwendet wird.

## Aufgabe
Es steht ein grundlegender HTML-Code mit einem `button`-Element zur Verfügung, das derzeit mit den Standardstilen des Browsers angezeigt wird. Obwohl das `button`-Element Klassennamen aus Bootstrap enthält, sind auf der Live-Seite keine Änderungen sichtbar, da Bootstrap noch nicht in das Projekt eingebunden wurde. Die Aufgabe besteht darin, die entsprechenden Verknüpfungen hinzuzufügen, um Bootstrap mit dem Projekt zu verbinden.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Q2hhbGxlbmdlIDE8L3RpdGxlPgogICAgPCEtLSBJbmNsdWRlIEJvb3RzdHJhcCBDU1MgbGluayBiZWxvdyAtLT4KCiAgPC9oZWFkPgogIDxib2R5PgogICAgPGJ1dHRvbiB0eXBlPSJidXR0b24iIGNsYXNzPSJidG4gYnRuLXN1Y2Nlc3MiPlN1Y2Nlc3M8L2J1dHRvbj4KICAgIDwhLS0gSW5jbHVkZSBCb290c3RyYXAgSmF2YVNjcmlwdCBsaW5rIGJlbG93IC0tPgogICAgCiAgPC9ib2R5Pgo8L2h0bWw+

- Um den Link zur Bootstrap-CSS hinzuzufügen, folgenden Code verwenden: `<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">`.
- Für den Bootstrap-JavaScript-Link diesen Code verwenden: `<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>`.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Q2hhbGxlbmdlIDE8L3RpdGxlPgogICAgPCEtLSBJbmNsdWRlIEJvb3RzdHJhcCBDU1MgbGluayBiZWxvdyAtLT4KICAgIDxsaW5rCiAgICAgIGhyZWY9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vYm9vdHN0cmFwQDUuMy4yL2Rpc3QvY3NzL2Jvb3RzdHJhcC5taW4uY3NzIgogICAgICByZWw9InN0eWxlc2hlZXQiCiAgICAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxidXR0b24gdHlwZT0iYnV0dG9uIiBjbGFzcz0iYnRuIGJ0bi1zdWNjZXNzIj5TdWNjZXNzPC9idXR0b24+CiAgICA8IS0tIEluY2x1ZGUgQm9vdHN0cmFwIEphdmFTY3JpcHQgbGluayBiZWxvdyAtLT4KICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL2Jvb3RzdHJhcEA1LjMuMi9kaXN0L2pzL2Jvb3RzdHJhcC5taW4uanMiPjwvc2NyaXB0PgogIDwvYm9keT4KPC9odG1sPg==

Was ist eine der Methoden, um Bootstrap in ein Projekt zu integrieren?

Wofür steht CDN im Zusammenhang mit der Bootstrap-Integration?

Welcher Befehl wird verwendet, um Bootstrap über NPM zu installieren?

Erkunden Sie die grundlegenden Prinzipien des Bootstrap CSS-Frameworks und entdecken Sie die Geheimnisse zur schnellen und effizienten Erstellung responsiver und optisch ansprechender Websites. Durch praktische Anwendung der wichtigsten Utilities und die Implementierung leistungsstarker Komponenten erwerben Sie wertvolle praktische Erfahrungen, um Ihren Webentwicklungsprozess mit dem vielseitigen Toolkit von Bootstrap zu optimieren.

Erkunden Sie das Wesen von Bootstrap und seine Entwicklung von den Anfängen bis zur Gegenwart, bewerten Sie Vorteile und Nachteile und verstehen Sie die Voraussetzungen für eine effektive Implementierung.

Übersicht über die Installationsoptionen von Bootstrap. Auswahl zwischen schneller Integration über Content Delivery Network (CDN) oder einer individuelleren Methode mit Node Package Manager (NPM).

Erwerb von Kenntnissen in zentralen Bootstrap-Elementen, einschließlich des vielseitigen Rastersystems, differenzierter Typografie, dynamischer Button-Nutzung, präziser Verwaltung von Abständen und Innenabständen sowie der Gestaltung effektiver Formulare für eine nahtlose Benutzerinteraktion.

Steigerung der Bootstrap-Kenntnisse durch fortgeschrittene Themen wie dynamische Navigationsmenüs, responsive Bildverarbeitung, vielseitige Kartenlayouts, interaktive Modals und ansprechende Karussells für fesselnde Nutzererlebnisse.

Erstellen Sie eine Portfolio-Website mit dem Bootstrap-Framework anhand unserer Anleitung. Nutzen Sie die leistungsstarken Funktionen von Bootstrap. Dieser praxisorientierte Abschnitt hilft dabei, Ihre Fähigkeiten, Projekte und Erfolge zu präsentieren.

Herausforderung & Quiz: Bootstrap Einrichten

Aufgabe

Quiz

1. Was ist eine der Methoden, um Bootstrap in ein Projekt zu integrieren?

2. Wofür steht CDN im Zusammenhang mit der Bootstrap-Integration?

3. Welcher Befehl wird verwendet, um Bootstrap über NPM zu installieren?