J'ai Twitter Bootstrap 3 WebPage avec cette barre NAV:
<div class="col-xs-12 col-md-10 col-md-offset-1">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
Title
</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
...
</div>
</nav>
</div>
5 Réponses :
oui il est
Merci, cela a été utile car j'essaie de créer une barre NAV sur un grand écran uniquement, ce qui me rappelait que je peux utiliser ces classes pour créer une certaine logique et avoir deux navbars distincts, une fixe, et l'autre, sans utiliser les requêtes de média. . La raison pour laquelle je ne souhaite pas utiliser les requêtes de média dans ce cas est due à la messagerie instantanée, car je utilise le style de démarrage de la barre NAVBAR-NAVBAR et ne voulez pas remplacer ce style (ne souhaitez pas modifier le noyau lorsque cela n'est pas nécessaire). Je vois que c'est une réponse viable à l'OP.
Vous pouvez utiliser une requête multimédia pour cela, quelque chose comme ceci:
Je le ferais de cette façon, à l'aide de JQuery - détecterait l'agent utilisateur et ajoutez la classe fixe si nécessaire.
<script>
$(document).ready(function() {
// Create string to check for mobile device User Agent String
$.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
// If we detect that string, we will add the fixed class to our .navbar-header with jQuery
if ($.browser.device) {
$('.navbar-header').addClass('navbar-fixed-to-top');
}
});
<script>
J'aime mieux l'idée de la mettre à JQuery mieux, comme mentionné par Elon Zito, de sorte que vous n'ayez pas à ajouter une substitution cryptique pour les plus grands appareils lorsque vous suivez le bon schéma. par exemple. Si vous ajoutez NAVBAR-TOP (code> TOP code> sur le modèle de base, vous devez définir le NAVBAR-TOP code> sur Position: relatif code> pour XS code> et up périphériques, puis définissez NAVBar-top fixe code> Retour sur Position: fixe; code> pour les appareils moyens et grands, etc ... Pour éviter cela, vous pouvez utiliser la variable BOOTSTRAP ENV code> disponible, de cette façon fonctionnera dans les navigateurs de petite résolution et non seulement des appareils mobiles tels que mentionnés ci-dessus, ce qui a plus de sens lorsque vous utilisez Bootstrap . I.e. Vous devriez éviter de vérifier le périphérique et essayez de vous coller avec des requêtes multimédias à la place. P> $(document).ready(function () {
var bsEnv = findBootstrapEnvironment();
if(bsEnv != 'lg') {
$('#navbar').addClass('navbar-fixed-top');
}
});
function findBootstrapEnvironment() {
var envs = ['xs', 'sm', 'md', 'lg'];
$el = $('<div>');
$el.appendTo($('body'));
for (var i = envs.length - 1; i >= 0; i--) {
var env = envs[i];
$el.addClass('hidden-'+env);
if ($el.is(':hidden')) {
$el.remove();
return env
}
};
}
Comment rendez-vous ce travail sur des appareils de grande taille? NAVBAR-FRAND-TOP est uniquement appliqué à ma barre NAVBAR si la fenêtre du navigateur n'a que 50% d'ouverture
Le moyen le plus simple utilise uniquement CSS. Pas de javacrip requis. J'ai utilisé les styles pour .navbar-Top-Top-Fixe à partir de la barre Navbar.less, à l'intérieur de la valeur par défaut .navbar. Si vous avez un nom de classe différent, changez-le. Si votre barre NAV est supérieur à 50px, vous devriez également modifier le remplissage de la marge du corps également.
@media (max-width: 767px) {
body {
margin-top: 50px;
}
.navbar-default {
position: fixed;
z-index: 1030; //this value is from variables.less -> @zindex-navbar-fixed
right: 0;
left: 0;
border-radius: 0;
top: 0;
border-width: 0 0 1px;
}
}
Réduisez la fenêtre de votre navigateur jusqu'à une petite fenêtre. L'interface rendra la même chose qu'un périphérique mobile lorsque vous êtes assez petit.