Πλοήγηση και καρτέλες

Τεκμηρίωση και παραδείγματα για τον τρόπο χρήσης των περιλαμβανόμενων στοιχείων πλοήγησης του Bootstrap.

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

Πλοήγηση βάσης

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

Το βασικό .navεξάρτημα είναι κατασκευασμένο με flexbox και παρέχει μια ισχυρή βάση για την κατασκευή όλων των τύπων στοιχείων πλοήγησης. Περιλαμβάνει ορισμένες παρακάμψεις στυλ (για εργασία με λίστες), κάποια συμπλήρωση συνδέσμων για μεγαλύτερες περιοχές επισκέψεων και βασικό στυλ απενεργο��οιημένο.

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

Για να μεταφέρετε την ενεργή κατάσταση σε υποστηρικτικές τεχνολογίες, χρησιμοποιήστε το aria-currentχαρακτηριστικό — χρησιμοποιώντας την pageτιμή για την τρέχουσα σελίδα ή trueγια το τρέχον στοιχείο σε ένα σύνολο.

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</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>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Οι τάξεις χρησιμοποιούνται παντού, έτσι η σήμανση σας μπορεί να είναι εξαιρετικά ευέλικτη. Χρησιμοποιήστε <ul>s όπως παραπάνω, <ol>εάν η σειρά των αντικειμένων σας είναι σημαντική ή κυλήστε το δικό σας με ένα <nav>στοιχείο. Επειδή οι .navχρήσεις display: flex, οι σύνδεσμοι πλοήγησης συμπεριφέρονται όπως και τα στοιχεία πλοήγησης, αλλά χωρίς την επιπλέον σήμανση.

<nav class="nav">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

Διαθέσιμα στυλ

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

Οριζόντια ευθυγράμμιση

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

Στο κέντρο με .justify-content-center:

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</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>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Δεξιά στοίχιση με .justify-content-end:

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</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>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Κατακόρυφος

Στοιβάξτε την πλοήγησή σας αλλάζοντας την κατεύθυνση του flex στοιχείου με το .flex-columnβοηθητικό πρόγραμμα. Θέλετε να τα στοιβάζετε σε ορισμένες θύρες προβολής αλλά όχι σε άλλες; Χρησιμοποιήστε τις αποκριτικές εκδόσεις (π.χ., .flex-sm-column).

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</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>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Όπως πάντα, η κάθετη πλοήγηση είναι δυνατή και χωρίς <ul>s.

<nav class="nav flex-column">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

Καρτέλες

Παίρνει τη βασική πλοήγηση από πάνω και προσθέτει την .nav-tabsκλάση για να δημιουργήσει μια διεπαφή με καρτέλες. Χρησιμοποιήστε τα για να δημιουργήσετε περιοχές με tabbable με την προσθήκη JavaScript της καρτέλας .

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</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>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Χάπια

Πάρτε το ίδιο HTML, αλλά χρησιμοποιήστε .nav-pillsαντί αυτού:

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</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>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Συμπληρώστε και δικαιολογήστε

Αναγκάστε τα .navπεριεχόμενά σας να επεκτείνουν το πλήρες διαθέσιμο πλάτος μία από τις δύο κατηγορίες τροποποιητών. Για να γεμίσετε αναλογικά όλο τον διαθέσιμο χώρο με τα δικά σας .nav-item, χρησιμοποιήστε το .nav-fill. Παρατηρήστε ότι όλος ο οριζόντιος χώρος είναι κατειλημμένος, αλλά δεν έχουν όλα τα στοιχεία πλοήγησης το ίδιο πλάτος.

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</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>

Όταν χρησιμοποιείτε <nav>πλοήγηση με βάση, μπορείτε να παραλείψετε με ασφάλεια .nav-item, καθώς .nav-linkαπαιτείται μόνο για <a>στοιχεία στυλ.

<nav class="nav nav-pills nav-fill">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

Για στοιχεία ίσου πλάτους, χρησιμοποιήστε .nav-justified. Όλος ο οριζόντιος χώρος θα καταλαμβάνεται από συνδέσμους πλοήγησης, αλλά σε αντίθεση με τα .nav-fillπαραπάνω, κάθε στοιχείο πλοήγησης θα έχει το ίδιο πλάτος.

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</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>

Παρόμοια με το .nav-fillπαράδειγμα χρησιμοποιώντας μια <nav>πλοήγηση που βασίζεται.

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

Εργασία με flex utilities

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

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  <a class="flex-sm-fill text-sm-center nav-link disabled">Disabled</a>
</nav>

Σχετικά με την προσβασιμότητα

Εάν χρησιμοποιείτε πλοήγηση για να παρέχετε μια γραμμή πλοήγησης, φροντίστε να προσθέσετε ένα role="navigation"στο πιο λογικό γονικό κοντέινερ του <ul>ή να τυλίξετε ένα <nav>στοιχείο γύρω από ολόκληρη τη γραμμή πλοήγησης. Μην προσθέτετε τον ρόλο στον <ul>εαυτό του, καθώς αυτό θα εμπόδιζε να ανακοινωθεί ως πραγματική λίστα από τις υποστηρικτικές τεχνολογίες.

Λάβετε υπόψη ότι οι γραμμές πλοήγησης, ακόμη και αν έχουν οπτικό στυλ ως καρτέλες με την .nav-tabsκλάση, δεν πρέπει να δίνονται role="tablist", role="tab"ή role="tabpanel"χαρακτηριστικά. Αυτά είναι κατάλληλα μόνο για δυναμικές διεπαφές με καρτέλες, όπως περιγράφεται στις πρακτικές συγγραφής WAI ARIA . Δείτε για παράδειγμα τη συμπεριφορά JavaScript για δυναμικές διεπαφές με καρτέλες σε αυτήν την ενότητα. Το aria-currentχαρακτηριστικό δεν είναι απαραίτητο σε διεπαφές με δυναμικές καρτέλες, καθώς η JavaScript χειρίζεται την επιλεγμένη κατάσταση προσθέτοντας aria-selected="true"στην ενεργή καρτέλα.

Χρήση αναπτυσσόμενων

Προσθέστε αναπτυσσόμενα μενού με λίγο επιπλέον HTML και την αναπτυσσόμενη προσθήκη JavaScript .

Καρτέλες με αναπτυσσόμενα μενού

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" 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><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </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>

Χάπια με σταγόνες

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" 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><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </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>

Sass

Μεταβλητές

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    $link-color;
$nav-link-hover-color:              $link-hover-color;
$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
$nav-link-disabled-color:           $gray-600;

$nav-tabs-border-color:             $gray-300;
$nav-tabs-border-width:             $border-width;
$nav-tabs-border-radius:            $border-radius;
$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color;
$nav-tabs-link-active-color:        $gray-700;
$nav-tabs-link-active-bg:           $body-bg;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;

$nav-pills-border-radius:           $border-radius;
$nav-pills-link-active-color:       $component-active-color;
$nav-pills-link-active-bg:          $component-active-bg;

Συμπεριφορά JavaScript

Χρησιμοποιήστε το πρόσθετο JavaScript της καρτέλας—συμπεριλάβετέ το μεμονωμένα ή μέσω του μεταγλωττισμένου bootstrap.jsαρχείου—για να επεκτείνετε τις καρτέλες πλοήγησης και τα χάπια μας για να δημιουργήσετε παράθυρα με καρτέλες τοπικού περιεχομένου.

Οι δυναμικές διεπαφές με καρτέλες, όπως περιγράφονται στις πρακτικές συγγραφής του WAI ARIA , απαιτούν role="tablist", role="tab", role="tabpanel"και πρόσθετα aria-χαρακτηριστικά προκειμένου να μεταφέρουν τη δομή, τη λειτουργικότητα και την τρέχουσα κατάστασή τους στους χρήστες βοηθητικών τεχνολογιών (όπως τα προγράμματα ανάγνωσης οθόνης). Ως βέλτιστη πρακτική, συνιστούμε τη χρήση <button>στοιχείων για τις καρτέλες, καθώς πρόκειται για στοιχεία ελέγχου που ενεργοποιούν μια δυναμική αλλαγή, αντί για συνδέσμους που πλοηγούνται σε μια νέα σελίδα ή τοποθεσία.

Λάβετε υπόψη ότι οι δυναμικές διεπαφές με καρτέλες δεν πρέπει να περιέχουν αναπτυσσόμενα μενού, καθώς αυτό προκαλεί προβλήματα χρηστικότητας και προσβασιμότητας. Από την άποψη της χρηστικότητας, το γεγονός ότι το στοιχείο ενεργοποίησης της καρτέλας που εμφανίζεται αυτήν τη στιγμή δεν είναι άμεσα ορατό (καθώς βρίσκεται μέσα στο κλειστό αναπτυσσόμενο μενού) μπορεί να προκαλέσει σύγχυση. Από την άποψη της προσβασιμότητας, δεν υπάρχει επί του παρόντος κανένας λογικός τρόπος να αντιστοιχιστεί αυτό το είδος κατασκευής σε ένα τυπικό μοτίβο WAI ARIA, πράγμα που σημαίνει ότι δεν μπορεί να γίνει εύκολα κατανοητό στους χρήστες υποστηρικτικών τεχνολογιών.

Αυτό είναι κάποιο περιεχόμενο κράτησης θέσης το συσχετισμένο περιεχόμενο της καρτέλας Αρχική σελίδα. Κάνοντας κλικ σε άλλη καρτέλα θα αλλάξει η ορατότητα αυτής της καρτέλας για την επόμενη. Η καρτέλα JavaScript ανταλλάσσει κλάσεις για να ελέγξει την ορατότητα και το στυλ του περιεχομένου. Μπορείτε να το χρησιμοποιήσετε με καρτέλες, χάπια και οποιαδήποτε άλλη .navπλοήγηση με τροφοδοσία.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

Για να καλύψει τις ανάγκες σας, αυτό λειτουργεί με <ul>σήμανση βάσει βάσης, όπως φαίνεται παραπάνω, ή με οποιαδήποτε αυθαίρετη σήμανση "roll your own". Λάβετε υπόψη ότι εάν χρησιμοποιείτε το <nav>, δεν θα πρέπει να προσθέσετε role="tablist"απευθείας σε αυτό, καθώς αυτό θα παρακάμψει τον εγγενή ρόλο του στοιχείου ως ορόσημο πλοήγησης. Αντίθετα, μεταβείτε σε ένα εναλλακτικό στοιχείο (στο παρακάτω παράδειγμα, ένα απλό <div>) και τυλίξτε το <nav>γύρω του.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

Το πρόσθετο καρτελών λειτουργεί επίσης με χάπια.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>

Και με κάθετα χάπια.

This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<div class="d-flex align-items-start">
  <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
    <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
    <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
  </div>
  <div class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
  </div>
</div>

Χρήση χαρακτηριστικών δεδομένων

Μπορείτε να ενεργοποιήσετε μια καρτέλα ή ένα χάπι πλοήγησης χωρίς να γράψετε JavaScript προσδιορίζοντας απλά data-bs-toggle="tab"ή data-bs-toggle="pill"σε ένα στοιχείο. Χρησιμοποιήστε αυτά τα χαρακτηριστικά δεδομένων στο .nav-tabsή .nav-pills.

<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

Μέσω JavaScript

Ενεργοποίηση καρτελών με καρτέλες μέσω JavaScript (κάθε καρτέλα πρέπει να ενεργοποιηθεί ξεχωριστά):

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab button'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', function (event) {
    event.preventDefault()
    tabTrigger.show()
  })
})

Μπορείτε να ενεργοποιήσετε μεμονωμένες καρτέλες με διάφορους τρόπους:

var triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

Εφέ εξασθένισης

Για να κάνετε τις καρτέλες να ξεθωριάζουν, προσθέστε .fadeσε κάθε .tab-pane. Το πρώτο παράθυρο καρτέλας πρέπει επίσης .showνα κάνει ορατό το αρχικό περιεχόμενο.

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

Μέθοδοι

Ασύγχρονες μέθοδοι και μεταβάσεις

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

Δείτε την τεκμηρίωση JavaScript για περισσότερες πληροφορίες .

constructor

Ενεργοποιεί ένα στοιχείο καρτέλας και ένα κοντέινερ περιεχομένου. Η καρτέλα πρέπει να έχει είτε ένα data-bs-targetείτε, εάν χρησιμοποιείται σύνδεσμο, ένα hrefχαρακτηριστικό, που στοχεύει έναν κόμβο κοντέινερ στο DOM.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

<script>
  var firstTabEl = document.querySelector('#myTab li:last-child button')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

προβολή

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

  var someTabTriggerEl = document.querySelector('#someTabTrigger')
  var tab = new bootstrap.Tab(someTabTriggerEl)

  tab.show()

διαθέτω

Καταστρέφει την καρτέλα ενός στοιχείου.

getInstance

Στατική μέθοδος που σας επιτρέπει να λάβετε την παρουσία της καρτέλας που σχετίζεται με ένα στοιχείο DOM

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance

getOrCreateInstance

Στατική μέθοδος που σας επιτρέπει να λάβετε την παρουσία της καρτέλας που σχετίζεται με ένα στοιχείο DOM ή να δημιουργήσετε μια νέα σε περίπτωση που δεν είχε αρχικοποιηθεί

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance

Εκδηλώσεις

Κατά την εμφάνιση μιας νέας καρτέλας, τα συμβάντα ενεργοποιούνται με την ακόλουθη σειρά:

hide.bs.tab(στην τρέχουσα ενεργή καρτέλα)
show.bs.tab(στην καρτέλα που θα εμφανιστεί)
hidden.bs.tab(στην προηγούμενη ενεργή καρτέλα, η ίδια με την hide.bs.tabεκδήλωση)
shown.bs.tab(στην πρόσφατα ενεργή καρτέλα που μόλις εμφανίστηκε, η ίδια όπως και για την show.bs.tabεκδήλωση)

Εάν καμία καρτέλα δεν ήταν ήδη ενεργή, τότε τα συμβάντα hide.bs.tabκαι hidden.bs.tabδεν θα ενεργοποιηθούν.

Τύπος συμβάντος	Περιγραφή
`show.bs.tab`	Αυτό το συμβάν ενεργοποιείται στην εμφάνιση καρτελών, αλλά πριν εμφανιστεί η νέα καρτέλα. Χρησιμοποιήστε `event.target`και `event.relatedTarget`για να στοχεύσετε την ενεργή καρτέλα και την προηγούμενη ενεργή καρτέλα (αν είναι διαθέσιμη) αντίστοιχα.
`shown.bs.tab`	Αυτό το συμβάν ενεργοποιείται στην εμφάνιση καρτελών μετά την εμφάνιση μιας καρτέλας. Χρησιμοποιήστε `event.target`και `event.relatedTarget`για να στοχεύσετε την ενεργή καρτέλα και την προηγούμενη ενεργή καρτέλα (αν είναι διαθέσιμη) αντίστοιχα.
`hide.bs.tab`	Αυτό το συμβάν ενεργοποιείται όταν πρόκειται να εμφανιστεί μια νέα καρτέλα (και επομένως η προηγούμενη ενεργή καρτέλα πρέπει να κρυφτεί). Χρησιμοποιήστε `event.target`και `event.relatedTarget`για να στοχεύσετε την τρέχουσα ενεργή καρτέλα και τη νέα καρτέλα που θα ενεργοποιηθεί σύντομα, αντίστοιχα.
`hidden.bs.tab`	Αυτό το συμβάν ενεργοποιείται μετά την εμφάνιση μιας νέας καρτέλας (και επομένως η προηγούμενη ενεργή καρτέλα αποκρύπτεται). Χρησιμοποιήστε `event.target`και `event.relatedTarget`για να στοχεύσετε την προηγούμενη ενεργή καρτέλα και τη νέα ενεργή καρτέλα, αντίστοιχα.

var tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})