INVESTIGACION Y REPORTE, ¿QUE ES
BOTSTRAP? Y COMO SE INTEGRA A
UN DESARROLLO WEB.
Wilmar Alexander Rodríguez Bueno, Miguel Angel Chacón García.
Facultad de telemática, Universidad de Colima
Colima, México.
ext_10210049@ucol.mx
ext_10210048@ucol.mx
Grupo 5G
I. INTRODUCCION.
Antes conocido como Twitter blueprint,
Bootstrap es una herramienta de código
abierto la cual permite desarrollar
paginas web de forma responsiva
enfocándose en la parte interactiva con el
usuario.
Es un programa de instalación sencilla y
directa para mayor comodidad de los
usuarios.
I. ¿QUÉ ES BOOTSTRAP?
En el año 2010 Twitter crea una
herramienta llamada Twitter Blueprint la
cual estandarizaba las herramientas que
usaba la compañía, en el año 2011 esta
herramienta se convirtió en un código
abierto y paso a llamarse Bootstrap desde
entonces fue actualizado varias veces y
ya se encuentra en la versión 4.4. [1]
Bootstrap es un framework o plantilla
que nos facilita la creación de
aplicaciones front end es decir de
interacción directa con el usuario; nos
brinda también un diseño completamente
responsivo que se adapta a todo tipo de
pantallas como las de los smartphones,
tabletas, computadoras y demás
dispositivos, además de esto nos permite
crear la interacción 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.
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:
a) Css: contiene los archivos
necesarios para la estilización de
los elementos y una alternativa
al tema original;
b) Js: contiene la parte posterior
del archivo bootstrap.js,
responsable de la ejecución de
aplicaciones de estilo que
requieren manipulación
interactiva.
Para asignarle una característica a un elemento,
simplemente debemos informar la clase
correspondiente en la propiedad “class” del
elemento que será estilizado.
Una de las características principales de Bootstrap
es el diseño responsivo en la adaptación de los
diferentes tamaños de pantallas, para garantizar
esto el framework funciona con:
a) La estilización del elemento <div>.
b) El uso del class container. [1]
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. [1]
Funciona con tres tipos de contenedores:
a) Container: como un conjunto con una
propiedad de ancho máximo, que
determina qué tamaño de pantalla es
ideal para crear el diseño de página.
b) 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 pantalla.
c) Container-{breakpoint}: considera
width 100% hasta alcanzar un cierto
tamaño. [1]
II. ¿COMO INTEGRAR BOOTSTRAP A
UN DESARROLLO WEB?
Bootstrap se puede instalar de distintas
formas. Una forma sencilla de hacerlo es
visitar la página oficial de Bootstrap y
descargar el paquete. [2]
De esta forma, puedes tener los archivos
de este framework en tu servidor. [2]
El paquete de descarga lo puedes
descomprimir en la raíz de tu proyecto o
en el directorio que tú quieras. [2]
En los archivos de instalación de
Bootstrap puedes ver un directorio donde
están las hojas de estilo (css), otro
directorio para los ficheros JavasScript
(js) y un directorio de fuentes (fonts)
donde se encuentra la fuente por defecto
para los iconos que utiliza Bootstrap. La
fuente que utiliza Bootstrap para los
iconos se llama Glyphicons. [2]
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 como por
ejemplo PrestaShop o Magento. [2]
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. [2]
<link rel="stylesheet"
href="css/bootstrap.min.css"
crossorigin="anonymous">
<link rel="stylesheet"
href="css/bootstrap-theme.min.css"
crossorigin="anonymous">
<script src="js/bootstrap.min.js"
crossorigin="anonymous"></script> [2]
También existe la posibilidad de no
descargar nada y utilizar los CDN
(Content Delivery Network) copiando lo
siguiente en la cabecera <head> de tu
archivo HTML. [2]
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com
/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-
ggOyR0iXCbMQv3Xipma34MD+dH/1f
Q784/j6cY/iJTQUOhcWr7x9JvoRxT2M
Zw1T" crossorigin="anonymous">
<script
src="https://code.jquery.com/jquery-
3.3.1.slim.min.js" integrity="sha384-
q8i/X+965DzO0rT7abK41JStQIAqVgR
Vzpbzo5smXKp4YfRvH+8abtTE1Pi6jiz
o" crossorigin="anonymous"></script>
 <script
src="https://cdnjs.cloudflare.com/ajax/lib
s/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-
UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9
WO1clHTMGa3JDZwrnQq4sF86dIHND
z0W1"
crossorigin="anonymous"></script>
[2] J. Aguilar. (2019). Como instalar y
usar Bootstrap. [Online]. Available:
https://www.jose-
aguilar.com/blog/como-instalar-y-usar-
bootstrap/.

<script
src="https://stackpath.bootstrapcdn.com/
bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-
JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ
6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM
" crossorigin="anonymous"></script> [2]

III. CONCLUSIONES.
a) Miguel Angel Chacon Garcia.
Bootstrap es una herramienta
que debemos considerar a la
hora de crear nuestras
aplicaciones web ya que nos
facilita la creación del diseño y
nos lo entrega de forma
responsiva ahorrándonos
tiempo.

b) Wilmar Alexander Rodríguez

Bueno.
Boostrap es un framework de
fácil instalación y uso que nos
permite desarrollar páginas web
responsive, es decir que se
adaptan a las diferentes
pantallas de los dispositivos que
utilizan las páginas
permitiéndonos una mejor
accesibilidad en dispositivos
móviles y mejorando la interfaz
visual con la que los usuarios
interactúan.

IV. BIBLIOGRAFIA.
[1] Rockcontent. (12 de abril 2020).
Bootstrap: guía para principiantes de qué
es, por qué y cómo usarlo. [Online].
Available:
https://rockcontent.com/es/blog/bootstrap
/.