¿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.
Características
de Bootstrap
Diseño
responsive: una de las características clave de Bootstrap es que permite que
las páginas se adapten al tipo de dispositivo que se utiliza. Para garantizar
la capacidad de respuesta, el marco utiliza: estilos de elemento; usando clases
contenedoras. En la práctica, el elemento se usa para crear una serie de
comentarios similares a tablas que dan forma a la página de forma adaptativa.
interactividad
Bootstrap proporciona una gran interactividad del usuario en las páginas
gracias a muchos componentes que facilitan la interacción del usuario, como
menús de navegación, barras de estado y controles de página ¿en qué ayuda esta
interactividad? En llamar la atención de los usuarios y destacar el contenido
de la página.
Biblioteca
de componentes. Otra característica interesante de Bootstrap es la cantidad de
componentes que proporciona para mejorar la comunicación con los usuarios:
diferentes tipos de alertas; carrusel deslizante para una cómoda visualización
de imágenes; y una barra de navegación que le permite realizar más
configuraciones.
Biblioteca
de componentes
Otra
característica interesante del marco es la cantidad de componentes que se
pueden usar para brindar una mejor interacción y mejorar la comunicación con
los usuarios. A continuación, mencionare los más importantes.
Alerts:
Bootstrap te permite configurar de manera fácil y rápida diferentes tipos de
alertas con colores específicos según la situación. Por ejemplo, para mostrar
una alerta al usuario que indique atención, simplemente podemos usar
.alert-danger y aparecerá un cuadro de texto con fondo rojo. Las alertas están
disponibles para cualquier longitud de texto y un botón de cierre opcional.
Carrusel: Un
componente de Bootstrap ampliamente utilizado es el carrusel, o presentación de
diapositivas, una herramienta que le permite mostrar imágenes de manera
receptiva. También le permite incluir efectos especiales para transiciones de
imágenes y controles de visualización, como indicadores "siguiente" y
"anterior".
Barra de
navegación: Otro componente poderoso de este sistema es la NavBar (barra de
navegación), que le permite crear un sistema de navegación receptivo. Puede
configurar diferentes formas de mostrar el menú, elegir posicionamiento
horizontal o avanzado y definir visualizaciones que se pueden expandir o
contraer. También puede decidir cómo se deben mostrar los enlaces del menú, que
pueden ser configuraciones como botones, enlaces, paradas de menú, etc., para
facilitar la implementación de la navegación del sitio.
¿Como
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.
Comunidad de
Bootstrap, mantenimiento y actualización
Como marco
de código abierto, Bootstrap tiene una comunidad de desarrolladores activa.
Además de actualizar versiones (es importante que la herramienta esté siempre
actualizada). En el mundo del desarrollo web, un framework es un entorno de
trabajo que consta de un conjunto de módulos estandarizados. Consiste en una
colección de bibliotecas y funciones preconstruidas que facilitan mucho el
trabajo de los desarrolladores web.
La comunidad
también actualiza periódicamente la documentación, publica un blog con
sugerencias y noticias sobre la herramienta y proporciona ayuda en la página
del sitio de Stack Overflow. Como puede ver en esta guía completa, Bootstrap es
un marco poderoso para desarrollar aplicaciones. Front-end receptivo y
proporciona varios componentes capaces de proporcionar un alto estándar visual
de la página.
En términos
de soporte, hay una extensa documentación disponible para este sistema. De
hecho, su código fue actualizado en el repositorio de GitHub. Finalmente, la
comunidad de Bootstrap también mantiene un blog con información valiosa sobre
el marco, como consejos y actualizaciones sobre los últimos desarrollos.
Containers
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.
Como crear
columnas en Bootstrap
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. Ejemplos:
Elementos
funcionales
Los elementos que explicaré ahora son los que Bootstrap decide ajustar por defecto para que se vean mejor, es decir. Los contenedores y los márgenes son elementos de diseño que no agregan apariencia, los de abajo ya tienen una apariencia visual, colores, bordes, etc. Osea, que antes estábamos en el tema para agregar contenido y darles formato a algunas cosas sin darle un diseño en sí.
Migas de
pan: Las migas de pan se utilizan para mostrar cómo se encuentra el usuario en
la página. Le dice al usuario dónde está y de dónde viene. Dado que las migas
de pan brindan navegación, es mejor agregar una etiqueta significativa como
aria-label="breadcrumb" para describir el tipo de navegación
especificado en el elemento y usar aria-current="page" para el último
de la matriz. elemento, indicando que representa la página actual.
OTRAS
LIBRERÍAS DE BOOTSTRAP PARA CSS
Cards: Los
cards o tarjetas se utilizan para agrupar contenido. A menudo se utilizan para
crear listas de elementos, como publicaciones de blog, tweets, colecciones de
elementos, etc. Esta sección de Bootstrap cubrirá todo el artículo, por lo que
le daré algunos ejemplos y dejaré enlaces a las secciones de documentación de
Bootstrap si desea ver todas las opciones.
Modal: es
una ventana emergente que se abre cuando un usuario interactúa con un elemento
de la página, como un botón o un enlace. Para que el modal funcione, Bootstrap
usa una etiqueta de cambio de datos (en este caso, un modal) y una etiqueta de
destino de datos (en el ejemplo, el ID del modal creado a continuación). Para
descartar un modal, use la etiqueta HTML-data-dismiss=”modal”. Puedes poner lo
que quieras dentro del modal.
Formularios:
Los controles de formulario de Bootstrap amplían los estilos de formularios
envueltos en nuestra clase. Utilice estas clases para registrar sus pantallas
personalizadas para una representación más uniforme en todos los navegadores y
dispositivos. Asegúrese de usar el atributo de tipo apropiado (como correo
electrónico para una dirección de correo electrónico o número para información
numérica) para usar nuevos controles de entrada como validación de correo
electrónico, selección de números, etc.
0 Comentarios