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

Χρήση της 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">