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?
6
A
risposta
3
È 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
+1
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
1
È 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; } }
2
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();
});
Problemi correlati
- 1. Il web design reattivo funziona su desktop ma non su dispositivo mobile
- 2. PhoneGap, Bootstrap o JQuery Mobile?
- 3. qr reindirizzamento codice per google play su dispositivo o desktop
- 4. Come utilizzare l'elemento immagine per immagini nitide su dispositivo mobile
- 5. Le contraffazioni vengono compresse per impostazione predefinita nel dispositivo mobile e espanse per impostazione predefinita nel desktop Bootstrap 3 reattivo
- 6. Facebook quota sul dispositivo mobile
- 7. Confirm() funziona su Android Mobile su Chrome?
- 8. no riproduzione automatica nel player HTML5 iframe su dispositivo mobile (Android Chrome e Firefox)?
- 9. ng-clic e ng-touch dispositivo mobile
- 10. SignalR su web mobile?
- 11. Come ridimensionare un'area di testo flessibile su un dispositivo mobile?
- 12. Rileva cellulare, tablet o desktop su Django
- 13. Come distribuire un modello di tensorflow su un dispositivo mobile?
- 14. Bootstrap Mobile non funzionante
- 15. Media Queries - Mobile vs Desktop Browser
- 16. Come posso avere un div dividere come se fosse su un dispositivo diverso con Bootstrap?
- 17. Bootstrap o jQuery Mobile
- 18. Captive portal su dispositivo Android
- 19. Univocità dispositivo mobile per iOS e Android
- 20. Twitter Bootstrap vs "Mobile First"
- 21. Comodo SSL: ERR_CERT_AUTHORITY_INVALID su Chrome mobile e Opera mobile (Android)
- 22. Rilevazione php mobile/tablet/desktop?
- 23. Come nascondere qualcosa nella visualizzazione mobile/tablet in Bootstrap 3?
- 24. Orientamento molto intermittente su dispositivo e simulatore
- 25. Formato ASP.Net MVC app per browser desktop e mobile
- 26. Bootstrap mobile prima e raggruppamento di query multimediali
- 27. Moduli di bootstrap su Twitter e Ajax?
- 28. Immagine di sfondo su dispositivo mobile che non si adatta correttamente allo schermo
- 29. Identificazione dispositivo mobile tramite Nmap
- 30. twitter-bootstrap vs jquery-mobile
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