Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Erstellen der Kopfzeilennavigation | Erstellen Einer Portfolio-Website Mit Bootstrap
Bootstrap-Grundlagen für Moderne Websites

bookErstellen der Kopfzeilennavigation

1. Erstellen Sie eine Navigationsleiste

Beginnen Sie damit, eine Navigationsleiste oben auf der Seite hinzuzufügen. Verwenden Sie dafür die Navbar-Komponente von Bootstrap.

<header>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
      <a class="navbar-brand" href="#">My Portfolio</a>
      <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ms-auto">
          <!-- Navigation links will be added here -->
        </ul>
      </div>
    </div>
  </nav>
</header>

2. Navigationslinks hinzufügen

Innerhalb der navbar-nav Klasse fügen Sie Navigationslinks für die Startseite, Über mich, Erfahrung, Fähigkeiten und Kontaktabschnitte hinzu.

<ul class="navbar-nav ms-auto">
  <li class="nav-item">
    <a class="nav-link" href="#about">About Me</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#experience">Experience</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#skills">Skills</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#contact">Contact</a>
  </li>
</ul>

Ergebnis

index.html

index.html

copy
War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 3

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

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

Awesome!

Completion rate improved to 3.23

bookErstellen der Kopfzeilennavigation

Swipe um das Menü anzuzeigen

1. Erstellen Sie eine Navigationsleiste

Beginnen Sie damit, eine Navigationsleiste oben auf der Seite hinzuzufügen. Verwenden Sie dafür die Navbar-Komponente von Bootstrap.

<header>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
      <a class="navbar-brand" href="#">My Portfolio</a>
      <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ms-auto">
          <!-- Navigation links will be added here -->
        </ul>
      </div>
    </div>
  </nav>
</header>

2. Navigationslinks hinzufügen

Innerhalb der navbar-nav Klasse fügen Sie Navigationslinks für die Startseite, Über mich, Erfahrung, Fähigkeiten und Kontaktabschnitte hinzu.

<ul class="navbar-nav ms-auto">
  <li class="nav-item">
    <a class="nav-link" href="#about">About Me</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#experience">Experience</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#skills">Skills</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#contact">Contact</a>
  </li>
</ul>

Ergebnis

index.html

index.html

copy
War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 5. Kapitel 3
some-alt