Trabajando con Collapse

Loading...

From the course by Universidad Austral

Diseñando páginas web con Bootstrap 4

5 ratings

Universidad Austral

Diseñando páginas web con Bootstrap 4

5 ratings

Course 1 of 4 in the Specialization Full Stack Web Development en Español

Este curso te enseñará conceptos generales de desarrollo web del lado cliente, metodologías de trabajo y herramientas. Aprenderás sobre diseño responsive, grillas, y componentes CSS y Javascript de Bootstrap. Practicarás con preprocesadores de CSS, Less y Sass. También aplicarás conceptos básicos de Node.js y NPM para gestionar tus sitios web. Al finalizar este curso, habrás practicado con todas esas herramientas y serás capaz de diseñar una página web e implementar ese diseño con Bootstrap, crear un diseño responsive y preparar tu sitio web para salir a producción.

From the lesson

COMPONENTES JAVASCRIPT DE BOOTSTRAP

Este módulo comprende los componentes Javascript de Bootstrap. Aprenderás sobre pestañas, navegación con pestañas, navegación con botones, diferentes tipos de alertas, carroussel, scrollspy, affix y tooltips.

Trabajando con Collapse5:09

Trabajando con accordions8:21

Meet the Instructors

Ezequiel Lamónica
Licenciado en Ciencias de la Computación (UBA), IAE EMBA Candidate 2018.

Hola. Vamos a trabajar ahora con

los componentes que otorgan visibilidad o gestionan, de alguna manera,

el manejo de la visibilidad dentro de nuestro

sitio y vimos dos que es el collapse y el accordion.

Vamos a ver ahora el collapse.

Para eso, lo que hice fue,

fíjate que estoy en la página principal,

cambié un poquitito el layout de

la página principal para incorporar los componentes de collapse.

Fíjate que lo que hice fue que podamos,

con estos tres botones,

mostrar u ocultar las

diferentes opciones o funcionalidades que queremos otorgar a nuestro sitio.

Por supuesto, que esto es para jugar un poco con estos atributos,

hay algunos casos en el que realmente es útil y es necesario mostrarlos,

sobre todo, cuando es más que nada información adicional.

En este caso quise agregarlo aquí para mostrártelo,

en alguna parte que quede un poco más más prolijo, más comprensible.

Fijaos que acá estoy usando,

un componente que es el collapse un poquitito más avanzado que me

permite mostrar u ocultar múltiples contenedores.

De hecho si los ocultamos,

vamos viendo como se van a acomodando.

Esto es una característica que nos permite el componente collapse.

Vamos a ver cómo se usa, qué fue lo que hicimos.

Por un lado, si te fijas esta parte de la página es tal cual la teníamos antes,

lo único que cambiamos fueron dos cosas,

le agregamos un ID a cada uno de los párrafos,

por así decirlo, funciona reserva pago y dos clases que es collapse y multi-collapse.

¿Está bien? Luego lo que hicimos fue agregar otra otra fila,

otro row, arriba de éstos párrafos.

Mantuvimos lo que son las disposiciones de las columnas y haremos unos botones,

con estilos primary o primarios,

btn btn-primary, tipo botón,

y acá de vuelta vamos a usar los data attribute,

en este caso el toggle y el target.

En el toggle ponemos collapse,

en el target ponemos el símbolo de numeral o almohadilla

y el ID del componente que vamos a mostrar,

de la sección que queremos mostrar.

En este caso fíjate que coincide funciona, reserva, pago.

Y después, no mucho más,

esto son los serial control similares.

Bueno, en este caso es impoortante esto, el area controls,

asegúrate que sean distintos porque esto es lo que se va a usar después.

El componente lo que hace es utilizar este area controls

para distinguir entre los diferentes componentes y que,

justamente, a la medida que uno los va agregando,

este multi-collapse lo que permite es que uno pueda operar con varios,

simultáneamente, y se puedan acomodar de acuerdo a lo que se muestra.

Por eso es importante que éstos sean distintos,

no importa ahora, concretamente,

a qué hacen referencia,

pero sí que sean distintos.

Bien, y no mucho más.

Después vas a ver que en la documentación

puedes definir si quieres que comiencen alguno abierto,

u otro oculto o lo que fuere y algunas

otras funcionalidades más, algunas animaciones, etcétera.

Eso lo dejo para que lo investigues por tu cuenta,

pero bueno, por ahora con esto,

podemos mostrar información adicional al sitio y quizás lo puedas probar agregarlo en,

no sé, por ejemplo,

en la sección de reserva,

cuando toquen el botón reservar que muestre

algún tipo de contenido diciendo, por ejemplo:;

"asegúrate que al momento de hacer la reserva,

ten en cuenta tal o cual cosa, avisa actualizada, etcétera".

Lo que a vos te parezca conveniente que el usuario sepa al momento de hacer la reserva.

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2019 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play