Ejercicio bootstrap

Con el ejercicio del otro día (acordeón galería de imágenes) vamos a modificarlo para incorporar Bootstrap poniendo:

La barra de navegación con navbar.
El acordeón el de bootstrap.
Crear un botón ‘login’ que nos abra un modal con dos cajas de texto usuario y contraseña.

Bootstrap

Para empezar, nuestra amiga w3schools:

https://www.w3schools.com/bootstrap4/default.asp

https://www.w3schools.com/bootstrap5/index.php

https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-get-started.php

Ahí encontraremos la explicación de todos los elementos de bootstrap muy bien explicados, pero también podemos ir a las fuentes:

https://getbootstrap.com/docs/4.6/getting-started/introduction/

https://getbootstrap.com/docs/5.0/getting-started/introduction/

Novedades de 5.0 respecto a 4:

https://www.pedrodelanube.com/bootstrap-5-que-hay-de-nuevo/

Aquí encontraremos diferentes bootstraps tuneados:

https://bootswatch.com/

Y aquí templates listos para usar:

https://colorlib.com/wp/free-bootstrap-templates/

En trifulcas hay código de muchos ejemplos:

https://trifulcas.com/ejemplos-bootstrap/

https://trifulcas.com/ejemplo-bootstrap-2/

https://codepen.io/ajaypatelaj/pen/prHjD

Un análisis exhaustivo del grid de bootstrap:

https://trifulcas.com/analisis-del-grid-de-bootstrap/

Ejemplos del grid de bootstrap:

https://coreui.io/docs/layout/grid/

https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php

https://freefrontend.com/bootstrap-grid-examples/

SASS

https://sass-lang.com/

https://www.w3schools.com/sass/default.php

https://medium.com/@kish.siva/how-to-start-using-sass-in-visual-studio-code-5469787f18bf

https://tutorialzine.com/2016/01/learn-sass-in-15-minutes

https://www.tutorialspoint.com/sass/index.htm

https://css-tricks.com/the-sass-ampersand/

Tutorial muy bueno con ejemplos

https://scotch.io/tutorials/getting-started-with-sass

http://www.tutorialsteacher.com/sass

CSS avanzado

Usamos los pseudoelementos, principalmente, para insertar contenido antes y después de los elementos ¿Con que objeto? Para hacer flipadas.

Pseudoelementos

Ejemplos de uso

Más ejemplos

Si los usamos junto con hover se consiguen cosas increíbles:

Tutorial pseudoelementos y animaciones

CSS3 incorpora funciones matemáticas que nos permiten poner valores que sean el resultado de un cálculo:

Funciones matemáticas

Explicadas con ejemplos

Algunos casos prácticos

Tipografía fluida con clamp

Aplicar máscaras a imágenes:

mask-image

Algunos ejemplos

Variables, muy útiles para no tener que cambiar valores (por ejemplo, colores) en cada sitio. Algo que ya nos daban precompiladores como SASS:

Css variables

Css variables

Guía con ejemplos

Usarlas como un PRO

La función attr:

Css attr

Css attr

En content funciona en todos los navegadores, pero de momento no está completamente implementada para usarla en otros sitios.