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?
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
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
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; } }
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();
});
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