Scribd
Cargar
100 vistas14 páginas

Bootstrap: Guía de Instalación y Componentes

Bootstrap es un framework CSS de código abierto que proporciona herramientas para el desarrollo frontend como un sistema de cuadrícula responsive, componentes preconstruidos y utilidades para colores, fuentes y más. Se puede agregar a un proyecto a través de un CDN o descargándolo directamente. Incluye componentes como botones, navegación, tarjetas y más que se pueden usar copiando el código HTML. Su sistema de cuadrícula de 12 columnas permite crear diseños responsivos combinando las columnas con diferentes breakpoints.

Cargado por

Luis Rizzo
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
100 vistas14 páginas

Bootstrap: Guía de Instalación y Componentes

Bootstrap es un framework CSS de código abierto que proporciona herramientas para el desarrollo frontend como un sistema de cuadrícula responsive, componentes preconstruidos y utilidades para colores, fuentes y más. Se puede agregar a un proyecto a través de un CDN o descargándolo directamente. Incluye componentes como botones, navegación, tarjetas y más que se pueden usar copiando el código HTML. Su sistema de cuadrícula de 12 columnas permite crear diseños responsivos combinando las columnas con diferentes breakpoints.

Cargado por

Luis Rizzo
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

Bootstrap

Índice 1 Introducción

2 Instalación

3 Componentes

4 Grids
Introducción
a Bootstrap
¿Que es bootstrap?
● Es un FRAMEWORK CSS para el desarrollo de aplicaciones Front-end.

● Es un conjunto de herramientas de código abierto de Front-end.

● Cuenta con un sistema de cuadrícula (GRID) responsive

● Posee gran cantidad de COMPONENTES preconstruidos.

● https://getbootstrap.com/
¿Como lo agrego a mi
proyecto?
● CSS, incorpora el CDN , para ello agrega una etiqueta <link> de tipo stylesheet en el
head

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"


integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">

● JS, ya que muchos componentes de requieren de JavaScript para funcionar,


necesitarás incorporar además una etiqueta script al final de tu etiqueta body para
importar los paquetes necesarios .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>

● También lo puedes descargar e incorporarlo directamente a tu proyecto, pero por el


momento te aconsejamos incorporarlo directamente mediante CDN.
Componentes
● Bootstrap cuenta con una gran
cantidad de componentes pre
construidos los cuales podremos
utilizar de acuerdo a nuestra
necesidad, para hacer uso de
estos, simplemente ve a la página
oficial de Bootstrap, ingresa en la
sección COMPONENTS escoge el
que necesitas, copia el código
fuente del componente escogido e
incorporarlo en tu html en la
posición que lo necesites.
Componentes
●En cada componente :

-Posee asignada una clase correspondientes a esta librería, estas clases


también pueden ser modificadas de acuerdo a tus necesidades, reemplazando
o agregando una nueva clase.

-visita la sección UTILITIES del sitio oficial, en esta sección encontrarás las
diferentes clases que Bootstrap posee preconstruidas para fondos, colores,
fuentes, sombras, display, flex, etc.
GRIDS
Uno de los aspectos más importantes de incorporar
Bootstrap como librerías CSS a nuestro proyecto es su
facilidad de generar páginas responsivas de una manera
muy simples, ya que cuenta con breakpoints.
Preestablecidos y una cuadrícula o grid que se divide en
12 columnas y combinadas con los breakpoints nos permite
ajustar el contenido de nuestro html al tamaño del viewport .
Visita la sección Layout para ampliar tu conocimiento
Breakpoints
Grid Columnas

Filas
Breakpoints
Grid
● Como mencionamos anteriormente puedes combinar los breakpoints con la
cuadrícula en tu modelo para desarrollar una página adaptativa

Establece el breakpoint a utilizar y la cantidad de columnas que ocupará tu


elemento

Si estableces el breakpoint pero no la cantidad la cantidad de columnas estas se


distribuirán de manera equitativa sobre las 12 columnas del grid
¡Muchas gracias!

También podría gustarte