PDF de programación - Tutorial Bootstrap 4

Tutorial

Bootstrap 4

- 1 -

Índice
Bootstrap 4 Tutorial...................................................................................................................................7
Pruébelo usted mismo Ejemplos...........................................................................................................7
Bootstrap 3 vs. Bootstrap 4.................................................................................................................10
¿Sabías?...............................................................................................................................................10
Bootstrap 4 Comenzar..............................................................................................................................11
¿Qué es Bootstrap?..............................................................................................................................11
Bootstrap 3 vs. Bootstrap 4.................................................................................................................11
¿Por qué usar Bootstrap 4?..................................................................................................................11
Dónde obtener Bootstrap 4?................................................................................................................12
Bootstrap 4 CDN.................................................................................................................................12
Descargando Bootstrap 4.....................................................................................................................13
Cree la primera página web con Bootstrap 4......................................................................................13
Dos páginas básicas de Bootstrap 4....................................................................................................14
Bootstrap 4 Grids.....................................................................................................................................17
Sistema Bootstrap 4 Grid....................................................................................................................17
Clases de cuadrícula............................................................................................................................17
Estructura básica de una cuadrícula Bootstrap 4.................................................................................18
Tres columnas iguales.........................................................................................................................19
Columnas receptivas............................................................................................................................20
Dos columnas desiguales que responden............................................................................................22
Bootstrap 4 Texto / Tipografía.................................................................................................................24
Configuración predeterminada de Bootstrap 4....................................................................................24
<h1> - <h6>.........................................................................................................................................24
h1 Bootstrap heading (2.5rem = 40px)....................................................................................................24
h2 Bootstrap heading (2rem = 32px)...................................................................................................24
Mostrar encabezados...........................................................................................................................25
<small>................................................................................................................................................25
h1 heading secondary text........................................................................................................................26
h2 heading secondary text...................................................................................................................26
<mark>................................................................................................................................................26
<abbr>.................................................................................................................................................26
<blockquote>.......................................................................................................................................27
<dl>.....................................................................................................................................................29
<code>.................................................................................................................................................29
<kbd>..................................................................................................................................................30
<pre>...................................................................................................................................................30
Más clases de tipografía......................................................................................................................30
Bootstrap 4 colores...................................................................................................................................32
Colores de texto...................................................................................................................................32
Colores de fondo.................................................................................................................................33
Bootstrap 4 tablas.....................................................................................................................................34
Bootstrap 4 Tabla básica......................................................................................................................34
Filas rayadas........................................................................................................................................34
Tabla con bordes..................................................................................................................................35
Hover Filas..........................................................................................................................................35

- 2 -

Tabla negra / oscura.............................................................................................................................35
Tabla de rayas oscuras.........................................................................................................................36
Tabla Oscura Hoverable......................................................................................................................36
Clases contextuales..............................................................................................................................37
Colores de cabezal de tabla.................................................................................................................38
Table pequeña......................................................................................................................................38
Tablas responsiva.................................................................................................................................40
Bootstrap 4 Imágenes...............................................................................................................................42
Bootstrap 4 Formas de imagen............................................................................................................42
Esquinas redondeadas..........................................................................................................................42
Circulo.................................................................................................................................................42
Miniatura.............................................................................................................................................43
Alineación de imágenes.......................................................................................................................43
Imágenes responsivas..........................................................................................................................44
Bootstrap 4 Jumbotron.............................................................................................................................45
Bootstrap 4 Jumbotron........................................................................................................................45
Jumbotron de ancho completo.............................................................................................................45
Bootstrap 4 Alerts....................................................................................................................................47
Bootstrap 4 Alerts................................................................................................................................47
Enlaces de alerta..................................................................................................................................48
Alertas de cierre...................................................................................................................................49
Alertas animadas.................................................................................................................................49
Bootstrap 4 botones...............................................................................................................