Navs

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Κατακόρυφος

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

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

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

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

Καρτέλες

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

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

Χάπια

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

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

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

<nav class="nav nav-pills nav-fill">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link disabled" href="#">Disabled</a>
</nav>

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

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#">Disabled</a>
</nav>

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

<nav class="nav nav-pills nav-justified">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link disabled" href="#">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" href="#">Active</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">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" href="#">Disabled</a>
</nav>

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

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

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

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

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

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

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <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 class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </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>

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

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <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 class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </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>

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

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

Εάν δημιουργείτε το JavaScript μας από την πηγή, απαιτείutil.js .

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

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

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </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">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
  </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">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
  </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>

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

<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
  <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
  <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
  <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
  <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
</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>

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

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

<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </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 (κάθε καρτέλα πρέπει να ενεργοποιηθεί ξεχωριστά):

$('#myTab a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

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

$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child a').tab('show') // Select first tab
$('#myTab li:last-child a').tab('show') // Select last tab
$('#myTab li:nth-child(3) a').tab('show') // Select third 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>

Μέθοδοι

καρτέλα $().

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

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </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>
  $(function () {
    $('#myTab li:last-child a').tab('show')
  })
</script>

.tab('show')

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

$('#someTab').tab('show')

.tab('dispose')

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

Εκδηλώσεις

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

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

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

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})