Navs

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

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

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

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

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

<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">Disabled</a>
  </li>
</ul>

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

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

Προσθέστε αναπτυσσόμενα μενού με λίγο επιπλέον 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-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">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-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">Disabled</a>
  </li>
</ul>

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

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

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

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

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

Περιεχόμενο κράτησης θέσης για τον πίνακα καρτελών. Αυτό σχετίζεται με την αρχική καρτέλα. Σε πάει μίλια ψηλά, τόσο ψηλά, γιατί έχει αυτό το διεθνές χαμόγελο. Υπάρχει ένας άγνωστος στο κρεβάτι μου, υπάρχει ένα σφυροκόπημα στο κεφάλι μου. Ωχ όχι. Σε μια άλλη ζωή θα σε έκανα να μείνεις. Γιατί εγώ, είμαι ικανός για τα πάντα. Ταίριασμα για τη μάχη της στέψης μου. Χρησιμοποιείται για να κλέψεις το ποτό των γονιών σου και να σκαρφαλώσεις στην ταράτσα. Τόνος, μαύρισμα ταιριάζει και έτοιμος, ανασηκώστε το γιατί γίνεται βαρύ. Ο έρωτάς της είναι σαν ναρκωτικό. Υποθέτω ότι ξέχασα ότι είχα μια επιλογή.

Περιεχόμενο κράτησης θέσης για τον πίνακα καρτελών. Αυτό σχετίζεται με την καρτέλα προφίλ. Έχετε την καλύτερη αρχιτεκτονική. Σφραγίδες διαβατηρίου, είναι κοσμοπολίτισσα. Ωραία, φρέσκια, άγρια, το πήραμε στο λουκέτο. Ποτέ δεν είχα σχεδιάσει ότι μια μέρα θα σε έχανα. Σου τρώει την καρδιά. Το φιλί σου είναι κοσμικό, κάθε κίνηση είναι μαγική. Εννοώ αυτά, εννοώ σαν να είναι αυτή. Χαιρετίσματα αγαπημένοι ας κάνουμε ένα ταξίδι. Απλώς αποκτήστε τη νύχτα σαν την 4η Ιουλίου! Αλλά προτιμάς να σπαταληθείς.

Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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>γύρω του.

Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-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>

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

Περιεχόμενο κράτησης θέσης για τον πίνακα καρτελών. Αυτό σχετίζεται με την αρχική καρτέλα. Σας είδα στο κέντρο της πόλης να τραγουδάτε τους Blues. Παρακολουθήστε να κυκλώνετε την αποχέτευση. Γιατί δεν με αφήνεις να περάσω; Βαρύ είναι το κεφάλι που φοράει το στέμμα. Ναι, κάνουμε τους αγγέλους να κλαίνε, να πέφτουν βροχή στη γη από ψηλά. Θέλετε να δείτε την παράσταση σε 3D, μια ταινία. Έχετε νιώσει ποτέ, τόσο λεπτό χαρτί. Είναι ένα ναι ή όχι, ίσως όχι.

Placeholder content for the tab panel. This one relates to the profile tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

Placeholder content for the tab panel. This one relates to the messages tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

Placeholder content for the tab panel. This one relates to the settings tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
    </div>
  </div>
  <div class="col-9">
    <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>
</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" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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 (κάθε καρτέλα πρέπει να ενεργοποιηθεί ξεχωριστά):

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

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

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

Μέθοδοι

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

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

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

καρτέλα $().

Ενεργοποιεί ένα στοιχείο καρτέλας και ένα κοντέινερ περιεχομένου. Η καρτέλα πρέπει να έχει είτε ένα data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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>
  $(function () {
    $('#myTab li:last-child button').tab('show')
  })
</script>

.tab('show')

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

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

.tab('dispose')

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

Εκδηλώσεις

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

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`για να στοχεύσετε την ενεργή καρτέλα και την προηγούμενη ενεργή καρτέλα (αν είναι διαθέσιμη) αντίστοιχα.
εμφανίζονται.bs.καρτέλα	Αυτό το συμβάν ενεργοποιείται στην εμφάνιση καρτελών μετά την εμφάνιση μιας καρτέλας. Χρησιμοποιήστε `event.target`και `event.relatedTarget`για να στοχεύσετε την ενεργή καρτέλα και την προηγούμενη ενεργή καρτέλα (αν είναι διαθέσιμη) αντίστοιχα.
καρτέλα hide.bs	Αυτό το συμβάν ενεργοποιείται όταν πρόκειται να εμφανιστεί μια νέα καρτέλα (και επομένως η προηγούμενη ενεργή καρτέλα πρέπει να κρυφτεί). Χρησιμοποιήστε `event.target`και `event.relatedTarget`για να στοχεύσετε την τρέχουσα ενεργή καρτέλα και τη νέα καρτέλα που θα ενεργοποιηθεί σύντομα, αντίστοιχα.
hidden.bs.tab	Αυτό το συμβάν ενεργοποιείται μετά την εμφάνιση μιας νέας καρτέλας (και επομένως η προηγούμενη ενεργή καρτέλα αποκρύπτεται). Χρησιμοποιήστε `event.target`και `event.relatedTarget`για να στοχεύσετε την προηγούμενη ενεργή καρτέλα και τη νέα ενεργή καρτέλα, αντίστοιχα.

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