1-BOOTSTRAP
BOOTSTRAP
Es un Framework (código ya programado) de código abierto disponible para
HTML,CSS y JS desde finales de 2011 que se utiliza para diseñar sitios web
adaptativos con un enfoque centrado en los dispositivos móviles de forma más
rápida y sencilla
INSTALACION
Ingresamos al siguiente enlace [Link]
Descargar
Y damos clic en compiled CSS and JS que es el más utilizado clic en descargar
1-BOOTSTRAP
Una vez descargamos la carpeta la extraemos y guardamos las dos carpetas CSS y JS en nuestro proyecto
Para empezar creamos el archivo HTML con el fin de verificar la comunicación entre el html y el archivo
Bootstrap
1-BOOTSTRAP
Creamos la conexión llamando el archivo en el head
Para obtener el siguiente resultado
De igual manera cuando necesitamos el paquete de JS se llama de la siguiente forma
1-BOOTSTRAP
Otra forma es desde la pagina de Bootstrap copiar en el CDN
LA GRID DE BOOTSTRAP
En el archivo HTML
Teniendo en cuenta las dimensiones y de acuerdo con los documentos las columnas se clasifican de la
siguiente forma.
1-BOOTSTRAP
Agregamos 3 veces la misma información
Teniendo el siguiente resultado
1-BOOTSTRAP
Ahora agregamos las columnas
Para obtener el siguiente resultado
1-BOOTSTRAP
Si modificamos cuando sea menor a 576px se coloca de 12 columnas
Bootstrap también elimina los espacios entre columnas con la siguiente clase
1-BOOTSTRAP
FLEXBOX DENTRO DE BOOTSTRAP
Con un elemento en Linea
1-BOOTSTRAP
Direccion de las cajas y posición.
Creamos los estilos
En el html
1-BOOTSTRAP
Para obtener el siguiente resultado
Le aplicamos flexbox
Las cajas solo ocupan el contenido
Ahora las cajas de derecha a izquierda con reverse
1-BOOTSTRAP
Por columnas
Resultado
1-BOOTSTRAP
También se puede utilizar el reverse
1-BOOTSTRAP
Trabajando Justificados
Centrado
1-BOOTSTRAP
Al final
Ajustable al contenido
1-BOOTSTRAP
Distribuir el espacio de las cajas dejando al lado izquierdo y derecho
Con espacio igual de las cajas
También hay que tener en cuenta los display en flexbox responsive de acuerdo a las medidas
de Bootstrap
1-BOOTSTRAP
Así mismo con las demás variables
1-BOOTSTRAP
Para las siguientes alineaciones con el fin que el archivo no sea tan extenso vamos a utilizar el
siguiente HTML utilizando los mismos estilos y colocando un height de 100px al contenedor
Y en el body
1-BOOTSTRAP
Utilizando la siguiente class de flex-fill distribuye el espacio
1-BOOTSTRAP
Alinear Items al Centro
Alineado abajo
1-BOOTSTRAP
Ocupando todo el contenedor
CREANDO UNA PAGINA
Se crea el siguiente archivo HTML “Si desea crear un archivo CSS no olvide referenciarlos debajo del archivo
de bootstrap”
1-BOOTSTRAP
En el archivo HTML
1-BOOTSTRAP
1-BOOTSTRAP
1-BOOTSTRAP
1-BOOTSTRAP
TABLAS
En el archivo HTML
1-BOOTSTRAP
Ahora agregamos las clases de Bootstrap
También color
1-BOOTSTRAP
Pasar el mouse por encima
Compactar más la tabla
Agregar una referencia a la tabla
Color oscuro en la tabla
1-BOOTSTRAP
Para hacer Responsive la tabla crear un nuevo div y encerrar toda la tabla con la clase table-responsive
Resaltar una celda de la tabla para esto tenemos los siguientes colores
1-BOOTSTRAP
Otras clases
ALERTAS
En el archivo HTML
1-BOOTSTRAP
Otros colores
1-BOOTSTRAP
1-BOOTSTRAP
