Navbar

Τεκμηρίωση και παραδείγματα για την ισχυρή, αποκριτική κεφαλίδα πλοήγησης του Bootstrap, τη γραμμή πλοήγησης. Περιλαμβάνει υποστήριξη για την επωνυμία, την πλοήγηση και άλλα, συμπεριλαμβανομένης της υποστήριξης για την προσθήκη κατάρρευσης.

Σε αυτήν την σελίδα

Πως δουλεύει

Εδώ είναι τι πρέπει να γνωρίζετε πριν ξεκινήσετε με τη γραμμή πλοήγησης:

Οι γραμμές πλοήγησης απαιτούν αναδίπλωση για κλάσεις σύμπτυξης και χρωμάτων.navbar με απόκριση ..navbar-expand{-sm|-md|-lg|-xl|-xxl}
Οι γραμμές πλοήγησης και τα περιεχόμενά τους είναι ρευστά από προεπιλογή. Αλλάξτε το δοχείο για να περιορίσετε το οριζόντιο πλάτος τους με διαφορετικούς τρόπους.
Χρησιμοποιήστε τις τάξεις χρησιμότητας Spacing και flex για τον έλεγχο της απόστασης και της ευθυγράμμισης εντός των γραμμών πλοήγησης.
Οι γραμμές πλοήγησης ανταποκρίνονται από προεπιλογή, αλλά μπορείτε εύκολα να τις τροποποιήσετε για να το αλλάξετε. Η ανταποκρινόμενη συμπεριφορά εξαρτάται από το πρόσθετο σύμπτυξης JavaScript.
Διασφαλίστε την προσβασιμότητα χρησιμοποιώντας ένα <nav>στοιχείο ή, εάν χρησιμοποιείτε ένα πιο γενικό στοιχείο, όπως το <div>, προσθέστε ένα role="navigation"σε κάθε γραμμή πλοήγησης για να την προσδιορίσετε ρητά ως περιοχή ορόσημο για χρήστες υποστηρικτικών τεχνολογιών.
Υποδείξτε το τρέχον στοιχείο χρησιμοποιώντας aria-current="page"για την τρέχουσα σελίδα ή aria-current="true"για το τρέχον στοιχείο σε ένα σύνολο.
Νέο στην έκδοση 5.2.0: Οι γραμμές πλοήγησης μπορούν να δημιουργηθούν με μεταβλητές CSS που έχουν πεδίο εφαρμογής στη .navbarβασική κλάση. .navbar-lightέχει καταργηθεί και .navbar-darkέχει ξαναγραφεί για να παρακάμψει μεταβλητές CSS αντί να προστεθούν επιπλέον στυλ.

Το εφέ κίνησης αυτού του στοιχείου εξαρτάται από το prefers-reduced-motionερώτημα πολυμέσων. Δείτε την ενότητα μειωμένης κίνησης της τεκμηρίωσης προσβασιμότητας .

Υποστηριζόμενο περιεχόμενο

Οι μπάρες πλοήγησης διαθέτουν ενσωματωμένη υποστήριξη για μια χούφτα υποεξαρτήματα. Επιλέξτε από τα παρακάτω ανάλογα με τις ανάγκες:

.navbar-brandγια το όνομα της εταιρείας, του προϊόντος ή του έργου σας.
.navbar-navγια πλοήγηση με πλήρες ύψος και ελαφριά (συμπεριλαμβανομένης της υποστήριξης για αναπτυσσόμενα).
.navbar-togglerγια χρήση με την προσθήκη σύμπτυξης και άλλες συμπεριφορές εναλλαγής πλοήγησης .
Βοηθητικά προγράμματα Flex και Spacing για οποιαδήποτε στοιχεία ελέγχου φόρμας και ενέργειες.
.navbar-textγια την προσθήκη κάθετα κεντραρισμένων συμβολοσειρών κειμένου.
.collapse.navbar-collapseγια ομαδοποίηση και απόκρυψη περιεχομένων της γραμμής πλοήγησης κατά γονικό σημείο διακοπής.
Προσθέστε ένα προαιρετικό .navbar-scrollγια να ορίσετε max-heightκαι να πραγματοποιήσετε κύλιση περιεχομένου διευρυμένης γραμμής πλοήγησης .

Ακολουθεί ένα παράδειγμα όλων των υποσυστατικών που περιλαμβάνονται σε μια αποκριτική γραμμή πλοήγησης με θέμα το φως που συμπτύσσεται αυτόματα στο lg(μεγάλο) σημείο διακοπής.

html

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Αυτό το παράδειγμα χρησιμοποιεί κλάσεις βοηθητικού προγράμματος φόντου ( bg-light) και διαστήματος ( me-auto, mb-2, mb-lg-0, ).me-2

Μάρκα

.navbar-brandΜπορεί να εφαρμοστεί στα περισσότερα στοιχεία, αλλά μια άγκυρα λειτουργεί καλύτερα, καθώς ορισμένα στοιχεία μπορεί να απαιτούν κατηγορίες βοηθητικών προγραμμάτων ή προσαρμοσμένα στυλ .

Κείμενο

Προσθέστε το κείμενό σας σε ένα στοιχείο με την .navbar-brandτάξη.

html

<!-- As a link -->
<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

<!-- As a heading -->
<nav class="navbar bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h1">Navbar</span>
  </div>
</nav>

Εικόνα

Μπορείτε να αντικαταστήσετε το κείμενο μέσα στο .navbar-brandμε ένα <img>.

html

<nav class="navbar bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="30" height="24">
    </a>
  </div>
</nav>

Εικόνα και κείμενο

Μπορείτε επίσης να χρησιμοποιήσετε ορισμένα πρόσθετα βοηθητικά προγράμματα για να προσθέσετε μια εικόνα και ένα κείμενο ταυτόχρονα. Σημειώστε την προσθήκη .d-inline-blockκαι .align-text-topστο <img>.

html

<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.2/assets/brand/bootstrap-logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    </a>
  </div>
</nav>

Nav

Οι σύνδεσμοι πλοήγησης στη γραμμή πλοήγησης βασίζονται στις .navεπιλογές μας με τη δική τους κατηγορία τροποποιητών και απαιτούν τη χρήση κλάσεων εναλλαγής για σωστή απόκριση στυλ. Η πλοήγηση στις γραμμές πλοήγησης θα αυξηθεί και καταλαμβάνει όσο το δυνατόν περισσότερο οριζόντιο χώρο για να διατηρείται τα περιεχόμενα της γραμμής πλοήγησης ευθυγραμμισμένα με ασφάλεια.

Προσθέστε την .activeτάξη για .nav-linkνα υποδείξετε την τρέχουσα σελίδα.

Λάβετε υπόψη ότι θα πρέπει επίσης να προσθέσετε το aria-currentχαρακτηριστικό στο ενεργό .nav-link.

html

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Και επειδή χρησιμοποιούμε κλάσεις για τους πλοηγούς μας, μπορείτε να αποφύγετε εντελώς την προσέγγιση που βασίζεται στη λίστα, αν θέλετε.

html

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Pricing</a>
        <a class="nav-link disabled">Disabled</a>
      </div>
    </div>
  </div>
</nav>

Μπορείτε επίσης να χρησιμοποιήσετε αναπτυσσόμενα μενού στη γραμμή πλοήγησής σας. Τα αναπτυσσόμενα μενού απαιτούν ένα στοιχείο αναδίπλωσης για την τοποθέτηση, επομένως φροντίστε να χρησιμοποιείτε ξεχωριστά και ένθετα στοιχεία για .nav-itemκαι .nav-linkόπως φαίνεται παρακάτω.

html

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Έντυπα

Τοποθετήστε διάφορα στοιχεία ελέγχου φόρμας και στοιχεία σε μια γραμμή πλοήγησης:

html

<nav class="navbar bg-light">
  <div class="container-fluid">
    <form class="d-flex" role="search">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

Άμεσα θυγατρικά στοιχεία .navbarχρήσης ευέλικτη διάταξη και προεπιλογή θα είναι justify-content: space-between. Χρησιμοποιήστε πρόσθετα βοηθητικά προγράμματα flex όπως απαιτείται για να προσαρμόσετε αυτήν τη συμπεριφορά.

html

<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex" role="search">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

Οι ομάδες εισόδου λειτουργούν επίσης. Εάν η γραμμή πλοήγησής σας είναι μια ολόκληρη φόρμα ή κυρίως μια φόρμα, μπορείτε να χρησιμοποιήσετε το <form>στοιχείο ως κοντέινερ και να αποθηκεύσετε λίγο HTML.

html

<nav class="navbar bg-light">
  <form class="container-fluid">
    <div class="input-group">
      <span class="input-group-text" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

Διάφορα κουμπιά υποστηρίζονται και ως μέρος αυτών των φορμών της γραμμής πλοήγησης. Αυτή είναι επίσης μια εξαιρετική υπενθύμιση ότι τα βοηθητικά προγράμματα κάθετης ευθυγράμμισης μπορούν να χρησιμοποιηθούν για την ευθυγράμμιση στοιχείων διαφορετικού μεγέθους.

html

<nav class="navbar bg-light">
  <form class="container-fluid justify-content-start">
    <button class="btn btn-outline-success me-2" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

Κείμενο

Οι γραμμές πλοήγησης μπορεί να περιέχουν κομμάτια κειμένου με τη βοήθεια του .navbar-text. Αυτή η κλάση προσαρμόζει την κατακόρυφη στοίχιση και το οριζόντιο διάστημα για συμβολοσειρές κειμένου.

html

<nav class="navbar bg-light">
  <div class="container-fluid">
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

Ανακατέψτε και συνδυάστε με άλλα εξαρτήματα και βοηθητικά προγράμματα όπως απαιτείται.

html

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar w/ text</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
      </ul>
      <span class="navbar-text">
        Navbar text with an inline element
      </span>
    </div>
  </div>
</nav>

Σχέδια χρωμάτων

Νέο στην έκδοση 5.2.0: Το θέμα Navbar τώρα τροφοδοτείται από μεταβλητές CSS και .navbar-lightέχει καταργηθεί. Οι μεταβλητές CSS εφαρμόζονται στο .navbar, με προεπιλογή την εμφάνιση "light" και μπορούν να παρακαμφθούν με .navbar-dark.

Τα θέματα Navbar είναι πιο εύκολα από ποτέ χάρη στον συνδυασμό μεταβλητών Sass και CSS του Bootstrap. Η προεπιλογή είναι η "ανοιχτή γραμμή πλοήγησης" για χρήση με ανοιχτά χρώματα φόντου, αλλά μπορείτε επίσης να κάνετε αίτηση .navbar-darkγια σκούρα χρώματα φόντου. Στη συνέχεια, προσαρμόστε με .bg-*βοηθητικά προγράμματα.

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

Εμπορευματοκιβώτια

Αν και δεν απαιτείται, μπορείτε να τυλίξετε μια γραμμή πλοήγησης σε ένα .containerγια να το κεντράρετε σε μια σελίδα – αν και σημειώστε ότι εξακολουθεί να απαιτείται εσωτερικό κοντέινερ. Ή μπορείτε να προσθέσετε ένα κοντέινερ μέσα στο .navbarγια να κεντράρετε μόνο τα περιεχόμενα μιας σταθερής ή στατικής επάνω γραμμής πλοήγησης .

html

<div class="container">
  <nav class="navbar navbar-expand-lg bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
    </div>
  </nav>
</div>

Χρησιμοποιήστε οποιοδήποτε από τα αποκριτικά κοντέινερ για να αλλάξετε την ευρεία εμφάνιση του περιεχομένου στη γραμμή πλοήγησής σας.

html

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-md">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

Τοποθέτηση

Χρησιμοποιήστε τα βοηθητικά προγράμματα θέσης για να τοποθετήσετε γραμμές πλοήγησης σε μη στατικές θέσεις. Επιλέξτε από σταθερή στην κορυφή, σταθερή προς τα κάτω, κολλημένη στην κορυφή (κάνει κύλιση με τη σελίδα μέχρι να φτάσει στην κορυφή και μετά μένει εκεί) ή κολλημένη προς τα κάτω (κάνει κύλιση με τη σελίδα μέχρι να φτάσει στο κάτω μέρος και μετά παραμένει εκεί).

Διορθώθηκε η χρήση γραμμών πλοήγησης position: fixed, που σημαίνει ότι αποσύρονται από την κανονική ροή του DOM και ενδέχεται να απαιτούν προσαρμοσμένο CSS (π.χ. padding-topστο <body>) για την αποφυγή επικάλυψης με άλλα στοιχεία.

html

<nav class="navbar bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>

html

<nav class="navbar fixed-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>

html

<nav class="navbar fixed-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>

html

<nav class="navbar sticky-top bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>

html

<nav class="navbar sticky-bottom bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky bottom</a>
  </div>
</nav>

Κύλιση

Προσθήκη .navbar-nav-scrollσε ένα .navbar-nav(ή άλλο υποσυστατικό της γραμμής πλοήγησης) για να ενεργοποιήσετε την κατακόρυφη κύλιση εντός των περιεχομένων με δυνατότητα εναλλαγής μιας συμπτυγμένης γραμμής πλοήγησης. Από προεπιλογή, η κύλιση ξεκινά στο 75vh(ή το 75% του ύψους της θύρας προβολής), αλλά μπορείτε να το παρακάμψετε με την τοπική προσαρμοσμένη ιδιότητα CSS --bs-navbar-heightή προσαρμοσμένα στυλ. Σε μεγαλύτερες θύρες προβολής όταν επεκτείνεται η γραμμή πλοήγησης, το περιεχόμενο θα εμφανίζεται όπως εμφανίζεται σε μια προεπιλεγμένη γραμμή πλοήγησης.

Λάβετε υπόψη ότι αυτή η συμπεριφορά συνοδεύεται από ένα πιθανό μειονέκτημα: overflow—όταν η ρύθμιση overflow-y: auto(απαιτείται για κύλιση του περιεχομένου εδώ), overflow-xείναι ισοδύναμη με auto, η οποία θα περικόψει κάποιο οριζόντιο περιεχόμενο.

Ακολουθεί ένα παράδειγμα γραμμής πλοήγησης που χρησιμοποιεί .navbar-nav-scrollμε style="--bs-scroll-height: 100px;", με μερικά βοηθητικά προγράμματα επιπλέον περιθωρίου για βέλτιστη απόσταση.

html

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar scroll</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarScroll">
      <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Link</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Αποκριτικές συμπεριφορές

Οι γραμμές πλοήγησης μπορούν να χρησιμοποιούν .navbar-toggler, .navbar-collapse, και .navbar-expand{-sm|-md|-lg|-xl|-xxl}κλάσεις για να καθορίσουν πότε το περιεχόμενό τους συμπτύσσεται πίσω από ένα κουμπί. Σε συνδυασμό με άλλα βοηθητικά προγράμματα, μπορείτε εύκολα να επιλέξετε πότε να εμφανίσετε ή να αποκρύψετε συγκεκριμένα στοιχεία.

Για γραμμές πλοήγησης που δεν συμπτύσσονται ποτέ, προσθέστε την .navbar-expandκλάση στη γραμμή πλοήγησης. Για γραμμές πλοήγησης που πάντα συμπτύσσονται, μην προσθέσετε καμία .navbar-expandκατηγορία.

Εναλλαγή

Οι εναλλαγές γραμμής πλοήγησης είναι στοιχισμένες αριστερά από προεπιλογή, αλλά εάν ακολουθούν ένα αδελφικό στοιχείο όπως το .navbar-brand, θα ευθυγραμμιστούν αυτόματα στην άκρα δεξιά. Η αντιστροφή της σήμανσης θα αντιστρέψει την τοποθέτηση του διακόπτη. Ακολουθούν παραδείγματα διαφορετικών στυλ εναλλαγής.

Χωρίς να .navbar-brandεμφανίζεται στο μικρότερο σημείο διακοπής:

html

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
      <a class="navbar-brand" href="#">Hidden brand</a>
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Με μια επωνυμία που εμφανίζεται στα αριστερά και διακόπτη στα δεξιά:

html

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Με διακόπτη στα αριστερά και επωνυμία στα δεξιά:

html

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Εξωτερικό περιεχόμενο

Μερικές φορές θέλετε να χρησιμοποιήσετε την προσθήκη σύμπτυξης για να ενεργοποιήσετε ένα στοιχείο κοντέινερ για περιεχόμενο που βρίσκεται δομικά έξω από το .navbar. Επειδή η προσθήκη μας λειτουργεί με την idαντιστοίχιση data-bs-target, αυτό γίνεται εύκολα!

Συμπτυγμένο περιεχόμενο

Με δυνατότητα εναλλαγής μέσω της επωνυμίας του navbar.

html

<div class="collapse" id="navbarToggleExternalContent">
  <div class="bg-dark p-4">
    <h5 class="text-white h4">Collapsed content</h5>
    <span class="text-muted">Toggleable via the navbar brand.</span>
  </div>
</div>
<nav class="navbar navbar-dark bg-dark">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
</nav>

Όταν το κάνετε αυτό, συνιστούμε να συμπεριλάβετε επιπλέον JavaScript για να μετακινήσετε την εστίαση μέσω προγραμματισμού στο κοντέινερ όταν ανοίγει. Διαφορετικά, οι χρήστες πληκτρολογίου και οι χρήστες υποστηρικτικών τεχνολογιών πιθανότατα θα δυσκολευτούν να βρουν το περιεχόμενο που αποκαλύφθηκε πρόσφατα - ιδιαίτερα εάν το κοντέινερ που άνοιξε βρίσκεται πριν από τον διακόπτη εναλλαγής στη δομή του εγγράφου. Συνιστούμε επίσης να βεβαιωθείτε ότι η εναλλαγή έχει το aria-controlsχαρακτηριστικό, δείχνοντας το idστοιχείο του κοντέινερ περιεχομένου. Θεωρητικά, αυτό επιτρέπει στους χρήστες υποβοηθητικής τεχνολογίας να μεταπηδούν απευθείας από τον διακόπτη στο κοντέινερ που ελέγχει – αλλά η υποστήριξη για αυτό είναι επί του παρόντος αρκετά αποσπασματική.

Εκτός καμβά

Μετατρέψτε τη γραμμή πλοήγησής σας που διευρύνεται και συμπτύσσεται σε ένα συρτάρι offcanvas με το στοιχείο offcanvas . Επεκτείνουμε και τα δύο προεπιλεγμένα στυλ offcanvas και χρησιμοποιούμε τις .navbar-expand-*τάξεις μας για να δημιουργήσουμε μια δυναμική και ευέλικτη πλαϊνή γραμμή πλοήγησης.

Στο παρακάτω παράδειγμα, για να δημιουργήσετε μια γραμμή πλοήγησης offcanvas που είναι πάντα συμπτυσσόμενη σε όλα τα σημεία διακοπής, παραλείψτε .navbar-expand-*εντελώς την κλάση.

html

<nav class="navbar bg-light fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

Για να δημιουργήσετε μια γραμμή πλοήγησης offcanvas που επεκτείνεται σε μια κανονική γραμμή πλοήγησης σε ένα συγκεκριμένο σημείο διακοπής όπως lg, χρησιμοποιήστε το .navbar-expand-lg.

<nav class="navbar navbar-expand-lg bg-light fixed-top">
  <a class="navbar-brand" href="#">Offcanvas navbar</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
    ...
  </div>
</nav>

Όταν χρησιμοποιείτε το offcanvas σε μια σκοτεινή γραμμή πλοήγησης, να γνωρίζετε ότι μπορεί να χρειαστεί να έχετε σκούρο φόντο στο περιεχόμενο offcanvas για να αποφύγετε το δυσανάγνωστο κείμενο. Στο παρακάτω παράδειγμα, προσθέτουμε .navbar-darkκαι .bg-darkστο .navbar, .text-bg-darkστο .offcanvas, .dropdown-menu-darkστο .dropdown-menuκαι .btn-close-whiteστο .btn-closeγια σωστό styling με σκούρο offcanvas.

html

<nav class="navbar navbar-dark bg-dark fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas dark navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Dark offcanvas</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu dropdown-menu-dark">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex" role="search">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

CSS

Μεταβλητές

Προστέθηκε στην έκδοση 5.2.0

Ως μέρος της εξελισσόμενης προσέγγισης μεταβλητών CSS του Bootstrap, οι μπάρες πλοήγησης χρησιμοποιούν πλέον τοπικές μεταβλητές CSS .navbarγια βελτιωμένη προσαρμογή σε πραγματικό χρόνο. Οι τιμές για τις μεταβλητές CSS ορίζονται μέσω Sass, επομένως η προσαρμογή Sass εξακολουθεί να υποστηρίζεται.

  --#{$prefix}navbar-padding-x: #{if($navbar-padding-x == null, 0, $navbar-padding-x)};
  --#{$prefix}navbar-padding-y: #{$navbar-padding-y};
  --#{$prefix}navbar-color: #{$navbar-light-color};
  --#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-light-active-color};
  --#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
  --#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
  --#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
  --#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
  --#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
  --#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
  --#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
  --#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
  --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
  --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
  --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};

Ορισμένες πρόσθετες μεταβλητές CSS υπάρχουν επίσης σε .navbar-nav:

  --#{$prefix}nav-link-padding-x: 0;
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
  --#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
  --#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);

Η προσαρμογή μέσω μεταβλητών CSS μπορεί να φανεί στην .navbar-darkκλάση όπου παρακάμπτουμε συγκεκριμένες τιμές χωρίς την προσθήκη διπλών επιλογέων CSS.

  --#{$prefix}navbar-color: #{$navbar-dark-color};
  --#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
  --#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
  --#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
  --#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
  --#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
  --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
  --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};

Μεταβλητές Sass

Μεταβλητές για όλες τις γραμμές πλοήγησης:

$navbar-padding-y:                  $spacer * .5;
$navbar-padding-x:                  null;

$navbar-nav-link-padding-x:         .5rem;

$navbar-brand-font-size:            $font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2;
$navbar-brand-height:               $navbar-brand-font-size * $line-height-base;
$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * .5;
$navbar-brand-margin-end:           1rem;

$navbar-toggler-padding-y:          .25rem;
$navbar-toggler-padding-x:          .75rem;
$navbar-toggler-font-size:          $font-size-lg;
$navbar-toggler-border-radius:      $btn-border-radius;
$navbar-toggler-focus-width:        $btn-focus-width;
$navbar-toggler-transition:         box-shadow .15s ease-in-out;

$navbar-light-color:                rgba($black, .55);
$navbar-light-hover-color:          rgba($black, .7);
$navbar-light-active-color:         rgba($black, .9);
$navbar-light-disabled-color:       rgba($black, .3);
$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba($black, .1);
$navbar-light-brand-color:          $navbar-light-active-color;
$navbar-light-brand-hover-color:    $navbar-light-active-color;

Μεταβλητές για τη σκοτεινή γραμμή πλοήγησης :

$navbar-dark-color:                 rgba($white, .55);
$navbar-dark-hover-color:           rgba($white, .75);
$navbar-dark-active-color:          $white;
$navbar-dark-disabled-color:        rgba($white, .25);
$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-dark-toggler-border-color:  rgba($white, .1);
$navbar-dark-brand-color:           $navbar-dark-active-color;
$navbar-dark-brand-hover-color:     $navbar-dark-active-color;

Βρόχος Sass

Οι αποκριτικές κλάσεις επέκτασης/σύμπτυξης της γραμμής πλοήγησης (π.χ. .navbar-expand-lg) συνδυάζονται με τον $breakpointsχάρτη και δημιουργούνται μέσω ενός βρόχου στο scss/_navbar.scss.

// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

    // stylelint-disable-next-line scss/selector-no-union-class-name
    &#{$infix} {
      @include media-breakpoint-up($next) {
        flex-wrap: nowrap;
        justify-content: flex-start;

        .navbar-nav {
          flex-direction: row;

          .dropdown-menu {
            position: absolute;
          }

          .nav-link {
            padding-right: var(--#{$prefix}navbar-nav-link-padding-x);
            padding-left: var(--#{$prefix}navbar-nav-link-padding-x);
          }
        }

        .navbar-nav-scroll {
          overflow: visible;
        }

        .navbar-collapse {
          display: flex !important; // stylelint-disable-line declaration-no-important
          flex-basis: auto;
        }

        .navbar-toggler {
          display: none;
        }

        .offcanvas {
          // stylelint-disable declaration-no-important
          position: static;
          z-index: auto;
          flex-grow: 1;
          width: auto !important;
          height: auto !important;
          visibility: visible !important;
          background-color: transparent !important;
          border: 0 !important;
          transform: none !important;
          @include box-shadow(none);
          @include transition(none);
          // stylelint-enable declaration-no-important

          .offcanvas-header {
            display: none;
          }

          .offcanvas-body {
            display: flex;
            flex-grow: 0;
            padding: 0;
            overflow-y: visible;
          }
        }
      }
    }
  }
}