TITULO: ENSAYO TECNICO
Subtítulo: BOOSTRAP
TENDENCIAS ACTUALES DE
PROGRAMACION
ING: ZURITA MORALES AIDA VIVIANA
CHANGUAN AMANTA JHARDEL
XAVIER
[Link]@intsuperi 0993584499
NA
ÍNDICE
1. TEMA.............................................................................................................................3
2. OBJETIVO.......................................................................................................................3
3. DESARROLLO.................................................................................................................3
3.1 PERZONALIZAR...................................................................................................3
3.2 LAYOUT..............................................................................................................3
3.3 CONTENIDO........................................................................................................4
3.4 FORMULARIOS....................................................................................................4
3.5 COMPONENTES..................................................................................................4
3.6 HELPERS.............................................................................................................5
3.7 UTILIDADES........................................................................................................6
[Link]
BOOTSTRAP. (framework).
[Link]
Analizar las herramientas del framework. (BOOTSTRAP)
[Link]
Bootstrap es un framework CSS de código abierto que facilita el desarrollo web de un
modo más sencillo y rápido.
3.1 PERZONALIZAR.
Overview: Enseña a crear temas, personalizar y ampliar Bootstrap a través de
varias opciones.
Sass: Archivo fuente que aprovecha variables mapas, mixins. (Ayuda a construir
y personalizar más rápido un proyecto.
Opciones: integra variables para alternar fácilmente las preferencias de CSS
para controlar el estilo y el comportamiento.
Color: Permite agregar colores para personalizar mejor el proyecto.
Componentes: Permite agregar con facilidad alineaciones, colores, etc. (a
través de una clase base).
Variables CSS: Permite agregar diseños rápidos y con visión futuristas a través
de CSS y sus propiedades personalizadas.
Optimizar: Mantener el proyecto ágil para una mejor comodidad a la hora de
darle mantenimiento.
3.2 LAYOUT
Breakpoints: permite personalizar el ancho que indica cómo se observara tu
diseño en los tamaños de distintos dispositivos.
Contenedores: Los contenedores son un bloque, rellenan y alinean tu
contenido dentro de un dispositivo determinado.
Sistema de cuadricula. (GRID): Serie de contenedores, filas y columnas para
diseñar y alinear el contenido. Está construido con flexbox y es completamente
responsivo.
Columnas: Permite crear columnas y personalizarlas al gusto del programador.
Gutters: se utilizan para espaciar y alinear de manera responsivo el contenido
de las columnas.
Utilidades para el diseño: Permite mostrar, ocultar, alinear y espaciar el
contenido.
Z-índex: Permite organizar el contenido y diseñar capas de navegación, tooltips
y popovers, modals, etc.
Cuadrícula CSS: Permite habilitar, usar y personalizar nuestro sistema de
diseño alternativo basado en CSS Grid con ejemplos y fragmentos de código.
3.3 CONTENIDO
Reboot: Proporciona una base elegante, consistente y simple sobre la cual
construir.
Tipografía: Permite modificar documentos, encabezados, texto del body, listas,
etc.
Imágenes: Permite personalizar documentos e imágenes para que estas sean
responsivo y así dentro del proyecto estas no cambien su tamaño.
Tablas: Permite agregar eliminar y modificar tablas con estilos personalizados.
Figuras: Permite mostrar imágenes y texto relacionados con el componente de
figure en Bootstrap.
3.4 FORMULARIOS
Overview: Brinda ejemplos e indicaciones de uso para los estilos de formulario,
opciones de diseño y personalizar a una amplia variedad de formularios.
Controles de formulario: Permiten personalizar tus formularios para una mejor
representación visual.
Select: Cambia la apariencia del elemento inicial.
Checks y radios: Permite agregar casillas de verificación y radios en el proyecto
para navegadores u otros dispositivos.
Rango: Agrega un estilo personalizado de rango aceptable entre navegadores.
Input group: Permite ampliar los controles de formulario agregando texto,
botones o grupos de botones a ambos lados de las entradas de texto.
Etiquetas flotantes: Permite insertar en la entrada etiquetas flotantes sencillas
y elegantes.
Layout: Agrega una estructura definida a los formularios y todo su contenido.
Validación: Permite agregar comentarios personalizados atraves de varios
lenguajes de programación para los usuarios.
3.5 COMPONENTES
Accordion: Permite crear opciones desplegables verticalmente.
Alerts: Notifica al usuario a través de mensajes de alerta.
Badges: Permite agregar insignias o etiquetas de diferentes tamaños.
Breadcrumb: Permite indicar en que parte de la página se encuentra el usuario.
Buttons: Permite agregar botones para acciones y personalizarlos.
Button group: Organiza varios botones en fila o en columna.
Cards: Agrega tarjetas en las cuales sirven como contenedores de texto tiene
opciones para encabezados y pies de página.
Carousel: Permite presentar imágenes o diapositivas de texto de manera que
se los pueda recorrer.
Close Button: Agrega un botón de cierre para descartar contenido como las
alertas, por ejemplo.
Collapse: Permite mostrar y ocultar contenido.
Dropdowns: Permite agregar un botón tipo lista desplegable al hacer clic en él
mismo.
List group: Permite agregar una lista básica de varios elementos.
Modal: Agrega cuadros de diálogo a tu sitio, como notificaciones de usuario o
contenido completamente personalizado.
Navs & Tabs: Activa y Desactiva los elementos ya visitados en la navegación.
Navbar: Permite incluir un encabezado a la barra de navegación.
Offcanvas: Permite crear barras de navegación laterales ocultas en el proyecto,
carritos de compras, etc.
Pagination: Nos indica el contenido relacionado existente dentro de la página.
Placeholders: Nos permite utilizar marcadores de carga los cuales indican que
aún se está cargando algún componente dentro del proyecto.
Popovers: Nos permite mostrar contenido en forma de una ventana o nube de
dialogo.
Progress: Permite agregar y personalizar barras de progreso, fondos animados
y etiquetas de texto.
Scrollspy: Actualiza automáticamente la navegación y enumera los
componentes de un grupo el cual su información está en desplazamiento para
indicar qué enlace está actualmente activo.
Spinners: Indica el estado de carga de un componente o una página.
Toasts: Permite enviar notificaciones a tus visitantes como un mensaje de
alerta ligero y fácilmente personalizable.
Tooltips: Despliega un mensaje al pasar el cursor por el tooltips tipo
notificación.
3.6 HELPERS
Clearfix: Permite de manera rápida y fácilmente el contenido flotante dentro
de un contenedor.
Enlaces de Colores: Permite agregar al enlace varios colores.
Relación de Aspecto: Permite que un elemento mantenga la relación de
aspecto de tu elección.
Posición: Permite configurar rápidamente la posición de un elemento.
Pilas: Permite que el diseño de componentes sea más rápido y fácil que nunca.
Visualmente Oculto: Permite ocultar elementos visualmente, manteniéndolos
accesibles.
Enlace Estirado: Hace que se pueda hacer clic en cualquier elemento HTML o
enlace anidado que utiliza CSS.
Texto Truncado: Permite truncar cadenas largas de texto con puntos
suspensivos.
Regla Vertical: Permite la creación de divisores verticales con la etiqueta <hr>.
3.7 UTILIDADES
API de utilidades: Permite generar clases de utilidad.
Color de Fondo: Permite agregar decoraciones con degradados.
Bordes: Permite agregar bordes a imágenes y botones.
Colores: Permite agregar colores a los textos así estos estén resaltados.
Display: Permite que la información dentro del proyecto se alterne de manera
responsivo y así tenga una mejor visualización.
Flex: Administra rápidamente el diseño, la alineación y el tamaño de las
columnas de la cuadrícula, la navegación, los componentes y más con un
conjunto completo de utilidades flexibles responsive.
Float: Configura la flotabilidad en cualquier elemento.
Interacciones: Permite cambiar la forma en la que los usuarios interactúan con
los contenidos de un sitio web.
Opacidad: Permite controlar la opacidad de los elementos del proyecto.
Desbordamiento: Permite configurar rápidamente cómo el contenido desborda
un elemento del proyecto.
Posicion: Permite configurar el posicionamiento de un elemento.
Sombras: Permite agregar o eliminar las sombras de un elemento.
Tamaño: Modifica o agrega un elemento personalizando el ancho o la altura
del mismo.
Espaciado: Agrega clases de utilidades de margin, padding y gap para modificar
la apariencia de un elemento.
Texto: Permite agregar textos comunes y personalizarlos con varias
características como el peso y el ajuste.
Alineacion Vertical: Permite cambiar la alineación de todos los elementos del
proyecto como por ejemplo tablas y sus celdas.
Visibilidad: Permite controlar la visualización de los elementos sin modificarlos
con la utilidad de visibilidad.
