twitter-bootstrap-3 - left - sidebar bootstrap 4 example

Collapse de la barra lateral con Bootstrap 3

Question

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 tiene la clase hidden-xs. Se elimina con los siguientes js

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

Si haces clic en el botón, se alterna la barra lateral desde la parte superior. Sería genial ver que la barra lateral se comporta como se muestra en el sitio web anterior. ¡Cualquier ayuda es apreciada!

Answer 1

A través de Angular: utilizando ng-class de Angular, 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;
}
}

Answer 2

Aquí hay otra plantilla de inicio útil, para cualquier persona interesada.

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

Answer 3

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

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

Barra lateral fija

Aquí puede ver una demo 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 demo

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 (al lado del bootstrap javascript). Aquí hay una demo

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 pequeño javascript. Aquí hay una demo

Answer 4

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

Como lo menciona bootstrap.js:

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

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

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

Answer 5

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

http://bootply.com/88026

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 la barra lateral Bootstrap aquí

Answer 6

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

Este es el ejemplo oficial, puede ser mejor para algunos. Está en la sección Ejemplos de experimentos, pero como es oficial, debe actualizarse con la versión de arranque actual.

Parece que han agregado un archivo css fuera de la lona utilizado en su ejemplo:

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

Y algunos códigos JS:

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