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

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

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

• 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

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

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)

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

• 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