Bootstrap 5 navigationsfelt

Navigationsfelt

Navigationsfeltet er en navigationshovedside placeret øverst på siden:

Basis navigationsfelt

Ved at bruge Bootstrap kan navigationsfeltet udvides eller sammenflettes afhængigt af skærmstørrelsen.

Brug .navbar Klassen opretter en standard navigationsfelt, og derefter er responsiv foldning klassen:.navbar-expand-xxl|xl|lg|md|sm（på store, ekstra store, store, mellemstore enheder rækkefølges vandret, eller vertikalt stables navigationsfelt på små skærme）.

For at tilføje links til navigationsfeltet, brug class="navbar-nav" s <ul> elementet (eller <div>）。 Tilføj derefter elementet med .nav-item Klassen <li> elementet, efterfulgt af et element med .nav-link Klassen <a> Elementet:

Eksempel

<!-- Gråt vandret navigationsfelt bliver vertikalt på små skærme -->
<nav class="navbar navbar-expand-sm bg-light">
  <div class="container-fluid">
    <!-- Links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
    </ul>
  </div>
</nav>

Prøv det selv

lodret navigationsfelt

Fjern .navbar-expand-* Klassen kan oprette en altid lodret navigationsfelt:

Eksempel

<!-- Grå lodret navigationsfelt -->
<nav class="navbar bg-light">
  ...
</nav>

Prøv det selv

centreret navigationsfelt

Tilføj .justify-content-center Klassen kan centere navigationsfeltet:

Eksempel

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

Prøv det selv

farvet navigationsfelt

Brug enhver .bg-color Klassen til at ændre navigationsfeltets baggrundsfarve:

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

Tip:Brug .navbar-dark Klassen tilføjer hvid tekstfarve til alle links i navigationsfeltet, eller brug .navbar-light Tilføj sort tekstfarve.

Eksempel

<!-- Grå baggrund, hvid 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="#">Aktiv</a>
      </li>
    </ul>
  </div>
</nav>
<a class="nav-link disabled" href="#">Deaktiveret</a>
<!-- Sort baggrund, hvid tekst -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- Blå baggrund, hvid tekst -->

Prøv det selv

<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>Aktiv / Deaktiver status: .active klassen tilføj til <a> elementet kan fremhæve den aktuelle link, eller tilføj .disabled klassen til at indikere, at et link ikke er klikbart.

Brand / Logo

.navbar-brand klassen til at fremhæve webstedets brand / logo / projektets navn:

Eksempel

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

Prøv det selv

Hvis du bruger .navbar-brand Når klassen bruges sammen med billeder, sætter Bootstrap 5 automatisk billedstilen, så den passer til navigationsfeltet i lodret retning.

Eksempel

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

Prøv det selv

Navigationsfelttekst

Brug .navbar-text Klasser, der lader elementer (sikre korrekt indre margen og tekstfarve) være lodret justeret i navigationsfeltet.

Eksempel

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

Prøv det selv

Mange gange, især på små skærme, ønsker du at skjule navigationslinks og erstatte dem med en knap, og vise dem ved at klikke på knappen.

For at oprette en sammenklappelig navigationsfelt, brug allerede indstillede class="navbar-toggler"、data-bs-toggle="collapse" og data-bs-target="#thetarget" Indpakning af navigationsfeltets indhold (links osv.) i class="collapse navbar-collapse" i <div>-elementet, efterfulgt af knappen data-bs-target matchende id："thetarget"。

Eksempel

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

Prøv det selv

Tip:Du kan også slette .navbar-expand-md Klasser bruges til altid at skjule navigationsfeltets links og vise skiftet knappen.

Dropdown-menu navigationsfelt

Navigationsfeltet kan indeholde dropdown-menuer:

Eksempel

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Dropdown-menu</a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Link</a></li>
    <li><a class="dropdown-item" href="#">En anden link</a></li>
    <li><a class="dropdown-item" href="#">Tredje link</a></li>
  </ul>
</li>

Prøv det selv

Navigationsfeltets menuer og knapper

Du kan også inkludere formulær i navigationsfeltet:

Eksempel

<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="Søg">
        <button class="btn btn-primary" type="button">Søg</button>
      </form>
    </div>
  </div>
</nav>

Prøv det selv

Fastlåst navigationsfelt

Navigationsfeltet kan også fastlåses på toppen eller bunden af siden.

En fastlåst navigationslinje vil forblive synlig på en fast position (toppen eller bunden) uden at følge med rulningen af siden.

.fixed-top Klassen får navigationsfeltet til at blive fastlåst på sidenTop:

Eksempel

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

Prøv det selv

Brug .fixed-bottom-klassen til at holde navigationsfeltet fast på siden i bunden:

Eksempel

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

Prøv det selv

Brug .sticky-top Klassen får navigationsfeltet til at blive fastlåst/stå fast på siden, når det rulles overTop.

Bemærkninger:Denne klasse virker ikke i IE11 og tidligere versioner (se som position:relative)

Eksempel

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

Prøv det selv