Υποενότητα 3.3: Εμφάνιση περιεχομένου - Media - Ειδοποιήσεις

HTML Πίνακες - Tables

Prerequisites for this page: Tables-HTML, Tables-CSS

Σε αυτήν την υποενότητα,  θα εξετάσουμε τους HTML Πίνακες - Tables και τις κλάσεις Bootstrap για τη μορφοποίηση πινάκων. Θα τροποποιήσουμε τη σελίδα aboutus.html για να προσθέσουμε έναν πίνακα.

Ας ξεκινήσουμε ανοίγοντας τη σελίδα  aboutus.htmlστον επεξεργαστή κώδικα. Θα προσθέσουμε μια νέα σειρά - row περιεχομένου μετά τη σειρά Corporate Leadership στη σελίδα. Αρχικά ξεκινάμε προσθέτοντας μια σειρά και στήλες στη σελίδα ως εξής:

Adding a row and columns

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

Table source:

Σημειώστε τη χρήση της κλάσης  table-responsive για να δημιουργήσετε έναν responsive πίνακα, καθώς και τις κλάσεις table-hover και thead-dark για τη μορφοποίηση του πίνακα

Για να αλλάξετε τα προεπιλεγμένα χρώματα για το dark  και το hover table προσθέστε αυτόν τον κώδικα στο αρχείο mystyle.css file:

Table CSS source:

Κάρτες - Cards

Στη συνέχεια, προσθέτουμε μια κάρτα - card στο δεύτερο div στην πρώτη γραμμή περιεχομένου, ενημερώνοντας πρώτα το div προσθέτοντας τις κλάσεις col-12 col-sm-6 σε αυτήν και στη συνέχεια προσθέτοντας την κάρτα:

Card source:

Κάντε μια commit στη Git repository με το μήνυμα "Tables and Cards"

Εικόνες - Images

Σε αυτήν την υποενότητα, θα εξερευνήσουμε τις κλάσεις Bootstrap για την υποστήριξη εικόνων - Bootstrap classes to support images σε έναν ιστότοπο.

Download το αρχείο images.zip και αποσυμπιέστε το στο φάκελο leChocolat. Αυτό θα πρέπει να δημιουργήσει ένα φάκελο που ονομάζεταιd images εκεί.
Τώρα θα προσθέσουμε το λογότυπο στο Jumbotron. Στο index.html μεταβείτε στη  header row μέσα στο jumbotron και αντικαταστήστε τη δεύτερη <div> column με τον ακόλουθο κώδικα:

Logo - Jumbotron source:

Στη συνέχεια, θα προσθέσουμε το λογότυπο στη navbar όπου εμφανίζουμε τηLe Chocolat  brand. Go to the navbar και αντκαταστήστε τον κώδικα εκεί για την <a> tag με "navbar-brand" class με τον ακόλουθο κώδικα: 

Logo - Navbar source:

Επαναλάβετε τα παραπάνω δύο βήματα για τη σελίδα aboutus.html και τη σελίδαcontactus.html επίσης για να ενημερώσετε navbars και jumbotrons.

Media Object

Στη συνέχεια, θα εργαστούμε με το περιεχόμενο της ιστοσελίδας και θα χρησιμοποιήσουμε τις κλάσεις media object classes για να μορφοποιήσουμε το περιεχόμενο στις γραμμές περιεχομένου - content rows.

Πηγαίνετε στο index.html, στη first content row, και αντικαταστήστε το περιεχόμενο στη δεύτερη στήλη-second column που περιέχει την περιγραφή του 85% DARK CHOCOLATE με τον ακόλουθο κώδικα:

View source:

Σημειώστε τη χρήση της  media class και των σχετικών κλάσεων Bootstrap για τη μορφοποίηση του περιεχομένου.

Στη συνέχεια, θα πάμε στην third row και θα αντικαταστήσουμε το περιεχόμενο της second column που περιέχει την περιγραφή για τον Vasilis με το ακόλουθο περιεχόμενο:

View source:

Κάντε μια  Git commit με μήνυμα "Images and Media".

Ειδοποιήσεις - Alerting Users

Σε αυτό το σύντομο μάθημα, θα εξετάσουμε τη χρήση των κονκάρδων - badges ως τρόπο προειδοποίησης των χρηστών.

Θα συνεχίσουμε να επεξεργάζομε το αρχείο index.html. Σε αυτό το αρχείο θα προσθέσουμε ένα badge HOT δίπλα στο όνομα 85% DARK CHOCOLATE στηfirst content row. Για να το κάνετε αυτό, προσθέστε τον ακόλουθο κώδικα μέσα στο <h2> που περιέχει το όνομα: 

<span class="badge badge-danger">HOT</span>

Στη συνέχεια, θα προσθέσουμε ένα badge σαν  badge-pill δίπλα στην προηγούμενη ετικέτα στην ιστοσελίδα. Προσθέστε τον ακόλουθο κώδικα στην ετικέτα  <h2> tag: 

<span class="badge badge-pill badge-success">$0.99</span>

Κάντε commit τις αλλαγές στην  Git repository με το μήνυμα "Alerting Users".

Περαιτέρω μελέτη

Official resources

• Bootstrap Tables 
• Bootstrap Card
• Bootstrap Image 
• Bootstrap Media Object
• Bootstrap Badge
• Bootstrap Alerts