Bootstrap-Practica3-Formulario

Instituto Tecnológico de Tláhuac II
MATERIA:
PROGRAMACIÓN WEB
TITULO:
PRACTICA 3
UNIDAD:
NOMBRE DEL ALUMNO:
LUCERO CASTRO CRUZ
PROFESOR:
IVAN AZAMAR
CARRERA:
INGENIERA EN TECNOLOGÍAS DE LA INFORMACIÓN Y

COMUNICACIONES
TLÁHUAC, CIUDAD DE MÉXICO 02 A MAYO DE 2023
1
INDICE
MARCO TEÓRICO ............................................................................................................ 3
BOOTSTRAP ................................................................................................................. 3
¿QUE ES BOOTSTRAP? ............................................................................................... 3
COMO FUNCIONA BOOTSTRAP ............................................................................... 4
CUAL ES LA FUNCIONALIDAD DE BOOTSTRAP ................................................. 4
DISEÑO RESPOSIVE ................................................................................................ 4
BIBLIOTECA DE COMPONENTES ........................................................................ 5
DESARROLLO DE LA PRACTICA ................................................................................. 7
CONCLUSIONES ............................................................................................................ 17
FUENTES DE CONSULTA............................................................................................. 18
2
MARCO TEÓRICO
BOOTSTRAP
Bootstrap es un framework CSS utilizado en aplicaciones front-end — es decir, en la
pantalla de interfaz con el usuario— para desarrollar aplicaciones que se adaptan a cualquier
dispositivo.
En WordPress, por ejemplo, puede instalarse como tema o usarse para el desarrollo de
plugins o, incluso, dentro de ellos para estilizar sus funciones. El propósito del framework es
ofrecerle al usuario una experiencia más agradable cuando navega en un sitio.
Por esta razón, tiene varios recursos para configurar los estilos de los elementos de la
página de una manera simple y eficiente, además de facilitar la construcción de páginas que, al
mismo tiempo, están adaptadas para la web y para dispositivos móviles.
¿QUE 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.
3
Esto significa que las páginas están diseñadas para funcionar en desktop, tablets y
smartphones, de una manera muy simple y organizada.
COMO 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 (original y minificado),
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
CUAL ES LA FUNCIONALIDAD DE BOOTSTRAP

Bootstrap ofrece una serie de características que se pueden implementar en un sitio web.
A continuación, hablaremos de las posibilidades de esta herramienta.
DISEÑO RESPOSIVE
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.
4
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.
Enseguida mencionaremos los principales
5
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 (barra de navegación), 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.
6
DESARROLLO DE LA PRACTICA
Mi practica es sobre una página web que vende productos de maquillaje, como labiales,
sombras, esmaltes entre otros, en esta ocasión se le agrego lo que es el formulario html con
Bootstrap y CSS.
En la imagen podemos notar que ya tenemos un head, body y foother, donde especifica
cada parte de la página, ahora nos enfocaremos en esta ocasión será en formulario y en
Bootstrap, ya que nos da un diseño o la forma de crearlo mucho más rápido y más sencillo.
Las ventajas de realizar por separado lo que es el html y el CSS es principalmente que el
código se ve mucho mas limpio y mas ordenado. Además de que al momento de querer
7
modificar algún código es mucho más fácil encontrar ya sea para modificar o para eliminar algún
error, mi código a continuación fue explicado ya en otro documento, y prácticamente es lo
mismo solo que en esta ocasión no lleva nada de CSS en el html.
Nos muestra la implementación de las imágenes, de los link, los textos que se le ponen a
la página, redes social, además de la tabla en la que creamos toda la página web e incluso el
menú y hacia donde se dirige cada uno.
8
En el CSS le doy los estilos, mandando a llamar con una clase, para darle el diseño que
mas me guste a las letras, al background, al ancho o largo de las imágenes, color de letras, entre
otras muchas cosas que se le pueden hacer desde el CSS.
9
Ahora nos enfocaremos en la parte del menú ya que es el que nos guiara al formulario en
cuestión, tengo declarados con el href a donde quiero direccionarme, en mi caso es a otro html.
En la pagina web nos vamos a la parte de envió y ahí encontraremos el formulario, que se fue
construyendo a base de códigos que nos ofrece la misma página de Bootstrap, pero para esto hay
que mandarlo a llamar un link, lo colocamos en el head. De esta forma mandaresmos a llamar los
códigos que queramos agregar al formulario.
10
Agregamos un div container, donde... como su nombre lo indica va a contener el resto de los
códigos
También puedes intercambiar. row para. form-row, una variación de nuestra fila de
cuadrícula estándar que anula los canaleteros de columna predeterminados para diseños más
ajustados y compactos
En mi caso será para agregar el nombre y apellido del cliente. Quedando de la siguiente
foma
Agrego el siguiente comando para poder agregar un calendario, en mi caso es importante

ya que señalamos la fecha de entrega del producto, además de datos como el número de teléfono
11
para contactar al cliente si hay algún inconveniente, evidentemente la dirección y el código
postal.
El mismo Bootstrap nos da en el código la herramienta para jalar el diseño que mas te guste o te
acomode para tu formulario o proyecto en mi caso es el “col-6” para el calendario, dirección, y
“col-3” para código postal y número de teléfono.
Los siguientes códigos lo vamos a utilizar para mandar a llamar el correo electrónico y la
contraseña.
12
Quedando de esta forma, usar Bootstrap es un método mucho mas rápido ya que al momento te
va acomodando todo y es mucho más rápido y limpio el código
Ahora ya que es una pagina de venta de productos, tenemos que agregar un formato de
pago, en esta ocasión tenemos que pedir un numero de tarjeta, la fecha y cvv para corroborar los
datos de envío utilizando un col-5, col-6 y col-2
13
Por ultimo como es una empresa oficial y no permitimos compras a menores de edad por
seguridad, pedimos los datos como una INE o identificación oficial, y por último el botón de
enviar
Por ultimo le agre mi head, y esto lo realice en el CSS de la misma forma que la pagina web
principal, como las imágenes, el menú, el logo etc.
14
Finalmente direccionamos todo a donde queremos que vaya y el formulario dentro de la pagina
web quedara listo.
Resultado final
15
16
CONCLUSIONES
Utilizar Bootstrap es muy fácil una vez que le entiendes, sobre todo por la parte en la que
todo el diseño ya te lo da de manera predeterminada, facilitando los trabajos de manera
exponencial, además de que también puedes incluir tu propio diseño y acomodarlo de manera
que te agrade, tiene demasiadas funciones, también como el js, css y el html, así puedes incluir
de manera mas rápida cada indicación, ahorrando tiempo, y posiblemente dinero ya que es una
software libre, y cualquiera pude modificar el código al gusto. Es una actividad bastante práctica,
a pesar de que hace falta perfeccionar muchas cosas, se va viendo agradable, quizá algunos
ajustes seria de buena ayuda, pero nada que no ayude para el termino de manera excelente el
trabajo, también es necesario irnos enfocando ya en lo que probablemente quiera un cliente y se
acomode a los gustos y necesidades, para la industria es una buena practica tener diferentes
softwares que te ayuden a facilitar el trabajo ya que existen muchísimos cliente que necesitan
una página, para nosotros los programadores es esencial ser practico.
17
FUENTES DE CONSULTA
1) Urrutia, D.
Instituto
(2020,
Tecnológico
enero 28). Qué
de Bootstrap.
es
Tláhuac Arimetrics.
II
https://www.arimetrics.com/glosario-digital/bootstrap
2) Otto, M., & Thornton, J. (s/f). Validation. Getbootstrap.com. Recuperado el 3 de mayo de
2023, de https://getbootstrap.com/docs/5.3/forms/validation/
3) Bootstrap: guía para principiantes de qué es, por qué y cómo usarlo. (2020, abril 12).
Rock Content - ES; Rock Content. https://rockcontent.com/es/blog/bootstrap/
18

Bootstrap-Practica3-Formulario

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Bootstrap-Practica3-Formulario

Cargado por

Copyright:

Formatos disponibles

Instituto Tecnológico de Tláhuac II

NOMBRE DEL ALUMNO:

LUCERO CASTRO CRUZ

INGENIERA EN TECNOLOGÍAS DE LA INFORMACIÓN Y

TLÁHUAC, CIUDAD DE MÉXICO 02 A MAYO DE 2023

MARCO TEÓRICO ............................................................................................................ 3

¿QUE ES BOOTSTRAP? ............................................................................................... 3

COMO FUNCIONA BOOTSTRAP ............................................................................... 4

CUAL ES LA FUNCIONALIDAD DE BOOTSTRAP ................................................. 4

DISEÑO RESPOSIVE ................................................................................................ 4

BIBLIOTECA DE COMPONENTES ........................................................................ 5

DESARROLLO DE LA PRACTICA ................................................................................. 7

Inicialmente, se llamó Twitter Blueprint y, un poco más tarde, en 2011, se transformó en

Además de todas las características que ofrece el framework, su principal objetivo es

COMO FUNCIONA BOOTSTRAP

Para asignarle una característica a un elemento, simplemente debemos informar la clase

CUAL ES LA FUNCIONALIDAD DE BOOTSTRAP

• la estilización del elemento <div>;

El elemento <div> es más flexible, ya que permite definir y cambiar el tamaño de la

Bootstrap le ha asignado al elemento <div> una característica de class container, que

Básicamente, o framework funciona con tres tipos de containers:

Enseguida mencionaremos los principales

¡Atención! ¡Cuidado mensaje de alerta!

Un componente ampliamente utilizado en Bootstrap es el Carrusel, una presentación de

También permite la inclusión de efectos especiales para la transición de imágenes y

Otro poderoso componente de la estructura es la NavBar (barra de navegación), que

Es posible configurar diferentes formas de presentar el menú, elegir entre

Agrego el siguiente comando para poder agregar un calendario, en mi caso es importante

También podría gustarte