Acabo de visitar esta página http://www.elmastudio.de/ y me pregunté si es posible construir el colapso de la barra lateral izquierda con Bootstrap 3.

Código para contraer la barra lateral desde la parte superior (solo teléfono):

<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 barra lateral en sí tiene la clase hidden-xs. Se elimina con el siguiente js

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

Si hace clic en el botón, cambia la barra lateral desde la parte superior. Sería genial ver que la barra lateral se comporta como muestra el sitio web anterior. ¡Se agradece cualquier ayuda!

Bootstrap 3

Si es posible. Este ejemplo "fuera del lienzo" debería ayudarlo a comenzar.

https://codeply.com/p/esYgHWB2zJ

Básicamente, debe envolver el diseño en un div externo y usar consultas de medios para alternar el diseño en pantallas más pequeñas.

/* 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;
  }
}

Además, hay varios ejemplos más de barra lateral de Bootstrap aquí

Bootstrap 4

¿Crear un "cajón" de barra lateral de barra de navegación sensible en Bootstrap 4?

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

Este es el ejemplo oficial, puede ser mejor para algunos. Se encuentra en la sección de ejemplos de experimentos, pero como es oficial, debe mantenerse actualizado con la versión de arranque actual.

Parece que han agregado un archivo css fuera del lienzo utilizado en su ejemplo:

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

Y algo de código JS:

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

EDITAR: He agregado una opción más para las barras laterales de arranque.

En realidad, hay tres maneras en las que puede crear una barra lateral de bootstrap 3. Traté de mantener el código lo más simple posible.

Barra lateral fija

Aquí puede ver una demostración de una barra lateral fija simple que he desarrollado con la misma altura que la página.

Barra lateral en una columna

También desarrollé una barra lateral de columnas bastante simple que funciona en una página de dos o tres columnas dentro de un contenedor. Toma la longitud de la columna más larga. Aquí puedes ver una demostración

Tablero

Si usa el panel de arranque de Google, puede encontrar varios paneles adecuados, como este . Sin embargo, la mayoría de ellos requieren mucha codificación. Desarrollé un panel que funciona sin javascript adicional (junto al javascript de arranque). Aquí hay una demostración

Para los tres ejemplos, por supuesto, debe incluir los archivos jquery, bootstrap css, js y theme.css.

Barra deslizante

Si desea que la barra lateral se oculte al presionar un botón, esto también es posible con solo un poco de javascript. Aquí hay una demostración

Vía Angular: usando ng-classAngular, podemos ocultar y mostrar la barra lateral.

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;
    }
}

No se menciona en el documento, pero la barra lateral izquierda en Bootstrap 3 es posible usando el método "Collapse".

Como lo menciona bootstrap.js:

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

Esto significa que, al agregar la clase "ancho" al objetivo, se expandirá por ancho en lugar de alto:

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