Artículos de Tecnología > Front End

Bootstrap ¿Qué es, cómo y cuando utilizar?

guilherme-lima
guilherme-lima
imagen 01 imagen 02

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 ¿Qué es?

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.

¿Cómo Bootstrap es distribuido?

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.

¿Cómo instalar Bootstrap?

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:

imagen 03

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>

Componentes de Bootstrap

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.

¿Vamos a ver algunos ejemplos practicos ?

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:

imagen 4
<div class="mt-5">
            <h1> Bootstrap es muy guay</h1>
</div>

Nuestro resultado será:

imagen 5

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.

Ejemplos practicos

Observa el siguiente layout:

imagen 6

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.

Conclusión

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

Artículos de Tecnología > Front End

En Alura encontrarás variados cursos sobre Front End. ¡Comienza ahora!

Semestral

  • 194 cursos

    Cursos de Programación, Front End, Data Science, Innovación y Gestión.

  • Videos y actividades 100% en Español
  • Certificado de participación
  • Estudia las 24 horas, los 7 días de la semana
  • Foro y comunidad exclusiva para resolver tus dudas
  • Acceso a todo el contenido de la plataforma por 6 meses
US$49,90
un solo pago de US$49,90
¡QUIERO EMPEZAR A ESTUDIAR!

Paga en moneda local en los siguientes países

Anual

  • 194 cursos

    Cursos de Programación, Front End, Data Science, Innovación y Gestión.

  • Videos y actividades 100% en Español
  • Certificado de participación
  • Estudia las 24 horas, los 7 días de la semana
  • Foro y comunidad exclusiva para resolver tus dudas
  • Acceso a todo el contenido de la plataforma por 12 meses
US$79,90
un solo pago de US$79,90
¡QUIERO EMPEZAR A ESTUDIAR!

Paga en moneda local en los siguientes países

Acceso a todos
los cursos

Estudia las 24 horas,
dónde y cuándo quieras

Nuevos cursos
cada semana