Video Corso Django 1.11 - Programmare in Python

Crea il Tuo Blog con Django 1.11 e Bootstrap 3.3.7

16: Grid System

La prima cosa di cui ci vogliamo occupare è far si che il footer resti sempre nella zona bassa della pagina, anche quando il contenuto dei nostri post è inferiore al contenuto necessario per riempire la pagina. Ci sono svariati modi per fare questo, in questo caso noi creeremo una classe personalizzata per quanto riguarda il container in cui abbiamo il contenuto dei nostri post, e quindi modificheremo lo stile di questo nuovo container assegnandoli un'altezza minima di 95%:

HTML:

<div class="container contenuto">
            {% block content %}

            {% endblock content %}
</div><!--container contenuto-->

CSS:

.contenuto { 
    min-height: 95%;
    padding-bottom:40px;
}

Utilizzando le proprietà offerte dal Grid System di Bootstrap, dividiamo la sezione contenuto in due colonne, una da 8/12 di larghezza e l'altra dai restanti 4/12, utilizzando rispettivamente col-sm-8 e col-sm-3-offset-1. La particolarità del Grid System di Bootstrap è che consente alla nostra pagina di scalare in maniera automatica quanto visualizzata, nel nostro caso, da dispositivi mobili: le due colonne create infatti si sovrapporranno una sull'altra.

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

        <div class="col-sm-8">

        {% block content %}

        {% endblock content %}

        </div> <!--col-sm-8-->

        <div class="col-sm-3-offset-1" >
             <center>
                <h4>PyMike's</h4>
                <p>Powered by <strong><em>Django 1.11 & Bootstrap</em></strong> mollis euismod. Cras mattis consectetur purus sit amet fermentum. <strong><em>www.ProgrammareInPython.it</em></strong></p>
             </center>
        </div> <!--col-sm-3-offset-1-->

        </div> <!--row-->
    </div><!--container-->

Aggiungiamo inoltre un po di logica per quanto riguarda i tasti HOME e CONTATTI: vogliamo che i tasti diventino "attivi" solamente quanto ci troviamo nella sezione corrispondente.

Per fare questo ci basta apportare queste modifiche alla nostra NavBar:

          <ul class="nav navbar-nav">

            <li class="{% if request.path_info == '/' %} active{% endif %}"><a href="/">Home <span class="sr-only">(current)</span></a></li>
            <li class="{% if request.path_info == '/contatti/' %} active{% endif %}"><a href="/contatti">Contatti</a></li>

          </ul>
Menu della Serie