¿QUÉ ES BOOTSTRAP?
Bootstrap es un framework de CSS que nos facilita y estandariza
el desarrollo de sitios web.
Esta pensando para que se adapte tanto a las pantallas de equipos de escritorio
como a móviles y tablets.
Bootstrap es desarrollado y mantenido por la empresa Twitter y la ha liberado como
un producto Open Source.
La versión estable actual es la 4.x
El corazón de este framework es un archivo CSS que lo podemos descargar
del sitio http://getbootstrap.com
INDICE
1. CARGAR BOOTSTRAP DE MANERA LOCAL
2. CARGAR BOOTSTRAP DESDE SU CDN (CONTENT DELIVERY NETWORK)
3. SISTEMA DE GRILLAS DE BOOTSTRAP
4. MÚLTIPLES REGLAS A LAS COLUMNAS DE UNA FILA
5. CONTENEDOR: clases contanier y contanier-fluid
6. COLUMNAS DE DISEÑO AUTOMÁTICO
7. ALINEAMIENTO VERTICAL DE COLUMNAS
8. ALINEAMIENTO HORIZONTAL DE COLUMNAS
9. VARIAS LÍNEAS EN UNA MISMA FILA «row»
10. REORDENAR COLUMNAS EN UNA FILA
11. ANIDAMIENTO DE COLUMNAS
12. OFFSET (DESPLAZAMIENTO) DE COLUMNAS
INDICE (TABLAS)
13. BÁSICA
14. BÁSICA CON COLOR OSCURO
15. CON FILAS CON COLORES ALTERNADOS
16. CON BORDE EN CADA CELDA
17. ILUMINAR LA FILA DONDE SE ENCUENTRA EL MOUSE (HOVER)
18. TABLA CONDENSADA
19. DEFINICIÓN DE UN ESTILO A LA CABECERA DE LA TABLA
20. CLASES CONTEXTUALES APLICADAS A FILAS Y COLUMNAS
21. ADAPTABLE O RESPONSIVE
INDICE (FORMULARIOS)
22. CONTROLES INPUT (text, password, file)
23. CONTROL textarea
24. CONTROLES checkbox y radio
25. CONTROL select
26. FORMULARIO HORIZONTAL
27. FORMULARIO EN UNA LINEA
28. TAMAÑO DE LOS CONTROLES DEL FORMULARIO
29. TEXTO DE AYUDA DE UN CONTROL
30. CONTROL Y GRUPO DE CONTROLES HTML DESHABILITADOS
INDICE (BOTONES)
31. ESTILOS
32. TAMAÑO
33. DESACTIVADOS
34. GRUPO DE BOTONES, BARRA DE HERRAMIENTAS, TAMAÑOS
Y ORIENTACIÓN
INDICE (TIPOGRAFÍA)
35. TIPOGRAFÍA
36. LISTAS
37. CITAS DE BLOQUE
38. ABREVIATURAS E INICIALES
39. CÓGIGO Y BLOQUES DE CÓDIGO
40. CLASES PARA ALINEADO, JUSTIFICADO, TRANSFORMACIÓN DE TEXTO
INDICE (IMÁGENES)
41. IMÁGENES (CLASES PARA APLICAR AL ELEMENTO <img>)
- rounded (Esquinas redondeadas en la imagen)
- rounded-circle (Convertir imagen en un circulo)
- img-thumbnail (Define un recuadro)
- img-fluid (Permite escalar correctamente la imagen)
- float-left (Flota la imagen a la izquierda)
- float-right (Flota la imagen a la derecha)
INDICE (COMPONENTES)
42. JUMBOTRON
43. CARD (TARJETAS)
44. ALERT (ALERTAS)
45. MODAL (VENTANAS MODALES)
46. NAVBAR (BARRA DE NAVEGACIÓN)
47. CAROUSEL (CARRUSEL)
48. PAGINATION (PAGINACIÓN)
49. PROGRESS (BARRA DE PROGRESO)
50. DROPDOWN (LISTA DESPLEGABLE)
INDICE (COMPONENTES)
51. COLLAPSE (COLAPSAR)
52. ACCORDION (ACORDEÓN)
53. BREADCRUM (LISTA DE ENLACES JERÁRQUICOS)
54. BADGE (DISTINTIVO O INSIGNIA)
55. NAV (NAVEGACIÓN)
56. SCROLLSPY (ILUMINAR SECCIONES)
57. TOOLTIPS (HERRAMIENTA DE AYUDA VISUAL)
58. POPOVER (HERRAMIENTA DE MENSAJES)
59. ICONS (ICONOS)
ESTRUCTURA HTML5
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS --> <link rel="stylesheet" href="css/bootstrap.min.css">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<script src="js/bootstrap.min.js" ></script>
</body>
</html>
