Ormai chi segue Umbriaway Consulting sa bene che meglio applicare la MAGIA DEL FARE senza tanti preamboli, quindi andiamo su https://getbootstrap.com/docs/5.0/getting-started/introduction/ e copiamo come ci propone il sito stesso lo STARTER TEMPLATE:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<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">
<title>Toggle component</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
-->
</body>
</html>
Ok, a questo punto devi insegnare Cartesio ai tuoi alunni. CARTESIO chi? Lo si sa ai tempi del COVID si deve fare una telelezione magari su ZOOM supportata da strumenti condivisi in rete e da qui l’idea, posso sfruttare un framework potente come BOOTSTRAP per FARE didattica? La risposta é dentro di te e questa volta giusta! Quindi costruiamo un lay-out efficace composto da un contenitore che contiene una riga che contiene 4 colonne, procediamo, capiremo il perché a fine lavoro, tenendo presente che la GRID del FRAMEWORK è basata su 12 colonne, per cui i campi che ci serviranno da settare saranno di fatto di classe tre perché vogliamo posizionare quattro elementi per riga (12/3=4), vediamo come diventa il codice dopo un lavoro preliminare in cui inseriamo sia una immagine con una domanda, sia un bottone che gestisce la propietà COLLAPSE che accende o spegne l’interruttore TOGGLE. Una applicazione semiseria che rispecchia questo principio la ritroviamo all’ indirizzo http://umbriawayformazione.altervista.org/uwcode/collapse.html , ora diamo seguito e miglioriamo l’applicazione http://umbriawayformazione.altervista.org/uwcode/cartesio.html rendendola efficiente e professionale:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<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">
<title>Cartesio philosophy</title>
</head>
<body class="bg-warning">
<div class="container">
<h3 class="mt-5">Scopri Cartesio e la sua filosofia!</h3><br>
<div class="row">
<div class="col-md-3">
<h6>Quale é il primo capisaldo di Cartesio?</h6>
<img src="img/cartesio.jpg" class="img-responsive" style="Width:80%">
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Risposta
</a>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
EVIDENZA
</div>
</div>
</div>
<div class="col-md-3">
<h6>Quale é il secondo capisaldo di Cartesio?</h6>
<img src="img/cartesio.jpg" class="img-responsive" style="Width:80%">
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample1">
Risposta
</a>
</p>
<div class="collapse" id="collapseExample1">
<div class="card card-body">
ANALISI
</div>
</div>
</div>
<div class="col-md-3">
<h6>Quale é il terzo capisaldo di Cartesio?</h6>
<img src="img/cartesio.jpg" class="img-responsive" style="Width:80%">
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample2">
Risposta
</a>
</p>
<div class="collapse" id="collapseExample2">
<div class="card card-body">
SINTESI
</div>
</div>
</div>
<div class="col-md-3">
<h6>Quale é il quarto capisaldo di Cartesio?</h6>
<img src="img/cartesio.jpg" class="img-responsive" style="Width:80%">
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample3" role="button" aria-expanded="false" aria-controls="collapseExample3">
Risposta
</a>
</p>
<div class="collapse" id="collapseExample3">
<div class="card card-body">
ENUMERAZIONE
</div>
</div>
</div>
<!--chiudo la riga-->
</div>
<h3 class="mt-5">Risolvi le situazioni di scacchi</h3><br>
<div class="row">
<div class="col-md-3">
<h6>Chiaro vantaggio del nero come muove?</h6>
<img src="img/11.png" class="img-responsive" style="Width:80%">
<p>
<a class="btn btn-dark" data-bs-toggle="collapse" href="#collapseExample4" role="button" aria-expanded="false" aria-controls="collapseExample4">
Risposta
</a>
</p>
<div class="collapse" id="collapseExample4">
<div class="card card-body">
..Ta1!!
</div>
</div>
</div>
<div class="col-md-3">
<h6>Il nero sta meglio come concretizza?</h6>
<img src="img/12.png" class="img-responsive" style="Width:80%">
<p>
<a class="btn btn-dark" data-bs-toggle="collapse" href="#collapseExample5" role="button" aria-expanded="false" aria-controls="collapseExample5">
Risposta
</a>
</p>
<div class="collapse" id="collapseExample5">
<div class="card card-body">
..Ta1!!
</div>
</div>
</div>
<div class="col-md-3">
<h6>Un sacrificio del nero da ricordare quale?</h6>
<img src="img/44.png" class="img-responsive" style="Width:80%">
<p>
<a class="btn btn-dark" data-bs-toggle="collapse" href="#collapseExample6" role="button" aria-expanded="false" aria-controls="collapseExample6">
Risposta
</a>
</p>
<div class="collapse" id="collapseExample6">
<div class="card card-body">
..Regina su casa h3!!
</div>
</div>
</div>
<div class="col-md-3">
<h6>Una mossa fantastica del nero quale?</h6>
<img src="img/caruanaivanchuk.png" class="img-responsive" style="Width:80%">
<p>
<a class="btn btn-dark" data-bs-toggle="collapse" href="#collapseExample7" role="button" aria-expanded="false" aria-controls="collapseExample7">
Risposta
</a>
</p>
<div class="collapse" id="collapseExample7">
<div class="card card-body">
..g5!!
</div>
</div>
</div>
<!--chiudo la riga-->
</div>
<!--chiudo container-->
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
</body>
</html>
Conclusione: Bootstrap Framework ci mette a disposizione delle risorse gratuite che é un peccato non sfruttare!
