Actualitzar l’estil o afegir noves funcionalitats als recursos de les teues aules virtuals pot resultar molt senzill. Tan sols necessites copiar i pegar el disseny de Bootstrap que més t’agrade en l’editor de text dels recursos de la teua aula virtual.
Bootstrap és un conjunt d’estils i components visuals llestos per a usar que permet millorar l’aspecte de qualsevol pàgina web sense necessitat d’escriure CSS des de zero.
En Aules, Bootstrap ja està inclòs en el tema visual de la plataforma, la qual cosa significa que les seues classes estan disponibles directament en qualsevol recurs que permeta editar HTML: pàgines, etiquetes, seccions del curs, etc.
A continuació, alguns exemples d’estils i components amb el codi perquè els pugues copiar i utilitzar en els teus recursos:
Codi font:
<!-- Informació general (gris fosc) -->
<div class="alert alert-dark" role="alert"><strong>Informació general</strong>
</div>
<!-- Informació general (blava) -->
<div class="alert alert-info">Recorda revisar els materials abans de la classe.
</div>
<!-- Avís de tasca o termini (groc) -->
<div class="alert alert-warning"><strong>Lliurament:</strong> Puja el teu
treball abans del diumenge a les 23.59 h.</div>
<!-- Confirmació o assoliment (verd) -->
<div class="alert alert-success">Unitat completada! Ja pots passar al següent
bloc.</div>
<!-- Avís crític (roig) -->
<div class="alert alert-danger">Esta activitat és <strong>obligatòria</strong>
per a superar el mòdul.</div>
Codi font:
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h5>Teoria</h5>
<p>Enllaç als apunts del tema 1.</p>
</div>
<div class="col-md-6">
<h5>Pràctica</h5>
<p>Exercicis per a entregar esta setmana.</p>
</div>
</div>
</div>
Codi font:
<div class="card mb-3" style="border-left: 4px solid #6F42C1;">
<div class="card-body">
<h5 class="card-title"> Unitat 2: La cèl·lula</h5>
<p class="card-text">
Estudiarem l'estructura cel·lular, els orgànuls
i els processos de divisió cel·lular.
</p>
<a href="#" class="btn btn-outline-primary btn-sm">Veure continguts</a>
</div>
</div>I un exemple de l’estil “Cards”. Només has de reemplaçar el src de la imatge, el títol, el text i l’enllaç del botó.
Codi font:
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Codi font:
<!-- CAPÇALERA DEL BLOC -->
<div class="p-3 mb-4 rounded" style="background:#EDE7F6; border-left:5px solid #6F42C1;">
<h4 style="color:#3D1D6E; margin:0;">📖 Bloc 1 — Títol del tema</h4>
</div>
<!-- AVÍS IMPORTANT -->
<div class="alert alert-warning">
<strong>Recorda:</strong> El lliurament és el divendres a les 23.59 h.
</div>
<!-- DOS COLUMNES: teoria i pràctica -->
<div class="container-fluid px-0">
<div class="row">
<div class="col-md-6">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h5 class="card-title">📘 Teoria</h5>
<p class="card-text">Apunts i materials de lectura.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h5 class="card-title">✏️ Pràctica</h5>
<p class="card-text">Exercicis i activitats d'esta setmana.</p>
</div>
</div>
</div>
</div>
</div>
<!-- SEPARADOR -->
<hr class="my-4">
<p class="text-center text-muted small">— Fi del Bloc 1 —</p>📌📄 PDF:
En este document trobaràs informació més detallada sobre l'ús de Bootstrap en Aules i la solució de problemes freqüents. Clic ací!
🔗 Enllaç:
En la web de Bootstrap pots trobar molts exemples més: https://getbootstrap.com/docs/