Barra lateral colapsada con Bootstrap

Isabella, miembro de nuestro equipo de trabajo, nos hizo el favor de escribir esta reseña porque controla perfectamente este tema.

Solución:

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

---

Arranque 4

¿Crear un “cajón” de la barra lateral de la 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 dado que 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 puedes hacer una barra lateral de Bootstrap 3. Traté de mantener el código lo más simple posible.

Barra lateral fija

Aquí puedes 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 he desarrollado 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 de mandos

Si busca en Google el tablero de arranque, puede encontrar varios tableros adecuados, como este. Sin embargo, la mayoría de ellos requieren mucha codificación. Desarrollé un tablero 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

Tienes la posibilidad dar difusión a este ensayo si si solucionó tu problema.

---

---

Utiliza Nuestro Buscador