Scribd
Cargar
35 vistas32 páginas

1 Bootstrap

Este documento explica cómo instalar y utilizar Bootstrap, un framework de código abierto para diseñar sitios web adaptativos de forma rápida. Describe la instalación de Bootstrap, el uso de la grilla, flexbox, la creación de páginas, tablas y alertas.

Cargado por

Kevin Jhoan Sanches Villamil
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
35 vistas32 páginas

1 Bootstrap

Este documento explica cómo instalar y utilizar Bootstrap, un framework de código abierto para diseñar sitios web adaptativos de forma rápida. Describe la instalación de Bootstrap, el uso de la grilla, flexbox, la creación de páginas, tablas y alertas.

Cargado por

Kevin Jhoan Sanches Villamil
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 32

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 https://getbootstrap.com/

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

También podría gustarte