CURSOS de Bootstrap

Mostrando del 1 al 10 de 17 registros
<<>>
Imágen de perfil

.videoCurso Intensivo de Twitter Bootstrap


Bootstrap

Publicado el 28 de Julio del 2019 por Administrador
235 visualizaciones desde el 28 de Julio del 2019
Curso intensivo dedicado al toolkit desarrollado por Twitter para la creación de diseños web.

Índice de vídeos:
01.- Preparándose.
02.- Convertir enlaces en botones.
03.- Sistema de diseño.
04.- Scaffolding.
05.- Uso de la clase Thumbnails.
06.- Crear grids.
07.- El navbar
08.- Uso de Javascript para hacer el diseño Responsive.
09.- Convertir proyecto de Bootstrap 2 a Bootstrap 3
10.- Guía de novedades en Bootstrap 3.
11.- Crear pestañas.
12.- Crear un slideshow.

Screenshot_20190728_224922
Imágen de perfil

.pdfCurso de Maquetación CSS y Bootstrap 3


CSS

,

Bootstrap

Publicado el 7 de Mayo del 2019 por Administrador
1.225 visualizaciones desde el 7 de Mayo del 2019
Curso de Maquetación con Bootstrap 3.

Índice de Contenidos:
1. Herramientas a utilizar en el curso
2. Qué es CSS
2.1. Para qué sirve
2.2. Cómo funciona
2.3. Aplicar las hojas de estilo a un documento HTML
2.3.1. Hoja de estilos externa
2.3.2. Elemento STYLE
2.3.1. Atributo STYLE
3. CSS2 Help Sheet
4. CSS3 Help Sheet
5. Selectores
5.1. Selectores universales
5.2. Selectores de atributo
5.2.1. Selección por el valor de un atributo
5.2.2. Selección basándose en una sub-cadena dentro del valor de un atributo
5.2.3. Selección basándose en elementos delimitados dentro del valor de un atributo
5.3. Selector de secundarios (hijos)
5.4. Selector de descendientes
5.5. Selector de hermano adjacente
5.6. Selectores de hermano general
6. Pseudo-clases
6.1. Pseudoclases de enlace y acción de usuario
6.1.1. link
6.1.2. visited
6.1.3. focus
6.1.4. hover
6.1.5. active
6.2. Pseudoclase de negación (not)
6.3. Pseudoclase de idioma (lang)
6.4. Pseudoclase de destino (target)
6.5. Pseudoclases de entrada (valid, invalid)
6.6. Pseudoclases de estado (enabled y disabled)
6.7. Pseudoclases estucturales
6.7.1. root
6.7.2. nth-child(n) y nth-last-child(n)
6.7.3. nth-of-type(n) y nth-last-of-type(n)
6.7.4. first-child y last-child
6.7.5. first-of-type y last-of-type
6.7.6. only-child
6.7.7. only-of-type
6.7.8. empty
6.8. Índice de pseudo-clases estándar
7. Pseudoelementos
7.1. first-letter
7.2. first-line
7.3. Contenido generado usando before y after
7.4. La función counter
7.4.1. Configuración del contador (counter-reset)
7.4.2. Incrementar el contador (counter-increment)
7.4.3. Mostrando el contador
7.4.4. El uso de dos o más contadores
7.4.5. El uso de contadores anidados (counters)
7.4.6. Dando estilo a los contadores
7.5. Sintaxis con doble dos puntos de CSS3 para pseudoelementos
8. Hacks de CSS
8.1. Comentarios condicionales
8.2. Hacks de Internet Explorer por Versón
8.3. Hack de Chrome
8.4. Hack para Firefox
9. Algunos consejos para principiantes
9.1. Utilizar una página de reinicialización de estilos
9.2. Comprender la diferencia entre id y class
9.3. Añadir comentarios al CSS
9.4. enternder la potencia de !important
9.5. Evitar el uso de tablas
9.6. Esconder el texto detrás de una imagen
9.7. Utilizar código optimizado (shorthand)
10. HTML5Reset v1.6.1
11. Normalize v4.1.1
12. Qué es Bootstrap
13. Instalación de Bootstrap 3
14. Introducción a Bootstrap
14.1. Inicialización y definición de páginas en Bootstrap
14.1.1. Requerimiento del doctype de HTML5
14.1.2. El metadato viewport
14.2. Sistema de rejilla
14.2.1. Media queries
14.2.2. Características de cada rejilla
14.3. Tipografías y enlaces
14.3.1. Titulares
14.3.2. Texto
14.3.3. Texto destacado
14.3.4. Clases CSS para alinear texto
14.3.5. Clases CSS para indicar el tipo de contenido
14.3.6. Direcciones
14.3.7. Blockquotes
14.3.8. Listas de definición
14.4. Normalización de estilos
14.5. Ejemplos
14.5.1. Diseño fijo (Fixed Layout)
14.5.1. Diseño fluido (Fluid Layout)
14.5.2. Autoajustado de columnas
14.5.3. Reestablecimiento de columnas
14.5.4. Desplazamiento de columnas
14.5.5. Anidación de columnas
14.5.6. Ordenación de columnas
15. Componentes
15.1. Iconos (glyphicons)
15.1.1. Cómo utilizar los iconos
15.2. Menús desplegables
15.2.1. Deshabilitando elementos del menú
15.2.2. Títulos de sección
15.3. Grupos de botones
15.3.1. Ejemplo básico
15.3.2. Cambiando el tamaño de los botones
15.3.3. Anidación de grupos de botones
15.3.4. Menús verticales
15.3.5. Botones justificados
15.4. Botones desplegables
15.4.1. Ejemplo básico
15.4.2. Botones desplegables de doble acción
15.4.3. Cambiar el tamaño de los botones
15.4.4. Botones desplegables invertidos
15.5. Imágenes responsive (IMG)
15.6. Navegación por pestañas
15.7. Navegación por botones
15.8. Barras de navebación (navbar)
15.9. Mensajes de alerta
15.9.1. Ejemplo básico
15.9.2. Mensajes de alerta con botón de cerrado
15.9.3. Alertas con enlace
15.10. Barras de progreso
15.10.1. Ejemplo básico
15.10.2. Barras de progreso cebreadas
15.10.3. Barras de progreso animadas
15.10.4. Barras de progreso segmentadas
15.11. Paneles
15.11.1. Ejemplo básico
15.11.2. Paneles con cabecera o título
15.11.3. Paneles con footer o pié
15.11.4. Paneles contextuales
15.11.5. Paneles con listas
15.12. Presentación de diapositivas (Carousel)
15.13. Presentaciones de tipo Jumbotron
15.14. Migas de pan (Breadcrumbs)
15.15. Inclusión de videos (responsive-embed)
15.16. Tablas
15.16.1. Tabla básica
15.16.2. Tabla rayada (table-striped)
15.16.3. Tablas con bordes (table-bordered)
15.16.4. Tabla con efecto hover (table-hover)
15.16.5. Tablas compactas (table-condensed)
15.16.6. Tablas contextuales
15.16.7. Tablas Responsive
15.17. Ejemplo “Hola mundo”
16. Plugins bootstrap interesantes
16.1. Bootstrap Lightbox
16.2. Bootbox
16.3. Fuel UX
16.4. Jasny
16.5. Bootstrap Image Gallery
16.6. Bootstrap Modal
16.7. Bootstrap Growl
16.8. Bootstrap Notify
16.9. Bootstrap Form Helpers
16.10. Bootstrap Tags
16.11. Bootstrap Switch
16.12. 13. Bootstrap Markdown
16.13. 14. Bootstrap Maxlength
16.14. 15. Bootstrap Select
17. Bootstrap Help Sheet
18. Referencias

En formato pdf. Contiene 90 páginas.

Screenshot_20190507_222806
Imágen de perfil

.videoCurso GRATIS de PHP, Codeigniter, JQuery, Bootstrap


PHP

,

JQuery

,

Bootstrap

Publicado el 22 de Abril del 2019 por Administrador
1.481 visualizaciones desde el 22 de Abril del 2019
Tutorial de CodeIgniter en vídeos:
1.- Introducción
2.- Insert
3.- login, session, update
4.- delete
5.- Bootstrap
6.- AJAX JQuery combos y tablas
7.- Recorrer una tabla JQuery
8.- Crear controles desde bd
9.- Subir y descargar imagenes, archivos
10.- Envio de email con imagen linkeado
11.- Crear y descargar PDF
12.- exportar EXCEL
13.- Chartjs ( Line & Bar )
14.- pasar parametros a un modal
15.- DataTables, paginación, etc
16.- Protege tus archivos de proyecto
17.- Seguridad: Evitar ingreso al sistema por url
18.- Busqueda en tiempo real - KeyUp
19.- CAPTCHA
20.- Subir proyecto a la nube
21.- reCAPTCHA Google - No soy un robot
22.- Autocomplete
23.- FullCalendar, listar Eventos desde BD - Part 1
24.- FullCalendar, Editar Eventos - Part 2
25.- FullCalendar, Cambiar tamaño del evento - Part 3
26.- FullCalendar, Eliminar Eventos - Part 4
27.- FullCalendar, Editar en PopUp Modal - Part 5
28.- Set Time Zone
29.- Server Side Processing / DataTables

Screenshot_20190422_224808
Imágen de perfil

.videoCurso de MDBootstrap Material Design for Bootstrap 4


Bootstrap

Publicado el 11 de Febrero del 2019 por Administrador
1.082 visualizaciones desde el 11 de Febrero del 2019
Vamos a conocer como trabajar con Material Design y Bootstrap 4 utilizando un framework muy potente llamado MDBootstrap 4. Aquí aprenderás bases paso a paso y desde cero para desarrollar páginas web responsives utilizando toda la magia de Bootstrap en su última versión. Espero que disfrutes de cada uno de estos videos tutoriales.
Screenshot_20190211_232659
Imágen de perfil

.videoGuía Bootstrap en vídeos


Bootstrap

Publicado el 15 de Octubre del 2018 por Administrador
1.031 visualizaciones desde el 15 de Octubre del 2018
Curso de Bootstrap 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 Dinamicas
33.- Como hacer un slideshow con Bootstrap
Imágen de perfil

.videoCurso Completo de Bootstrap 4


Bootstrap

,

CSS

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 10 de Octubre del 2018 por Administrador
1.155 visualizaciones desde el 10 de Octubre del 2018
Curso completo de Bootstrap 4 en vídeo. Duración 4h 40m
Imágen de perfil

internetLibro de Bootstrap 3


Bootstrap

Publicado el 2 de Octubre del 2018 por Administrador
969 visualizaciones desde el 2 de Octubre del 2018
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
Imágen de perfil

internetTutorial de Bootstrap 4 Ya


Bootstrap

Publicado el 13 de Abril del 2018 por Administrador
2.112 visualizaciones desde el 13 de Abril del 2018
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
Imágen de perfil

.pdfBootstrap responsive web development


Bootstrap

Publicado el 19 de Marzo del 2018 por Administrador
1.242 visualizaciones desde el 19 de Marzo del 2018
Guía de introducción a Bootstrap.
En formato pdf. Contiene 35 páginas.
Imágen de perfil

.videoCurso de Bootstrap 4! Tutorial en Español


Bootstrap

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 22 de Febrero del 2018 por Administrador
5.340 visualizaciones desde el 22 de Febrero del 2018
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
Anterior12Siguiente
Revisar política de publicidad