INSTITUTO SUPERIOR UNIERSITARIO “SUCRE”
Trabajo de: Programación de aplicaciones móviles
Nombre: Emily Taipe
Docente: Ing. Galo Cepeda
Curso: 4 A Nocturna
Fecha lunes 08 de julio de 2024
Frameworks para CSS
son conjuntos de herramientas y componentes predefinidos que facilitan el desarrollo de
sitios web y aplicaciones al proporcionar estructuras y estilos ya creados. Estos frameworks
ayudan a los desarrolladores a ahorrar tiempo y esfuerzo, evitando tener que escribir CSS
desde cero para cada proyecto.
Concepto de Bootstrap
Bootstrap
Es uno de los frameworks de CSS más populares y ampliamente utilizados. Fue
desarrollado originalmente por Twitter y se lanzó como un proyecto de código abierto en
2011. Bootstrap ofrece una amplia gama de componentes CSS y JavaScript predefinidos
que permiten a los desarrolladores crear sitios web responsivos y atractivos de manera
rápida y eficiente.
Uso de Bootstrap
Bootstrap se utiliza principalmente para:
1. Diseño Responsivo: Adaptar el diseño de una página web a diferentes tamaños de
pantalla y dispositivos.
2. Componentes Predefinidos: Utilizar elementos de interfaz de usuario listos para
usar, como botones, formularios, menús de navegación, tarjetas, etc.
3. Consistencia: Mantener un estilo coherente a lo largo de todo el sitio web.
4. Rapidez de Desarrollo: Reducir el tiempo necesario para desarrollar una página
web, gracias a los estilos y componentes ya definidos.
Ventajas y desventajas
Ventajas
• puedes diseñar una web jugando con sus elementos compuestos por diferentes
combinaciones de HTML, CSS y Javascript.
• Utiliza HTML5, CSS3, jQuery o GitHub, entre otros.
• Incluye Grid system: muy útil para maquetar por columnas.
• Sus plantillas son de sencilla adaptación responsive.
• Se integra con librerías JavaScript.
• Usa Less: un lenguaje de las hojas de estilo CSS preparado para enriquecer los
estilos de la web.
• Cuenta con una documentación completa que te puede sacar de apuros rápidamente.
• Facilita enormemente el diseño de interfaces y además incluye por defecto una
plantilla bastante optimizada.
Desventajas
• Se recomienda trabajar con Bootstrap desde el inicio de un proyecto, ya que si
quieres incluir el framework en un trabajo ya iniciado algunos estilos podrían
“romperse” y se tendría que ajustar a como se tenia en un principio, y eso puede ser
un poco tedioso y molesto.
• Es complicado, cambiar de versión si has realizado modificaciones profundas.
• No es ligero, y además, para algunas funcionalidades, será necesario tener que
usar Javascript y jQuery.
• Debes adaptar tu diseño a un grid de 12 columnas, que se modifican según el
dispositivo. Aquí empiezan los problemas, Bootstrap por defecto te trae anchos,
márgenes y altos de línea, y realizar cambios específicos.
Ejemplo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo Básico de Bootstrap</title>
<!-- Enlace al CSS de Bootstrap -->
<link href="[Link]
rel="stylesheet">
</head>
<body>
<div class="text-center mt-5">
<button class="btn btn-primary">Haz clic aquí</button>
</div>
</body>
</html>
Ejemplos de Componentes
1. Navbar (Barra de navegación):
o Barra de navegación responsiva con enlaces, logotipos y menús
desplegables.
2. Cards (Tarjetas):
o Contenedores de contenido flexibles y extensibles con encabezados, pies de
página, imágenes y más.
3. Buttons (Botones):
o Diferentes estilos de botones con colores y tamaños variados.
4. Forms (Formularios):
o Formularios con estilos predefinidos para entradas, selectores, casillas de
verificación, botones de radio, etc.
5. Modals (Ventanas modales):
o Ventanas emergentes que se pueden usar para mostrar contenido adicional
sin salir de la página actual.
6. Alerts (Alertas):
o Mensajes de alerta de varios colores para diferentes tipos de notificaciones.
7. Dropdowns (Menús desplegables):
o Menús desplegables para opciones adicionales o acciones.
8. Tabs (Pestañas):
o Navegación por pestañas para mostrar contenido dividido en secciones.
9. Carousels (Carruseles):
o Contenedores deslizantes para mostrar múltiples elementos, como imágenes
o tarjetas, en un carrusel.
10. Tooltips (Tooltips):
o Pequeños cuadros de información que aparecen al pasar el cursor sobre un
elemento.
Ejemplos de Utilidades
1. Grid System (Sistema de cuadrícula):
o Sistema de cuadrícula flexible basado en 12 columnas para crear diseños
responsivos.
2. Typography (Tipografía):
o Estilos predefinidos para títulos, párrafos, citas y más.
3. Spacing (Espaciado):
o Clases para agregar márgenes y rellenos a los elementos.
4. Colors (Colores):
o Paleta de colores predefinidos para fondos, textos y bordes.
5. Flexbox Utilities (Utilidades de Flexbox):
o Clases para utilizar Flexbox para alinear y distribuir elementos en
contenedores.
6. Sizing (Tamaño):
o Clases para controlar el tamaño de los elementos.
7. Display (Display):
o Clases para controlar la visibilidad y el tipo de visualización de los
elementos (por ejemplo, block, inline-block, none).
8. Position (Posicionamiento):
o Clases para posicionar elementos de forma relativa, absoluta, fija o sticky.
PRESENTACIÓN