Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Impara Creazione dell'Intestazione e della Navigazione | Creazione di un Sito Portfolio con Bootstrap
Quizzes & Challenges
Quizzes
Challenges
/
Fondamenti di Bootstrap

bookCreazione dell'Intestazione e della Navigazione

1. Creazione di una barra di navigazione

Iniziare aggiungendo una barra di navigazione nella parte superiore della pagina. Utilizzare il componente Navbar di Bootstrap a questo scopo.

<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. Aggiunta dei link di navigazione

All'interno della classe navbar-nav, aggiungere i link di navigazione per la homepage, la sezione su di me, esperienza, competenze e contatti.

<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>

Risultato

index.html

index.html

copy
Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 5. Capitolo 3

Chieda ad AI

expand

Chieda ad AI

ChatGPT

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

Awesome!

Completion rate improved to 3.23

bookCreazione dell'Intestazione e della Navigazione

Scorri per mostrare il menu

1. Creazione di una barra di navigazione

Iniziare aggiungendo una barra di navigazione nella parte superiore della pagina. Utilizzare il componente Navbar di Bootstrap a questo scopo.

<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. Aggiunta dei link di navigazione

All'interno della classe navbar-nav, aggiungere i link di navigazione per la homepage, la sezione su di me, esperienza, competenze e contatti.

<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>

Risultato

index.html

index.html

copy
Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 5. Capitolo 3
some-alt