desarrollo web con bootstrap 4 · • los fundamentos • la tipografía y los gráficos básicos...
TRANSCRIPT
Desarrollo WebDesarrollo Webcon Bootstrapcon Bootstrap
44
TemarioTemario
Desarrollo web con Bootstrap 4
• Introducción• Implantaciones y configuración• Guía de migración de la versión 2 a la 3• Los fundamentos• La Tipografía y los gráficos básicos• Los contenedores (“Layout”)• Sistema de cuadrícula• Opciones de cuadrícula• El metalenguaje LESS• Bootstrap y la Interfaz de Usuario• Bootstrap y texto• Opciones básicas con el texto• Clases de transformación• Abreviaturas• Direcciones• Bloques de citas• Listas
• Código• Cuadros• Formularios• Utilidades Responsive• Menús desplegables• Grupos de botones• Botones Desplegables• Elementos de navegación• Paginadores• Etiquetas• Jumbotron• Barras de progreso• Objetos multimedia• Paneles• Los “plugin” de JavaScript• Transiciones y animaciones• Recursos
Conceptos inicialesConceptos iniciales
Desarrollo web con Bootstrap 4
Conceptos iniciales
¿Qué es un framework?CSS + JSResponsive Web DesignFirst mobile
Desarrollo web con Bootstrap 4
Entorno deEntorno dedesarrollodesarrollo
Desarrollo web con Bootstrap 4
Entorno de desarrollo
Desarrollo web con Bootstrap 4
IDE: Configurar:
Format on PasteFormat on Save
y npmExtensión
Visual Studio Code
GitNodeJS
ColorZilla
GitGit
Desarrollo web con Bootstrap 4
Git - comandos básicos para el curso
Desarrollo web con Bootstrap 4
Clonar un repositorio: git clone URL Descargar última versión del repositorio: git pull origin master
Git - configuración proxy
Desarrollo web con Bootstrap 4
git config --global http.proxy http://username:password@host:port
git config --global https.proxy http://username:password@host:port
Node.js y npmNode.js y npm
Desarrollo web con Bootstrap 4
npm
Desarrollo web con Bootstrap 4
Instalar última versión después de instalar Node.js (configurar proxy si es necesario): npm install -g npmRepositorio de módulos distribuiblesLa carpeta node_modulesEl archivo package.json:
Registro de dependenciasnpm initDependencias de desarrollo y de producciónscripts
npm - comandos
Desarrollo web con Bootstrap 4
Instalar un paquete de producción: npm install paqueteInstalar un paquete de desarrollo: npm install paquete --save-devInstalar todas las dependencias: npm installListar paquetes instalados: npm list --depth=0
npm - configuración proxy
Desarrollo web con Bootstrap 4
npm config set proxy http://username:password@host:port
npm config set https-proxy http://username:password@host:port
gulp
Desarrollo web con Bootstrap 4
Automatizar tareas de desarrolloCompilar SASS a CSSRefrescar el navegadorInstalar globalmente gulp-cli: npm install -g gulp-cliEl archivo gulpfile.jsDescargar starter
BootstrapBootstrap
Desarrollo web con Bootstrap 4
Bootstrap
Desarrollo web con Bootstrap 4
Carga del framework<link>módulo npm
La gridLa grid
Desarrollo web con Bootstrap 4
Layouts con Bootstrap
Desarrollo web con Bootstrap 4
Unidades remBreakpointsLas zonas xs, sm, md, lg y xlLos containersLa grid
12 columnasgutters.offset[-zona]-nColumnas.order[-zona]-n, .order[-zona]-first, .order[-zona]-last
FlexboxEjemplo
Layouts con Bootstrap
Desarrollo web con Bootstrap 4
Layouts con Bootstrap - Utilidades
Desarrollo web con Bootstrap 4
display: .d[-zona]-tipo.d-none -> display: none.d-block -> display: block.d-inline -> display: inline.d-inline-block -> display: inline-block.d-flex -> display: flex.d-inline-flex -> display: inline-flex.d-md-none, .d-lg-block, .d-sm-inline-flex...
Layouts con Bootstrap - Utilidades
Desarrollo web con Bootstrap 4
margin: .m[lados][-zona]-tamaño
Lados:.mt: margin-top
.mb: margin-bottom
.ml: margin-left;
.mr: margin-right;
.mx: margin-left y margin-right
.my: margin-top y margin-bottom
Tamaños:0: 0rem1: 0.25rem2: 0.5rem3: 1rem4: 1.5rem5: 3remauto: auto
Ejemplos: .mt-3, .mx-auto, .m-sm-0, .m-xl-5, .m-lg-3, .mb-lg-0, .my-sm-3...
Layouts con Bootstrap - Utilidades
Desarrollo web con Bootstrap 4
padding: .p[lados][-zona]-tamaño
Lados:.pt: padding-top
.pb: padding-bottom
.pl: padding-left;
.pr: padding-right;
.px: padding-left y padding-right
.py: padding-top y padding-bottom
Tamaños:0: 0rem1: 0.25rem2: 0.5rem3: 1rem4: 1.5rem5: 3rem
Ejemplos: .pt-3, .px-1, .p-sm-0, .p-xl-5, .p-lg-3, .pb-lg-0, .py-sm-3...
TextoTexto
Desarrollo web con Bootstrap 4
Unidades rem (base 16px)Tipografía nativa según S.O.:
Texto
Desarrollo web con Bootstrap 4
Unidades rem (base 16px)Tipografía nativa según S.O.:
Texto
Desarrollo web con Bootstrap 4
Texto - Encabezados
Desarrollo web con Bootstrap 4
h1, h2, h3, h4, h5, h6.h1, .h2, .h3, .h4, .h5, .h6
Texto - Utilidades
Desarrollo web con Bootstrap 4
Formato:<strong>: negrita<em>: cursiva<u>: subrayado<del>: tachado<mark>: marcado<small>: letra pequeña
Alineación:.text[-zona]-left, .text[-zona]-right, .text[-zona]-center, .text[-zona]-justify
Texto - Utilidades
Desarrollo web con Bootstrap 4
Transformación:.text-lowercase.text-uppercase.test-capitalize
Texto - Listas
Desarrollo web con Bootstrap 4
Sin estilos: .list-unstyledElementos inline:
ul -> .list-inlineli -> .list-inline-item
Bordes y coloresBordes y colores
Desarrollo web con Bootstrap 4
Colores
Desarrollo web con Bootstrap 4
primary secondary success danger
warning info light dark
Colores
Desarrollo web con Bootstrap 4
.text-<nombreColor>
.bg-<nombreColor>
.border-<nombreColor>
Bordes
Desarrollo web con Bootstrap 4
En los cuatro lados: .borderPor lados: .border-top, .border-bottom, .border-left,.border-rightQuitar un lado: .border-top-0, .border-bottom-0,.border-left-0, .border-right-0Esquinas redondeadas: .roundedPor pares: .rounded-top, .rounded-bottom, .rounded-right, .rounded-leftCircular: .rounded-circle
Sombras
Desarrollo web con Bootstrap 4
Tres grados:.shadow-sm (sombra pequeña).shadow (sombra normal).shadow-lg (sombra grande)
Imágenes e iframesImágenes e iframes
Desarrollo web con Bootstrap 4
Imágenes
Desarrollo web con Bootstrap 4
Imágenes responsive: .img-fluidThumbnail: .img-thumbnailEsquinas redondeadas: .roundedImágenes circulares: .rounded-circle
iframes
Desarrollo web con Bootstrap 4
ResponsiveContenedor con: .embed-responsive y .embed-responsive-<ratio>Ratios:
21by9 (21:9)16by9 (16:9)4by3 (4:3)1by1 (1:1)
PosicionamientoPosicionamiento
Desarrollo web con Bootstrap 4
Posicionamiento
Desarrollo web con Bootstrap 4
.position-static, .position-relative, .position-absolute,
.position-fixed, .position-sticky
.fixed-top, .fixed-bottom, .sticky-topCompatibilidad de sticky
TablasTablas
Desarrollo web con Bootstrap 4
Tablas
Desarrollo web con Bootstrap 4
Añadir estilos de Bootstrap: .tableCon bordes: .table-borderedSin bordes: .table-borderlessFilas alternas: .table-stripedHover sobre las filas: .table-hoverTabla pequeña: .table-smTabla responsive: contenedor con .table-responsive[-zona]
ComponentesComponentes
Desarrollo web con Bootstrap 4
Componentes - navbar
Desarrollo web con Bootstrap 4
CabeceraMenú que se convierte en menú desplegableIcono hamburguesaClases:
Contenedor: .navbar, .navbar-expand-<zona>,navbar-<theme>Título o logotipo: .navbar-brandMenú de navegación:
Contenedor: .navbar-collapse, .collapse, #idMenú: .navbar-navElementos del menú: .nav-itemLinks: .nav-link
Ejemplo
Componentes - cards
Desarrollo web con Bootstrap 4
Recuadros con borde y esquinas redondeadasContenedor: .cardCabecera: .card-headerContenido: .card-bodyImagen: .card-img-topTítulo: .card-titleTexto: .card-textEjemplos
Componentes - tooltips
Desarrollo web con Bootstrap 4
data-toggle="tooltip"data-placement="top|bottom|left|right|auto"title="Texto del tooltip"
Componentes - modals
Desarrollo web con Bootstrap 4
Elemento disparador:data-toggle="modal"data-target="<elemento modal>"
Elemento modal:.modal, [.fade]
.modal-dialog [.modal-dialog-centered].modal-content
.modal-header.modal-title
.modal-body
.modal-footerPara cerrar: data-dismiss="modal"
Ejemplo
FormulariosFormularios
Desarrollo web con Bootstrap 4
Formularios
Desarrollo web con Bootstrap 4
Agrupar label + elementos: .form-groupElementos: .form-controlCheckboxes y radiobuttons:
Grupo: .form-check [.form-check-inline]Elemento: .form-check-inputMás bonito:
Grupo: .custom-control [.custom-control-inline] y.custom-checkbox o .custom-radioLabel: .custom-control-labelElemento: .custom-control-input
Form en línea: .form-inlineEjemplo
Botones
Desarrollo web con Bootstrap 4
Clase principal: .btnColores: .btn-<color>Sólo borde: .btn-outline-<color>De bloque: .btn-block
PersonalizaciónPersonalización
Desarrollo web con Bootstrap 4
Personalización - SASS
Desarrollo web con Bootstrap 4
Bootstrap como módulo npmCódigo fuente -> código compiladoModularización con @importAnidacionesVariablesCargar antes mis variables y después bootstrapEl archivo _variables.scss de Bootstrap
Migración de v3 a v4Migración de v3 a v4
Desarrollo web con Bootstrap 4
Migración de v3 a v4
Tipografía baseNuevo breakpoint en 576pxZonas: xs (sin clase), sm, md, lg, xlFlexboxLa clase .colUtilidades
Links
Instalación de BootstrapDocumentación de BootstrapStarter Gulp + BootstrapTablas de compatibilidad en navegadores
Desarrollo web con Bootstrap 4
@marioglweb
Desarrollo web con Bootstrap 4