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

Introduction

Σε αυτήν την υποενότητα, θα μάθουμε για το responsive web design aτο πλέγμα- grid system του Bootstrap

• Στο Part 1 θα δούμε το responsive design και τον τρόπο που υλοποιούμε στο Bootstrap το mobile first responsive design χρσησιμοποιώντας το grid system. 
• Θα μάθουμε επίσης στο Part 2,  πώς να προσαρμόσουμε μερικές από τις κλάσεις Bootstrap, καθορίζοντας τις δικές μας τροποποιήσεις σε ένα ξεχωριστό αρχείο CSS.

Responsive Design and Bootstrap Grid System Part 1

Σημείωση: Σε αυτό το Μέρος, θα συνεχίσουμε να ενημερώνουμε το αρχείο 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 ή ένα πολλαπλάσιο αυτών.

... Part 1...

Χρήση της Container class

Χρησιμοποιούμε την κλάση container για να διατηρούμε το περιεχόμενο σε σταθερό πλάτος στην οθόνη, όπως καθορίζεται από το μέγεθος της οθόνης.

Προσθέστε την container class στο πρώτο  div αμέσως μετά το</header> στο αρχείο ως εξής:

<div class="container"> 

Διαίρεση του περιεχομένου σε σειρές - rows

Ας προσθέσουμε τώρα την class row στα εσωτερικά στοιχεία  div του πρώτου επιπέδου μέσα στο container. TΑυτό οργανώνει τη σελίδα σε σειρές -  rows of περιεχομένου. 

<div class="row"> ...

Δημιουργία  Jumbotron στο header

Ας προσθέσουμε την class jumbotron στην ετικέτα header. Αυτό μετατρέπει το στοιχείο κεφαλίδας σε ένα στοιχείο Bootstrap που ονομάζεται Jumbotron.

Ένα jumbotron χρησιμοποιείται για την προβολή βασικού περιεχομένου σε έναν ιστότοπο. Σε αυτήν την περίπτωση το χρησιμοποιούμε για να επισημάνουμε το όνομα του ιστότοπου.

Στην header προσθέστε μια container class στο πρώτο εσωτερικό div και  μια row class στο δεύτερο εσωτερικό div.

<header class="jumbotron">
   <div class="container">
      <div class="row">

Δημιουργία υποσέλιδου - footer

Τέλος, στο υποσέλιδο - footer προσθέστε container class στο πρώτο εσωτερικό div και  μια row class στο δεύτερο εσωτερικό div.

<footer>
  <div class="container">
    <div class="row">

... Part 1 ...

Εφαρμογή κλάσεων στηλών - column classes σε κάθε σειρά - row

Στη header row, θα εμφανίσουμε το όνομα του καταστήματος και την περιγραφή σε 8 στήλες - 8 columns, ενώ θα αφήσουμε 4 στήλες - 4 columns για την εμφάνιση του λογοτύπου του καταστήματος στο μέλλον.

Ας πάμε στο jumbotron και ορίσουμε τις κλάσεις για το πρώτο εσωτερικό div ως:

<div class="col-12 col-sm-8"> ... </div>

και για το δεύτερο εσωτερικό div ως: 

<div class="col col-sm"> ... </div> <!-- This particular content will occupy whatever is left out, 0 or 4 cols -->

Για τις υπόλοιπες τρεις  div - rows με το περιεχόμενο, ας ορίσουμε τις κλάσεις για τα εσωτερικά div ως:

<div class="col-sm-4 col-md-3"> ... </div>
<div class="col-sm col-md"> ... </div>

Για το υποσέλιδο - footer, ας ορίσουμε τις classes για τα εσωτερικά divs ως:

<div class="col-5 col-sm-2"> ... </div>
<div class="col-6 col-sm-5"> ... </div>
<div class="col col-sm-4"> ... </div>
<div class="col-auto"> ... </div><!--auto, the column numbers that is going to be occupied will be dependent upon the actual content--> 

Τώρα μπορείτε να δείτε πώς η ιστοσελίδα έχει μετατραπεί σε mobile-first responsive design layout.

Χρήση περιθωρίου - Offset

Για το div που περιέχει τη <ul> με τους συνδέσμους ιστότοπου, ενημερώστε την κλάση ως εξής:

<div class="col-5 offset-1 col-sm-2">

Για να μετακινήσουμε στήλες προς τα δεξιά χρησιμοποιούμε τις .offset-* classes. Αυτές οι classes αυξάνουν το αριστερό περιθώριο - left margin μια στήλης κατά * στήλες. 

... Part 1

Αφού αποθηκεύσετε όλες τις αλλαγές, μπορείτε να πραγματοποιήσετε μια commit του Git με το μήνυμα "Bootstrap Grid Part 1".

Προβάλετε το ιστορικό αρχείων και συγκρίνετε αυτή την έκδοση του αρχείου με την προηγούμενη έκδοση

Responsive Design and Bootstrap Grid System Part 2

Χρήση Flex Order

Χρησιμοποιώντας Flex ordering, μπορούμε να εναλλάξουμε τον τίτλο και την περιγραφή που δίνει μια ενδιαφέρουσα ματιά στην ιστοσελίδα.
Για να γίνει αυτό, μπορείτε να ενημερώσετε την πρώτη και την τρίτη σειρά row of content classes ως:

<div class=" row flex-row-reverse "> ... </div>

List styles

Μπορείτε να χρησιμοποιήσετε πολλά στυλ λίστας για την εμφάνιση λιστών σε διαφορετικές μορφές. Θα χρησιμοποιήσουμε το unordered list style list-unstyled για να εμφανιστούν οι σύνδεσμοι στο κάτω μέρος της σελίδας χωρίς τις σφαίρες. Για να το κάνετε αυτό, μεταβείτε στις συνδέσεις στο υποσέλιδο και ενημερώστε την ul ως εξής

<ul class="list-unstyled"> ... </ul>

... Part 2 ...

Χρησιμοποιώντας προσαρμοσμένες κλάσεις CSS

Μπορούμε να ορίσουμε τις δικές μας προσαρμοσμένες κλάσεις CSS σε ένα ξεχωριστό αρχείο CSS και επίσης να προσαρμόσουμε μερικές από τις ενσωματωμένες τάξεις CSS.

• Στον υποφάκελο με το όνομα leChocolat , δημιουργήστε ένα φάκελο με όνομα css.
• Στη συνέχεια, δημιουργήστε ένα αρχείο που ονομάζεται styles.css στο φάκελο css .
• Ανοίξτε αυτό το αρχείο για να επεξεργαστείτε τα περιεχόμενα.

Add the following CSS code to the file:

• Προσθέστε το αρχείο styles.css στο head του index.html ως:

<link href="css/styles.css" rel="stylesheet">

• Στη συνέχεια, προσθέστε αυτές τις κλάσεις στις αντίστοιχες σειρές στο αρχείο index.html ως εξής. Δείτε τη διαφορά στο αρχείο index.html στο πρόγραμμα περιήγησης. Το πρώτο είναι για τη σειρά στην <header>, τα επόμενα τρία για τις σειρές στο περιεχόμενο και η τελευταία για την ετικέτα <footer>.

<div class="row row-header"> ... </div>
<div class="row row-content"> ... </div>
<div class="row row-content"> ... </div>
<div class="row row-content"> ... </div>
<footer class="footer"> ... </footer>

... Part 2 ...

Το επόμενο σετ προσαρμογής είναι το jumbotron και η διεύθυνση - address.

Add the following to

the styles.css file. 

... Part 2

Κατακόρυφο κεντράρισμα του περιεχομένου

Στην ενότητα περιεχομένου, ενημερώστε όλες τις σειρές ως εξής:

<div class="row row-content align-items-center">

Στο υποσέλιδο, ενημερώστε την τρίτη στήλη div που περιέχει τους συνδέσμους κοινωνικών μέσων ως εξής:

<div class="col col-sm-4 align-self-center">

Οριζόντιο κεντράρισμα του περιεχομένου

Ενημερώστε την παράγραφο για τα πνευματικά δικαιώματα ως εξής

<div class="row justify-content-center">  
<div class="col-auto">

Εφαρμογή Inline CSS

Ενημερώστε το εσωτερικό div  που περιέχει τους συνδέσμους κοινωνικών μέσων ως εξής:

<div style="text-align:center">

Αφού αποθηκεύσετε όλες τις αλλαγές, μπορείτε να πραγματοποιήσετε μια Git commit με το μήνυμα "Bootstrap Grid Part 2"