desarrollo web con bootstrap 4 · • los fundamentos • la tipografía y los gráficos básicos...
TRANSCRIPT
![Page 1: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/1.jpg)
Desarrollo WebDesarrollo Webcon Bootstrapcon Bootstrap
44
![Page 2: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/2.jpg)
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
![Page 3: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/3.jpg)
Conceptos inicialesConceptos iniciales
Desarrollo web con Bootstrap 4
![Page 4: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/4.jpg)
Conceptos iniciales
¿Qué es un framework?CSS + JSResponsive Web DesignFirst mobile
Desarrollo web con Bootstrap 4
![Page 5: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/5.jpg)
Entorno deEntorno dedesarrollodesarrollo
Desarrollo web con Bootstrap 4
![Page 6: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/6.jpg)
Entorno de desarrollo
Desarrollo web con Bootstrap 4
IDE: Configurar:
Format on PasteFormat on Save
y npmExtensión
Visual Studio Code
GitNodeJS
ColorZilla
![Page 7: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/7.jpg)
GitGit
Desarrollo web con Bootstrap 4
![Page 8: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/8.jpg)
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
![Page 9: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/9.jpg)
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
![Page 10: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/10.jpg)
Node.js y npmNode.js y npm
Desarrollo web con Bootstrap 4
![Page 11: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/11.jpg)
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
![Page 12: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/12.jpg)
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
![Page 13: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/13.jpg)
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
![Page 14: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/14.jpg)
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
![Page 15: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/15.jpg)
BootstrapBootstrap
Desarrollo web con Bootstrap 4
![Page 16: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/16.jpg)
Bootstrap
Desarrollo web con Bootstrap 4
Carga del framework<link>módulo npm
![Page 17: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/17.jpg)
La gridLa grid
Desarrollo web con Bootstrap 4
![Page 18: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/18.jpg)
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
![Page 19: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/19.jpg)
Layouts con Bootstrap
Desarrollo web con Bootstrap 4
![Page 20: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/20.jpg)
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...
![Page 21: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/21.jpg)
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...
![Page 22: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/22.jpg)
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...
![Page 23: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/23.jpg)
TextoTexto
Desarrollo web con Bootstrap 4
![Page 24: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/24.jpg)
Unidades rem (base 16px)Tipografía nativa según S.O.:
Texto
Desarrollo web con Bootstrap 4
![Page 25: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/25.jpg)
Unidades rem (base 16px)Tipografía nativa según S.O.:
Texto
Desarrollo web con Bootstrap 4
![Page 26: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/26.jpg)
Texto - Encabezados
Desarrollo web con Bootstrap 4
h1, h2, h3, h4, h5, h6.h1, .h2, .h3, .h4, .h5, .h6
![Page 27: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/27.jpg)
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
![Page 28: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/28.jpg)
Texto - Utilidades
Desarrollo web con Bootstrap 4
Transformación:.text-lowercase.text-uppercase.test-capitalize
![Page 29: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/29.jpg)
Texto - Listas
Desarrollo web con Bootstrap 4
Sin estilos: .list-unstyledElementos inline:
ul -> .list-inlineli -> .list-inline-item
![Page 30: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/30.jpg)
Bordes y coloresBordes y colores
Desarrollo web con Bootstrap 4
![Page 31: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/31.jpg)
Colores
Desarrollo web con Bootstrap 4
primary secondary success danger
warning info light dark
![Page 32: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/32.jpg)
Colores
Desarrollo web con Bootstrap 4
.text-<nombreColor>
.bg-<nombreColor>
.border-<nombreColor>
![Page 33: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/33.jpg)
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
![Page 34: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/34.jpg)
Sombras
Desarrollo web con Bootstrap 4
Tres grados:.shadow-sm (sombra pequeña).shadow (sombra normal).shadow-lg (sombra grande)
![Page 35: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/35.jpg)
Imágenes e iframesImágenes e iframes
Desarrollo web con Bootstrap 4
![Page 36: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/36.jpg)
Imágenes
Desarrollo web con Bootstrap 4
Imágenes responsive: .img-fluidThumbnail: .img-thumbnailEsquinas redondeadas: .roundedImágenes circulares: .rounded-circle
![Page 37: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/37.jpg)
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)
![Page 38: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/38.jpg)
PosicionamientoPosicionamiento
Desarrollo web con Bootstrap 4
![Page 39: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/39.jpg)
Posicionamiento
Desarrollo web con Bootstrap 4
.position-static, .position-relative, .position-absolute,
.position-fixed, .position-sticky
.fixed-top, .fixed-bottom, .sticky-topCompatibilidad de sticky
![Page 40: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/40.jpg)
TablasTablas
Desarrollo web con Bootstrap 4
![Page 41: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/41.jpg)
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]
![Page 42: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/42.jpg)
ComponentesComponentes
Desarrollo web con Bootstrap 4
![Page 43: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/43.jpg)
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
![Page 44: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/44.jpg)
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
![Page 45: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/45.jpg)
Componentes - tooltips
Desarrollo web con Bootstrap 4
data-toggle="tooltip"data-placement="top|bottom|left|right|auto"title="Texto del tooltip"
![Page 46: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/46.jpg)
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
![Page 47: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/47.jpg)
FormulariosFormularios
Desarrollo web con Bootstrap 4
![Page 48: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/48.jpg)
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
![Page 49: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/49.jpg)
Botones
Desarrollo web con Bootstrap 4
Clase principal: .btnColores: .btn-<color>Sólo borde: .btn-outline-<color>De bloque: .btn-block
![Page 50: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/50.jpg)
PersonalizaciónPersonalización
Desarrollo web con Bootstrap 4
![Page 51: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/51.jpg)
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
![Page 52: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/52.jpg)
Migración de v3 a v4Migración de v3 a v4
Desarrollo web con Bootstrap 4
![Page 53: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/53.jpg)
Migración de v3 a v4
Tipografía baseNuevo breakpoint en 576pxZonas: xs (sin clase), sm, md, lg, xlFlexboxLa clase .colUtilidades
![Page 54: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/54.jpg)
Links
Instalación de BootstrapDocumentación de BootstrapStarter Gulp + BootstrapTablas de compatibilidad en navegadores
Desarrollo web con Bootstrap 4
![Page 55: Desarrollo Web con Bootstrap 4 · • Los fundamentos • La Tipografía y los gráficos básicos • Los contenedores (“Layout”) • Sistema de cuadrícula • Opciones de cuadrícula](https://reader033.vdocuments.mx/reader033/viewer/2022060208/5f0436d17e708231d40ce067/html5/thumbnails/55.jpg)
@marioglweb
Desarrollo web con Bootstrap 4