Previous
Next

Προσθήκη περιεχομένου καρτελών -Tab Content

Οι λεπτομέρειες για τους διάφορους corporate leaders πρέπει τώρα να οργανωθούν σε διάφορα tab panes.  Για να ξεκινήσει αυτό, θα περικλείσουμε ολόκληρο το περιεχόμενο σε ένα στοιχείο div με το την class tab-content όπως ορίζεται παρακάτω: 

<div class="tab-content">
  ...
</div>

Στη συνέχεια, παίρνουμε το όνομα και την περιγραφή του CEO της εταιρείας και το παραθέτουμε σε ένα tab-pane ως εξής:

<div role="tabpanel" class="tab-pane fade show active" id="tab1">
  <h3> ... </h3>
  <p> ... </p>
</div>

Σημειώστε τη χρήση των tab-pane, fade, show, and active classes και του tab1 ως id. Είναι το ίδιο id που χρησιμοποιείται ως href στον σύνδεσμο <a> στην πλοήγηση.

Το υπόλοιπο περιεχόμενο είναι επίσης παρόμοια περικλεισμένο μέσα στα κατάλληλα divs με τα σωστά αναγνωριστικά - ids και τις κλάσεις που ορίζονται παραπάνω.  Μόνο το πρώτο tab pane θα έχει τις show and active classes που υποδεικνύουν ότι το περιεχόμενο θα πρέπει να είναι ορατό στην ιστοσελίδα, από προεπιλογή.

Η HTML view είναι:

Previous
Next