Bootstrap ¿Qué es, cómo y cuando utilizar?
Cuando creamos un site, necesitamos tomar diversas decisiones, cómo cuál banco de datos, lenguaje y framework vamos a utilizar, o dónde haremos el deploy de la aplicación.
Pero, un punto muy importante es lograr dejar nuestra página con un aspecto agradable, personalizar colores, fuentes, margen y asi por adelante. Para eso, necesitamos utilizar por medio de inumeras clases de CSS, lo que no es una tarea fácil para todos que lo desarrollan.
Pensando en esto, vamos a ver una forma de estructurar y estilizar sus aplicaciones con el Bootstrap.
Bootstrap es un framework front-end que fornece estructuras de CSS para la creación de sitios web y aplicaciones responsivas de forma rápida y simple. Además, puede lidiar con sitios web de desktop y páginas de dispositibos mobiles de la misma forma.
Originalmente, Bootstrap fue desarrollado para Twitter por un grupo de desarrolladores liderados por Mark Otto y Jacob Thornton. Tornandose una de las estructuras de front-end y proyectos de código abierto más populares del mundo.
Antes de ser una estructura de código fuente abierto, Bootstrap era conocido como Twitter Blueprint. Después de algunos meses de desarollo, Twitter realizó su primer Hack Week: el proyecto ganó una gran popularidad cuando desarrolladores de todos los niveles de habilidad comenzaron a utilizar el framework sin ninguna orientación externa. Tras el evento, ello sirvió como guía de estilo para el desarrollo de herramientas internas en la empresa por más de un año antes de su lanzamiento tornarse publico.
Generalmente, Bootstrap es distribuido usando el sitio oficial y npm. Tú también puedes crear tu propia distribución utilizando el código fuente, o por medio de la propia red de distribución de contenido conocida por CDN del Bootstrap. Un CDN permite que un sitio web recupere archivos publicos utilizados con frequencia a partir servidores distribuidos globalmente.
En la página de download oficial encontrarás, con detalles, todas las formas de instalar Bootstrap.
Nosotros vamos a aprender la instalación via CDN.
Para alcanzar el mismo resultado de este archivo en su instalación, crear una carpeta y un archivo llamado index.html.
En el archivo, incluir el siguiente código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo Bootstrap</title>
</head>
<body>
<h1>Bootstrap es muy guay</h1>
</body>
</html>Al abrir la página con el navegador, tenemos el siguiente resultado:
Para incluir Bootstrap, vamos a acceder en este link e incluir el seguiente código en la tag headde la página:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>Nuestro resultado será:
Verifique el código completo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<title>Ejemplo Bootstrap</title>
</head>
<body>
<h1> Bootstrap es muy guay</h1>
</body>
</html>En la documentación, vas a encontrar una serie de componentes como referencia para sus propias creaciones, como alertas, botones, menu, [formularios]() , entre muchos otros.
En Bootstrap, hay una amplia gama de clases para alinear el margen de respuesta y el espaciamiento. Observa el ejemplo abajo utilizando la clase mt-5 para alterar el margen superior del titulo de la página:
<div class="mt-5">
<h1> Bootstrap es muy guay</h1>
</div>Nuestro resultado será:
Observa la lista de la clase que podemos utilizar.
m-> define el margen
p-> define el padding
t-> define el margen superior o padding superior
b-> define el margen inferior o padding inferior
l-> define el margen izquierdo o padding izquierdo
r-> define el margen derecho o padding derecho
x-> define tanto padding izquierdo como padding derecho o el margen izquierdo y el margen derecho
y-> define tanto padding superior y padding inferior o el margen superior y el margen inferior
Aquí puedes encontrar más detalles sobre el espacio.
Observa el siguiente layout:
En él hay un menú con 3 links: Navbar, Home y Quién somos. Luego abajo, vemos un titulo que dice Bootstrap es muy guay y 2 inputs, uno para el email y otro con un área de texto para escribir lo que más te gustó en Bootstrap.
Aquí vas a encontrar el layout con el código completo.
En este archivo, vimos que Bootstrap es una estructura del código abierto HTML, CSS y JavaScript (inicialmente creada por Twitter) que tú puedes utilizar como base para crear sitios web o aplicativos de la web.
Traducido para Alura Latam, por: Ingrid Cristina da Silva
Cursos de Programación, Front End, Data Science, Innovación y Gestión.
Luri es nuestra inteligencia artificial que resuelve dudas, da ejemplos prácticos y ayuda a profundizar aún más durante las clases. Puedes conversar con Luri hasta 100 mensajes por semana
Paga en moneda local en los siguientes países
Cursos de Programación, Front End, Data Science, Innovación y Gestión.
Luri es nuestra inteligencia artificial que resuelve dudas, da ejemplos prácticos y ayuda a profundizar aún más durante las clases. Puedes conversar con Luri hasta 100 mensajes por semana
Paga en moneda local en los siguientes países
Puedes realizar el pago de tus planes en moneda local en los siguientes países:
| País | | | | | | | |
|---|---|---|---|---|---|---|---|
| Plan Semestral |
487.37
BOB |
66821.71
CLP |
274309.61
COP |
65.90
USD |
261.60
PEN |
1199.25
MXN |
2680.99
UYU |
| Plan Anual |
738.82
BOB |
101297.25
CLP |
415835.05
COP |
99.90
USD |
396.58
PEN |
1817.99
MXN |
4064.21
UYU |
Acceso a todos
los cursos
Estudia las 24 horas,
dónde y cuándo quieras
Nuevos cursos
cada semana