Categoría: Bootstrap

Bootstrap grid varios ejemplos

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Latest compiled JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-3 bg-primary text-white">25%</div>
            <div class="col-sm-6 bg-dark text-white">
                <h1>hola</h1>
            </div>
            <div class="col-sm-3 bg-success  text-white">25%</div>
        </div>
        <div class="row">
            <div class="col-md bg-primary text-white"><img class="img-fluid " src="./img/foto.jpg" /></div>
            <div class="col-md bg-dark text-white"><img class="img-fluid " src="./img/foto.jpg" /></div>
            <div class="col-md bg-success  text-white"><img class="img-fluid " src="./img/foto.jpg" /></div>
        </div>
        <div class="row">
            <div class="col bg-primary text-white">25%</div>
            <div class="col bg-dark text-white">
                <h1>hola</h1>
            </div>
            <div class="col bg-success  text-white">25%</div>
            <div class="col bg-primary  text-white">25%</div>
            <div class="col bg-success  text-white">25%</div>
        </div>
        <div class="row">
            <div class="col-sm-6 col-md-3 bg-primary text-white">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua.<br>
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat.
            </div>
            <div class="col-sm-6 col-md-3 bg-dark text-white">
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
                rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
                explicabo.
            </div>
            <div class="col-sm-6 col-md-3 bg-success  text-white">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua.<br>
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat.
            </div>
            <div class="col-sm-6 col-md-3 bg-warning  text-white">
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
                rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
                explicabo.
            </div>
        </div>
        <div class="row">
            <div class="col">--</div>
        </div>
        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
            <div class="col bg-primary text-white">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua.<br>
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat.
            </div>
            <div class="col bg-dark text-white">
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
                rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
                explicabo.
            </div>
            <div class="col bg-success  text-white">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua.<br>
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat.
            </div>
            <div class="col bg-warning  text-white">
                <div class="row">
                    <div class="col bg-primary text-white">25%</div>
                    <div class="col bg-dark text-white">
                        <h1>hola</h1>
                    </div>
                    <div class="col bg-success  text-white">25%</div>
                    <div class="col bg-primary  text-white">25%</div>
                    <div class="col bg-success  text-white">25%</div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Ejemplo barra bootstrap

html

 <div class="progress">
        <div id="barra" class="progress-bar progress-bar-striped progress-bar-animated" style="width:10%"></div>
    </div>

jd

let barra = document.getElementById("barra")
let cont = 10
setTimeout(incrementarBarra, 1000)
function incrementarBarra() {
    cont+=5
    barra.style.width = cont + "%"
    barra.innerHTML = cont + "%"
    if (cont < 100) {
        setTimeout(incrementarBarra, 1000)
    }
}

Ejercicio bootstrap

Con el ejercicio del otro día (acordeón galería de imágenes) vamos a modificarlo para incorporar Bootstrap poniendo:

La barra de navegación con navbar.
El acordeón el de bootstrap.
Crear un botón ‘login’ que nos abra un modal con dos cajas de texto usuario y contraseña.

Bootstrap

Para empezar, nuestra amiga w3schools:

https://www.w3schools.com/bootstrap4/default.asp

https://www.w3schools.com/bootstrap5/index.php

https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-get-started.php

Ahí encontraremos la explicación de todos los elementos de bootstrap muy bien explicados, pero también podemos ir a las fuentes:

https://getbootstrap.com/docs/4.6/getting-started/introduction/

https://getbootstrap.com/docs/5.0/getting-started/introduction/

Novedades de 5.0 respecto a 4:

https://www.pedrodelanube.com/bootstrap-5-que-hay-de-nuevo/

Aquí encontraremos diferentes bootstraps tuneados:

https://bootswatch.com/

Y aquí templates listos para usar:

https://colorlib.com/wp/free-bootstrap-templates/

En trifulcas hay código de muchos ejemplos:

https://trifulcas.com/ejemplos-bootstrap/

https://trifulcas.com/ejemplo-bootstrap-2/

https://codepen.io/ajaypatelaj/pen/prHjD

Un análisis exhaustivo del grid de bootstrap:

https://trifulcas.com/analisis-del-grid-de-bootstrap/

Ejemplos del grid de bootstrap:

https://coreui.io/docs/layout/grid/

https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php

https://freefrontend.com/bootstrap-grid-examples/

Ejemplo layout bootstrap

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="css/estiloboot.css">
</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <header class="col-12 bg-info"><h1>Cabecera</h1></header>
        </div>
        <div class="row">
           <aside class="col-sm-2 col-md-3 bg-success">
               <ul>
                   <li>111111</li>
                   <li>111111</li>
                   <li>111111</li>
                   <li>111111</li>
               </ul>
           </aside>
           <section class="col-sm-8 col-md-6 bg-info" id="contenido">
               <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores esse illum qui. Ut laudantium fuga officia esse at harum pariatur dicta. Reprehenderit excepturi quibusdam fuga debitis eaque nemo adipisci!</p>
           </section>
           <aside class="col-sm-2 col-md-3 bg-danger">
           <img src="img/baldosa.jpg" width="50">
        </aside>
        </div>
        <div class="row">
            <article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article>
            <article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article>
            <article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article>
            <article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article>
            <article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article>
            <article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article>
            <article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article>
            <article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article>
            <article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article>
            <article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article>
            <article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article>
            <article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article>
        </div>
        <div class="row">
            <footer class="col-12 bg-warning"><p>Esto es el pie</p></footer>
        </div>
    </div>

</body>

</html>


article{
    background-color: paleturquoise;
    border:1px solid black;
}
@media (max-width:576px){
  #contenido{
      order:-1;
  }
}

Bootstrap

Para empezar, nuestra amiga w3schools:

https://www.w3schools.com/bootstrap4/default.asp

Ahí encontraremos la explicación de todos los elementos de bootstrap muy bien explicados, pero también podemos ir a las fuentes:

https://getbootstrap.com/docs/4.6/getting-started/introduction/

Aquí encontraremos diferentes bootstraps tuneados:

https://bootswatch.com/

Y aquí templates listos para usar:

https://colorlib.com/wp/free-bootstrap-templates/

En trifulcas hay código de muchos ejemplos:

https://trifulcas.com/ejemplos-bootstrap/

https://trifulcas.com/ejemplo-bootstrap-2/

https://codepen.io/ajaypatelaj/pen/prHjD

Un análisis exhaustivo del grid de bootstrap:

https://trifulcas.com/analisis-del-grid-de-bootstrap/

Ejemplos del grid de bootstrap:

https://coreui.io/docs/layout/grid/

https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php

https://freefrontend.com/bootstrap-grid-examples/

Layout bootstrap responsive


<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<style>
header{
height: 20vh;
}

footer{height:10vh;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">

</div>
</div>

<div class="row">
<div class="col-md-2 col-sm-12">

</div>
<div class="col-md-8 col-sm-9">

</div>
<div class="col-md-2 col-sm-3">

</div>
</div>

<div class="row">
<div class="col-md-12">

</div>
</div>

</div>
</body>
</html>