Tutorial de Bootstrap 4 Ya
Bootstrap
Publicado el 13 de Abril del 2018 por Administrador
3.434 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
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
56 visualizaciones durante los últimos 90 días