Source

Navbar

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

Πως δουλεύει

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

Οι γραμμές πλοήγησης απαιτούν αναδίπλωση για κλάσεις σύμπτυξης και χρωμάτων.navbar με απόκριση ..navbar-expand{-sm|-md|-lg|-xl}
Οι γραμμές πλοήγησης και τα περιεχόμενά τους είναι ρευστά από προεπιλογή. Χρησιμοποιήστε προαιρετικά δοχεία για να περιορίσετε το οριζόντιο πλάτος τους.
Χρησιμοποιήστε τις τάξεις χρησιμότητας Spacing και flex για τον έλεγχο της απόστασης και της ευθυγράμμισης εντός των γραμμών πλοήγησης.
Οι γραμμές πλοήγησης ανταποκρίνονται από προεπιλογή, αλλά μπορείτε εύκολα να τις τροποποιήσετε για να το αλλάξετε. Η ανταποκρινόμενη συμπεριφορά εξαρτάται από το πρόσθετο σύμπτυξης JavaScript.
Οι γραμμές πλοήγησης είναι κρυφές από προεπιλογή κατά την εκτύπωση. Αναγκάστε να εκτυπωθούν προσθέτοντας .d-printστο .navbar. Δείτε την κατηγορία βοηθητικού προγράμματος οθόνης .
Διασφαλίστε την προσβασιμότητα χρησιμοποιώντας ένα <nav>στοιχείο ή, εάν χρησιμοποιείτε ένα πιο γενικό στοιχείο, όπως το <div>, προσθέστε ένα role="navigation"σε κάθε γραμμή πλοήγησης για να την προσδιορίσετε ρητά ως περιοχή ορόσημο για χρήστες υποστηρικτικών τεχνολογιών.

Διαβάστε παρακάτω για παράδειγμα και λίστα υποστηριζόμενων υποσυστατικών.

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

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

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

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Αυτό το παράδειγμα χρησιμοποιεί κατηγορίες χρησιμότητας χρώματος ( bg-light) και διαστήματος ( my-2, my-lg-0, mr-sm-0, ).my-sm-0

Μάρκα

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

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

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

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

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.1/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>
</nav>

<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.1/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

Nav

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

Οι ενεργές καταστάσεις—με—για .activeτην ένδειξη της τρέχουσας σελίδας μπορούν να εφαρμοστούν απευθείας στο .nav-links ή στον άμεσο γονέα .nav-itemτου.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Έντυπα

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

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

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

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

Οι ομάδες εισαγωγής λειτουργούν επίσης:

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

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

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <button class="btn btn-outline-success" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

Κείμενο

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

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

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
</nav>

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

Η δημιουργία θεμάτων στη γραμμή πλοήγησης δεν ήταν ποτέ ευκολότερη χάρη στον συνδυασμό κλάσεων θεματικών και background-colorβοηθητικών προγραμμάτων. Επιλέξτε .navbar-lightγια χρήση με ανοιχτά χρώματα φόντου ή .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 navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

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

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

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

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

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

Τοποθέτηση

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

Σημειώστε επίσης ότι .sticky-topχρησιμοποιεί position: sticky, το οποίο δεν υποστηρίζεται πλήρως σε κάθε πρόγραμμα περιήγησης .

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

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

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

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

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

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

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

Εναλλαγή

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

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

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

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

Collapsed content

Toggleable via the navbar brand.

<div class="pos-f-t">
  <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">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>