HTML and CSS Reference
In-Depth Information
dopo la seconda e quarta colonna, visto che mostriamo solo due colonne per riga. Finora
abbiamo parlato delle colonne e di come renderle responsive, ma al lettore più attento non
sarà di certo sfuggito il fatto che anche il menù è responsivo. Infatti, mentre nei primi tre
layout il menu è in orizzontale, nell'ultimo scompare, lasciando il posto alle classiche tre
righe orizzontali che, se cliccate, fanno apparire il menu a discesa. Per ottenere questo ri-
sultato, abbiamo utilizzato il seguente codice.
Esempio 11.8
<nav id="navbar"
class="navbar navbar-default navbar-inverse navbarfixed-
top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
datatoggle="collapse" data-target="#navbarCollapse">
<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="#">HTML5 navbar</a>
</div>
<div class="collapse navbar-collapse"
id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="active"><a href="/">Home</a></li>
<li><a href="http://www.aspitalia.com">About</a></li>
<li><a hre-
f="http://www.aspitalia.com">Contact</a></li>
</ul>
</div>
</div>
</nav>
