risposta-alla-domanda-sullo-sviluppo-web-bd.com

Barra laterale comprimibile con Bootstrap 3

Ho appena visitato questa pagina http://www.elmastudio.de/ e mi chiedevo se fosse possibile creare 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, la barra laterale viene spostata dall'alto. È bello vedere la barra laterale comportarsi come il sito web sopra mostra. Qualsiasi aiuto è apprezzato!

98
Chris We

Bootstrap 3

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

http://bootply.com/88026

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 diversi altri esempi di barre di bootstrap qui


Bootstrap 4

Crea un "cassetto" barra laterale di barra reattivo in Bootstrap 4?

120
Zim

C'è un altro utile modello di partenza qui, per chiunque sia interessato.

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

88
Chris W.

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

Questo è l'esempio ufficiale, potrebbe essere migliore per alcuni. È sotto la sezione degli esempi di esperimenti, ma dato che è ufficiale, dovrebbe essere aggiornato con la versione di bootstrap corrente.

Sembra che abbiano aggiunto un file css off canvas usato nel loro esempio:

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

E qualche codice JS:

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

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

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

Fixed sidebar

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 della colonna 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

Cruscotto

Se si usa google bootstrap dashboard, è possibile trovare più dashboard adatto, come ad esempio questo . Tuttavia, la maggior parte richiede molto codice. Ho sviluppato un 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 è anche possibile con solo un piccolo javascript. Ecco una demo

8
FabianW

Via Angolare: utilizzando ng-class di Angular, 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;
    }
}
6
Razan Paul

Non è menzionato su doc, ma la sidebar sinistra su Bootstrap 3 è possibile usando il metodo "Collapse".

Come accennato da bootstrap.js:

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

Questo significa che, aggiungendo la "larghezza" della classe al target, si espanderà per larghezza invece che per altezza:

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

3
erw13n