Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Construção do Cabeçalho e Navegação | Criando um Site de Portfólio com Bootstrap
Essenciais do Bootstrap para Sites Modernos

bookConstrução do Cabeçalho e Navegação

1. Criar uma Barra de Navegação

Inicie adicionando uma barra de navegação no topo da página. Utilize o componente Navbar do Bootstrap para este propósito.

<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. Adicionar Links de Navegação

Dentro da classe navbar-nav, adicione links de navegação para as seções de página inicial, sobre mim, experiência, habilidades e contato.

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

Resultado

index.html

index.html

copy
Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 5. Capítulo 3

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Suggested prompts:

Can you explain how to make the navigation bar responsive?

How do I customize the appearance of the navigation bar?

What should I do if the navigation links are not working?

Awesome!

Completion rate improved to 3.23

bookConstrução do Cabeçalho e Navegação

Deslize para mostrar o menu

1. Criar uma Barra de Navegação

Inicie adicionando uma barra de navegação no topo da página. Utilize o componente Navbar do Bootstrap para este propósito.

<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. Adicionar Links de Navegação

Dentro da classe navbar-nav, adicione links de navegação para as seções de página inicial, sobre mim, experiência, habilidades e contato.

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

Resultado

index.html

index.html

copy
Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 5. Capítulo 3
some-alt