Guías bluuweb

Appearance

Bootstrap Fundamentos ​

Aprendamos a trabajar con Bootstrap 5! 🐱‍👤

⭐ Videos Premium ⭐

Esta sección es parte del curso en Udemy. Si quieres acceder a ella, puedes comprar el curso en Udemy: Bootstrap 5 by bluuweb.

O bien también puedes visualizar los videos siendo miembro en Youtube. Accede a miembros del canal aquí y accede a los videos de esta sección.

Requisitos ​

Herramientas ​

CDN ​

La manera más sencilla de comenzar con Bootstrap es utilizar el CDN. Los archivos están alojados en un servidor externo.

html
<link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
    crossorigin="anonymous"
/>

Breakpoints ​

Hace referencia a los puntos de interrupción, dependiendo del tamaño del dispositivo que esté visitando nuestro sitio web.

Container ​

Se utiliza para alinear nuestro contenido, estableciendo un ancho determinado.

Importante

Al utilizar el sistema de columnas es necesario envolver todo en un container

Grid ​

Bootstrap utiliza un sistema de 12 columnas (con Flexbox) para diseñar y distribuir elementos en su sitio web.

html
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Grid Fundamentos</title>
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
            crossorigin="anonymous"
        />
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-1 border">1</div>
                <div class="col-1 border">1</div>
                <div class="col-1 border">1</div>
                <div class="col-1 border">1</div>
                <div class="col-1 border">1</div>
                <div class="col-1 border">1</div>
                <div class="col-1 border">1</div>
                <div class="col-1 border">1</div>
                <div class="col-1 border">1</div>
                <div class="col-1 border">1</div>
                <div class="col-1 border">1</div>
                <div class="col-1 border">1</div>
            </div>
        </div>
    </body>
</html>

Por ejemplo si necesitamos crear 3 columnas:

html
<div class="row">
    <div class="col-4 border">4</div>
    <div class="col-4 border">4</div>
    <div class="col-4 border">4</div>
</div>

Si necesitamos 4 columnas:

html
<div class="row">
    <div class="col-3 border">3</div>
    <div class="col-3 border">3</div>
    <div class="col-3 border">3</div>
    <div class="col-3 border">3</div>
</div>

Diferentes tamaños:

html
<div class="row">
    <div class="col-6 border">6</div>
    <div class="col-3 border">3</div>
    <div class="col-3 border">3</div>
</div>

Grid Responsive ​

La gracia es hacer sitios web responsives, y la gracia mayor es que con Bootstrap es muy sencillo.

Agregando las opciones a la grid, podemos crear diseños responsives:

html
<div class="row">
    <div class="col-12 col-sm-6 col-md-4 border">12 sm-6 md-4</div>
    <div class="col-12 col-sm-6 col-md-4 border">12 sm-6 md-4</div>
    <div class="col-12 col-sm-12 col-md-4 border">12 sm-6 md-4</div>
</div>

Flexbox ​

La grid de Bootstrap utiliza Flexbox para posicionar elementos.

Práctica ​

Ya que sabemos algunos fundamentos de Bootstrap 5, comencemos a desarrollar nuestro primer sitio web.

html
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Práctica Fundamentos</title>

        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
            crossorigin="anonymous"
        />
    </head>
    <body>
        <div class="container">
            <h2 class="text-center display-4 mb-4 mt-5 mt-md-0">
                Lista de precios
            </h2>
            <p class="lead text-center mb-5">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi,
                ea? Pariatur voluptatibus recusandae quas modi quam
                necessitatibus ducimus, voluptate accusamus dolorum sunt libero,
                nesciunt cum quod? Quod eligendi totam beatae.
            </p>

            <main class="row">
                <article class="col-12 col-md-4 text-center mb-5 mb-md-0">
                    <div
                        class="border border-dark rounded rounded-3 overflow-hidden"
                    >
                        <p class="fw-bold mt-5">Basic</p>
                        <h3 class="display-4">$100</h3>
                        <p class="mt-3 font-monospace">Up to 5 user for free</p>
                        <ul class="list-unstyled my-5">
                            <li>Lorem, ipsum</li>
                            <li>Lorem ipsum dolor sit</li>
                            <li>Lorem, ipsum dolor</li>
                            <li>Lorem ipsum dolor sit amet</li>
                        </ul>
                        <a
                            class="bg-info text-white py-3 d-block text-decoration-none"
                            href="#"
                            >Acceder</a
                        >
                    </div>
                </article>
            </main>

            <footer class="mt-5 text-center">
                <p class="text-muted">2021 - Todos los derechos reservados</p>
            </footer>
        </div>
    </body>
</html>

Todo junto ​

html
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Práctica Fundamentos</title>

        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
            crossorigin="anonymous"
        />

        <style>
            @media (min-width: 768px) {
                .altura {
                    height: 100vh;
                }
            }
        </style>
    </head>
    <body>
        <div class="container altura d-flex flex-column justify-content-center">
            <h2 class="text-center display-4 mb-4 mt-5 mt-md-0">
                Lista de precios
            </h2>
            <p class="lead text-center mb-5">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi,
                ea? Pariatur voluptatibus recusandae quas modi quam
                necessitatibus ducimus, voluptate accusamus dolorum sunt libero,
                nesciunt cum quod? Quod eligendi totam beatae.
            </p>

            <main class="row">
                <article class="col-12 col-md-4 text-center mb-5 mb-md-0">
                    <div
                        class="border border-dark rounded rounded-3 overflow-hidden"
                    >
                        <p class="fw-bold mt-5">Basic</p>
                        <h3 class="display-4">$100</h3>
                        <p class="mt-3 font-monospace">Up to 5 user for free</p>
                        <ul class="list-unstyled my-5">
                            <li>Lorem, ipsum</li>
                            <li>Lorem ipsum dolor sit</li>
                            <li>Lorem, ipsum dolor</li>
                            <li>Lorem ipsum dolor sit amet</li>
                        </ul>
                        <a
                            class="bg-info text-white py-3 d-block text-decoration-none"
                            href="#"
                            >Acceder</a
                        >
                    </div>
                </article>
                <article class="col-12 col-md-4 text-center mb-5 mb-md-0">
                    <div
                        class="border border-dark rounded rounded-3 overflow-hidden bg-dark text-white"
                    >
                        <p class="fw-bold mt-5">Pro</p>
                        <h3 class="display-4">$200</h3>
                        <p class="mt-3 font-monospace">
                            Up to 15 user for free
                        </p>
                        <ul class="list-unstyled my-5">
                            <li>Lorem, ipsum</li>
                            <li>Lorem ipsum dolor sit</li>
                            <li>Lorem, ipsum dolor</li>
                            <li>Lorem ipsum dolor sit amet</li>
                        </ul>
                        <a
                            class="bg-secondary text-white py-3 d-block text-decoration-none"
                            href="#"
                            >Acceder</a
                        >
                    </div>
                </article>
                <article class="col-12 col-md-4 text-center">
                    <div
                        class="border border-dark rounded rounded-3 overflow-hidden"
                    >
                        <p class="fw-bold mt-5">Ultimate</p>
                        <h3 class="display-4">$500</h3>
                        <p class="mt-3 font-monospace">
                            Up to 50 user for free
                        </p>
                        <ul class="list-unstyled my-5">
                            <li>Lorem, ipsum</li>
                            <li>Lorem ipsum dolor sit</li>
                            <li>Lorem, ipsum dolor</li>
                            <li>Lorem ipsum dolor sit amet</li>
                        </ul>
                        <a
                            class="bg-info text-white py-3 d-block text-decoration-none"
                            href="#"
                            >Acceder</a
                        >
                    </div>
                </article>
            </main>

            <footer class="mt-5 text-center">
                <p class="text-muted">2021 - Todos los derechos reservados</p>
            </footer>
        </div>
    </body>
</html>