Introducción a Bootstrap 5

Una forma rápida y profesional de hacer páginas responsivas

4.75 (64 reviews)
Udemy
platform
Español
language
Other
category
3,801
students
23 hours
content
Aug 2023
last update
$64.99
regular price

What you will learn

Comprenderá los inicios de Bootstrap, 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 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.

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.

Aprenderá a crear y modificar los objetos media, centrándo 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.

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

Description

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.

Al final el curso podrás:

  • Comprender los inicios de Bootstrap 5, 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 5 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 y un componente Affix.

  • 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.

Content

Introducción a Bootstrap 5

Bienvenidos al curso de Introducción a Bootstrap 5
Antes de iniciar
Introducción a Bootstrap 5
Instalar Bootstrap 5 local y en CDN
Crear una página con Bootstrap 5
Introducción al Grid System de Bootstrap 5
Manejo de los encabezados en Bootstrap 5
Manejo de las etiquetas tipográficas en Bootstrap 5
Manejo de las etiquetas para desplegar el código
Clases para el desplegado del texto en Bootstrap 5
Apuntes a la sección 1

Manejo de diferentes etiquetas en Bootstrap

Manejo de tablas en Bootstrap
Manejo de los bordes en Bootstrap
Manejo de imágenes en Bootstrap
Uso de jumbotron
Uso de las alertas
Uso y creación de botones
Grupo de botones en Bootstrap
Grupo de botones verticales y anidados en Bootstrap
El manejo de las insignias en Bootstrap
El manejo de las barras de progreso en Bootstrap
El manejo de los botones de paginación con Bootstrap
Las migas de pan en Bootstrap
Apuntes a la sección 2

El manejo del grupo de listas

Introducción al grupo de listas
El grupo de listas personalizado
Crear cartas, conceptos básicos
Crear cartas con contornos, listas y áreas de navegación
Grupo de cargas en Bootstrap 5
Bases para crear botones dropdown
Otros parámetros con botones dropdown
Apuntes a la sección 3

Divisiones colapsables y acordeones

Divisiones colapsables
Divisiones colapsables múltiples
Crear un acordeon básico con Bootstrap
Crear una zona de navegación con la clase .nav
Parámetros para crear navs
Menú con tabuladores
Tabs y pills con dropdowns
Barras de navegación
Barras de navegación con dropdowns
Barra de navegación con formulario y logo
Barra de navegación con colores, texto y elementos HTML
Barra de navegación: posicionamiento
Apuntes a la sección 4

Manejo de formularios con Bootstrap 5

La clase form-control para un formulario
Formularios: tamaño, desavilitar y otros componentes HTML
Los botones de verificación y de radio
Crear interruptores (switches) y botones de estado-
Elemento <select> con Bootstrap
Botones de rango o deslizadores
Grupos de cajas de entrada
Grupos de cajas de entrada con botones
Grupos de entradas con Select y File Input
Etiquetas flotantes
Formularios: estructura (layout)
Formularios: desactivar
Formularios: grid y gutter en el layout
Formularios: Alineación horizontal
Formularios: Tamaño de las etiquetas y controles
Formularios: Ancho de columnas
Formularios: col-auto
Formularios: in-line
Apuntes a la sección 5

Desarrollar un Carrusel con Bootstrap

Introducción a los carruseles en Bootstrap
Controles para el carrusel
Añadir indicadores al carrusel para cada imagen
Añadir subtítulos a las imágenes del carrusel
Otras opciones para el carrusel: efecto fade, cambiar las letras en negro y tiem
Apuntes a la sección 6

Crear una ventana modal con Bootstrap

Instroducción a la creación de las ventanas modales
Modal: parámetros para las ventanas
Modal: grid system
Modal: formulario
Modal: contenido dinámico con JavaScript
Modificar el tamaño de las ventanas modales
Crear un scrollspy horizontal
Crear un scrollspy vertical
Apuntes a la sección 7

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

Manejar la flotación al inicio y al final del viewport
Manejo del centrado, ancho y alto de los elementos con Bootstrap
Manejo del espaciado entre elementos HTML con Bootstrap
El manejo del espaciado en un display: grid por medio de la clase gap
Utilería para manejar la alineación vertical o vertical-align
Manejo de la posición de elementos fijos: fixed-top y fixed-bottom
Utilería para manejar display: flex con Bootstrap
Utilería para justificar elementos dentro de un visión flex
Alinear elementos en contenedores de caja flexible: Align-items
Cambiar individualmente la alineación de los ítems flexibles: Align-self
Cambia cómo se envuelven (wrap) los artículos flexibles en un contenedor flex
Cambia el orden visual de elementos flexibles específicos
Alinear elementos flexibles en el eje transversal: align-content
Apuntes a la sección 8

Manejo del GridSystem en Bootstrap

Introducción al manejo del GridSystem
Manejo de viewports muy pequeños (xs)
Manejo de viewports pequeños (sm)
Manejo de viewports medianos (md)
Manejo de viewports largos (lg)
Manejo de viewports muy largos (xl) y muy muy largos (xxl)
Anidar renglones con el grid system de Bootstrap
Apuntes a la sección 9

Crear la maqueta de un sistema eCommerce

Plantear las páginas del sistema eCommerce con Bootstrap
Crear nuestro archivo index.html
Crear los contenidos en la página principal
Crear el jumbotron de la página inicial
Crear la página para desplegar el contenido de un producto
Crear la página para el contacto del sistema
Crear las páginas para los cursos y libros

A manera de conclusión

Despedida del curso Introducción a Bootstrap 5
Apuntes del curso Introducción a Bootstrap 5

Screenshots

Introducción a Bootstrap 5 - Screenshot_01Introducción a Bootstrap 5 - Screenshot_02Introducción a Bootstrap 5 - Screenshot_03Introducción a Bootstrap 5 - Screenshot_04

Reviews

Roberto
December 14, 2023
Buenas noches, noté en muchas lecciones que habian clases de bootstrap que se le aplicaban a los elementos del html y no tenían ningun efecto, si las retiraba, no alteraba el resultado. En otras ocaciones (no era siempre) , el instructor no explicaba cual efecto o resultado iba a haber al aplicar una o un conjunto de clases a algun elemento, solo las escribía. Por ejemplo, yo tuve que descubrir por otras fuentes que la clase me-auto tiraba los elementos al extremo derecho del viewport. Me hubiera gustado que se hubiera dado mas lecciones al tema de los grid desde el inicio del curso. Saludos

Coupons

DateDiscountStatus
11/8/2021100% OFF
expired
12/6/2021100% OFF
expired
12/20/202250% OFF
expired

Charts

Price

Introducción a Bootstrap 5 - Price chart

Rating

Introducción a Bootstrap 5 - Ratings chart

Enrollment distribution

Introducción a Bootstrap 5 - Distribution chart

Related Topics

3801926
udemy ID
1/26/2021
course created date
2/28/2021
course indexed date
Bot
course submited by