Kursinhalt
Bootstrap-Grundlagen für Moderne Websites
Bootstrap-Grundlagen für Moderne Websites
1. Verständnis von Bootstrap
2. Einrichtung der Umgebung
4. Fortgeschrittene Konzepte
Gestaltung des Hero-Bereichs
Erstellen Sie den Hero-Bereich
Unterhalb der Navigationsleiste erstellen Sie einen Hero-Bereich, um sich vorzustellen. Verwenden Sie das Grid-System von Bootstrap, um das Layout zu organisieren.
<section id="about" class="hero-section py-5">
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto">
<!-- Add professional photo here -->
<img
src="your-photo.jpg"
alt="[Your Name]"
class="img-fluid"
style="display: block; margin: 0 auto"
/>
</div>
<div class="col-md-8 mx-auto">
<!-- Add short description about yourself here -->
<h1 class="h1 text-center fs-2 text-primary my-3">Your Name</h1>
<p class="fs-3">
Welcome to my portfolio! I'm a passionate [your profession] based in
[your location]. I specialize in [your expertise] and love creating
[your interests].
</p>
</div>
</div>
</div>
</section>
2. Fügen Sie ein professionelles Foto und eine Beschreibung hinzu
Ersetzen Sie "your-photo.jpg"
durch den Dateipfad oder die URL Ihres professionellen Fotos. Aktualisieren Sie die kurze Beschreibung mit Informationen über sich selbst, einschließlich Ihres Berufs, Standorts, Ihrer Expertise und Interessen.
Ergebnis
index.html
War alles klar?
Danke für Ihr Feedback!
Abschnitt 5. Kapitel 4