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

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

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

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

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

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

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

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

html

<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, οι σύνδεσμοι πλοήγησης συμπεριφέρονται όπως και τα στοιχεία πλοήγησης, αλλά χωρίς την επιπλέον σήμανση.

html

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

html

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

html

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

html

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

html

<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 της καρτέλας .

html

<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αντί αυτού:

html

<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. Παρατηρήστε ότι όλος ο οριζόντιος χώρος είναι κατειλημμένος, αλλά δεν έχουν όλα τα στοιχεία πλοήγησης το ίδιο πλάτος.

html

<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>στοιχεία στυλ.

html

<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παραπάνω, κάθε στοιχείο πλοήγησης θα έχει το ίδιο πλάτος.

html

<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>πλοήγηση που βασίζεται.

html

<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 . Αν και πιο αναλυτικά, αυτά τα βοηθητικά προγράμματα προσφέρουν μεγαλύτερη προσαρμογή σε σημεία διακοπής που αποκρίνονται. Στο παρακάτω παράδειγμα, η πλοήγησή μας θα στοιβάζεται στο χαμηλότερο σημείο διακοπής και, στη συνέχεια, θα προσαρμοστεί σε μια οριζόντια διάταξη που καλύπτει το διαθέσιμο πλάτος ξεκινώντας από το μικρό σημείο διακοπής.

html

<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"χαρακτηριστικά. Αυτά είναι κατάλληλα μόνο για δυναμικές διεπαφές με καρτέλες, όπως περιγράφεται στο μοτίβο καρτελών του Οδηγού πρακτικών συγγραφής ARIA . Δείτε για παράδειγμα τη συμπεριφορά JavaScript για δυναμικές διεπαφές με καρτέλες σε αυτήν την ενότητα. Το aria-currentχαρακτηριστικό δεν είναι απαραίτητο σε διεπαφές με δυναμικές καρτέλες, καθώς η JavaScript χειρίζεται την επιλεγμένη κατάσταση προσθέτοντας aria-selected="true"στην ενεργή καρτέλα.

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

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

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

html

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

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

html

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

CSS

Μεταβλητές

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

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

Στη .navβασική κατηγορία:

  --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
  --#{$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: #{$nav-link-color};
  --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
  --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};

Στην .nav-tabsκατηγορία τροποποιητή:

  --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
  --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
  --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
  --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
  --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
  --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
  --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};

Στην .nav-pillsκατηγορία τροποποιητή:

  --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
  --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
  --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};

Μεταβλητές Sass

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    var(--#{$prefix}link-color);
$nav-link-hover-color:              var(--#{$prefix}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αρχείου—για να επεκτείνετε τις καρτέλες πλοήγησης και τα χάπια μας για να δημιουργήσετε παράθυρα με καρτέλες τοπικού περιεχομένου.

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

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

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.

This is some placeholder content the Disabled tab's associated content.

<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-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" 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-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" 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-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</div>
</div>

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

<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>
    <button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</div>
</div>

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

This is some placeholder content the Disabled tab's associated content.

<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>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div>
</div>

Και με κάθετα χάπια. Ιδανικά, για κάθετες καρτέλες, θα πρέπει να προσθέσετε aria-orientation="vertical"και στο κοντέινερ της λίστας καρτελών.

This is some placeholder content the Disabled tab's associated content.

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-disabled-tab" data-bs-toggle="pill" data-bs-target="#v-pills-disabled" type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">...</div>
  </div>
</div>

Προσιτότητα

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

Σύμφωνα με το μοτίβο πρακτικών συγγραφής ARIA, μόνο η τρέχουσα ενεργή καρτέλα λαμβάνει εστίαση στο πληκτρολόγιο. Όταν αρχικοποιηθεί η προσθήκη JavaScript, θα οριστεί tabindex="-1"σε όλα τα ανενεργά στοιχεία ελέγχου καρτελών. Μόλις εστιαστεί η τρέχουσα ενεργή καρτέλα, τα πλήκτρα του δρομέα ενεργοποιούν την προηγούμενη/επόμενη καρτέλα, με το πρόσθετο να αλλάζει ανάλογα την περιπλάνησηtabindex . Ωστόσο, σημειώστε ότι η προσθήκη JavaScript δεν κάνει διάκριση μεταξύ οριζόντιων και κάθετων λιστών καρτελών όσον αφορά τις αλληλεπιδράσεις των κλειδιών δρομέα: ανεξάρτητα από τον προσανατολισμό της λίστας καρτελών, τόσο ο επάνω όσο και ο αριστερός δρομέας πηγαίνουν στην προηγούμενη καρτέλα και ο κάτω και ο δεξιός δρομέας πηγαίνουν στο την επόμενη καρτέλα.

Σε γενικές γραμμές, για να διευκολυνθεί η πλοήγηση στο πληκτρολόγιο, συνιστάται να κάνετε και τις ίδιες τις καρτέλες εστιάσιμες, εκτός εάν το πρώτο στοιχείο που περιέχει ουσιαστικό περιεχόμενο στο πλαίσιο της καρτέλας είναι ήδη εστιάσιμο. Η προσθήκη JavaScript δεν προσπαθεί να χειριστεί αυτήν την πτυχή—όπου χρειάζεται, θα πρέπει να κάνετε ρητά εστιάσιμα τα πλαίσια της καρτέλας προσθέτοντας tabindex="0"τη σήμανση.

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

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

Μπορείτε να ενεργοποιήσετε μια καρτέλα ή ένα χάπι πλοήγησης χωρίς να γράψετε 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" tabindex="0">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

Μέσω JavaScript

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

const triggerTabList = document.querySelectorAll('#myTab button')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

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

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

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

const 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" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

Μέθοδοι

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

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

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

Ενεργοποιεί το περιεχόμενό σας ως στοιχείο καρτέλας.

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

const bsTab = new bootstrap.Tab('#myTab')

Μέθοδος	Περιγραφή
`dispose`	Καταστρέφει την καρτέλα ενός στοιχείου.
`getInstance`	Στατική μέθοδος που σας επιτρέπει να λάβετε την παρουσία της καρτέλας που σχετίζεται με ένα στοιχείο DOM, μπορείτε να τη χρησιμοποιήσετε ως εξής: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Στατική μέθοδος που επιστρέφει μια παρουσία καρτέλας που σχετίζεται με ένα στοιχείο DOM ή δημιουργεί μια νέα σε περίπτωση που δεν είχε αρχικοποιηθεί. Μπορείτε να το χρησιμοποιήσετε ως εξής: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Επιλέγει τη δεδομένη καρτέλα και εμφανίζει το σχετικό παράθυρο. Οποιαδήποτε άλλη καρτέλα που είχε επιλεγεί προηγουμένως γίνεται μη επιλεγμένη και το συσχετισμένο τμήμα παραθύρου κρύβεται. Επιστρέφει στον καλούντα πριν εμφανιστεί πραγματικά το παράθυρο καρτέλας (δηλαδή πριν συμβεί το `shown.bs.tab`συμβάν).

Εκδηλώσεις

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

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

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

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

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