Deutsch

Bootstrap-Tutorial

Bootstrap Layouts

Bootstrap-Inhalt

Bootstrap Komponenten

Bootstrap Formulare

Bootstrap-Hilfsfunktionen

Bootstrap Utilities

Bootstrap Demos

Bootstrap - Footers Demo

Hallo ihr ambitionierten Web-Entwickler! Heute tauchen wir ein in die wunderbare Welt der Bootstrap-Fußzeilen. Als dein freundlicherNachbarchaftsinformatiklehrer bin ich aufgeregt, euch auf dieser Reise zu führen. Also holt euch eure Lieblingsgetränke, settle down und lasst uns anfangen!

Bootstrap - Footers Demo

Was ist eine Fußzeile?

Bevor wir uns den Bootstrap-Details zuwenden, lassen Sie uns mit den Grundlagen beginnen. Stell dir vor, du liest ein Buch. Was findest du normalerweise am Ende jeder Seite? Richtig - Seitenzahlen, manchmal Kapitelüberschriften oder andere nützliche Informationen.Nun, in der digitalen Welt haben wir etwas Ähnliches für Websites, und wir nennen es eine Fußzeile!

Eine Fußzeile ist ein Abschnitt am Ende einer Webseite, der Informationen wie folgt enthält:

  • Urheberrechtsnachweise
  • Kontaktinformationen
  • Links zu wichtigen Seiten
  • Social-Media-Symbole
  • Schnellnavigation-Menüs
  • Haftungs- oder Datenschutzrichtlinienlinks

Denke daran als freundliches Abschiedsgruß am Ende deiner Webseite, der den Besuchern nützliche Informationen bietet, bevor sie die Seite verlassen oder zu einem anderen Teil deiner Website navigieren.

Warum Bootstrap für Fußzeilen verwenden?

Nun, du könntest dich fragen, "Warum sollte ich Bootstrap für meine Fußzeile verwenden?"Nun, meine neugierigen Schüler, Bootstrap ist wie ein Superhelden-Werkzeugkasten für Web-Entwickler. Es bietet vorgefertigte Komponenten und Stile, die das Erstellen von responsiven und ansprechenden Web-Elementen zum Kinderspiel machen. Wenn es um Fußzeilen geht, bietet Bootstrap:

  1. Aus dem Box responsives Design
  2. Konsistente Stile across verschiedenen Browsern
  3. Einfach zu benutzendes Rastersystem für Layouts
  4. Vorgefertigte Komponenten, die du anpassen kannst

Lassen Sie uns die Ärmel hochkrempeln und sehen, wie wir mit Bootstrap einige großartige Fußzeilen erstellen können!

Basic Bootstrap Footer

Lassen Sie uns mit einer einfachen Fußzeile beginnen. Hier ist ein Codebeispiel:

<footer class="bg-light text-center text-lg-start">
<div class="container p-4">
<div class="row">
<div class="col-lg-6 col-md-12 mb-4 mb-md-0">
<h5 class="text-uppercase">Fußzeileninhalt</h5>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis
molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam
voluptatem veniam, est atque cumque eum delectus sint!
</p>
</div>
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">Links</h5>
<ul class="list-unstyled mb-0">
<li><a href="#!" class="text-dark">Link 1</a></li>
<li><a href="#!" class="text-dark">Link 2</a></li>
<li><a href="#!" class="text-dark">Link 3</a></li>
<li><a href="#!" class="text-dark">Link 4</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase mb-0">Links</h5>
<ul class="list-unstyled">
<li><a href="#!" class="text-dark">Link 1</a></li>
<li><a href="#!" class="text-dark">Link 2</a></li>
<li><a href="#!" class="text-dark">Link 3</a></li>
<li><a href="#!" class="text-dark">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
© 2023 Urheberrecht:
<a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
</footer>

Lassen Sie uns das aufschlüsseln:

  1. Wir beginnen mit einem <footer>-Tag und geben ihm einige Bootstrap-Klassen für das Styling.
  2. Innen haben wir einen Container mit Zeilen und Spalten (Bootstrap's Rastersystem).
  3. Wir haben die Fußzeile in drei Abschnitte unterteilt: Hauptinhalt und zwei Link-Spalten.
  4. Unten haben wir eine Urheberrechtsnachricht.

Das Magie der Bootstrap-Klassen macht dies responsiv, was bedeutet, dass es sowohl auf Desktop- als auch auf mobilen Geräten gut aussieht!

Klebende Fußzeile

Manchmal möchtest du, dass deine Fußzeile am Ende der Seite klebt, insbesondere wenn nicht genug Inhalt vorhanden ist, um sie nach unten zu drücken. Hier ist, wie du eine klebende Fußzeile erstellen kannst:

<body class="d-flex flex-column min-vh-100">
<!-- Dein Hauptinhalt kommt hier hin -->
<main class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">Klebende Fußzeile</h1>
<p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
</div>
</main>

<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
</body>

In diesem Beispiel:

  1. Wir verwenden Flexbox, um sicherzustellen, dass die Fußzeile unten bleibt.
  2. Die min-vh-100-Klasse stellt sicher, dass der Körper mindestens die volle Höhe des Viewports einnimmt.
  3. Die mt-auto-Klasse auf der Fußzeile drückt sie nach unten.

Fußzeile mit Social Media Icons

Lassen Sie uns das mit einigen Social-Media-Icons aufpeppen! Hier ist ein Beispiel:

<footer class="bg-dark text-center text-white">
<div class="container p-4 pb-0">
<section class="mb-4">
<!-- Facebook -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
<i class="fab fa-facebook-f"></i>
</a>

<!-- Twitter -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
<i class="fab fa-twitter"></i>
</a>

<!-- Google -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
<i class="fab fa-google"></i>
</a>

<!-- Instagram -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
<i class="fab fa-instagram"></i>
</a>

<!-- LinkedIn -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
<i class="fab fa-linkedin-in"></i>
</a>

<!-- Github -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
<i class="fab fa-github"></i>
</a>
</section>
</div>

<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
© 2023 Urheberrecht:
<a class="text-white" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
</footer>

Diese Fußzeile:

  1. Verwendet einen dunklen Hintergrund mit weißem Text für Kontrast.
  2. Enthält Social-Media-Icons als Schaltflächen.
  3. Verwendet Font Awesome-Icons (stellen Sie sicher, dass Sie die Font Awesome-Bibliothek einfügen).

Fazit

Und dort hast du es, meine wunderbaren Schüler! Wir haben die Welt der Bootstrap-Fußzeilen erkundet, von einfach bis klebrig bis sozial versiert. Denke daran, Fußzeilen sind wie die Kirsche auf deinem Webseiten-Sundae - sie könnten am Ende sein, aber sie können wirklich你的网站发光！

Bei deinem Weitergehen auf deiner Webentwicklungsreise, habe keine Angst, verschiedene Fußzeilenstile auszuprobieren. Mische und passe Elemente an, spiele mit Farben und vor allem, habe Spaß dabei!

Hier ist eine Tabelle, die die wichtigsten Bootstrap-Klassen zusammenfasst, die wir verwendet haben:

Klasse Zweck
bg-light Helles Hintergrundfarbe
bg-dark Dunkle Hintergrundfarbe
text-center Text zentrieren
container Erstellen eines responsive festen Breitenbehälters
row Erstellen einer Zeile für das Rastersystem
col-lg-6, col-md-12, etc. Definieren der Spaltenbreiten für verschiedene Bildschirmgrößen
list-unstyled Standard Listen-Styling entfernen
mt-auto Hinzufügen von Margin-top: auto
py-3 Hinzufügen von Padding oben und unten
btn Erstellen einer Schaltfläche
btn-outline-light Erstellen einer outlined light Schaltfläche

Weiterschreiben, weiterlernen und denken Sie daran - in der Welt der Webentwicklung, ist die Fußzeile erst der Anfang!

Credits: Image by storyset

Vorheriges Tutorial:
Bootstrap -Headers-Demo
Nächstes Tutorial:
Bootstrap - Helden-Demo