Υποενότητα 3.1: Πλοήγηση - Εικονίδια

Θα προσθέσουμε τώρα μια απλή γραμμή πλοήγησης στην ιστοσελίδα ώστε να παρέχει συνδέσμους προς τις άλλες σελίδες του ιστότοπου.

Αρχίστε προσθέτοντας τον ακόλουθο κώδικα στο σώμα ακριβώς πάνω από το  header jumbotron.

Code:

IΣτον παραπάνω κώδικα μπορούμε να δούμε τη χρήση του στοιχείου  nav για να καθορίσουμε τις πληροφορίες πλοήγησης για τον ιστότοπο. Αυτό το στοιχείο nav έχει μορφοποιηθεί από τη navbar που το δηλώνει ως γραμμή πλοήγησης και από την κλάσηnavbar-light για να καθορίσει ότι η σελίδα πρέπει να χρησιμοποιεί τη light navigation bar.

Θα παρατηρήσετε τώρα την προσθήκη ενός συνδέσμου με το όνομα του Le Chocolat. Αυτό είναι το εμπορικό σήμα για τον ιστότοπο. Μπορείτε να το αντικαταστήσετε με το λογότυπο της ιστοσελίδας. Αυτό δημιουργείται από την ετικέτα <a class="navbar-brand"> tag.

Επιπλέον, η εσωτερική  ul χρησιμοποιείται για τον προσδιορισμό των στοιχείων που θα τοποθετηθούν στη γραμμή πλοήγησης. Αυτό το ul έχει μορφοποιηθει με την κλάση navbar-nav για να καθορίσει ότι τα στοιχεία θα πρέπει να εμφανίζονται εν σειρά inline μέσα στη γραμμή πλοήγησης.

Χρησιμοποιούμε επίσης την κλάση container μέσα στη γραμμή πλοήγησης.