Bootstrap 5 Navigatielijn

Navigatiebalk

De navigatiebalk is de navigatiemast bovenin de pagina:

Basisnavigatiebalk

Door Bootstrap te gebruiken, kan de navigatiebalk uitklappen of samenvouwen, afhankelijk van het schermformaat.

Gebruik .navbar Klasse maakt een standaard navigatiebalk, gevolgd door responsieve vouwklasse:.navbar-expand-xxl|xl|lg|md|sm（horizontaal geplaatst op extra-groot,超大, groot, medium apparaten, of verticaal gestapeld op kleine schermen）。

Om een link toe te voegen aan de navigatiebalk, gebruik dan class="navbar-nav" van de <ul> element toe (of <div>）。Voeg vervolgens een .nav-item Klasse van de <li> elementen, gevolgd door een .nav-link Klasse van de <a> Elementen:

Voorbeeld

<-- Grijze horizontale navigatiebalk verandert op kleine schermen in verticaal -->
<nav class="navbar navbar-expand-sm bg-light">
  <div class="container-fluid">
    <-- Koppeling -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Koppeling 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Koppeling 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Koppeling 3</a>
      </li>
    </ul>
  </div>
</nav>

Probeer het zelf

verticale navigatiebalk

Verwijder .navbar-expand-* De klasse kan een altijd verticale navigatiebalk maken:

Voorbeeld

<-- Grijze verticale navigatiebalk -->
<nav class="navbar bg-light">
  ...
</nav>

Probeer het zelf

gecentreerde navigatiebalk

Voeg toe .justify-content-center De klasse kan de navigatiebalk centreren:

Voorbeeld

<nav class="navbar navbar-expand-sm bg-light justify-content-center">
  ...
</nav>

Probeer het zelf

kleurrijke navigatiebalk

Gebruik elke .bg-color Gebruik de klasse om de achtergrondkleur van de navigatiebalk te wijzigen:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

Tip:Gebruik .navbar-dark De klasse voegt witte tekstkleur toe aan alle links in de navigatiebalk, of gebruik .navbar-light Voeg zwart tekstkleur toe aan de klasse.

Voorbeeld

<-- Grijze achtergrond, witte tekst -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <div class="container-fluid">
    <ul class="navbar-nav">
      <li class="nav-item">
        活动
      </li>
     <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" href="#">Actief</a>
      </li>
    </ul>
  </div>
</nav>
<a class="nav-link disabled" href="#">Uitgeschakeld</a>
<!-- Zwart achtergrond, witte tekst -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- Blauwe achtergrond, witte tekst -->

Probeer het zelf

<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>Actief/Inactief status: .active class toe aan <a> Element kan de huidige link accentueren, of voeg .disabled class om aan te geven dat een link niet klikbaar is.

Merk / Logo

.navbar-brand class gebruikt om de merknaam/merk/logo van de pagina te benadrukken:

Voorbeeld

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
  </div>
</nav>

Probeer het zelf

Als je de .navbar-brand Wanneer de class samen met een afbeelding wordt gebruikt, stelt Bootstrap 5 automatisch de afbeeldingsstijl in, zodat deze horizontaal aanpast aan de navigatielijn.

Voorbeeld

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="logo.png" alt="Avatar Logo" style="width:40px;" class="rounded-pill"> 
    </a>
  </div>
</nav>

Probeer het zelf

Navigatielijn tekst

Gebruik .navbar-text Gebruik de class om horizontaal en verticaal te aligneren elke element dat geen link is in de navigatielijn (zorg ervoor dat de juiste binnenruimte en tekstkleur correct zijn).

Voorbeeld

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <span class="navbar-text">Navigatielijn tekst</span>
  </div>
</nav>

Probeer het zelf

Veelal, vooral op kleine schermen, wilt u de navigatielinks verbergen en een knop in hun plaats gebruiken, die bij klikken de links weergeeft.

Om een vouwende navigatielijn te maken, gebruik dan de class="navbar-toggler"、data-bs-toggle="collapse" en data-bs-target="#thetarget" de navigatielijn (links, etc.) in een class="collapse navbar-collapse" van het <div> element, gevolgd door de data-bs-target Matchende id："thetarget"。

Voorbeeld

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Probeer het zelf

Tip:U kunt ook verwijderen .navbar-expand-md Klassen om de navigatielijnkoppelingen altijd te verbergen en de schakelknop weer te geven.

Klapmenu navigatielijn

De navigatielijn kan klapmenu's bevatten:

Voorbeeld

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Klapmenu</a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Link</a></li>
    <li><a class="dropdown-item" href="#">Andere link</a></li>
    <li><a class="dropdown-item" href="#">Derde link</a></li>
  </ul>
</li>

Probeer het zelf

Navigatielijnmenu en knoppen

U kunt ook formulieren opnemen in de navigatielijn:

Voorbeeld

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="javascript:void(0)">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mynavbar">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Link</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="text" placeholder="Zoeken">
        <button class="btn btn-primary" type="button">Zoeken</button>
      </form>
    </div>
  </div>
</nav>

Probeer het zelf

Vastzittende navigatielijn

Een navigatielijn kan ook vastgemaakt worden aan de top of de onderkant van de pagina.

Een vastzittende navigatielijn blijft zichtbaar op een onafhankelijke locatie (boven of onder) van de pagina, ongeacht de pagina's scrollen.

.fixed-top Deze klasse maakt het navigatiemenu vast aan de pagina.Boven:

Voorbeeld

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  ...
</nav>

Probeer het zelf

Gebruik de klasse .fixed-bottom om het navigatiemenu aan de onderkant van de pagina te laten vastzitten:

Voorbeeld

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
  ...
</nav>

Probeer het zelf

Gebruik .sticky-top Deze klasse maakt het navigatiemenu vast of blijft vastzitten aan het einde van de pagina tijdens het scrolleren.Boven.

Opmerking:Dit type werkt niet in IE11 en oudere versies (zie het als position:relative)

Voorbeeld

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
  ...
</nav>

Probeer het zelf