Miércoles , 18 Diciembre 2024
  1. Cursos
  2. Tecnología
  3. Desarrollo Web
  4. Introducción a Bootstrap 5

Introducción a Bootstrap 5

Una forma rápida y profesional de hacer páginas responsivas. Bootstrap 5 es sin duda el framework más utilizado para hacer páginas web responsivas de manera rápida y profesional en el mundo.

Introducción a Bootstrap 5
Comparte este curso
Carrera de Desarrollador Front-end
Este curso forma parte de la carrera

Desarrollador Front-end

Haz de tu sueño tu profesión y empieza una Carrera desde 9€/mes

Acceder

Descripción del curso

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

Contenido del curso

Introducción a Bootstrap 5

01:12:24
  • Introducción a Bootstrap 504:45AVANCE
  • Instalar Bootstrap 5 local y en CDN10:57
  • Crear una página con Bootstrap 507:30
  • Introducción al Grid System de Bootstrap 510:31
  • Manejo de los encabezados en Bootstrap 506:48
  • Manejo de las etiquetas tipográficas en Bootstrap 504:36
  • Manejo de las etiquetas para desplegar el código05:12
  • Clases para el desplegado del texto en Bootstrap 506:35
  • Contenedores responsivos08:20
  • Clases para manejar Backgrounds07:10

Manejo de diferentes etiquetas en Bootstrap

01:40:54
  • Manejo de tablas en Bootstrap07:18
  • Manejo de los bordes en Bootstrap06:10
  • Manejo de imágenes en Bootstrap06:19
  • Uso de jumbotron08:57
  • Uso de las alertas06:36
  • Uso y creación de botones06:45
  • Grupo de botones en Bootstrap11:58
  • Grupo de botones verticales y anidados en Bootstrap09:19
  • El manejo de las insignias en Bootstrap08:12
  • El manejo de las barras de progreso en Bootstrap08:53
  • El manejo de los botones de paginación con Bootstrap09:39
  • Las migas de pan en Bootstrap06:46
  • El manejo de la etiqueta <figure>04:02AVANCE

El manejo del grupo de listas

01:08:37
  • Introducción al grupo de listas09:15
  • El grupo de listas personalizado09:12
  • Crear cartas, conceptos básicos12:34
  • Crear cartas con contornos, listas y áreas de navegación10:05
  • Grupo de cargas en Bootstrap 505:44
  • Bases para crear botones dropdown11:13
  • Otros parámetros con botones dropdown10:34

Divisiones colapsables y acordeones

01:45:40
  • Divisiones colapsables09:32
  • Divisiones colapsables múltiples08:07
  • Crear un acordeon básico con Bootstrap11:38
  • Crear una zona de navegación con la clase .nav08:32
  • Parámetros para crear navs05:45
  • Menú con tabuladores09:04
  • Tabs y pills con dropdowns08:11
  • Barras de navegación12:38
  • Barras de navegación con dropdowns06:12
  • Barra de navegación con formulario y logo06:50
  • Barra de navegación con colores, texto y elementos HTML09:55
  • Barra de navegación: posicionamiento09:16

Manejo de formularios con Bootstrap 5

02:50:19
  • La clase form-control para un formulario06:03
  • Formularios: tamaño, desavilitar y otros componentes HTML09:12
  • Los botones de verificación y de radio06:48
  • Crear interruptores (switches) y botones de estado11:36
  • Elemento <select> con Bootstrap07:33
  • Botones de rango o deslizadores07:28
  • Grupos de cajas de entrada12:06
  • Grupos de cajas de entrada con botones10:51
  • Grupos de entradas con Select y File Input12:00
  • Etiquetas flotantes09:08
  • Formularios: estructura (layout)12:39
  • Formularios: desactivar07:41
  • Formularios: grid y gutter en el layout11:16
  • Formularios: Alineación horizontal12:56
  • Formularios: Tamaño de las etiquetas y controles08:08
  • Formularios: Ancho de columnas08:15
  • Formularios: col-auto07:45
  • Formularios: in-line08:54

Desarrollar un Carrusel con Bootstrap

29:28
  • Introducción a los carruseles en Bootstrap06:53
  • Controles para el carrusel06:03
  • Añadir indicadores al carrusel para cada imagen05:32
  • Añadir subtítulos a las imágenes del carrusel06:15
  • Otras opciones para el carrusel: efecto fade, cambiar las letras en negro y tiempo04:45

Crear una ventana modal con Bootstrap

01:00:58
  • Instroducción a la creación de las ventanas modales07:55
  • Modal: parámetros para las ventanas05:31
  • Modal: grid system08:27
  • Modal: formulario07:56
  • Modal: contenido dinámico con JavaScript10:59
  • Modificar el tamaño de las ventanas modales07:39
  • Crear un scrollspy horizontal07:28
  • Crear un scrollspy vertical05:03

Utilerías para el desarrollo de páginas web con Bootstrap

01:49:41
  • Manejar la flotación al inicio y al final del viewport08:20
  • Manejo del centrado, ancho y alto de los elementos con Bootstrap06:27
  • Manejo del espaciado entre elementos HTML con Bootstrap10:11
  • El manejo del espaciado en un display: grid por medio de la clase gap06:00
  • Utilería para manejar la alineación vertical o vertical-align04:06
  • Manejo de la posición de elementos fijos: fixed-top y fixed-bottom08:16
  • Utilería para manejar display: flex con Bootstrap08:38
  • Utilería para justificar elementos dentro de un visión flex08:32
  • Alinear elementos en contenedores de caja flexible: Align-items05:39
  • Cambiar individualmente la alineación de los ítems flexibles: Align-self08:46
  • Cambia cómo se envuelven (wrap) los artículos flexibles en un contenedor flex06:36
  • Cambia el orden visual de elementos flexibles específicos04:45
  • Alinear elementos flexibles en el eje transversal: align-content11:00
  • El manejo del display08:30
  • Sombras nada más03:55

Manejo del GridSystem en Bootstrap

02:04:18
  • Introducción al manejo del GridSystem12:00
  • Manejo de viewports muy pequeños (xs)10:38
  • Manejo de viewports pequeños (sm)07:45
  • Manejo de viewports medianos (md)09:39
  • Manejo de viewports largos (lg)09:55
  • Manejo de viewports muy largos (xl) y muy muy largos (xxl)06:18
  • Anidar renglones con el grid system de Bootstrap08:18
  • La clase .row-cols- *08:35
  • Manejo de columnas en el grid system10:08
  • Column wrapping y Column breaks07:57
  • Ordenar las columnas en el Grid System06:09
  • Desplazamientos u Offset de columnas11:25
  • Una columna independiente05:09
  • El manejo de los gutters10:22

Clases de tipo Helpers (auxiliares)

28:15
  • La clase Clearfix para matar la flotación04:22
  • Manejar Links de colores03:20
  • Las clases de Ratios05:47
  • Posición de elementos05:20
  • Links extendidos04:50
  • Truncar los textos04:36

Crear la maqueta de un sistema eCommerce

50:24
  • Plantear las páginas del sistema eCommerce con Bootstrap04:40
  • Crear nuestro archivo index.html05:32
  • Crear el jumbotron de la página inicial06:42
  • Crear los contenidos en la página principal06:27
  • Crear la página para desplegar el contenido de un producto09:01
  • Crear la página para el contacto del sistema08:16
  • Crear las páginas para los cursos y libros07:10
  • A manera de conclusión02:36

Valoraciones

4.8/5
6 Valoraciones
  • 5 ESTRELLAS
    83%
  • 4 ESTRELLAS
    17%
  • 3 ESTRELLAS
    0%
  • 2 ESTRELLAS
    0%
  • 1 ESTRELLAS
    0%
  • Edison Zapata
    Edison
      Zapata
    Incluir valoración media (en números)

  • Erika Julieth Blanco Florez
    Erika Julieth
      Blanco Florez
    Incluir valoración media (en números)

  • Leidy Andrea Muñoz Hios
    Leidy Andrea
      Muñoz Hios
    Incluir valoración media (en números)

  • Jhovanny Vivas
    Jhovanny
      Vivas
    Incluir valoración media (en números)

    Detalla minuciosamente los aspectos de bootstrap

  • Esteban Eduardo Perez Zorro
    Esteban Eduardo
      Perez Zorro
    Incluir valoración media (en números)

  • William Danilo Rodríguez Rojas
    William Danilo
      Rodríguez Rojas
    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 9€
GRATIS con la Suscripción