Bootstrap - Reboot: Ein freundlicher Leitfaden für Anfänger

Hallo da draußen, zukünftige Webentwickler! Ich freue mich sehr, Ihr Guide auf dieser aufregenden Reise in die Welt von Bootstrap Reboot zu sein. Als jemand, der seit Jahren Informatik unterrichtet, kann ich es kaum erwarten, mein Wissen und meine Erfahrung mit Ihnen zu teilen. Also holen Sie sich eine Tasse Kaffee (oder Tee, wenn das mehr Ihr Ding ist) und tauchen wir ein!

Bootstrap - Reboot

Was ist Bootstrap Reboot?

Bevor wir loslegen, lassen Sie mich Ihnen eine kleine Geschichte erzählen. Stellen Sie sich vor, Sie ziehen in ein neues Haus. Bevor Sie mit dem Einrichten beginnen, möchten Sie eine saubere Leinwand, oder? Genau das macht Bootstrap Reboot für die Webentwicklung. Es ist so, als würde您的 Webpage einen frischen Anstrich verpassen, und schafft eine konsistente Grundlage, auf der Sie aufbauen können.

Bootstrap Reboot ist eine Sammlung von CSS-Stilen, die die Standard-HTML-Elemente across verschiedenen Browser normalisieren. Es ist wie eine universelle Sprache für Webbrowser, die sicherstellt, dass Ihre Webseite überall gleich aussieht.

Herangehensweise

Der Ansatz von Bootstrap Reboot ist einfach, aber kraftvoll. Es zielt darauf ab:

Eine saubere Leinwand für die Webentwicklung zu bieten
Konsistenz across verschiedenen Browser zu gewährleisten
Die Benutzerfreundlichkeit und Zugänglichkeit zu verbessern

Nun tauchen wir in die Details ein!

Standardseiten-Einstellungen

Bootstrap Reboot setzt einige Standardstile für die gesamte Seite. Hier ist ein einfaches Beispiel:

<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Meine großartige Webseite</title>
</head>
<body>
<h1>Willkommen auf meiner Webseite!</h1>
</body>
</html>

In diesem Beispiel stellt Bootstrap Reboot sicher, dass:

Das box-sizing auf border-box für alle Elemente gesetzt ist
Die font-family auf eine native Schriftartenliste gesetzt ist (mehr dazu später!)
Die line-height auf 1.5 für bessere Lesbarkeit gesetzt ist
Die background-color des body auf Weiß gesetzt ist

Native Schriftartenliste

Erinnern Sie sich an die Zeiten, in denen wir genaue Schriftarten für unsere Webseiten angegeben haben? Bootstrap Reboot führt eine native Schriftartenliste ein. Es ist wie ein Kleiderschrank, der immer gut aussieht, egal welche Kleidung Sie anziehen!

body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

Diese Schriftartenliste stellt sicher, dass Ihr Text auf jedem Gerät gut aussieht und die Systemschriftart verwendet wird.

Überschriften

Überschriften sind wie Kapitelüberschriften in einem Buch. Sie helfen dabei, Ihren Inhalt zu organisieren und lesbarer zu gestalten. Bootstrap Reboot bietet konsistente Stile für alle Überschriftenlevels (h1 bis h6).

<h1>Dies ist eine Hauptüberschrift</h1>
<h2>Dies ist eine Unterüberschrift</h2>
<h3>Dies ist eine Sub-Unterüberschrift</h3>

Absätze

Absätze sind das daily Bread und Butter Ihres Inhalts. Bootstrap Reboot stellt sicher, dass sie leicht zu lesen und gut abgestanden sind.

<p>Dies ist ein Absatz. Er ist leicht zu lesen Dank Bootstrap Reboot's Standardstyles.</p>
<p>Jetzt ein weiterer Absatz. Beachten Sie die schöne Abstand zwischen den Absätzen?</p>

Links

Links sind die Autobahnen des Internets, die verschiedene Teile Ihrer Webseite und andere Webseiten verbinden. Bootstrap Reboot stellt sicher, dass sie leicht erkennbar sind.

<a href="https://example.com">Dies ist ein Link</a>

Standardmäßig sind Links blau und unterstrichen. Wenn Sie darüber hinwegfahren, disappears die Unterstreichung.

Horizontale Linien

Horizontale Linien sind wie die Trennlinien in einem Notizbuch. Sie helfen dabei, verschiedene Abschnitte Ihres Inhalts zu trennen.

<hr>

Bootstrap Reboot stellt sicher, dass horizontale Linien sichtbar, aber nicht überwältigend sind.

Listen

Listen helfen dabei, Informationen strukturiert zu organisieren. Bootstrap Reboot bietet Stile für sowohl geordnete als auch unsortierte Listen.

<ul>
<li>Dies ist ein ungeordneter Listenpunkt</li>
<li>Und hier ist ein weiterer</li>
</ul>

<ol>
<li>Dies ist ein geordneter Listenpunkt</li>
<li>Dies ist der zweite Punkt</li>
</ol>

Inline-Code

Manchmal müssen Sie einen Stück Code in Ihrem Text hervorheben. Bootstrap Reboot macht dies einfach und optisch ansprechend.

<p>Verwenden Sie die <code>console.log()</code>-Funktion, um in die Konsole zu schreiben.</p>

Codeblöcke

Für größere Codeausschnitte können Sie Codeblöcke verwenden. Bootstrap Reboot stellt sicher, dass sie leicht zu lesen und visuell von Ihrem Inhalt abgesetzt sind.

<pre><code>
function begrüßen(name) {
console.log(`Hallo, ${name}!`);
}
</code></pre>

Variablen

In der Programmierung sind Variablen wie Behälter, die Daten enthalten. Bootstrap Reboot bietet Stile für die Anzeige von Variablen in Ihrem Text.

<p>Die Variable <var>x</var> represents die x-Koordinate.</p>

Benutzereingaben

Wenn Sie angeben müssen, was ein Benutzer eingeben soll, hat Bootstrap Reboot Sie abgedeckt.

<p>Um Ihre Arbeit zu speichern, drücken Sie <kbd>Strg + S</kbd>.</p>

Beispieloutput

Manchmal müssen Sie zeigen, wie die Ausgabe eines Programms aussehen könnte. Bootstrap Reboot bietet auch für dies Stile.

<samp>Dies ist, wie die Ausgabe aussehen könnte.</samp>

Tabellen

Tabellen sind großartig für die Darstellung strukturierter Daten. Bootstrap Reboot stellt sicher, dass sie sauber und leicht zu lesen sind.

<table>
<thead>
<tr>
<th>Name</th>
<th>Alter</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
</tr>
</tbody>
</table>

Formulare

Formulare sind die Art und Weise, wie Benutzer mit Ihrer Webseite interagieren. Bootstrap Reboot bietet konsistente Stile für Formularelemente.

<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">

<label for="email">E-Mail:</label>
<input type="email" id="email" name="email">

<button type="submit">Absenden</button>
</form>

Zeiger auf Buttons

Buttons sind interaktive Elemente, und Bootstrap Reboot stellt sicher, dass sie aussehen wie ein Button.

<button>Klicke mich!</button>

Wenn Sie über einen Button hinwegfahren, ändert sich der Cursor in einen Zeiger, der anzeigt, dass er klickbar ist.

Verschiedene Elemente

Bootstrap Reboot bietet auch Stile für verschiedene andere HTML-Elemente. Hier ist ein schneller Überblick:

<abbr title="HyperText Markup Language">HTML</abbr> ist die Standard-Markup-Sprache für Webseiten.

Zitate

Zitate sind großartig, um wichtige Zitate oder Textstellen hervorzuheben.

<blockquote>
<p>Zu sein oder nicht zu sein, das ist die Frage.</p>
<footer>— William Shakespeare</footer>
</blockquote>

Inline-Elemente

Bootstrap Reboot stellt sicher, dass Inline-Elemente konsistent gestaltet sind.

<p>Dieser Text ist <strong>fett</strong>, dieser ist <em>kursiv</em>, und dieser ist <u>unterstrichen</u>.</p>

Zusammenfassung

Das <summary>-Element wird in Verbindung mit <details> verwendet, um einen erweiterbaren/ausklappbaren Abschnitt zu erstellen.

<details>
<summary>Klicken Sie, um zu erweitern</summary>
<p>Dies ist der erweiterte Inhalt.</p>
</details>

HTML5 [hidden] Attribut

Bootstrap Reboot beachtet das HTML5 hidden-Attribut, das verwendet werden kann, um Elemente auszublenden.

<div hidden>Dieser Inhalt ist ausgeblendet.</div>

Und das war's, Leute! Wir haben die Hauptaspekte von Bootstrap Reboot behandelt. Denken Sie daran, dass Übung den Meister macht, also Scheuen Sie sich nicht, diese Elemente in Ihren eigenen Projekten auszuprobieren. Viel Spaß beim Coden!

Methode	Beschreibung
Page defaults	Setzt Standardstile für die gesamte Seite
Native font stack	Verwendet Systemschriftarten für bessere Leistung
Headings	Bietet konsistente Stile für h1 bis h6 Elemente
Paragraphs	Stellt sicher, dass Absätze lesbar und gut abgestanden sind
Links	Macht Links leicht erkennbar
Horizontal rules	Bietet sichtbare, aber nicht überwältigende Trennlinien
Lists	Stylt sowohl geordnete als auch unsortierte Listen
Inline Code	Hebt Code im Text hervor
Code blocks	Stylt größere Codeausschnitte
Variables	Bietet Stile für die Anzeige von Variablen im Text
User input	Stylt Text, der Benutzerinput darstellt
Sample output	Stylt Text, der Programmausgabe darstellt
Tables	Stellt sicher, dass Tabellen sauber und lesbar sind
Forms	Bietet konsistente Stile für Formularelemente
Pointers on buttons	Ändert den Cursor zu einem Zeiger bei Button-Hover
Misc elements	Stylt verschiedene andere HTML-Elemente
Blockquote	Hebt wichtige Zitate oder Textstellen hervor
Inline elements	Stellt sicher, dass Inline-Elemente konsistent gestaltet sind
Summary	Stylt erweiterbare/ausklappbare Abschnitte
HTML5 [hidden] attribute	Beachtet das hidden-Attribut, um Elemente auszublenden

Credits: Image by storyset

Vorheriges Tutorial:

Bootstrap - CSS-Raster

Nächstes Tutorial:

Bootstrap - Typografie