Ho appena visitato questa pagina http://www.elmastudio.de/ e mi sono chiesto se è possibile costruire il collasso della barra laterale sinistra con Bootstrap 3.

Codice per comprimere la barra laterale dall'alto (solo telefono):

<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 sidebar stessa ha la classe hidden-xs. Viene rimosso con il seguente js

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

Se fai clic sul pulsante, si attiva la barra laterale dall'alto. Sarebbe bello vedere la barra laterale comportarsi come mostra il sito web sopra. Qualsiasi aiuto è apprezzato!

Bootstrap 3

Si è possibile. Questo esempio "off-canvas" dovrebbe aiutarti a iniziare.

https://codeply.com/p/esYgHWB2zJ

Fondamentalmente è necessario avvolgere il layout in un div esterno e utilizzare le query multimediali per attivare il layout su schermi più piccoli.

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

Inoltre, ci sono molti altri esempi di barra laterale Bootstrap qui

Bootstrap 4

Creare un "cassetto" reattivo della barra di navigazione laterale in Bootstrap 4?

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

Questo è l'esempio ufficiale, potrebbe essere migliore per alcuni. Si trova nella sezione degli esempi di esperimenti, ma poiché è ufficiale, dovrebbe essere aggiornato con l'attuale versione bootstrap.

Sembra che abbiano aggiunto un file CSS fuori tela usato nel loro esempio:

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

E un po 'di codice JS:

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

EDIT: ho aggiunto un'altra opzione per le barre laterali bootstrap.

In realtà ci sono tre modi in cui puoi creare una barra laterale bootstrap 3. Ho cercato di mantenere il codice il più semplice possibile.

Barra laterale fissa

Qui puoi vedere una demo di una semplice barra laterale fissa che ho sviluppato con la stessa altezza della pagina

Barra laterale in una colonna

Ho anche sviluppato una barra laterale a colonne piuttosto semplice che funziona in una pagina a due o tre colonne all'interno di un contenitore. Prende la lunghezza della colonna più lunga. Qui puoi vedere una demo

Pannello di controllo

Se utilizzi Google Bootstrap dashboard, puoi trovare più dashboard adatti, come questo . Tuttavia, la maggior parte di essi richiede molta codifica. Ho sviluppato una dashboard che funziona senza javascript aggiuntivo (accanto al javascript bootstrap). Ecco una demo

Per tutti e tre gli esempi devi ovviamente includere i file jquery, bootstrap css, js e theme.css.

Barra di scorrimento

Se vuoi che la barra laterale si nasconda premendo un pulsante, questo è possibile anche con un po 'di javascript.Ecco una demo

Via Angular: utilizzando ng-classAngular, possiamo nascondere e mostrare la barra laterale.

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

Non è menzionato nel documento, ma la barra laterale sinistra su Bootstrap 3 è possibile utilizzando il metodo "Collapse".

Come accennato da bootstrap.js:

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

Ciò significa che, aggiungendo la classe "larghezza" alla destinazione, si espanderà in base alla larghezza anziché all'altezza:

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