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

mario@mariogl.com

@marioglweb

Desarrollo web con Bootstrap 4