Filtros con Bootstrap

Clase 36 de 45 • Curso de Frontend con Bootstrap y Foundation 2016

Clase anteriorSiguiente clase

Resumen

Veamos como crear filtros de nuestra listas de productos.

Enzo Aliatis

student•

Repo V4beta
Pagina

Juan Barboza

student•

Excelente!!

Cesar David Ramírez Dimaté

student•

Excelente, aunque puedes pulir detalles para mejorar la distribución de los números para pantallas medianas, con col-12 col-md-4 col-lg-3 y col-12 col-md-8 col-lg-9 mb-3

También podrías cambiar el toggler inicial para que quede de la siguiente forma, al igual que el login

Wilfredo Bardales

student•

La lista masculino y femenino , la hice con

<div class="list-group">

<a href="#" class="list-group-item list-group-action active">

Masculino <input class="pull-xs-left" type="checkbox">

</a>

</div>

<!-- Me parece lo mismo -->

Álvaro Tejero Cordero

student•

Si al crear el span con el número de items en Ropa,Tecnología o Accesorios no os lo pone a la derecha con pull-xs-right, debeis hacerlo como expongo en este código

<a href="#" class="list-group-item list-group-item-action justify-content-between">
                Ropa <span class="badge badge-pill badge-default ">174</span>
              </a>

Esto es debido a que en las útlimas versiones bootstrap eliminó el pull-right y left

Cesar David Ramírez Dimaté

student•

Según la documentación de Bootstrap 4.1.1 debes añadir también el align-items para que quede bien cuadrado los números.

<div class="list-group mb-3">
  <a href="#" class="list-group-item list-group-item-action active">Categoría</a>
  <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
    Ropa<span class="badge badge-secondary badge-pill">174</span>
  </a>
  <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
    Tecnología<span class="badge badge-secondary badge-pill">143</span>
  </a>
  <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
    Accesorios<span class="badge badge-secondary badge-pill">130</span>
  </a>
</div>

Manuel Sandoya

student•

Bien, se tiene algunos problemas al adaptar lo descrito en el vídeo. Aquí lo que hice para lograrlo:

Para los tags, tal como indican otros usuarios, ya no se utiliza las clases tag sino badge. Debe quedar así:

<a href="#" class="list-group-item list-group-item-action justify-content-between">
    Ropa <span class="badge badge-default badge-pill">174</span>
</a>

Documentación sobre Badge: https://v4-alpha.getbootstrap.com/components/badge/

Siguiendo los pasos del vídeo, las clases agregadas para lograr el efecto toggle de los filtros funciona, pero con un inconveniente, al principio no se muestran los filtros, permanecen ocultos hasta que, reduciendo la ventana del navegador, aparece el botón de ‘Filtros’ para desplegarlos.

El efecto debería ser que, al cargar la página en pantallas desde medium (md) en adelante, se muestre los filtros y permanezca oculto el botón ‘Filtros’ para desplegar los mismos. En pantallas desde small (sm) para abajo, debería ocultarse los filtros y mostrarse el botón de ‘Filtros’. Para lograr esto realicé los siguiente cambios:

Moví la clase navbar-toggleable (que a partir de la alpha-v6 ya no es necesario agregarle -xs) a un nuevo div que encierre el botón de ‘Filtros’ y el contenedor de filtros, y donde estaba navbar-toggleable lo cambié por navbar-collapse. Sin embargo, esto ocasiona que el contenedor de los filtros se ordene todo de manera horizontal, es decir, un filtro al lado de otro y no debajo como esperamos, para solucionar esto agregué la clase flex-column. El resultado final debería quedar así:

<div class="navbar-toggleable">
	<div class="list-group filtros-toggle hidden-sm-up">
		<!-- Botón 'Filtros' -->
	</div>
	<div id="filtros-container" class="collapse navbar-collapse flex-column">
		<!-- Filtros -->
	</div>
</div>

Nota: como indicaba el usuario chiquirf, es suficiente con mover la clase hidden-sm-up hacia el div contenedor de nuestro botón para mantener nuestros márgenes, es decir, en nuestro css es necesario solo este selector:

#productos-container .list-group {
	margin-bottom: 1em;
}

Documentación sobre Navbar: https://v4-alpha.getbootstrap.com/components/navbar/

Documentación sobre Flexbox: https://v4-alpha.getbootstrap.com/utilities/flexbox/#direction

Carlos Enrique Rojas Falcone

student•

En vez de agregar el Media@ y el margin-bottom para separar los filtros explicado desde el minuto 19, he puesto la clase .hidden-sm-up al DIV del botón del filtro en vez de ponerlo al ANCHOR. manteniendo el margin-bottom a los .list-group

<div class="list-group filtros-toggle hidden-sm-up">
  <a href="#" id="filtros-toggle" class="list-group-item list-group-item-action navbar-toggler" data-target="#filtros-container" data-toggle="collapse">
    <h5 class="list-group-item-heading">Filtros <i class="fa fa-chevron-down pull-xs-right"></i></h5>
  </a>
</div>

Juan Barboza

student•

Excelente aporte!

Genaro Calvillo Escamilla

student•

¿Cuál es la diferencia entre una variable definida con el signo '$' a una sin el signo?

Jose Andres Gonzalez Guevara

student•

Ninguna, solo semantica, muchas veces la usan para saber que lo que tiene esa variable es un Object Jquery y no un valor cualquiera

Alberto Vargas Hernández

student•

Estoy intentando crear el toggle con la version 4.5 de Bootstrap pero no me funciona, si hay alguien que me puede ayudar se lo agradecería mucho

Wilfredo Bardales

student•

Hay momentos en los que se adelanta solo el video ....

y en este sistema de preguntas y comentarios aveces se corre el cursor de escribir hacia atras...

Kath Sánchez

teacher•

Hey, no vemos error, pero vamos a verificar para solucionarlo.

Leonardo

student•

No me está arrancando el video. En el resto de los cursos sí funcionan

Juan Felipe Lara Martinez

student•

Codigo para ubicar el check box al lado derecho…!

  Masculino
    <div class="form-check pull-xs-right">
        <label for="" class="form-check-label">
            <input type="checkbox" value="m" class="form-check-input">
         </label>
     </div>```

Francisco Manuel Velásquez Escobar

student•

Hola, en “alpha 6” parece ser que en vez de tag son badge

Así me funcionó:

<a href="#" class="list-group-item list-group-item-action justify-content-between">
              Ropa <span class="badge badge-pill badge-default">174</span>
            </a>

Ivan Cardozo

student•

A alguien mas le pasa que no andan los iconos con font awsome?

Diego Forero

Team Platzi•

La nueva versión de bootstrap a cambiado bastante, te recomiendo revisar la documentación oficial para aplicar los cambios a tu código.

Gerald Jóse Cerda Olivas

student•

luego de toda la tarde pasar viendo como hacer que funcionara igual al video me resigne, al parecer es por un cambio en font awesome que ahora genera etiquetas svg cuando carga la pagina y por lo tanto no pude acceder a como muestra sacha, intente acceder al svg pero imagino que por mi poco manejo de javascript y peor aun de jquery no lo logre. lo que hice fue acceder al h5 atravez de jquery colocandole un #filtros-cambiar que contiene el icono de font awesome, tambien añadir una clase al h5 y ahi hacer el cambio de clases

esto en app.js

    const button = $("#filtros-cambiar");
  
    button.click(() => {
      if (button.hasClass('down')) {
        button.removeClass('down').addClass('up');
        button.html('Filtros <i class="fas fa-caret-up"></i>');
      } else {
        button.removeClass('up').addClass('down');
        button.html('Filtros<i class="fas fa-caret-down"></i>');
      }
    });

y en catalogo.html los cambios en el h5

<div class="list-group filtros-toggle">
                <a id="filtrosToggle" href="#" class="list-group-item list-group-item-action navbar-toggleable d-md-none" data-target="#filtros-container" data-toggle="collapse">
                    <h5 id="filtros-cambiar" class="down d-flex justify-content-between">Filtros
                        <i class="fas fa-caret-down"></i>
                    </h5>
                    
                </a>
            </div>```

Ivan Cardozo

student•

20:51 no me tomaba el padding con la clase filtros container . tuve que quitarla

@media screen and (max-width: 540px){
   .filtros-toggle {
    margin-bottom: 1em;}

  }

Cesar David Ramírez Dimaté

student•

Hay muchas cosas que cambian con respecto a la versión 4.1.1. Por ejemplo, esconder y visualizar “Filtros” para pantallas medianas con display: none, utilizar un justify content para separar la flecha, utilizar margin bottom donde es. Entre menos se toque el archivo app.css, mejor.

catalogo.html

<!-- Productos -->
<section id="productos-container">
  <div class="container">
    <div class="row">
      <!-- Filtros -->
      <div class="col-12 col-md-4 col-lg-3">
        <div class="list-group d-sm-none">
          <a href="#" id="filtrosToggle" class="list-group-item list-group-item-action navbar-toggler mb-3 d-flex justify-content-between" data-toggle="collapse" data-target="#filtros-container" aria-controls="filtros-container" aria-expanded="false"><span>Filtros</span><i class="fa fa-chevron-down"></i></a>
        </div>
        <div class="collapse navbar-collapse d-sm-block" id="filtros-container">
          <div class="list-group mb-3">
            <a href="#" class="list-group-item list-group-item-action active">Categoría</a>
            <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
              Ropa<span class="badge badge-secondary badge-pill">174</span>
            </a>
            <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
              Tecnología<span class="badge badge-secondary badge-pill">143</span>
            </a>
            <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
              Accesorios<span class="badge badge-secondary badge-pill">130</span>
            </a>
          </div>
          <div class="list-group mb-3">
            <div class="list-group">
            <a href="#" class="list-group-item list-group-item-action active">Color</a>
            <a href="#" class="list-group-item list-group-item-action list-group-item-success">Verde</a>
            <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Rojo</a>
            <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Amarillo</a>
            <a href="#" class="list-group-item list-group-item-action list-group-item-info">Azul</a>
          </div>
          </div>
          <div class="list-group mb-3">
            <a href="#" class="list-group-item list-group-item-action active">Sexo</a>
            <a href="#" class="list-group-item list-group-item-action">
              <div class="form-check">
                <label for="masculino" class="form-check-label">
                  <input type="checkbox" value="m" id="masculino" class="form-check-input">Masculino</label>
              </div>
            </a>
            <a href="#" class="list-group-item list-group-item-action">
              <div class="form-check">
                <label for="femenino" class="form-check-label">
                  <input type="checkbox" value="f" id="femenino" class="form-check-input">Femenino</label>
              </div>
            </a>
          </div>
        </div>
      </div>
      <!-- /Filtros -->
      <!-- Productos -->
      <div class="col-12 col-md-8 col-lg-9 mb-3">
        Productos
      </div>
      <!-- /Productos -->
    </div>
  </div>
</section>
<!-- /Productos -->

app.css

#filtros-container .list-group-item-action.active {
  background-color: #99c84a;
  border-color: #99c84a;
}

app.js

const $filtrosToggle = $('#filtrosToggle');

$filtrosToggle.click(function (ev) {
  ev.preventDefault();
  const $i = $filtrosToggle.find('i.fa');
  var isDown = $i.hasClass('fa-chevron-down');
  
  if (isDown) {
    $i.removeClass('fa-chevron-down').addClass('fa-chevron-up')
  } else {
    $i.removeClass('fa-chevron-up').addClass('fa-chevron-down')
  }
});

Epifanio Pulido Avilez

student•

Tengo un problema, al poner el boton de filtros para dispositivos pequeños, solo puedo abrir los filtros pero se queda abierto, ya no puedo cerrarlo

Cesar David Ramírez Dimaté

student•

Revisa uno de los comentarios en este video, pude darle solución y es saber manejar bien el toogler.

Alejandro Gallardo

student•

Yo le agregre el pull-xs-right al icono de la flecha para que estuviera al lado contrario de filtro, pienso que se ve mejor así.

<h5 class="list-group-item-headding">Filtros<i class="fa fa-chevron-down pull-xs-right"></i></h5>

Cesar David Ramírez Dimaté

student•

Yo lo hice de la siguiente forma en la versión 4.1.1

<div class="list-group d-sm-none">
  <a href="#" id="filtrosToggle" class="list-group-item list-group-item-action navbar-toggler mb-3 d-flex justify-content-between" data-toggle="collapse" data-target="#filtros-container" aria-controls="filtros-container" aria-expanded="false"><span>Filtros</span><i class="fa fa-chevron-down"></i></a>
</div>

Luis Felipe Silgado Cortázar

student•

Llevo un tiempo preguntándome por que pasa esto:

Está la vista md, lg o xl:
Luego hago la ventana pequeña:
Le doy al botón del menú:
Vuelvo a recoger el menú:
Toda la estructura desde sm hasta xl se desbarata:

Pasa lo mismo con index.html

Cesar David Ramírez Dimaté

student•

Que versión de bootstrap estás manejando?

Filtros con Bootstrap

¡Hemos renovado este curso!

¿Dónde aprender frontend actualizado?

Bienvenido al curso

Bienvenidos al curso de frontend con Bootstrap y Foundation

Introducción a Frameworks Frontend

Foundation

Presentación del proyecto para Foundation

Grilla de Foundation

Grilla Flex de Foundation

Foundation Icon Fonts 3

Títulos en Foundation

Barra de menú en Foundation

Botones en Foundation

Tabs con Foundation

Carrousel en Foundation con Orbit

Tablas de precio con Foundation

Igualar alto de columnas en Foundation

Contenido responsive con Foundation

Formularios con Foundation

Validación de formularios con Foundation

Navegación avanzada con Foundation

Barra de navegación fija con Foundation

Modificando Tabs en Foundation

Menú offcanvas con Foundation

Menú Drilldown con Foundation

Obteniendo datos del formulario

Bootstrap

Presentación del proyecto de Bootstrap

Bootstrap lanzó su versión v4.0.0-alpha.6

Contenedores en Bootstrap

Grillas en Bootstrap

Grillas Flex con Bootstrap

Barra de navegación con Bootstrap

Navegación responsive con Bootstrap

Carousel con Bootstrap

Imágenes responsivas con Bootstrap

Formularios con Bootstrap

Modals en Bootstrap

Breadcrumbs con Bootstrap

Filtros con Bootstrap

Cards con Bootstrap

Conclusiones

Cierre del Curso

Desafío 01

Desafío 02

Desafío 03

Desafío 04

Contenido complementario

Personalizando Bootstrap

Zurb Development Stack

Yeoman