Bootstrap 5 navigationsfält

Kursrekommendationer:

Navigationsfält

Navigationsfält är en navigationsrubrik som finns på toppen av sidan:

Grundläggande navigationsfält

Använd Genom att använda Bootstrap kan navigationsfältet utvidgas eller ihopfällas beroende på skärmstorlek. .navbarKlasser för att skapa standardnavigationsfält, följt av responsiva foldningsklasser:.navbar-expand-xxl|xl|lg|md|sm

（i stora, mycket stora, stora, medelstora enheter visas horisontellt, eller vertikalt staplat på små skärmar）. För att lägga till länkar i navigationsfältet, använd class="navbar-nav" <ul> element (eller <div>）。Därefter lägg till med .nav-item Klasser för <li> element, följt av med .nav-link Klasser för <a> Element:

Exempel

<-- Grå horisontell navigationsfält som blir vertikalt på små skärmar -->
<nav class="navbar navbar-expand-sm bg-light">
  <div class="container-fluid">
    <-- Länkar -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Länk 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Länk 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Länk 3</a>
      </li>
    </ul>
  </div>
</nav>

Prova själv

vertikala navigationsfält

Ta bort .navbar-expand-* Klasser för att skapa alltid vertikala navigationsfält:

Exempel

<-- Grå vertikal navigationsfält -->
<nav class="navbar bg-light">
  ...
</nav>

Prova själv

centrerat navigationsfält

Lägg till .justify-content-center Klasser för att centrera navigationsfältet:

Exempel

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

Prova själv

färgad navigationsfält

Använd vilken som helst .bg-color Klasser för att ändra navigationsfältets bakgrundsfärg:

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

Tips:Använd .navbar-dark Lägg till vit textfärg för alla länkar i navigationsfältet, eller använd .navbar-light Lägg till svart textfärg.

Exempel

<-- Grå bakgrund, vit text -->
<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="#">Länk</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Länk</a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" href="#">Aktiv</a>
      </li>
    </ul>
  </div>
</nav>
<a class="nav-link disabled" href="#">Inaktiverad</a>
<!-- Svart bakgrund, vit text -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- Blå bakgrund, vit text -->

Prova själv

<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>Aktiv/Inaktiverad status: .active klass till <a> elementet kan betona den aktuella länken, eller lägg till .disabled klassen för att indikera att en länk inte är klickbar.

Varumärke / Tecken

.navbar-brand klassen för att betona webbplatsens varumärke/tecken/projektets namn:

Exempel

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

Prova själv

Om du använder .navbar-brand När klassen används tillsammans med en bild, ställer Bootstrap 5 automatiskt in bildstilen för att anpassa sig horisontellt till navigationsmenyn.

Exempel

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

Prova själv

Navigationsmeny-text

Använd .navbar-text Klasser vertikalt justerar alla icke-länkar i navigationsmenyn (se till att korrekt marginal och textfärg är angiven).

Exempel

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

Prova själv

Många gånger, särskilt på små skärmar, vill du dölja navigationslänkar och ersätta dem med en knapp, och visa dem när knappen klickas.

För att skapa en fällbar navigationsmeny, använd redan inställda class="navbar-toggler"、data-bs-toggle="collapse" och data-bs-target="#thetarget" omgivna med class="collapse navbar-collapse" i <div>-elementet, följt av med knappen data-bs-target matchande id："thetarget"。

Exempel

<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="#">Länk</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Länk</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Länk</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Prova själv

Tips:Du kan också ta bort .navbar-expand-md Klasser för att alltid dölja navigationsfältets länkar och visa växlingsknappen.

Rullgardinsmenynavigationsfältet

Navigationsfältet kan innehålla rullgardinsmenyer:

Exempel

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Rullgardinsmeny</a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Länk</a></li>
    <li><a class="dropdown-item" href="#">En annan länk</a></li>
    <li><a class="dropdown-item" href="#">Tredje länken</a></li>
  </ul>
</li>

Prova själv

Navigationsfältets menyer och knappar

Du kan också inkludera formulär i navigationsfältet:

Exempel

<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)">Länk</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Länk</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="javascript:void(0)">Länk</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="text" placeholder="Sök">
        <button class="btn btn-primary" type="button">Sök</button>
      </form>
    </div>
  </div>
</nav>

Prova själv

Fastställd navigationsflik

Navigationsfältet kan också fastställas på sidans topp eller botten.

En fastställd navigationsflik kommer att förbli synlig på en fast plats (toppen eller botten) som är oberoende av sidans rullning.

.fixed-top Klassen gör att navigeringsfältet fastställs på sidanToppen：

Exempel

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

Prova själv

Använd .fixed-bottom-klassen för att hålla navigeringsfältet på sidans botten:

Exempel

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

Prova själv

Använd .sticky-top Klassen gör att navigeringsfältet förblir f fastspänt/stannar på sidan när den rullas förbiToppen。

Kommentar:Detta fungerar inte i IE11 och tidigare versioner (se som position:relative）。

Exempel

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

Prova själv