Video Corso Django 1.11 - Programmare in Python

Crea il Tuo Blog con Django 1.11 e Bootstrap 3.3.7

14: Barra di Navigazione


Andiamo nella sezione Components di Bootstrap e prendiamo il codice d'esempio della Navigation Bar, e quindi modifichiamo il nostro template "base.html" in questo modo:

<!--DOCTYPE html -->
<html>
    {% load static %}
    <head>

    <title> {% block head_title %}MyDjangoBlog{% endblock head_title%}</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <link rel="stylesheet" href="{% static 'css/blog.css' %}" type="text/css" />

    </head>

    <body>

        <nav class="navbar navbar-default navbar-fixed-top">
          <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="/">My Django Blog</a>
                 </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                <li class="active"><a href="/">Home <span class="sr-only">(current)</span></a></li>
                <li><a href="/contatti">Contatti</a></li>
              </ul>
                 <!--<ul class="nav navbar-nav">-->
                <!--<li><a href="/">Home <span class="sr-only">(current)</span></a></li>-->
                <!--<li><a href="/contatti">Contatti</a></li>-->
              <!--</ul>-->


                <div class="navbar-header pull-right">
                    <center><img alt="Brand" src="{% static 'img/logo.png' %}"/></center>
                </div>

            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>


Tra le modifiche effettuate aggiungiamo "navbar-fixed-top", che ci consente di far si che la barra di navigazione resti sempre in alto anche mentre scorriamo la pagina; Dobbiamo anche fare alcune modifiche al CSS in modo da far si che la Navigation Bar possa alloggiare comodamente nella pagina:

h1 { color: green; }

h2 { color: red; }

body {
    padding-top: 70px;
    height:100%;
}
Menu della Serie