Alumno: Carlos Manuel Hernandez Lara

Grupo: SCO8SA116

Carrera: Lic. Sistemas Computacionales

Materia: Diseño de Interfaces Web

Fecha de entrega: 04/02/2023

 Universidad Mexicana
UNIMEX

Índice

Introducción ................................................................ 2
¿Cómo funciona Bootstrap? ....................................... 3
¿Cuál es la funcionalidad de Bootstrap? .................... 4
Ventajas de usar Bootstrap......................................... 5
Desventajas de usar Bootstrap ................................... 6
¿Cómo descargar Bootstrap? ...................................... 6
Conclusión ................................................................... 8
Bibliografía................................................................... 9

CARLOS MANUEL HERNANDEZ LARA 1

 Universidad Mexicana
UNIMEX

Introducción
Bootstrap es una tecnología que apareció en 2011, desarrollada por
Twitter, se creó inicialmente como solución interna para solucionar las
inconsistencias en el desarrollo dentro del equipo de ingeniería de Twitter.

En ese mismo año, el framework fue lanzado al publico como un proyecto

Open Source.

Bootstrap es un framework que tiene una colección de elementos para el

diseño web, esta pensada para ayudar a los desarrolladores que no tienen idea
de cómo dar buen formato a sus páginas web.

Esto gracias a que sus elementos personalizables son una combinación

de HTML, CSS y JavaScript.

Gracias al Framework Bootstrap se logra automatizar los procesos de las

practicas, este nos permite el desarrollo de una aplicación web legible y amigable
para el usuario.

En la actualidad el Framework Bootstrap sigue siendo muy usado por los

desarrolladores, ya que este sigue siendo actualizado con nuevas funciones,
nuevos diseños que permite al usuario implementar en sus aplicaciones web, al
mismo tiempo que permite crear nuestros propios diseños y compartirlos con la
comunidad.

CARLOS MANUEL HERNANDEZ LARA 2

 Universidad Mexicana
UNIMEX

¿Qué es Bootstrap?
Bootstrap es un framework CSS desarrollado por Twitter en 2010, para
estandarizar las herramientas de la compañía.
Inicialmente, se llamó Twitter Blueprint y, un poco más tarde, en 2011, se
transformó en código abierto y su nombre cambió para Bootstrap. Desde entonces
fue actualizado varias veces y ya se encuentra en la versión 4.4.
El framework combina CSS y JavaScript para estilizar los elementos de una
página HTML. Permite mucho más que, simplemente, cambiar el color de los
botones y los enlaces.
Esta es una herramienta que proporciona interactividad en la página, por lo
que ofrece una serie de componentes que facilitan la comunicación con el usuario,
como menús de navegación, controles de página, barras de progreso y más.
Además de todas las características que ofrece el framework, su principal
objetivo es permitir la construcción de sitios web responsive para dispositivos
móviles. Esto significa que las páginas están diseñadas para funcionar en desktop,
tablets y smartphones, de una manera muy simple y organizada.

¿Cómo funciona Bootstrap?

Bootstrap está constituido por una serie de archivos CSS y JavaScript
responsables de asignar características específicas a los elementos de la página.
Hay un archivo principal llamado bootstrap.css, que contiene una definición
para todos los estilos utilizados. Básicamente, la estructura del framework se
compone de dos directorios:
css: contiene los archivos necesarios para la estilización de los
elementos y una alternativa al tema original;

js: contiene la parte posterior del archivo bootstrap.js, responsable de

la ejecución de aplicaciones de estilo que requieren manipulación
interactiva.
Es decir, Bootstrap es un framework CSS y Javascript diseñado para la creación de
interfaces limpias y con un diseño responsive. Además, ofrece un amplio abanico
de herramientas y funciones, de manera que los usuarios pueden crear
prácticamente cualquier tipo de sitio web haciendo uso de estos.
Entender el funcionamiento de Bootstrap es relativamente sencillo. En líneas
generales, se basa en una estructura dividida en un total de 12 columnas que los
CARLOS MANUEL HERNANDEZ LARA 3
 Universidad Mexicana
UNIMEX
desarrolladores pueden gestionar en función de sus necesidades y preferencias, en
función de cuatro tamaños de dispositivo.

¿Cuál es la funcionalidad de Bootstrap?

Bootstrap ofrece una serie de características que se pueden implementar en
un sitio web.
Diseño responsive: Una de las características principales de Bootstrap es
permitir que la adaptación de la página se realice según el tipo de dispositivo
utilizado. Para garantizar la responsividad, el framework funciona con:
La estilización del elemento <div>;

El uso del class container.

En la práctica, el elemento <div>, funciona para crear una serie de notas, similar a
una tabla, capaz de estructurar la página de forma adaptable.
Ya hubo un intento de utilizar tablas para crear diseños responsivos, sin
embargo, existían limitaciones para definir la longitud de las columnas lo que hizo
imposible su uso en dispositivos más pequeños, como smartphones.
El elemento <div> es más flexible, ya que permite definir y cambiar el tamaño
de la longitud fácilmente.
Bootstrap le ha asignado al elemento <div> una característica de class
container, que funciona para determinar las dimensiones apropiadas para los
elementos insertados en ese espacio.
Básicamente, o framework funciona con tres tipos de containers:
Container: como un conjunto con una propiedad de ancho máximo,
que determina qué tamaño de tela es ideal para crear el diseño de
página.
Container-fluid: considera la longitud total de la tela del dispositivo
para definir el diseño. Para esto, se considera la propiedad width 100%
en todos los límites de tamaño de tela.
Container-{ breakpoint}: considera width 100% hasta alcanzar un
cierto tamaño.
Biblioteca de componentes
Otra interesante función de este framework es la cantidad de componentes
que pueden ser usados para proporcionar una mejor interacción y perfeccionar la
comunicación con el usuario.

CARLOS MANUEL HERNANDEZ LARA 4

 Universidad Mexicana
UNIMEX
Enseguida mencionaremos los principales.
Alertas: O Bootstrap permite una configuración simple y rápida de
diferentes tipos de alertas, con colores específicos, según la situación.
Para mostrarle al usuario una alerta que indique atención, por ejemplo,
simplemente debemos usar. alert-danger y aparecerá un cuadro de
texto con un fondo rojo: ¡Atención! ¡Cuidado mensaje de alerta!

Carrusel: Un componente ampliamente utilizado en Bootstrap es el

Carrusel, una presentación de diapositivas, es decir, una herramienta
que permite la visualización de imágenes de manera receptiva.
También permite la inclusión de efectos especiales para la transición
de imágenes y controles de visualización, como por ejemplo los
indicadores de “siguiente” y “anterior”.

Barra de navegación: Otro poderoso componente de la estructura es

la NavBar, que permite la construcción de un sistema de navegación
sensible. Es posible configurar diferentes formas de presentar el
menú, elegir entre posicionamiento lateral o superior y, también, definir
una forma de visualización que se pueda extender o contraer.
También es posible determinar cómo mostrar los enlaces del menú,
que pueden ser en forma de botón, enlace, menú suspenso, entre
otras configuraciones, para facilitar la implementación de la
navegación del sitio.

Ventajas de usar Bootstrap

Entre las ventajas de utilizar bootstrap podemos enumerar las siguientes:
Es de código abierto, y todo su código actualizado se encuentra en un
repositorio de Github.

Está mantenido y actualizado por Twitter.

Es compatible con la mayoría de los navegadores.

Dispone de gran cantidad de documentación, tanto en su portal como

en páginas web especializadas.

Utiliza componentes vitales para los desarrolladores.

CARLOS MANUEL HERNANDEZ LARA 5

 Universidad Mexicana
UNIMEX
Incluye Grid system para maquetar por columnas.

Sus plantillas son de sencilla adaptación responsive.

Dispone de un conjunto de elementos web personalizables.

Se integra con librerías JavaScript.

Usa Less: un lenguaje de las hojas de estilo CSS preparado para

enriquecer los estilos de la web.

Desventajas de usar Bootstrap

No todo son ventajas en el uso de frameworks de diseño. Existen muchos
detractores de Bootstrap y los motivos son varios. A nuestro juicio, ninguno de ellos
es realmente definitivo, pero creemos que es importante señalar los principales
puntos en contra.
Optimización. Bootstrap contiene mucho código para componentes,
iconos, rejillas, etc. Si solo vamos a usar una pequeña parte del
framework no tiene sentido cargar todas sus utilidades.

Código HTML complejo. Nuestro código HTML tendrá que ser

modificado para crear los contenedores tal como Bootstrap necesita
para cargar en ellos ciertos componentes. A veces las soluciones
HTML no son las más sencillas y nos obliga a generar código mayor
del que sería necesario si lo hiciéramos a mano.

Diseños muy similares entre sí. Si no personalizamos el diseño de

nuestro sitio y no personalizamos el tema gráfico de Bootstrap,
obtendremos un diseño bastante aparente, pero infelizmente parecido
a otros millares de sitios de Internet.

¿Cómo descargar Bootstrap?

Bootstrap se puede instalar de distintas formas. Una forma sencilla de hacerlo
es visitar la página oficial de Bootstrap y descargar el paquete.
De esta forma, puedes tener los archivos de este framework en tu servidor.
El paquete de descarga lo puedes descomprimir en la raíz de tu proyecto o
en el directorio que tú quieras.
CARLOS MANUEL HERNANDEZ LARA 6
 Universidad Mexicana
UNIMEX
En los archivos de instalación de Bootstrap puedes ver un directorio donde
están las hojas de estilo, otro directorio para los ficheros JavasScript y un directorio
de fuentes donde se encuentra la fuente por defecto para los iconos que utiliza
Bootstrap. La fuente que utiliza Bootstrap para los iconos se llama Glyphicons.
Revisando el archivo de descarga, puedes observar que Bootstrap se puede
adaptar a cualquier tipo de proyecto destinado a la Web ya sea desarrollado desde
0 o con algún gestor de contenidos como WordPress o Joomla, o para cualquier
plataforma de e-commerce.
Para poder trabajar con Bootstrap tan solo debes añadir en la cabecera,
dentro de la etiqueta <head> o antes de la etiqueta de cierre </body> de tu archivo
HTML las hojas de estilo y el archivo JavaScript de Bootstrap.

CARLOS MANUEL HERNANDEZ LARA 7

 Universidad Mexicana
UNIMEX

Conclusión

En la actualidad el Framework Bootstrap es muy usado por los

desarrolladores de aplicaciones web por su compatibilidad con HTML, CSS y
JavaScrip, por el hecho de que es una combinación de los elementos de estas.

Se sabe que el Framework Bootstrap ocupa el segundo lugar como una

de las bibliotecas más usadas de JavaScript.

Pero ¿por qué es una de las bibliotecas más usadas? Bueno es una de
las más suadas puesto que sigue el concepto de Mobile first, es decir, esta nos
permite desarrollar una pagina que funciones perfectamente en dispositivos
móviles y Desktop.

La biblioteca Bootstrap nos permite tener estándares visuales de

estilización los cuales siguen las tendencias de diseño.

Bootstrap permite la reutilización de código, es decir, que no es necesario

escribir todas esas líneas de código y producir que Google nos dé una
calificación mala ya que la pagina será lenta y esto produce que el usuario se
aburra de esperar a que cargue y abandone el sitio, por ello Bootstrap permite
solo vincular las clases que queremos usar, haciendo que el sitio sea más rápido
al cargar y más fluido al navegar.

CARLOS MANUEL HERNANDEZ LARA 8

 Universidad Mexicana
UNIMEX

Bibliografía
Aguilar, J. (2019, 18 junio). Como instalar y usar Bootstrap. Jose Aguilar Blog.

https://www.jose-aguilar.com/blog/como-instalar-y-usar-bootstrap/

Bootstrap. (s. f.). Rockcontent Blogs. Recuperado 30 de enero de 2023, de

https://rockcontent.com/es/blog/bootstrap/

Bootstrap: qué es y cÃ3mo funciona este framework〠•Usos〠‘ . (s. f.).

Axarnet. https://axarnet.es/blog/bootstrap

Urrutia, D. (2021, 5 agosto). Qué es Bootstrap - Definición, significado y ejemplos.

Arimetrics. https://www.arimetrics.com/glosario-digital/bootstrap

Zúñiga, F. G. de. (2022, 14 septiembre). ¿Qué ventajas ofrece Bootstrap en el

diseño responsive? Blog de arsys.es. https://www.arsys.es/blog/bootstrap-

responsive

CARLOS MANUEL HERNANDEZ LARA 9