Kursinhalt

Bootstrap-Grundlagen für Moderne Websites

1. Verständnis von Bootstrap

Hallo Bootstrap Geschichte und Entwicklung Vorteile und Nachteile Lernen Maximieren Quiz

2. Einrichtung der Umgebung

Bootstrap-Installationsoptionen Installation Über CDN Installation Über NPM Herausforderung & Quiz

3. Grundkonzepte

Rastersystem Typografie Teil 1 Typografie Teil 2 Schaltflächen Teil 1 Buttons Teil 2 Ränder und Abstände Formulare Herausforderung & Quiz

4. Fortgeschrittene Konzepte

Navigation Bilder Karten Modale Karussells Herausforderung & Quiz

5. Erstellen Einer Portfolio-Website Mit Bootstrap

Einführung Einrichten der Entwicklungsumgebung Erstellen der Kopfzeilennavigation Gestaltung des Hero-Bereichs Erstellen des Erfahrungsbereichs Erstellen des Fähigkeitenabschnitts Implementierung Des Kontaktformulars Fazit

Herausforderung & Quiz

Hinweis

Alle Herausforderungen folgen dem unten gezeigten Format:

Ihnen wird die Aufgabe präsentiert, die abgeschlossen werden muss;

Danach stoßen Sie auf einen Codeblock, in dem Sie Änderungen basierend auf der Aufgabe implementieren müssen;

Klicken Sie auf die Schaltfläche Code ausführen, um die Live-Seite anzuzeigen;

Unter dem Codeblock finden Sie zwei Schaltflächen: Hinweis und Lösung;

Die Schaltfläche Hinweis bietet Anleitungen für die Aufgabe;

Die Schaltfläche Lösung zeigt die korrekte Lösung an.

Es wird empfohlen, dass Sie die Aufgabe selbstständig versuchen, bevor Sie auf die Schaltfläche Lösung zurückgreifen.

Aufgabe

Sie haben einen grundlegenden HTML-Code mit einem button-Element erhalten, das derzeit mit den Standardbrowserstilen gestaltet ist. Obwohl das button-Element Klassennamen aus Bootstrap enthält, sind auf der Live-Seite keine Änderungen sichtbar, da Bootstrap nicht in das Projekt integriert wurde. Ihre Aufgabe ist es, die entsprechenden Links hinzuzufügen, um Bootstrap mit dem Projekt zu verbinden.

index.html

Um den Link zur Bootstrap-CSS hinzuzufügen, verwenden Sie den folgenden Code: <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">.
Für den Bootstrap-JavaScript-Link verwenden Sie diesen Code: <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 Kontext der Bootstrap-Integration?

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

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

Select the correct answer

Verwendung von AngularJS.

CDN-Integration.

PHP-Integration.

jQuery-Integration.

Wofür steht CDN im Kontext der Bootstrap-Integration?

Select the correct answer

Central Data Network.

Content Delivery Network.

Code Development Network.

Cascading Distribution Network.

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

Select the correct answer

npm install bootstrap

npm add bootstrap

npm include bootstrap

npm get bootstrap

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 4

Fragen Sie AI

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Kursinhalt

Bootstrap-Grundlagen für Moderne Websites

1. Verständnis von Bootstrap

Hallo Bootstrap Geschichte und Entwicklung Vorteile und Nachteile Lernen Maximieren Quiz

2. Einrichtung der Umgebung

Bootstrap-Installationsoptionen Installation Über CDN Installation Über NPM Herausforderung & Quiz

3. Grundkonzepte

Rastersystem Typografie Teil 1 Typografie Teil 2 Schaltflächen Teil 1 Buttons Teil 2 Ränder und Abstände Formulare Herausforderung & Quiz

4. Fortgeschrittene Konzepte

Navigation Bilder Karten Modale Karussells Herausforderung & Quiz

5. Erstellen Einer Portfolio-Website Mit Bootstrap

Herausforderung & Quiz

Hinweis

Alle Herausforderungen folgen dem unten gezeigten Format:

Ihnen wird die Aufgabe präsentiert, die abgeschlossen werden muss;

Danach stoßen Sie auf einen Codeblock, in dem Sie Änderungen basierend auf der Aufgabe implementieren müssen;

Klicken Sie auf die Schaltfläche Code ausführen, um die Live-Seite anzuzeigen;

Unter dem Codeblock finden Sie zwei Schaltflächen: Hinweis und Lösung;

Die Schaltfläche Hinweis bietet Anleitungen für die Aufgabe;

Die Schaltfläche Lösung zeigt die korrekte Lösung an.

Es wird empfohlen, dass Sie die Aufgabe selbstständig versuchen, bevor Sie auf die Schaltfläche Lösung zurückgreifen.

Aufgabe

index.html

Um den Link zur Bootstrap-CSS hinzuzufügen, verwenden Sie den folgenden Code: <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">.
Für den Bootstrap-JavaScript-Link verwenden Sie diesen Code: <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 Kontext der Bootstrap-Integration?

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

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

Select the correct answer

Verwendung von AngularJS.

CDN-Integration.

PHP-Integration.

jQuery-Integration.

Wofür steht CDN im Kontext der Bootstrap-Integration?

Select the correct answer

Central Data Network.

Content Delivery Network.

Code Development Network.

Cascading Distribution Network.

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

Select the correct answer

npm install bootstrap

npm add bootstrap

npm include bootstrap

npm get bootstrap

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 4