Menu responsivo con Bootstrap. Dispositivi piccoli nel mirino.

Se utilizzando Bootstrap creeremo un menu come abbiamo fatto nel articolo precedente,  potremo notare rimpiccolendo la finestra del browser che il menu non e diventato del tutto responsivo. Si le voci del menu si spostano in un altra riga su schermi piccoli ma non cosi come ci si vorrebbe!

Principali nozioni su Bootstrap.

  1. Introduzione a Bootstrap
  2. Colegare fail di bootstrap
  3. La sistema a grglia
  4. Offset in Bootstrp. Spazio fra le colonne
  5. Ordine delle colonne
  6. La prima pagina html su Bootstrap
  7. Header con bootstrap
  8. Come realizzare menu responsive con Bootstrap
  9. Formatazione del testo.
  10. Come creare bottoni con Bootstrap
  11. Come rendere immagini responsive con Bootstrap
  12. Carosello bootstrap
  13. Bricioli di pane con Bootstrap
  14. Come realizzare accordeon

 

Come trasformare un menu in un bottone con Bootstrap

Bootstrap 3 è stato pensado soprattutto per un design  responsivo. In linea di principio, il menu gia da default come abbiamo visto alla fine della lezione precedente si adatta alle dimensioni dello schermo, ma si può fare di piu fare in modo che si trasforma in un solo buttone con tre rige menu responsivosul vostro smartphone, non occupando cosi l'intera prima schermata. Con aiuto di bootstrap creare una cosa simile diventa molto facile.

Sostituite le rige nel esempio dal articolo precedente :

<div class="row">   
            <ul>
            <li><a href="#">Css pratica</a></li>
            
            <li class="active"><a href="#">Sito web da 0</a></li>
            
            <li><a href="#">Dominio e Hosting</a></li>
            
            <li ><a href="#">Dominio e Hosting</a></li>
        </ul>
</div>

con :

<!-- 2 riga  -->
 <div class="row">   
    <div class="navbar navbar-default navbar-inverse">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="collapse">
            <ul class="nav navbar-nav ">
                <li><a href="#">Css pratica</a></li>
                
                <li class="active"><a href="#">Sito web da 0</a></li>
                
                <li><a href="#">Dominio e Hosting</a></li>
                
                <li ><a href="#">Dominio e Hosting</a></li>
            </ul>
        </div>
    </div>
 </div>  

Il risultato e la spieagzione.

 

Così, sul proprio schermo gli  utenti vedranno questo menu:
menu bootstrap13
Beh, in primo luogo, vediamo che il nostro menu è diventato nero e testo delle voci del menu sono colorati bi bianco e griggio quelli non attivi.  In realtà,  grazie alla classe classe navbar-inverse  che è diventato cosi. Ma questo non è un problema potrai sempre modificare gli  stile sostituendo quelli di bootstrap con i propri. Se riduci la finestra (finestra del browser),  ad un certo punto il menù si transforma in un solo bottone con tre righe:
menu bootstrap14
Come ho già detto, questo è molto utile quando si naviga sul sito da uno smartphone. Premendo questo bottone  l'utente vedrà i voci del menu in questa forma:

menu bootstrap15
Se dopo aver riportato questi modifiche al codice il bottone del menu non funziona, non si apre menu a discesa verificare percorsi di collegemento di js di Bootstrap nel codice della pagina.
A mio parere il risultato otenuto è molto comodo.  Se si desidera visualizzare sul pulsante quattro righe orizzontali invece di tre basta  aggiungere un'altra riga:

<span class="icon-bar"></span>

Il nostro bottone di naviagazione viene creato con questo codice di Bootstrap alla riduzione dello schermo.

<div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div> 

Attributi che cominciano con la  parola data corrispondono per l'interazione fra  Html e js di Bootstrap.

La stringa :

<div class="collapse navbar-collapse" id="collapse">

è responsabile dello spostamento delle voci di menu "sotto il pulsante" quando il sito viene visualizzato su piccoli schermi. Quindi come hai visto creare un menu davvero responsivo è molto facile. Basta semplicemente adottare per il tuo sito web questo metodo di Bootstrap e la cosa è fatta ...

Letto 2361 volte