Je viens de visiter cette page http://www.elmastudio.de/ et je me suis demandé s'il était possible de créer le repli de la barre latérale gauche avec Bootstrap 3.

Code pour réduire la barre latérale à partir 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 supprimé avec les js suivants

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

Si vous cliquez sur le bouton, cela fait basculer la barre latérale du haut. Ce serait formidable de voir la barre latérale se comporter comme le site Web ci-dessus le montre. Toute aide est appréciée!

Bootstrap 3

Oui c'est possible. Cet exemple «hors canevas» devrait vous aider à démarrer.

https://codeply.com/p/esYgHWB2zJ

Fondamentalement, vous devez envelopper la mise en page dans un div externe et utiliser des requêtes multimédias pour basculer la mise en page 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 autres exemples de barre latérale Bootstrap ici

Bootstrap 4

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

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

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

On dirait qu'ils ont ajouté un fichier css hors canevas 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')
  });
});

EDIT: J'ai ajouté une autre option pour les barres latérales de bootstrap.

Il existe en fait trois manières de créer une barre latérale 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

Barre latérale dans une colonne

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

Tableau de bord

Si vous google tableau de bord bootstrap, 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 de défilement

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

Via Angular: en utilisant ng-classAngular, 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;
    }
}

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

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 "largeur" ​​dans la cible se développera en fonction de la largeur au lieu de la hauteur:

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