Ναυτιλία στο Bootstrap 5
- Προηγούμενη σελίδα BS5 Ναβίγηση
- Επόμενη σελίδα BS5 Σλάιτερ
Σκαμμωτή
Η σκαμμωτή είναι η σκαμμωτή κεφαλίδα που βρίσκεται στην κορυφή της σελίδας:
Βασική σκαμμωτή
Με τη χρήση του Bootstrap, η σκαμμωτή μπορεί να επεκταθεί ή να συμπιέσει, ανάλογα με το μέγεθος της οθόνης.
Χρησιμοποιήστε .navbar Η κλάση δημιουργεί το πρότυπο σκαμμωτή, ακολουθούμενη από τις προσαρμοστικές κλάσεις συμπλέγματος:.navbar-expand-xxl|xl|lg|md|sm(υπάρχει οριζόντια διάταξη σε μεγάλα, υπερμεγέθη, μεγάλα, μεσαία και μικρά συσκευές ή κάθετη διάταξη σε μικρές οθόνες).
Για να προσθέσετε σύνδεσμους στη σκαμμωτή, χρησιμοποιήστε class="navbar-nav" του <ul> στοιχείο (ή <div>()). Μετά προσθέστε ένα .nav-item των κλάσεων <li> στοιχείων, ακολουθούμενα από ένα .nav-link των κλάσεων <a> Ελάχιστα στοιχεία:
Παράδειγμα
<-- Γκρι οριζόντια σκαμμωτή που γίνεται κάθετη σε μικρά οθόνες -->
<nav class="navbar navbar-expand-sm bg-light">
<div class="container-fluid">
<-- Σύνδεσμοι -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Σύνδεσμος 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Σύνδεσμος 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Σύνδεσμος 3</a>
</li>
</ul>
</div>
</nav>
κάθετη σκαμμωτή
Αφαιρέστε .navbar-expand-* Η κλάση μπορεί να δημιουργήσει μια πάντα κάθετη σκαμμωτή:
Παράδειγμα
<-- Γκρι κάθετη σκαμμωτή --> <nav class="navbar bg-light"> ... </nav>
κεντραρισμένη σκαμμωτή
Προσθέστε .justify-content-center Η κλάση μπορεί να κεντράρει τη σκαμμωτή:
Παράδειγμα
<nav class="navbar navbar-expand-sm bg-light justify-content-center"> ... </nav>
χρωματιστή σκαμμωτή
Χρησιμοποιήστε οποιοδήποτε .bg-color Η κλάση μπορεί να αλλάξει το χρώμα του παρασκήνιου της σκαμμωτής:
.bg-primary.bg-success.bg-info.bg-warning.bg-danger.bg-secondary.bg-dark.bg-light
Σημείωση:Χρησιμοποιήστε .navbar-dark Η κλάση προσθέτει λευκό χρώμα κειμένου σε όλους τους σύνδεσμους της σκαμμωτής ή μπορεί να χρησιμοποιηθεί .navbar-light Προσθέτει μαύρο χρώμα κειμένου.
Παράδειγμα
<-- Χρωματιστή επιφάνεια γκρι, λευκό κείμενο -->
<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="#">Σύνδεσμος</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Σύνδεσμος</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Ενεργό</a>
</li>
</ul>
</div>
</nav>
<a class="nav-link disabled" href="#">Απενεργοποιημένο</a>
<!-- Μαύρη ουρά, λευκό κείμενο -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- Μπλε ουρά, λευκό κείμενο -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>Διαμόρφωση κατάστασης ενεργού/απενεργοποιημένου: .active κλάση στο <a> στοιχείο μπορεί να ξεχωρίσει τον τρέχοντα σύνδεσμο, ή να προσθέσετε .disabled κλάση για να δείξετε ότι ο σύνδεσμος δεν είναι κλικάβλητος.
Όνομα / Σήμα
.navbar-brand κλάση για την υπογράμμιση του ονόματος/σήματος/ονόματος προϊόντος της σελίδας:
Παράδειγμα
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
</div>
</nav>
Αν χρησιμοποιήσετε την .navbar-brand Όταν χρησιμοποιείται μαζί με την εικόνα, το Bootstrap 5 ρυθμίζει αυτόματα το στυλ της εικόνας, προσαρμόζοντάς το οριζόντια στην ναυτιλία.
Παράδειγμα
<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>
Κείμενο ναυτιλίας
Χρησιμοποιήστε .navbar-text Η κλάση navbar-text οριετά την οριζόντια πίστωση οποιουδήποτε στοιχείου που δεν είναι σύνδεσμος στην ναυτιλία (βεβαιωθείτε για το σωστό εσωτερικό περιθώριο και το χρώμα κειμένου).
Παράδειγμα
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<span class="navbar-text">Κείμενο ναυτιλίας</span>
</div>
</nav>
Συχνά, ειδικά σε μικρά οθόνες, θέλετε να κρύψετε τους σύνδεσμους της ναυτιλίας και να τους αντικαταστήσετε με ένα κουμπί, και να τους εμφανίζετε όταν πατήσετε το κουμπί.
Για να δημιουργήσετε μια ανακλινόμενη ναυτιλία, χρησιμοποιήστε την ήδη ρυθμισμένη class="navbar-toggler"、data-bs-toggle="collapse" και data-bs-target="#thetarget" το περιεχόμενο της ναυτιλίας (σύνδεσμοι κ.λπ.) περιλαμβάνεται μέσα στο class="collapse navbar-collapse" στον <div> στοιχείο, ακολουθούμενο από το κουμπί του data-bs-target καταλληλός id："thetarget"。
Παράδειγμα
<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="#">Σύνδεσμος</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Σύνδεσμος</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Σύνδεσμος</a>
</li>
</ul>
</div>
</div>
</nav>
Σημείωση:Μπορείτε επίσης να αφαιρέσετε .navbar-expand-md Η κλάση κρύβει πάντα τα σύνδεσμοι της γραμμής πλοήγησης και εμφανίζει το κουμπί εναλλαγής.
Μενού αναπτυξιμότητας γραμμής πλοήγησης
Η γραμμή πλοήγησης μπορεί να περιέχει μενού αναπτυξιμότητας:
Παράδειγμα
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Μενού αναπτυξιμότητας</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Σύνδεσμος</a></li>
<li><a class="dropdown-item" href="#">Άλλος σύνδεσμος</a></li>
<li><a class="dropdown-item" href="#">Τρίτη σύνδεσμος</a></li>
</ul>
</li>
Μενού και κουμπιά γραμμής πλοήγησης
Μπορείτε επίσης να περιλαμβάνετε φόρμες στη γραμμή πλοήγησης:
Παράδειγμα
<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)">Σύνδεσμος</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Σύνδεσμος</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Σύνδεσμος</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="text" placeholder="Αναζήτηση">
<button class="btn btn-primary" type="button">Αναζήτηση</button>
</form>
</div>
</div>
</nav>
Σειρά πλοήγησης σταθερής θέσης
Η σειρά πλοήγησης μπορεί επίσης να παραμείνει σταθερή στην κορυφή ή στη βάση της σελίδας.
Η σταθερή σειρά πλοήγησης θα παραμείνει ορατή σε μια σταθερή θέση (κορυφή ή βάση) ανεξάρτητα από τη ροή της σελίδας.
.fixed-top Η κλάση κάνει τη σειρά πλοήγησης να παραμένει σταθερή στη σελίδα.Άνω:
Παράδειγμα
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> ... </nav>
Χρησιμοποιήστε τη κλάση .fixed-bottom για να κρατήσετε τη σειρά πλοήγησης σταθερή στη βάση της σελίδας:
Παράδειγμα
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom"> ... </nav>
Χρησιμοποιήστε .sticky-top Η κλάση κάνει τη σειρά πλοήγησης να παραμένει σταθερή/στις θέσεις της σελίδας καθώς ο χρήστης σέρνει την σελίδα.Άνω.
Σημείωση:Αυτό το είδος δεν λειτουργεί στις εκδόσεις IE11 και παλιότερες (θεωρείται position:relative)
Παράδειγμα
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top"> ... </nav>
- Προηγούμενη σελίδα BS5 Ναβίγηση
- Επόμενη σελίδα BS5 Σλάιτερ
