Bootstrap Navbar'ın mobil olduğunda navbar-fixed-bottom
olmasını ve masaüstünde navbar-static-top
olmasını sağlamanın bir yolu var mı? İki navbar yaratmayı ve birini gizlemeyi ve diğerini göstermeyi düşünüyordum, ancak bu iyi mi emin değilim; İlgili bir notta, aynı role sahip iki nav elemanını kullanmak yeterli midir?Masaüstünde Bootstrap navbar-sabit-alt ve mobilde navbar-statik-top?
6
A
cevap
3
Ayrıca bunu, javascript jquery kullanarak ekran genişliğine göre navbar sınıfını ekleyip kaldırarak da yapabilirsiniz.
if ($(window).width() > 330) {
$('.navbar').addClass('navbar-static-top');
}
else
{
$('.navbar').addClass('navbar-fixed-bottom');
}
It medya sorgularını kullanabilirsiniz emin
+1
Yalnızca sayfa yükü üzerinde çalışacak, JS devre dışı bırakılmışsa bozulacak ve sayfa yüklemesinde başlangıç konumundan navun titremesine neden olabilir. Önyükleme amacı, duyarlı olmaktır. CSS medya sorguları daha iyi olurdu. – dotcomly
1
için çalışacaktır:
<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
Bu kod benim için çalışıyor, ve anlaşılması kolay olmalıdır.
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();
});
İlgili konular
- 1. Mobilde, düğmeyi ekranın sağ tarafında nasıl tutacağım
- 2. Masaüstünde/doğrudan üstünde çizin?
- 3. Masaüstünde Geçmişi Çalıştırma
- 4. WordPress'i Masaüstünde Etkinleştir
- 5. VLC masaüstünde videoları nasıl oynatıyor?
- 6. Mac masaüstünde kakaoda yeniden konumlandırma
- 7. JQuery mobilde temayı dinamik olarak nasıl değiştirebilirim?
- 8. Windows Phone Masaüstünde 7 Stiller
- 9. Bootstrap 3 - yüzer altbilgi
- 10. Mobilde 1 satırda 2 önyükleme düğmesi
- 11. Bootstrap kuyuları ve panelleri
- 12. XPages ve Bootstrap 3.3.6
- 13. tümleştirme Bootstrap ve GWT
- 14. Uygun satırın altındaki mobilde sıradaki satır düğmeleri siparişi
- 15. Masaüstünde ve bir aygıtta farklı mscoree.dll giriş noktaları var mı?
- 16. GitHub Masaüstünde özet ve açıklama arasındaki fark nedir?
- 17. Twitter Bootstrap'in duyarlı CSS'si yeniden boyutlandırılan pencerede çalışıyor ancak mobilde değil
- 18. Masaüstünde Aktörün Sahne Alanı koordinatlarını alma libGDX
- 19. SQLCipher - Şifreli bir veritabanını masaüstünde açma
- 20. Bir nomachine uzak masaüstünde xmonad'i nasıl çalıştırabilirim?
- 21. Düşük Gecikme ffmpeg ile masaüstünde (p2p)
- 22. Masaüstünde javascript programlarını yazmanın en kolay yolu?
- 23. HTML5 Boilerplate ve Twitter Bootstrap
- 24. Bootstrap ve ziyaret edilen linkler
- 25. mousedown olayı tablet/mobilde ateş etmiyor, HTML5 Canvas
- 26. Bootstrap
- 27. Bootstrap
- 28. Bootstrap
- 29. Bootstrap
- 30. Bootstrap altbilgisi, mobildeki tam genişlik ve iki sütunu birbirine bağlar
Bu mümkün, evet, bunun üzerine bazı ortam sorgulamalarını kullanmak zorundasınız, ancak bu mümkündür. Alternatif notunuz, birden fazla nav elemanına sahip olmanız ve aynı sayfada birden fazla 'gezinme' rolüne sahip olması için w3.org tarafından desteklenebilmesidir. http://www.w3.org/WAI/GL/wiki/Using_HTML5_nav_element#Example%3aThe_.3Cnav.3E_element – Dorvalla
@Dorvalla Ah, teşekkürler. Öyleyse bu zaten Bootstrap içine inşa edilmiş herhangi bir yöntem var mı? – yaharga
Bunu doğrulayamıyorum, ancak javascript tarafından sınıf ekleme/çıkarma, ekranın genişliğini kontrol ettiğinde bir çözümdür. – Dorvalla