1. Cursos
  2. Tecnología
  3. Desarrollo Web
  4. Curso de Introducción a Bootstrap 4, nivel básico

Curso de Introducción a Bootstrap 4, nivel básico

Bootstrap 4 es sin duda el framework más utilizado para hacer páginas web responsivas de manera rápida y profesional en el mundo, pero no solo nos permite adaptar nuestras páginas web a cualquier dispositivo, sino que nos brinda una enorme gama de herramientas

Curso de Introducción a Bootstrap 4, nivel básico
Comparte este curso

Descripción del curso

Bootstrap 4 es sin duda el framework más utilizado para hacer páginas web responsivas de manera rápida y profesional en el mundo, pero no solo nos permite adaptar nuestras páginas web a cualquier dispositivo, sino que nos brinda una enorme gama de herramientas para simplificarnos la vida de diseñadores y desarrolladores web.

Este curso está enfocado para personas que no tengan ningún conocimiento sobre el tema, hasta poder lograr páginas flexibles y poderosas. Es necesario que se tengan conocimientos básicos sobre HTML y CSS, pero no necesitas ser un experto en el área. No necesitas tener ningún conocimiento en JavaScript, ya que no utilizaremos este lenguaje.

Al final el curso podrás:

Comprender los inicios de Bootstrap 4, cómo instalarlo en la computadora o desde un CDN, usar básicamente la cuadrícula para hacer una página responsiva.

Aprender las diferencias de tipografía y de estilo entre HTML y Bootstrap 4 en etiquetas como abbr, mark, pre, kdb o blockquote.

Aprender a crear listas agrupadas, paneles y grupos de paneles, menús dropdown, listas colapsables, crear un acordeón, menú de tabuladores, menú de píldoras, menús verticales, así como tabuladores y píldoras centradas en Bootstrap.

Crear barras de navegación normales y en colores invertidos, añadir un dropdown, crear opciones a la derecha e izquierda de la barra, agregar botones, un formulario y hacer una barra colapsable para un dispositivo pequeño.

Aprender a crear y modificar los objetos media, centrando verticalmente, justificarlo a la izquierda o derecha o anidarlos.

Crear un carrusel de imágenes y posteriormente agregará subtítulos, creará ventanas modales, añadirá un tooltip a un elemento HTML, creará ventanas popover, así como una barra ScrollSpy.

Crear páginas responsivas de varias columna para dispositivos pequeños, medianos, computadoras de escritorio y de pantalla ancha. Conocerá el uso de las clases hidden, visible, clearfix, offset, pull y push.

En el curso encontrarás los apuntes a cada sección, así como más de 100 ejercicios que te ayudarán a lograr nuestros objetivos. Para este curso necesitas una computadora con Internet y un navegador moderno, así como un editor de código como SublimeText, Brackets, Dreamweaver, etc.

Contenido del curso

Introducción a Bootstrap 4

49:31
  • Los inicios de Bootstrap03:39AVANCE
  • Instalar Bootstrap en la computadora o desde un CDN09:45
  • Las clases .container y .container-fluid para iniciar07:04
  • Introducción al Grid System11:09
  • La configuración básica de la tipografía en Bootstrap04:49
  • El uso de la etiqueta <mark> en Bootstrap04:08
  • Etiquetas para el manejo de código con Bootstrap 404:49
  • Clases para remarcar textos y fondos según su contexto04:08

Manejo de diferentes etiquetas con Bootstrap 4

57:15
  • Manejo de las tablas con Bootstrap 408:14
  • Realizar las imágenes responsivas y modificar las esquinas04:50
  • Crear un jumbotron con Bootstrap 404:36
  • Crear alertas con Bootstrap 406:43
  • Manejo de botones con Bootstrap 405:58
  • Crear grupos de botones con Bootstrap 404:58
  • Los distintivos en Bootstrap 406:10
  • Paginación y migas de pan08:28
  • Barras de progreso07:18

Listas de agrupación

01:22:51
  • Introducción a las list-group10:04
  • List group con insignias y personalizado12:13
  • Las cartas o tarjetas en Bootstrap 409:31
  • Modificar el estilo de las tarjetas o cartas y añadirles un list-group con flush09:57
  • Crear un grupo de tarjetas o cartas con card-group05:59
  • Crear un grupo de tarjetas o cartas con card-deck06:47
  • Agrupar las tarjetas o cartas con card-columns10:50
  • Crear un menú con dropdown10:02
  • Variaciones y tamaños de un dropdown07:28

Divisiones colapsables y barras de navegación

01:03:18
  • División Colapsable básica06:28
  • Múltiples divisiones colapsables05:07
  • Crear una acordeón con Bootstrap 406:35
  • Hacer un nav dinámico04:34
  • Crear una barra de navegación básica con Bootstrap 406:34
  • Crear una barra de navegación responsiva con Bootstrap 406:48
  • Crear una barra de navegación con cajas de entrada09:08
  • Crear una barra "pegajosa" con Bootstrap 408:33
  • Crear una barra de navegación responsiva con un formulario con Bootstrap 409:31

Crear formularios con Bootstrap 4

01:06:40
  • Manejo básico de formularios con Bootstrap 407:59
  • Cambiar el tamaño de las cajas de entrada en un formulario con BS406:05
  • Manejo de las cajas de verificación y de los botones de radio en Bootstrap 408:09
  • Dar formato a un formulario con el grid system de Bootstrap 410:37
  • Crear un formulario horizontal con Bootstrap 405:41
  • Controlar el ancho de las columnas en un formulario09:17
  • Crear un formulario en una línea o inline12:57
  • Crear texto auxiliar en un formulario con Bootstrap 405:55

Los input-group en Bootstrap 4

51:38
  • Introducción a los input group08:58
  • Controlar las alturas de los elementos input group04:52
  • Crear un input-group con cajas de verificación o botones de radio03:55
  • Crear un input-multiple con varias cajas de entrada03:52
  • Crear un input-group con varios añadidos03:18
  • Añadir botones a elementos de un formulario con input-group04:43
  • Añadir botones con dropdown con un input-group04:36
  • Añadir botones dobles en elementos de formularios con input-group05:36
  • Añadir botones y enunciado en elementos <select> con un input-group05:43
  • Añadir botones y enunciado en elementos "file" con un input-group06:05

Crear un carrusel con Bootstrap 4

18:09
  • Crear un carrusel básico con Bootstrap 405:09
  • Añadir controles a un carrusel con Bootstrap 404:19
  • Añadir indicadores a un carrusel con Bootstrap 404:20
  • Añadir subtítulos a un carrusel con Bootstrap 404:21

Ventanas modales, popovers y tooltips en Bootstrap 4

56:51
  • Crear una ventana modal con Bootstrap 408:29
  • Centrar en la pantalla la ventana modal02:48
  • Crear una ventana modal con el Grid System de Bootstrap 406:32
  • Cambiar el tamaño de las ventanas modales05:31
  • Manejo de los tooltips en Bootstrap 406:36
  • Crear un popovers en Bootstrap 406:44
  • Crear el popover, eventos focus y hover02:29
  • Crear un Scrollspy en Bootstrap 408:07
  • Crear un scrollspy vertical09:35

Utilidades o "utilities"

01:09:17
  • Manejo de los bordes08:21
  • Manejo de las flotaciones y flotaciones responsivas05:49
  • Centrado, ancho y alto de los elementos con Bootstrap 408:13
  • El manejo del espaciado, márgenes y paddings, en Bootstrap 408:36
  • Las clases sticky, fixed-top y fixed-bottom08:01
  • Introducción a las cajas flexibles o flex-box12:18
  • La clase JustifyContent para el eje principal de las cajas flexibles05:58
  • La clase align-item para el eje cruzado de las cajas flexibles05:56
  • Modificar la alineación de los items flexibles con align-self06:05

El Grid System en Bootstrap 4

43:39
  • Introducción al Grid System08:33
  • El Grid System para dispositivos extra pequeños06:23
  • El Grid System para dispositivos pequeños, mayores a 576 pixeles07:44
  • El Grid System para dispositivos medianos, mayores a 768 px06:14
  • El Grid System para dispositivos largos, mayores a 992 px04:09
  • El Grid System para dispositivos extra largos, (xl) mayores a 1200px04:32
  • Anidar columnas en el Grid System de Bootstrap 406:04

Desarrollar un sistema de Ecommerce con Bootstrap (maquetación)

01:07:56
  • Crear una maqueta de un sistema de comercio electrónico con Bootstrap 402:34
  • Crear la barra de navegación principal08:56
  • Crear el Jumbotrón y la estructura del archivo index09:05
  • Crear el contenido en la página inicial08:26
  • Crear la página para mostrar el producto12:53
  • Crear la página de contacto con un formulario10:33
  • Crear las páginas de cursos y libros11:24
  • Juntar todos los archivos para concluir la maqueta de eCommerce ​04:05

Valoraciones

5.0/5
1 Valoraciones
  • 5 ESTRELLAS
    100%
  • 4 ESTRELLAS
    0%
  • 3 ESTRELLAS
    0%
  • 2 ESTRELLAS
    0%
  • 1 ESTRELLAS
    0%
  • Carlos Eduardo Restrepo Carrasquilla
    Carlos Eduardo
      Restrepo Carrasquilla
    Incluir valoración media (en números)

¿Por qué pagar por un curso cuando puedes tenerlos todos?

Prueba la Suscripción ahora
O quiero saber más
Apúntate POR 10€
GRATIS con la Suscripción