Desarrollo Web con Bootstrap 4

Licencia de Creative Commons mario@mariogl.com

Temario

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 iniciales

Desarrollo web con Bootstrap 4

Conceptos iniciales

  • ¿Qué es un framework?

  • CSS + JS

  • Responsive Web Design

  • First mobile

Desarrollo web con Bootstrap 4

Entorno de desarrollo

Desarrollo web con Bootstrap 4

Entorno de desarrollo

Desarrollo web con Bootstrap 4

Git

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

  • Repositorio de módulos distribuibles

  • La carpeta node_modules

  • El archivo package.json:

    • Registro de dependencias

    • npm init

    • Dependencias de desarrollo y de producción

    • scripts

npm - comandos

Desarrollo web con Bootstrap 4

  • Instalar un paquete de producción:
        npm install paquete

  • Instalar un paquete de desarrollo:
        npm install paquete --save-dev

  • Instalar todas las dependencias:
        npm install

  • Listar 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 desarrollo

  • Compilar SASS a CSS

  • Refrescar el navegador

  • Instalar globalmente gulp-cli:
    npm install -g gulp-cli

  • El archivo gulpfile.js

  • Descargar starter

Bootstrap

Desarrollo web con Bootstrap 4

Bootstrap

Desarrollo web con Bootstrap 4

  • Carga del framework

    • <link>

    • módulo npm

La grid

Desarrollo web con Bootstrap 4

Layouts con Bootstrap

Desarrollo web con Bootstrap 4

  • Unidades rem

  • Breakpoints

  • Las zonas xs, sm, md, lg y xl

  • Los containers

  • La grid

    • 12 columnas

    • gutters

    • .offset[-zona]-nColumnas

    • .order[-zona]-n, .order[-zona]-first, .order[-zona]-last

  • Flexbox

  • Ejemplo

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: 0rem
    • 1: 0.25rem
    • 2: 0.5rem
    • 3: 1rem
    • 4: 1.5rem
    • 5: 3rem
    • auto: 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: 0rem
    • 1: 0.25rem
    • 2: 0.5rem
    • 3: 1rem
    • 4: 1.5rem
    • 5: 3rem
  • Ejemplos:
    .pt-3, .px-1, .p-sm-0, .p-xl-5, .p-lg-3, .pb-lg-0, .py-sm-3...

Texto

Desarrollo web con Bootstrap 4

Texto

Desarrollo web con Bootstrap 4

  • Unidades rem (base 16px)

  • Tipografía nativa según S.O.:

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-unstyled
  • Elementos inline:

    • ul -> .list-inline

    • li -> .list-inline-item

Bordes 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: .border
  • Por lados: .border-top, .border-bottom, .border-left, .border-right
  • Quitar un lado: .border-top-0, .border-bottom-0, .border-left-0, .border-right-0
  • Esquinas redondeadas: .rounded
  • Por pares: .rounded-top, .rounded-bottom, .rounded-right, .rounded-left
  • Circular: .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 iframes

Desarrollo web con Bootstrap 4

Imágenes

Desarrollo web con Bootstrap 4

  • Imágenes responsive: .img-fluid
  • Thumbnail: .img-thumbnail
  • Esquinas redondeadas: .rounded
  • Imágenes circulares: .rounded-circle

iframes

Desarrollo web con Bootstrap 4

  • Responsive
  • Contenedor con:
    .embed-responsive   y
    .embed-responsive-<ratio>
  • Ratios:
    • 21by9  (21:9)
    • 16by9  (16:9)
    • 4by3    (4:3)
    • 1by1    (1:1)

Posicionamiento

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-top
  • Compatibilidad de sticky

Tablas

Desarrollo web con Bootstrap 4

Tablas

Desarrollo web con Bootstrap 4

  • Añadir estilos de Bootstrap: .table
  • Con bordes: .table-bordered
  • Sin bordes: .table-borderless
  • Filas alternas: .table-striped
  • Hover sobre las filas: .table-hover
  • Tabla pequeña: .table-sm
  • Tabla responsive:
    contenedor con .table-responsive[-zona]

Componentes

Desarrollo web con Bootstrap 4

Componentes - navbar

Desarrollo web con Bootstrap 4

  • Cabecera
  • Menú que se convierte en menú desplegable
  • Icono hamburguesa
  • Clases:
    • Contenedor: .navbar, .navbar-expand-<zona>, navbar-<theme>
    • Título o logotipo: .navbar-brand
    • Menú de navegación:
      • Contenedor: .navbar-collapse, .collapse, #id
      • Menú: .navbar-nav
      • Elementos del menú: .nav-item
      • Links: .nav-link
  • Ejemplo

Componentes - cards

Desarrollo web con Bootstrap 4

  • Recuadros con borde y esquinas redondeadas
  • Contenedor: .card
  • Cabecera: .card-header
  • Contenido: .card-body
  • Imagen: .card-img-top
  • Título: .card-title
  • Texto: .card-text
  • Ejemplos

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-footer
          • Para cerrar: data-dismiss="modal"
  • Ejemplo

Formularios

Desarrollo web con Bootstrap 4

Formularios

Desarrollo web con Bootstrap 4

  • Agrupar label + elementos: .form-group
  • Elementos: .form-control
  • Checkboxes y radiobuttons:
    • Grupo: .form-check [.form-check-inline]
    • Elemento: .form-check-input
    • Más bonito: 
      • Grupo: .custom-control [.custom-control-inline] y .custom-checkbox o .custom-radio
      • Label: .custom-control-label
      • Elemento: .custom-control-input
  • Form en línea: .form-inline
  • Ejemplo

Botones

Desarrollo web con Bootstrap 4

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

Personalización

Desarrollo web con Bootstrap 4

Personalización - SASS

Desarrollo web con Bootstrap 4

  • Bootstrap como módulo npm

  • Código fuente -> código compilado

  • Modularización con @import

  • Anidaciones

  • Variables
  • Cargar antes mis variables y después bootstrap
  • El archivo _variables.scss de Bootstrap

Migración de v3 a v4

Desarrollo web con Bootstrap 4

Migración de v3 a v4

Desarrollo web con Bootstrap 4

  • Tipografía base
  • Nuevo breakpoint en 576px
  • Zonas: xs (sin clase), sm, md, lg, xl
  • Flexbox
  • La clase .col
  • Utilidades

Links

Desarrollo web con Bootstrap 4

Desarrollo web con Bootstrap 4