web-dev-qa-db-fra.com

Réduire la barre latérale avec Bootstrap 3

Je viens de visiter cette page http://www.elmastudio.de/ et je me suis demandé s'il était possible de générer la réduction de la barre latérale gauche avec Bootstrap 3.

Code permettant de réduire la barre latérale du haut (téléphone uniquement):

<button type="button" class="navbar-toggle sidebar-toggle" data-toggle="collapse" data-target=".sidebar-ex1-collapse">
    <span class="sr-only">Sidebar</span>
    <span class="glyphicon glyphicon-check"></span>
</button>

La barre latérale elle-même a la classe hidden-xs. Il est enlevé avec le js suivant

$('.sidebar-toggle').click(function(){
     $('#sidebar').removeClass('hidden-xs');            
});

Si vous cliquez sur le bouton, la barre latérale bascule à partir du haut. Il serait bon de voir la barre latérale se comporter comme le montre le site Web ci-dessus. Toute aide est appréciée!

twitter-bootstrap-3sidebarcollapse
99
Chris We

Bootstrap 3

Oui c'est possible. Cet exemple "hors-toile" devrait vous aider à démarrer.

http://bootply.com/88026

En gros, vous devez envelopper la présentation dans une div externe et utiliser des requêtes de support pour la faire basculer sur des écrans plus petits.

/* collapsed sidebar styles */
@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
  }
  .row-offcanvas-right
  .sidebar-offcanvas {
    right: -41.6%;
  }

  .row-offcanvas-left
  .sidebar-offcanvas {
    left: -41.6%;
  }
  .row-offcanvas-right.active {
    right: 41.6%;
  }
  .row-offcanvas-left.active {
    left: 41.6%;
  }
  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 41.6%;
  }
  #sidebar {
    padding-top:0;
  }
}

En outre, il existe plusieurs plus de Bootstrap exemples de la barre latérale ici

Bootstrap 4

Créer un "tiroir" de barre latérale de barre de navigation sensible dans Bootstrap 4?

121
Zim

Il existe un autre modèle de départ utile ici, pour toute personne intéressée.

http://startbootstrap.com/templates/simple-sidebar.html

89
Chris W.

http://getbootstrap.com/examples/offcanvas/

Ceci est l'exemple officiel, peut-être mieux pour certains. Il se trouve dans la section exemples Experiments, mais comme il est officiel, il devrait être mis à jour avec la version actuelle de bootstrap.

On dirait qu'ils ont ajouté un fichier css off canvas utilisé dans leur exemple:

http://getbootstrap.com/examples/offcanvas/offcanvas.css

Et du code JS:

$(document).ready(function () {
  $('[data-toggle="offcanvas"]').click(function () {
    $('.row-offcanvas').toggleClass('active')
  });
});
24
Jon

EDIT: J'ai ajouté une option supplémentaire pour bootstrap sidebars.

Il y a en fait trois manières de créer un sidebar bootstrap 3. J'ai essayé de garder le code aussi simple que possible.

Barre latérale fixe

Ici vous pouvez voir une démo d'une simple barre latérale fixe que j'ai développée avec la même hauteur que la page

Sidebar dans une colonne

J'ai également développé une barre latérale de colonnes plutôt simple qui fonctionne dans une page à deux ou trois colonnes à l'intérieur d'un conteneur. Il prend la longueur de la plus longue colonne. Ici vous pouvez voir une démo

Tableau de bord

Si vous utilisez Google bootstrap _ tableau de bord, vous pouvez trouver plusieurs tableaux de bord appropriés, tels que celui-ci . Cependant, la plupart d'entre eux nécessitent beaucoup de codage. J'ai développé un tableau de bord qui fonctionne sans javascript supplémentaire (à côté du javascript bootstrap _). Voici une démo

Pour les trois exemples, vous devez bien sûr inclure les fichiers jquery, bootstrap css, js et theme.css.

Barre coulissante

Si vous voulez que la barre latérale se cache en appuyant sur un bouton, cela est également possible avec seulement un peu de javascript. Voici un démo

8
FabianW

Via Angular: en utilisant ng-class of Angular, nous pouvons masquer et afficher la barre latérale.

http://jsfiddle.net/DVE4f/359/

<div class="container" style="width:100%" ng-app ng-controller="AppCtrl">
<div class="row">
    <div ng-class="showgraphSidebar ? 'col-xs-3' : 'hidden'" id="colPush" >
        Sidebar
    </div>
    <div ng-class="showgraphSidebar ? 'col-xs-9' : 'col-xs-12'"  id="colMain"  >
        <button  ng-click='toggle()' >Sidebar Toggle</a>
    </div>    
  </div>
</div>

.

function AppCtrl($scope) {
    $scope.showgraphSidebar = false;
    $scope.toggle = function() {
        $scope.showgraphSidebar = !$scope.showgraphSidebar;
    }
}
6
Razan Paul

Ce n'est pas mentionné dans la documentation, mais la barre latérale gauche sur Bootstrap 3 est possible en utilisant la méthode "Collapse".

Comme mentionné par bootstrap.js:

Collapse.prototype.dimension = function () {
    var hasWidth = this.$element.hasClass('width')
    return hasWidth ? 'width' : 'height'
  }

Cela signifie que l’ajout de la classe "width" à la cible s’agrandira de largeur au lieu de hauteur:

http://jsfiddle.net/2316sfbz/2/

3
erw13n