web-dev-qa-db-fra.com

Créer une barre de navigation latérale collante dans Bootstrap 3.0

Je veux créer Stickbar Side Navbar sur le côté gauche dans Mon site Web. & J'utilise Bootstrap 3 RC2. Je ne sais pas comment le créer.

jquerytwitter-bootstrap-3
12
Swarup

Vous devez définir le CSS pour quand la barre latérale devient fixe ...

Par exemple,

#sidebar.affix {
    position: fixed;
    top:25px;
    width:228px;
  }

Voici un exemple de travail: http://bootply.com/73864

11
Zim

La barre de navigation collante que vous référez est possible grâce au plugin affixe. Vous pouvez voir la documentation de bootstrap à ce sujet . 

Ce Jsfiddle contient une barre latérale collante (agrandissez la fenêtre de résultat pour la voir fonctionner correctement). Lisez la suite pour créer la même barre latérale. 

1. Créez du HTML pour votre barre latérale. Pour cet exemple, nous allons utiliser des pilules de navigation bootstraps dans un puits. 

<div class="row">
  <div class="col-sm-3">
    <div class="well bs-sidebar affix" id="sidebar">
      <ul class="nav nav-pills nav-stacked">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
      </ul>
    </div> <!--well bs-sidebar affix-->
  </div> <!--col-sm-3-->
  <div class="col-sm-9">
    <p>Main body content goes here</p>
  </div> <!--col-sm-9-->
</div> <!--row-->

2. Invoquer le plugin affixe dans votre fichier js

$('#sidebar').affix({
  offset: {
    top: $('header').height()
  }
});

Vous devez remplacer "en-tête" par tout ce qui se trouvera au-dessus de la barre latérale. Si vous utilisez une barre de navigation bootstrap et qu’elle se trouve directement au-dessus de la barre latérale, remplacez 'header' par la classe que vous utilisez pour la barre de navigation, par exemple: 

top: $('.navbar navbar-default').height()

3. Ajouter css pour affixer la classe

CSS pour la mise en page non sensible

.bs-sidebar.affix {
  width: 263px;
  top: 25px;
}

CSS pour la mise en page réactive

@media (min-width: 768px) {
  .bs-sidebar.affix {
    width: 158px;
    top: 25px;
  }
}

@media (min-width: 992px) {
  .bs-sidebar.affix {
    width: 213px;
    position: fixed;
    top: 25px;
  }
}

@media (min-width: 1200px) {
  .bs-sidebar.affix {
    width: 263px;
  }
}
8
Jeremy Lynch

La barre de navigation par défaut du Bootstrap 3 de Twitter est horizontale. Il en existe quatre types: défaut, statique en haut et fixe en haut et en bas, voir la section exemple de cette page: http://getbootstrap.com/getting-started

Mais bien sûr, vous pouvez utiliser le Bootstrap 3 de Twitter pour créer une navigation latérale (à gauche) .Lire tout d’abord la documentation, elle contient de nombreux exemples. Faites un croquis de votre idée, essayez de la coder avec les exemples. Posez des questions ici pour le dépannage de votre code . Commencez par les affixes ( http://getbootstrap.com/javascript/#affix ) et la section de navigation ( http://getbootstrap.com/components/# nav ) d'abord peut-être.

Peut-être aussi vérifier: comment faire en sorte que bootstrap se déroule sur le contenu de chevauchement de la navigation au lieu de le déplacer

1
Bass Jobsen