Bootstrap CSS es una plataforma de código abierto para crear rápidamente sitios web receptivos y proyectos web orientados a dispositivos móviles. Viene con un sistema de cuadrícula sensible, configuraciones globales de CSS, complementos de JavaScript opcionales y una gran cantidad de componentes prediseñados que incluyen carruseles, barras de navegación y formularios para acelerar el proceso de desarrollo.
Puede crear estos componentes agregando las clases de Bootstrap adecuadas a los elementos. Por ejemplo, si desea crear un botón Bootstrap, use la clase .btn para definir un elemento de botón (o un ancla o un elemento de entrada). Gracias a esto, el elemento será clicable, con bordes redondeados, como un botón. Agregar una clase de modificador como .btn-primary o .btn-warning cambiará aún más el estilo del elemento, cambiando su fondo y el color del texto. Eche un vistazo a los diferentes estilos de estas clases a continuación.
Mediante el uso de clases de Bootstrap, también puede estilizar imágenes y organizarlas para que respondan de modo que se adapten a sus padres. Esto significa que se escalarán como su contenedor cuando cambie el tamaño de la ventana del navegador. Sin el marco Bootstrap, habría tenido que escribir algunas líneas de código para lograrlo. Con Bootstrap, solo necesita uno o dos nombres de clase.
Echemos un vistazo más de cerca a estas clases a continuación.
Imagen receptiva de Bootstrap
En Bootstrap 3, la clase receptiva .img ha creado una imagen receptiva. Se reemplazó con la clase .img-fluid en la última versión de Bootstrap.
La clase .img-fluid significa que las siguientes propiedades y valores de propiedad están definidos para la imagen:
- ancho máximo: 100%
- altura: automático
Esto le dice al navegador que no amplíe la imagen más grande que el tamaño del contenedor o el tamaño original y reduzca la escala de la imagen si el navegador es más estrecho que el ancho de imagen establecido.
Esta es la sintaxis de la clase .img-fluid.
<img src="https://blog.hubspot.com/website/..." alt="https://blog.hubspot.com/website/..." class="img-fluid">
Aquí hay un ejemplo:
ver la pluma Imagen receptiva de Bootstrap de Christina Perricone (@hubspot) en CódigoPen.
Compare eso con la imagen a continuación, que no está definida en la clase Bootstrap .img-fluid.
ver la pluma Imagen sin clase de respuesta Bootstrap de Christina Perricone (@hubspot) en CódigoPen.
Imagen redondeada Bootstrap
En Bootstrap 3, la clase .img-rounded agrega bordes redondeados a la imagen. Ha sido reemplazada por la clase .rounded en la última versión de Bootstrap. Es una herramienta de radio de borde que se puede aplicar a imágenes y otros elementos.
Esta es la sintaxis de la clase .rounded.
<img src="https://blog.hubspot.com/website/..." alt="https://blog.hubspot.com/website/..." class="rounded">
Aquí hay un ejemplo:
ver la pluma Imagen redondeada Bootstrap de Christina Perricone (@hubspot) en CódigoPen.
Imagen de la rueda Bootstrap
En Bootstrap 3, la clase .img-circle convierte una imagen en un círculo. Se reemplazó con la clase .rounded-circle en la última versión de Bootstrap. Al igual que la clase .rounded, es una herramienta de radio de borde que se puede aplicar a imágenes y otros elementos.
Esta es la sintaxis de la clase .rounded-circle.
<img src="https://blog.hubspot.com/website/..." alt="https://blog.hubspot.com/website/..." class="rounded-circle">
Aquí hay un ejemplo:
ver la pluma Imagen de la rueda Bootstrap de Christina Perricone (@hubspot) en CódigoPen.
Imagen en miniatura de Bootstrap
A diferencia de las clases .rounded y .rounded-circle, la clase .img-thumbnail no es una herramienta de radio de borde. En lugar de dar forma a los bordes de la imagen, la clase .img-thumbnail agrega un borde redondeado de 1 píxel a la imagen para que parezca una miniatura.
Esta es la sintaxis de la clase .img-thumbnail:
<img src="https://blog.hubspot.com/website/..." alt="https://blog.hubspot.com/website/..." class="img-thumbnail">
Aquí hay un ejemplo:
ver la pluma Imagen en miniatura de Bootstrap de Christina Perricone (@hubspot) en CódigoPen.
Dar estilo a las imágenes con las clases de Bootstrap
Con las clases de Bootstrap, puede hacer que sus imágenes respondan para que se escalen a su padre. También puede agregarles estilos claros, como bordes o bordes redondeados, usando clases. Esta es solo una de las formas en que Bootstrap le ahorra tiempo y líneas de código al crear sitios web.
