Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráﬁcos básicos...

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


Conceptos iniciales

¿Qué es un framework?CSS + JSResponsive Web DesignFirst mobile


Entorno deEntorno dedesarrollodesarrollo


Entorno de desarrollo


IDE: Configurar:

Format on PasteFormat on Save

y npmExtensión

Visual Studio Code

GitNodeJS

ColorZilla

https://code.visualstudio.com/Download

https://git-scm.com/downloads

https://nodejs.org/en/download/

http://www.colorzilla.com/

GitGit


Git - comandos básicos para el curso


Clonar un repositorio: git clone URL Descargar última versión del repositorio: git pull origin master

Git - configuración proxy


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


npm


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


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


npm config set proxy http://username:password@host:port

npm config set https-proxy http://username:password@host:port

gulp


Automatizar tareas de desarrolloCompilar SASS a CSSRefrescar el navegadorInstalar globalmente gulp-cli: npm install -g gulp-cliEl archivo gulpfile.jsDescargar starter

https://github.com/mariogl/simple-gulp-bootstrap

BootstrapBootstrap


Bootstrap


Carga del framework<link>módulo npm

La gridLa grid


Layouts con Bootstrap


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

https://codepen.io/mariogl/pen/mQbqgm

Layouts con Bootstrap


Layouts con Bootstrap - Utilidades


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...



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...



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


Unidades rem (base 16px)Tipografía nativa según S.O.:

Texto


Texto - Encabezados


h1, h2, h3, h4, h5, h6.h1, .h2, .h3, .h4, .h5, .h6

Texto - Utilidades


Formato:: negrita: cursiva: subrayado<del>: tachado: marcado: letra pequeña

Alineación:.text[-zona]-left, .text[-zona]-right, .text[-zona]-center, .text[-zona]-justify

Texto - Utilidades


Transformación:.text-lowercase.text-uppercase.test-capitalize

Texto - Listas


Sin estilos: .list-unstyledElementos inline:

ul -> .list-inlineli -> .list-inline-item

Bordes y coloresBordes y colores


Colores


primary secondary success danger

warning info light dark

Colores


.text-<nombreColor>

.bg-<nombreColor>

.border-<nombreColor>

Bordes


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


Tres grados:.shadow-sm (sombra pequeña).shadow (sombra normal).shadow-lg (sombra grande)

Imágenes e iframesImágenes e iframes


Imágenes


Imágenes responsive: .img-fluidThumbnail: .img-thumbnailEsquinas redondeadas: .roundedImágenes circulares: .rounded-circle

iframes


ResponsiveContenedor con: .embed-responsive y .embed-responsive-<ratio>Ratios:

21by9 (21:9)16by9 (16:9)4by3 (4:3)1by1 (1:1)

PosicionamientoPosicionamiento


Posicionamiento


.position-static, .position-relative, .position-absolute,

.position-fixed, .position-sticky

.fixed-top, .fixed-bottom, .sticky-topCompatibilidad de sticky

https://caniuse.com/#search=sticky

TablasTablas


Tablas


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


Componentes - navbar


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

https://codepen.io/mariogl/pen/bQGqQQ

Componentes - cards


Recuadros con borde y esquinas redondeadasContenedor: .cardCabecera: .card-headerContenido: .card-bodyImagen: .card-img-topTítulo: .card-titleTexto: .card-textEjemplos

https://codepen.io/mariogl/pen/XyWvrO

Componentes - tooltips


data-toggle="tooltip"data-placement="top|bottom|left|right|auto"title="Texto del tooltip"

Componentes - modals


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

https://codepen.io/mariogl/full/NEWQdY/

FormulariosFormularios


Formularios


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

https://codepen.io/mariogl/pen/pQoPoo

Botones


Clase principal: .btnColores: .btn-<color>Sólo borde: .btn-outline-<color>De bloque: .btn-block

PersonalizaciónPersonalización


Personalización - SASS


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


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


http://getbootstrap.com/docs/4.1/getting-started/download/

http://getbootstrap.com/docs/4.1/getting-started/introduction/

https://github.com/mariogl/simple-gulp-bootstrap

https://caniuse.com/

[email protected]

@marioglweb


mailto:[email protected]

https://twitter.com/marioglweb

Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráﬁcos básicos...

Documents

Transcript of Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráﬁcos básicos...