https://openclassrooms.com/en/courses/7655936-create-responsive-websites-efficiently-with-bootstrap-5/7753613-implement-your-page-structure
Categoría: Bootstrap
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:
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
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:
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
Análisis del Grid de Bootstrap
Plantillas bootstrap
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>
Bootstrap tuneado
Layout bootstrap
<!DOCTYPE html> <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> </head> <body> <div class="container"> <header class="row bg-info"> <div class="col-md-12"> <h1>Cabecera</h1> </div> </header> <main class="row"> <aside class="col-md-3 bg-success"><h1>hola</h1></aside> <section class="col-md-9"><h1>que</h1></section> </main> <footer class="row bg-dark"> <div class="col-md-12"> <p class="text-light">Pie de la página</p> </div> </footer> </div> </body> </html>