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

... 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 μια στήλης κατά * στήλες.