DISEÑO WEB CON BOOTSTRAP, Apuntes de Diseño y Desarrollo Web

¡Descarga DISEÑO WEB CON BOOTSTRAP y más Apuntes en PDF de Diseño y Desarrollo Web solo en Docsity!

Diseño Web con Bootstrap 4

Juan Carlos Obando Roldán

Juan Pedro Santos Fernández

Diseño Web con Bootstrap 4

Juan Carlos Obando Roldán

Juan Pedro Santos Fernández

PROLOGO

La naturaleza abierta de la web ofrece amplias oportunidades para los desarrolladores que desean crear sitios web responsive. Para sacar el máximo provecho de las capacidades de la web, necesitas saber cómo usarlas. Bootstrap es el framework para que aquellos estudiantes con conocimientos mínimos de informática, desean hacer páginas web en términos de eficiencia y agilizar el desarrollo web esperando que este texto sirva como primer paso para toda una serie de experiencias y aprendizajes. Los autores

CONTENIDO

INTRODUCCION

Bootstrap incluye un primer

sistema de cuadrícula de

fluido móvil y receptivo que

escala adecuadamente hasta

12 columnas a medida que

aumenta el tamaño del

dispositivo o de la ventana

gráfica. Incluye clases

predefinidas para opciones de

diseño fáciles, así como

potentes mixins para generar

diseños más semánticos.

1.1 CONFIGURACIÓN Y USO

Bootstrap es un framework de HTML, CSS y Javascript originalmente creado por Twitter y su página oficial es https://getbootstrap.com/ Para el desarrollo de los ejemplos necesitamos un editor de páginas web y el uso de un navegador web. Así mismo debemos precisar el uso de carpetas en una página web, es decir el nombre habitual de los archivos y carpetas como se muestra en la siguiente figura el proyecto denominado Pagina sobre la cual se encuentra el archivo index.html y las capetas css (estilos), js (scripts) e img (imágenes).

B. Mediante Uso Local Este método descarga los archivos lo que asegura que si no contamos con Internet las clases de Bootstrap pueden ser consumidas localmente. Dentro de la página mostrada en la figura anterior seleccionamos la opción que dice Download el cual nos llevara a la página de descargas y dentro de la cual se muestra la sección Compiled CSS and JS el cual muestra otro botón de Download que deberá formar la siguiente liga de descarga https://github.com/twbs/boo tstrap/releases/download/v4.3.1/bootstrap-4.3.1- dist.zip y obtenemos bootstrap-4.3.1-dist.zip el cual lo debemos descomprimir y nos debe genera la siguiente carpeta bootstrap-4.3.1-dist conteniendo las subcarpetas css y js con el siguiente contenido: css bootstrap-grid.css bootstrap-grid.css.map bootstrap-grid.min.css bootstrap-grid.min.css.map bootstrap-reboot.css bootstrap-reboot.css.map bootstrap-reboot.min.css bootstrap-reboot.min.css.map bootstrap.css bootstrap.css.map bootstrap.min.css bootstrap.min.css.map js bootstrap.bundle.js bootstrap.bundle.js.map bootstrap.bundle.min.js bootstrap.bundle.min.js.map bootstrap.js bootstrap.js.map bootstrap.min.js bootstrap.min.js.map Como se puede apreciar en la lista anterior de color rojo ya tenemos los dos archivos de Bootsrtap. Nos falta los archivos de jquery y pooper. Para eso basta con descargar directamente el código de los dos archivos escribiendo las siguientes direcciones copiadas del método anterior: https://code.jquery.com/jquery-3.3.1.slim.min.js https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js

Al escribir cada dirección en el navegador se mostrará el código y de cualquier manera guardar el código con el mismo nombre de los archivos en la carpeta JS debiendo quedar nuestro archivo index.html de la siguiente manera:

Bootstrap 4

El resultado en navegador será un texto formateado que diga Bootstrap 4. 1.2 FILOSOFÍA MOBILE ¿Cuál es la resolución que manda? ¿Escritorio primero? ¿Resoluciones pequeñas? El mobile first se asienta como la metodología de trabajo como “los móviles primero”. Empieza por lo pequeño. Entonces comienza a crecer…

De este modo en cada columna podemos introducir el contenido que queremos, en el ejemplo de arriba la distribución sería para pantallas de entre 767 a 971 pixeles de ancho. Si nos fijamos la suma de los valores en cada fila es de 12, indicando en cada columna cuantos espacios debe de ocupar, por lo que las posibilidades en nuestros diseños son enormes. El sistema grid está pensado para ayudarnos en la disposición de los contenidos de nuestra web y para su adaptación a los diferentes tamaños de pantalla de forma automática. De forma automática… Es decir, que con solo programar una vez ya no nos debemos preocupar si se ve o no en tal o cual navegador. Pero, ¿Cómo lo hace? ¿Cómo bootstrap se adapta al tamaño de los navegadores de forma automática? Pues gracias a líneas de código que describen qué es lo que quieres utilizar. Utilizamos la siguiente tabla Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px) Comportamiento Horizontal en todo momento Contraído para comenzar, horizontal por encima de los puntos de interrupción Contraído para comenzar, horizontal por encima de los puntos de interrupción Contraído para comenzar, horizontal por encima de los puntos de interrupción Ancho máximo del contenedor None (auto) 750px 970px 1170px Class prefix .col-xs- .col-sm- .col-md- .col-lg-

de columnas 12 12 12 12

Ancho de canal 30px (15px a cada lado de una columna) 30px (15px a cada lado de una columna) 30px (15px a cada lado de una columna) 30px (15px a cada lado de una columna) Anidable Si Si Si Si Offsets Si Si Si Si Ordenamiento de columnas Si Si Si Si El sistema de rejilla se basa principalmente en 3 conceptos: contenedores, filas y columnas.

A. EL CONTENEDOR

El contenedor es el elemento base en el sistema de rejillas de Bootstrap. Como ejemplo:

Un contenedor puede ser de la clase “container” (tamaño definido) o “container-fluid” (tamaño variable dependiendo del navegador). B. LA FILA La fila es el segundo elemento en la jerarquía y lo que hace es asegurar la presencia de 12 columnas imaginarias dentro del contenedor. Como ejemplo:

C. LA COLUMNA El tercer elemento en el sistema de rejillas permite especificar el aspecto que tendrá la página dependiendo del tamaño de pantalla. Como ejemplo:

El ejemplo anterior al estar en un dispositivo con una pantalla extra pequeña ocupara las 12 columnas que se encuentran disponibles por fila y si se encuentra en una pantalla pequeña solo ocupara 3 posiciones de las 12 columnas que le corresponden.

d. Representar la siguiente distribución bajo un diseño responsivo. e. Representar la siguiente distribución bajo un diseño responsivo.

TIPOGRAFIAS

Bootstrap utiliza Helvetica

Neue, Helvetica, Arial y Sans-

serif en su pila de fuentes

predeterminada. Usando la

función de tipografía de

Bootstrap puede crear

encabezados, párrafos, listas

y otros elementos en línea.

B. FUENTES

Tenemos la posibilidad de hacer cambios y modificar elementos de nuestras tipografías por medio de clases en bootstrap 4 small Permite escribir texto más pequeño de lo que sería un párrafo normal. Pie de página font-weight-bold Texto en negrita Texto suave font-italic Texto aparezca en cursiva Texto en cursiva text-left / text-center / text-right Alinea el texto a la izquierda, centro o derecha Texto alineado a la izquierda text-justify Texto justificado. Texto justificado

text-nowrap Texto en una sola línea Texto en una sola línea text-lowercase / text-uppercase Texto en minúscula/mayúscula Texto en Minúsculas text-capitalize Texto con cada palabra empezando por mayúscula Letra capital text-[color] Texto con color según la paleta de Bootstrap: primary, secondary, dark, light, danger, warning, success, info, white Texto primary