Herausforderung & Quiz: Bootstrap Einrichten
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.
index.html
- 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>.
index.html
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?
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Can you explain where exactly I should place the Bootstrap links in the HTML file?
Do I need to add both the CSS and JavaScript links for Bootstrap to work?
What changes should I expect to see after adding Bootstrap to the project?
Awesome!
Completion rate improved to 3.23Herausforderung & Quiz: Bootstrap Einrichten
Swipe um das Menü anzuzeigen
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.
index.html
- 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>.
index.html
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?
Danke für Ihr Feedback!
