CURSOS de Bootstrap

El diseño de webs tipo "responsive" permite crear webs adaptables a diferentes tamaños de pantalla, desde webs para pantallas tamaño escritorio, pasando por tablets, hasta webs para móviles. Este tipo de diseño se basa en crear un único código y utilizar reglas y estilos CSS para adaptar los contenidos a los diferentes tamaños de pantalla.

Los contenidos principales del libro son:
1.- Introducción
Frameworks responsive
Funcionamiento del diseño adaptable
Probando el responsive
2.- Página básica
3.- Sistema de rejilla
Forzar el cambio de fila
Anidamiento de columnas
Márgenes o espaciado entre columnas
Ordenación de columnas
4.- Utilidades responsive
5.- Media Queries
6.- Componentes Responsive
Botones
Desplegables
Grupos de botones
Formularios
Navegación
Barra de navegación
Tablas
7.- Ejercicios
8.- Bibliografía

El objetivo de este tutorial es conocer y practicar el framework Bootstrap 4. Se presentan primero los conceptos básicos y ejercicios para probarlos y modificarlos.
Se requiere tener conocimientos previos de HTML y CSS.

Índice de Contenidos:
1 - ¿Qué es Bootstrap?
2 - Emplear un CDN para cargar Bootstrap 4
3 - Sistema de grillas de Bootstrap 4
4 - Múltiples reglas a las columnas de una fila
5 - Contenedor: clases container y containter-fluid
6 - Columnas de diseño automático
7 - Alineamiento vertical de las columnas
8 - Alineamiento horizontal de las columnas
9 - Varias líneas en una misma fila "row"
10 - Reordenar las columnas en una fila
11 - Anidamiento de columnas
12 - Offset (desplazamiento) de columnas
13 - table : básica
14 - table : básica con color oscuro
15 - table : con filas con colores alternados
16 - table : con borde en cada celda.
17 - table : iluminar la fila donde se encuentra el mouse (hover)
18 - table : tabla condensada
19 - table: definición de un estilo a la cabecera de la tabla
20 - table : clases contextuales aplicadas a filas y celdas
21 - table : adaptable o responsive
22 - form : controles input (text, password, file)
23 - form : control textarea
24 - form : controles checkbox y radio
25 - form : control select
26 - form : formulario horizontal
27 - form : formulario en una línea
28 - form : tamaño de los controles de formulario
29 - form : texto de ayuda de un control
30 - form : control y grupo de controles HTML deshabilitados
31 - button : estilos
32 - button : tamaño
33 - button : desactivo
34 - button : grupo de botones, barra de herramientas, tamaños y orientación
35 - Tipografía
36 - Tipografía : listas
37 - Tipografía : citas de bloque
38 - Tipografía : abreviaturas e iniciales
39 - Tipografía : Código y bloques de código
40 - Tipografía : Clases para el alineado, justificado, transformación de texto etc.
41 - Imágenes
42 - Componente : jumbotron
43 - Componente : card (básica)
44 - Componente : card (con colores contextuales para fondo, borde y texto)
45 - Componente : card (con imágenes)
46 - Componente : card (con cabecera y/o pie de tarjeta)
47 - Componente : card (pestañas)
48 - Componente : card (grupo de tarjetas)
49 - Componente : alert
50 - Componente : modal (cuadro de diálogo modal básico)
51 - Componente : modal (tamaño y centrado del diálogo)
52 - Componente : modal (grillas dentro de diálogos)
53 - Componente : navbar (barra de navegación simple)
54 - Componente : navbar (contraer menú de navegación y mostrar botón de hamburguesa)
55 - Componente : carousel
56 - Componente : pagination
57 - Componente : progress
58 - Componente : dropdown (lista desplegable)
59 - Componente : collapse
60 - Componente : accordion
61 - Componente : breadcrumb
62 - Componente : badge
63 - Componente : nav (básica)
64 - Componente : nav (vista de pestañas o pastillas)
65 - Componente : nav (con elementos de tipo dropdown)
66 - Componente : nav (con contenido para cada opción)
67 - Componente : Scrollspy
68 - Componente : Tooltips
69 - Componente : Popover

Guía de introducción a Bootstrap.
En formato pdf. Contiene 35 páginas.

Bienvenidos al curso de Bootstrap 4, aquí aprenderemos a crear sitios web responsives con el Framework más popular de internet. Este tutorial está completo y trata paso a paso y desde cero, el cómo utilizar la nueva versión de Bootstrap 4 (2017).

Puedes seguir este curso de varias formas pero aquí abajo tienes la lista de reproducción con todos los videos, además cuentas con el temario y algunas prácticas para poner en prueba tus conocimientos.

Temario:
1 Introducción al curso – Qué es Bootstrap 4
2 ¿Cómo descargar e instalar Bootstrap?
3 Container y Grid System
4 Sistema de Columnas sm, md, lg y xl
5 Práctica web Responsive
6 Tipos de alineamiento con Flexbox
7 Práctica (1) Armar sitio web
8 Espaciados – Estilos de Texto – Colores – Fondos
9 Navbar (parte1)
10 Navbar (parte 2)
11 Cards
12 Jumbotron y bordes
13 Formularios (parte 1)
14 Formularios (parte 2)
15 Formularios (parte 3) Enviar correos con PHP
16 Carousel – Cómo hacer un Slideshow
17 Todos los componentes en un solo lugar!
18 Copiando plantillas de ejemplo
19 Modal – Crea un Popup
20 Scrollspy

Talleres (práctica lo aprendido):
Taller #1 – ¿Cómo hacer un sitio web con bootstrap 4?
Taller #2 – Crear Menu (navbar) con logo al centro y links a los lados
Taller #3 – Efecto Scroll: Cambiando el color del menú (NavBar) con Bootstrap 4
Taller #4 – Cards con doble imagen (tarjeta de presentación) con Bootstrap 4!
Taller #5 – Agregar Captcha a nuestro formulario de contacto

Extras
Crear formulario de suscripción y cómo agregarlo a mi sitio web Bootstrap 4!- Mailrelay

Completo manual de Bootstrap.
En formato pdf. Contiene 193 páginas.

Introducción a Bootstrap en vídeos:
1.- Introducción
2.- Cómo se usa
3.- Grid para maquetar
4.- Columnas anidadas
5.- Responsive design
6.- Ocultar elementos segun dispositivo
7.- Zen Coding en sublime text
8.- Tablas
9.- Formularios
10.- Botones
11.- Imágenes
12.- Íconos
13.- Íconos vectoriales con awesome font
14.- Grupos de botones
15.- Listas nav
16.- Listas nav verticales
17.- Menu navbar
18.- Breadcrumb
19.- Paginación
20.- CSS labels y badged
21.- Thumbnails
22.- Notificaciones
23.- Barras de progreso
24.- Listados de registros
25.- Utilidades generales
26.- Modal
27.- Modal JS
28.- Tabs
29.- Tooltips
30.- Popover
31.- Popover eventos JS
32.- Buttons radio y checkbox
33.- Colapsable o acordeon
34.- Cassusel o slide
35.- Carrusel o slide JS
36.- Código fuente y estructura de directorios
37.- Nodejs y less
38.- Variables en less
39.- Mixin en less
40.- Reglas anidadas en less
41.- Import
42.- Flujo de trabajo con bootstrap-less
43.- Compular desde Sublime text
44.- Entorno de trabajo con mis estilos
45.- Personalizar Bootstrap
46.- Tipo de fuente de Google Font
47.- Cambio de apariencia del menu
48.- Escribiendo mi propio CSS
49.- Degradados con Less
50.- Lanfding page
51.- Iconos vectoriales con less
52.- Esquemas de colores con less dinamicos
53.- Degradados radiales
54.- Imágenes de fondo
55.- Links de ayuda!
56.- Nuevas caracteristicas a Bootstrap 3

Curso de Bootstrap 3 en vídeos:
1.- Introducción e Instalación
2.- La Grid, entendiendo el sistema de rejillas
3.- Tipografía y textos
4.- Tablas
5.- Formularios
6.- Botones
7.- Imágenes
8.- Helper Classes / Clases Auxiliares
9.- Responsive utilities / Herramientas responsivas
10.- Iconos / Glyphicons
11.- Dropdown
12.- Grupos de Botones
13.- Dropdown Buttons
14.- Grupos de Input / Input Groups
15.- Navs / Navegaciones
16.- Barras de navegacion / Navbars
17.- Breadcrumbs / Migas de pan
18.- Paginación / Pager
19.- Labels / Etiquetas
20.- Badges / Insignias
21.- Jumbotron
22.- Encabezado de pagina / Page Header
23.- Miniaturas / Thumbnails
24.- Mensajes de Alerta
25.- Barras de progreso / Progress Bar
26.- Grupos de listas/ List Groups
27.- Objeto Media / Media Object
28.- Paneles / Panels
29.- Ventanas emergentes / Modals
30.- Componente Scrollspy
31.- Componente Collapse / Acordeón
32.- Tabs Dinámicas

El objetivo de este tutorial es conocer y practicar el framework Bootstrap. Se presentan primero los conceptos básicos y ejercicios para probarlos y modificarlos. Se requiere tener conocimientos previos de HTML y CSS.

En esta serie de vídeos Jesús Conde nos explica lo más importante sobre como programar con Bootstrap.
Índice de vídeos:
1. Preparándose.
2. Convertir enlaces en botones.
3. Sistema de diseño.
4. Scaffolding.
5. Uso de la clase Thumbnails.
6. Crear grids.
7. El navbar.
8. Uso de Javascript para hacer el diseño Responsive.
9. Convertir proyecto de Bootstrap 2 a Bootstrap 3.
10. Guía de novedades en Bootstrap 3.
11. Crear pestañas.
12. Crear un slideshow.

Completo tutorial de Bootstrap.
Contenidos:
1. Tutorial
2. Environment Setup
3. Grid System
4. CSS Overview
5. Typography
6. Code
7. Tables
8. Forms
9. Buttons
10. Images
11. Helper Classes
12. Responsive Utilities
13. Glyphicons
14. Dropdowns
15. Button Groups
16. Button Dropdowns
17. Input Groups
18. Navigation Elements
19. Navbar
20. Breadcrumb
21. Pagination
22. Labels
23. Badges
24. Jumpotron
25. Page Header
26. Thumbnails ..
27. Alerts
28. Progress Bars
29. Media Object
30. List Group ....
31. Panels
32. Wells
33. Plugins Overview
34. Transition Plugin
35. Modal Plugin
36.Examples
En formato pdf. Contiene 193 páginas.