C'è un modo per mantenere Bootstrap Navbar sia navbar-fixed-bottom quando è su cellulare, e navbar-static-top quando sul desktop? Stavo pensando di creare due navbar e di nasconderne uno e mostrare l'altro, anche se non sono sicuro che vada bene; su una nota correlata, va bene usare due elementi nav con lo stesso ruolo?Bootstrap navbar-fixed-bottom su desktop e navbar-static-top su dispositivo mobile?
È inoltre possibile aggiungere e rimuovere la classe della barra di navigazione utilizzando javascript jquery in base alla larghezza dello schermo.
if ($(window).width() > 330) {
$('.navbar').addClass('navbar-static-top');
}
else
{
$('.navbar').addClass('navbar-fixed-bottom');
}
Si lavorerà di sicuro
Che funzionerà solo con caricamento della pagina, si interromperà se JS è disabilitato e potrebbe causare uno sfarfallio del nav dalla sua posizione iniziale al caricamento della pagina. L'obiettivo del bootstrap è essere reattivi. Le richieste dei media CSS sarebbero migliori. – dotcomly
È possibile utilizzare le media query:
<nav class="navbar navbar-default navbar-static-top" role="navigation">
@media (max-width:767px) { .navbar-static-top { position: fixed; bottom: 0; left: 0; width: 100%; margin: 0; } }
Questo codice funziona per me, e dovrebbe essere facile da capire.
var win = $(this); // browser window
var nav = $('.navbar'); // your navigation bar
function switchNavbar() {
if (win.width() < 768) { // on mobile
nav.removeClass('navbar-static-top');
nav.addClass('navbar-fixed-bottom');
} else { // on desktop
nav.removeClass('navbar-fixed-bottom');
nav.addClass('navbar-static-top');
}
}
// On first load
$(function() {
switchNavbar();
});
// When browser resized
$(window).on('resize', function(){
switchNavbar();
});
Questo è possibile, sì, è necessario utilizzare alcuni mediaquery su questo, ma è possibile. La tua nota alternativa è che puoi avere più elementi di navigazione, ed è supportato da w3.org per avere più ruoli di 'navigazione' sulla stessa pagina. http://www.w3.org/WAI/GL/wiki/Using_HTML5_nav_element#Example%3aThe_.3Cnav.3E_element – Dorvalla
@Dorvalla Ah, grazie. Quindi non ci sono metodi per ottenere questo già integrato in Bootstrap? – yaharga
Non posso confermarlo, ma aggiungere/rimuovere classi da javascript è una soluzione quando controlla la larghezza dello schermo. – Dorvalla