Actualizar el estilo o añadir nuevas funcionalidades a los recursos de tus aulas virtuales puede resultar muy sencillo. Tan solo necesitas copiar y pegar el diseño de Bootstrap que más te guste en el editor de texto de los recursos de tu aula virtual.
Bootstrap es un conjunto de estilos y componentes visuales listos para usar que permite mejorar el aspecto de cualquier página web sin necesidad de escribir CSS desde cero.
En Aules, Bootstrap ya está incluido en el tema visual de la plataforma, lo que significa que sus clases están disponibles directamente en cualquier recurso que permita editar HTML: páginas, etiquetas, secciones del curso, etc.
A continuación, algunos ejemplos de estilos y componentes con el código para que los puedas copiar y utilizar en tus recursos:
Código fuente:
<!-- Información general (gris oscuro) -->
<div class="alert alert-dark" role="alert"><strong>Información general</strong>
</div>
<!-- Aviso de tarea o plazo (amarillo) -->
<div class="alert alert-warning"><strong>¡Atención!</strong> La entrega de esta
tarea es el viernes.</div>
<!-- Información general (azul) -->
<div class="alert alert-info">Recuerda revisar los materiales antes de la clase.
</div>
<!-- Confirmación o logro (verde) -->
<div class="alert alert-success">¡Unidad completada! Ya puedes pasar al
siguiente bloque.</div>
<!-- Aviso crítico (rojo) -->
<div class="alert alert-danger">Esta actividad es <strong>obligatoria</strong>
para superar el módulo.</div>
Código fuente:
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h5>Teoría</h5>
<p>Enlace a los apuntes del tema 1.</p>
</div>
<div class="col-md-6">
<h5>Práctica</h5>
<p>Ejercicios para entregar esta semana.</p>
</div>
</div>
</div>
Código fuente:
<div class="card mb-3" style="border-left: 4px solid #6F42C1;">
<div class="card-body">
<h5 class="card-title">Unidad 2: La célula</h5>
<p class="card-text">Estudiaremos la estructura celular, los orgánulos y los
procesos de división celular.</p>
<a class="btn btn-outline-primary btn-sm" href="#">Ver contenidos</a>
</div>
</div>Y un ejemplo del estilo «Cards». Solo tienes que reemplazar el src de la imagen, el título, el texto y el enlace del botón.
Código fuente:
<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>
Código fuente:
<!-- CABECERA DEL BLOQUE -->
<div class="p-3 mb-4 rounded"
style="background: #EDE7F6; border-left: 5px solid #6F42C1;">
<h4 style="color: #3d1d6e; margin: 0;">📖 Bloque 1 — Título del tema</h4>
</div>
<!-- AVISO IMPORTANTE -->
<div class="alert alert-warning"><strong>Recuerda:</strong> La entrega es el
viernes a las 23:59 h.</div>
<!-- DOS COLUMNAS: teoría y 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">📘 Teoría</h5>
<p class="card-text">Apuntes y materiales 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">Ejercicios y actividades de esta semana.</p>
</div>
</div>
</div>
</div>
</div>
<!-- SEPARADOR -->
<hr class="my-4">
<p class="text-center text-muted small">— Fin del Bloque 1 —</p>📌📄 PDF:
En este documento encontrarás información más detallada sobre el uso de Bootstrap en Aules y la solución de problemas frecuentes. ¡Click aquí!
🔗 Enlace:
En la web de Bootstrap puedes encontrar muchos ejemplos más: https://getbootstrap.com/docs/