Υποενότητα 2.3: Προσαρμόσιμος Σχεδιασμός και Πλέγμα Bootstrap

Σημείωση: Σε αυτό το Μέρος, θα συνεχίσουμε να ενημερώνουμε το αρχείο index.html στο φάκελο leChocolat που δημιουργήσαμε και επεξεργαστήκαμε στην προηγούμενη υποενότητα.

Bootstrap Grid System and Responsive Design

Το Bootstrap έχει σχεδιαστεί για να υποστηρίζει καταρχήν τις μικρές οθόνες των κινητών- mobile first responsive design. Αυτό σημαίνει ότι οι κλάσεις -  classes έχουν σχεδιαστεί έτσι ώστε να μπορούμε να αρχίσουμε με τη στόχευση των οθονών κινητών συσκευών πρώτακαι στη συνέχεια να εργαστούμε προς τα πάνω σε μεγαλύτερα μεγέθη οθόνης. Το σημείο εκκίνησης για αυτό είναι πρωτίστως τα media queries. Έχουμε ήδη προσθέσει την υποστήριξη για ερωτήματα μέσων - media queries στην τελευταία υποενότητα, όπου προσθέσαμε αυτή τη γραμμή στο head: 

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

• • Η viewport meta tag διασφαλίζει ότι το πλάτος της οθόνης έχει οριστεί στο πλάτος της συσκευής και ότι το περιεχόμενο αποδίδεται με αυτό το πλάτος.
  • Αυτό μας φέρνει στο δεύτερο ζήτημα, τον σχεδιασμό ιστοσελίδων που να ανταποκρίνονται στο μέγεθος του παραθύρου προβολής.

Εδώ είναι όπου το σύστημα πλέγματος - grid Bootstrap μας βοηθά. Το Bootstrap διαθέτει τέσσερα μεγέθη,

• • xs for πολύ μικρές - extra small,
  • sm for μικρές - small,
  • md for μεσαίες - medium and
  • lg for μεγάλες - large screen sizes.

Έχουμε ήδη δει τα βασικά του responsive design. Σε αυτό το μέρος, θα χρησιμοποιήσουμε τις Bootstrap grid classes για τον σχεδιασμό των ιστοσελίδων,

Θέλουμε ο ιστότοπός μας να εμφανίζει το περιεχόμενο σαν στίβα - stacked στις extra small devices, αλλά να εμφανίζεται οριζόντια μέσα σε κάθε σειρά -row για το  small size και τις συσκευές - devices που έχουν μεγαλύτερο μέγεθος από αυτό.

Για αυτόν τον στόχο, θα χρησιμοποιήσουμε τις κλάσεις

• • .col-*,
  • .col-sm-*,
  • .col-md-*, and
  • .col-lg-*

για τον σχεδιασμό των σελίδων,

Μπορούμε να καθορίσουμε πόσες στήλες κάθε τεμάχιο περιεχομένου θα καταλαμβάνει μέσα σε μια σειρά, προσθέτοντας όλα έως 12 ή ένα πολλαπλάσιο αυτών.