Bootstrap
¿Qué es Bootstrap?
Bootstrap es un framework CSS desarrollado por Twitter en 2010 para estandarizar las herramientas de la empresa. Originalmente llamado Twitter Blueprint, se convirtió en código abierto y pasó a llamarse Bootstrap poco después en 2011. Desde entonces, se ha actualizado varias veces y ahora se encuentra en la versión 5.0.
El marco combina CSS y JavaScript para crear elementos de página HTML. No se trata solo de cambiar el color de los botones y enlaces. Esta es una herramienta que brinda interactividad en la página, por lo que brinda varios componentes que facilitan la comunicación con el usuario, tales como menús de navegación, controles de página, barras de estado, etc.
Además de todas las funciones proporcionadas por el marco, su objetivo principal es permitir la creación de sitios web receptivos para dispositivos móviles. Esto significa que estas páginas están diseñadas para funcionar en computadoras de escritorio, tabletas y teléfonos inteligentes de una manera muy simple y organizada. Bootstrap consta de una serie de archivos CSS y JavaScript encargados de asignar propiedades específicas a los elementos de la página.
¿Cómo descargar Bootstrap?
Hay diferentes formas de descargar este marco. Una es descargar versiones compiladas del código CSS y JavaScript en las páginas de Bootstrap. También hay una opción para descargar el código fuente del marco, ya que es una herramienta de código abierto. Código abierto significa que cualquier persona puede usar de este código a su manera sin tener limitaciones.
Aquellos que no quieran descargar los archivos pueden acceder a la estructura sin instalarlos en el servidor. De hecho, los archivos de instalación están ubicados en un dominio diferente, es decir, en un DNS diferente. Para ello, simplemente necesitamos utilizar un enlace para acceder o lanzar el CDN, y de esta forma añadir referencias a los archivos necesarios para utilizarlo.
Otra forma de descargar marcos es con un administrador de paquetes. Es importante destacar que Bootstrap se puede usar con diferentes lenguajes de programación. Por lo tanto, puede descargarse como npm desde Node.js usando RubyGems, Composer o Nuget y usarse para crear sitios de WordPress, sitios creados con Ruby on Rails, Asp.Net, etc.
Si ha trabajado con HTML y CSS anteriormente, sabe lo doloroso que es diseñar columnas y hacerlas receptivas. Aunque recientemente usamos flexbox y css grid oficialmente en CSS sin descargar nada, la verdad es que las columnas son más fáciles de crear con Bootstrap.
Para crear una columna, primero debe crear un elemento HTML anterior con etiquetas de row. Esta etiqueta le dice a Bootstrap que el contenido serán columnas. Otra cosa a tener en cuenta es que Bootstrap se basa en un sistema de 12 columnas, y si desea crear dos columnas del mismo tamaño, debe crear 2 de las 6 columnas. Si necesita 3 columnas, haga 3 columnas de 4 porque 3 * 4 = 12 columnas en total.
Como antes, configuré dos colores para diferenciar, pues al igual como el anterior caso, los contenedores no tienen un color de fondo, ahora la columna predeterminada no tiene fondo. Si observa que para crear una columna, necesita usar la clase de columna y luego otra clase con un ancho de 1 a 12 como: col-6, col-3, col-2, etc.
Organización por contenedores en Bootstrap
Lo primero que queremos ver es el contenedor. Los contenedores, como su nombre indica, se utilizan para crear "cajas" o "contenedores" que contienen el contenido de las páginas web. Cuando aplica la clase de contenedor a un elemento HTML, el elemento recibe un ancho y relleno especificados, y se coloca en el centro de la página web.
Lo que pasa es que normalmente en las páginas web no quieres que el contenido principal de la página web ocupe el 100% de la página porque es muy incómodo para el usuario leer porque las líneas son muy largas. Con este elemento, además de colocar el contenido en el centro de la página web, también puedes reducir el ancho del contenido.
La belleza de los contenedores es que ajustan automáticamente su ancho sin tener que hacer nada con el ancho de los diferentes elementos para que se vea bien. En el siguiente ejemplo, he creado un contenedor con una notificación simple y un color de fondo. Los contenedores son diferentes porque los contenedores son transparentes de forma predeterminada.
Comentarios
Publicar un comentario