{"id":4768,"date":"2026-04-21T07:51:15","date_gmt":"2026-04-21T05:51:15","guid":{"rendered":"https:\/\/portal.edu.gva.es\/aules\/?p=4768"},"modified":"2026-04-21T07:51:16","modified_gmt":"2026-04-21T05:51:16","slug":"moderniza-el-diseno-de-tus-aulas-virtuales-con-bootstrap-2","status":"publish","type":"post","link":"https:\/\/portal.edu.gva.es\/aules\/es\/moderniza-el-diseno-de-tus-aulas-virtuales-con-bootstrap-2\/","title":{"rendered":"Moderniza el dise\u00f1o de tus aulas virtuales con Bootstrap"},"content":{"rendered":"\n

Actualizar el estilo o a\u00f1adir nuevas funcionalidades a los recursos de tus aulas virtuales puede resultar muy sencillo. Tan solo necesitas <\/strong>copiar y pegar el dise\u00f1o de Bootstrap que m\u00e1s te guste en el editor de texto de los recursos de tu aula virtual.<\/p>\n\n\n\n

Bootstrap <\/strong>es un conjunto de estilos y componentes visuales listos para usar que permite mejorar el aspecto de cualquier p\u00e1gina web sin necesidad de escribir CSS desde cero. <\/p>\n\n\n\n

En Aules, Bootstrap ya est\u00e1 incluido en el tema visual de la plataforma, lo que significa que sus clases est\u00e1n disponibles directamente en cualquier recurso que permita editar HTML: p\u00e1ginas, etiquetas, secciones del curso, etc.<\/p>\n\n\n\n

A continuaci\u00f3n, algunos ejemplos de estilos y componentes <\/strong>con el c\u00f3digo para que los puedas copiar y utilizar en tus recursos:<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

C\u00f3digo fuente:<\/strong><\/p>\n\n\n\n

<!-- Informaci\u00f3n general (gris oscuro) --><\/strong>\n<div class=\"alert alert-dark\" role=\"alert\"><strong>Informaci\u00f3n general<\/strong>\n<\/div>\n<!-- Aviso de tarea o plazo (amarillo) --><\/strong>\n<div class=\"alert alert-warning\"><strong>\u00a1Atenci\u00f3n!<\/strong> La entrega de esta\n  tarea es el viernes.<\/div>\n<!-- Informaci\u00f3n general (azul) --><\/strong>\n<div class=\"alert alert-info\">Recuerda revisar los materiales antes de la clase.\n<\/div>\n<!-- Confirmaci\u00f3n o logro (verde) --><\/strong>\n<div class=\"alert alert-success\">\u00a1Unidad completada! Ya puedes pasar al\n  siguiente bloque.<\/div>\n<!-- Aviso cr\u00edtico (rojo) --><\/strong>\n<div class=\"alert alert-danger\">Esta actividad es <strong>obligatoria<\/strong>\n  para superar el m\u00f3dulo.<\/div><\/code><\/pre>\n\n\n\n
\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
C\u00f3digo fuente:<\/strong><\/p>\n\n\n\n
<div class=\"container-fluid\">\n  <div class=\"row\">\n    <div class=\"col-md-6\">\n      <h5>Teor\u00eda<\/h5>\n      <p>Enlace a los apuntes del tema 1.<\/p>\n    <\/div>\n    <div class=\"col-md-6\">\n      <h5>Pr\u00e1ctica<\/h5>\n      <p>Ejercicios para entregar esta semana.<\/p>\n    <\/div>\n  <\/div>\n<\/div><\/code><\/pre>\n\n\n\n
\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
C\u00f3digo fuente:<\/strong><\/p>\n\n\n\n
<div class=\"card mb-3\" style=\"border-left: 4px solid #6F42C1;\">\n  <div class=\"card-body\">\n    <h5 class=\"card-title\">Unidad 2: La c\u00e9lula<\/h5>\n    <p class=\"card-text\">Estudiaremos la estructura celular, los org\u00e1nulos y los\n      procesos de divisi\u00f3n celular.<\/p>\n    <a class=\"btn btn-outline-primary btn-sm\" href=\"#\">Ver contenidos<\/a>\n  <\/div>\n<\/div><\/code><\/pre>\n\n\n\n
\n\n\n\n
Y un ejemplo del estilo “Cards”<\/strong>. Solo tienes que reemplazar el src<\/code> de la imagen, el t\u00edtulo, el texto y el enlace del bot\u00f3n.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
C\u00f3digo fuente:<\/strong><\/p>\n\n\n\n
<div class=\"card\" style=\"width: 18rem;\">\n  <img src=\"...\" class=\"card-img-top\" alt=\"...\">\n  <div class=\"card-body\">\n    <h5 class=\"card-title\">Card title<\/h5>\n    <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>\n    <a href=\"#\" class=\"btn btn-primary\">Go somewhere<\/a>\n  <\/div>\n<\/div><\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
\n\n\n\n
\"\"<\/figure>\n\n\n\n
C\u00f3digo fuente:<\/strong><\/p>\n\n\n\n
<!-- CABECERA DEL BLOQUE -->\n<div class=\"p-3 mb-4 rounded\"\n  style=\"background: #EDE7F6; border-left: 5px solid #6F42C1;\">\n  <h4 style=\"color: #3d1d6e; margin: 0;\">\ud83d\udcd6 Bloque 1 \u2014 T\u00edtulo del tema<\/h4>\n<\/div>\n<!-- AVISO IMPORTANTE -->\n<div class=\"alert alert-warning\"><strong>Recuerda:<\/strong> La entrega es el\n  viernes a las 23:59 h.<\/div>\n<!-- DOS COLUMNAS: teor\u00eda y pr\u00e1ctica -->\n<div class=\"container-fluid px-0\">\n  <div class=\"row\">\n    <div class=\"col-md-6\">\n      <div class=\"card h-100 shadow-sm\">\n        <div class=\"card-body\">\n          <h5 class=\"card-title\">\ud83d\udcd8 Teor\u00eda<\/h5>\n          <p class=\"card-text\">Apuntes y materiales de lectura.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n    <div class=\"col-md-6\">\n      <div class=\"card h-100 shadow-sm\">\n        <div class=\"card-body\">\n          <h5 class=\"card-title\">\u270f\ufe0f Pr\u00e1ctica<\/h5>\n          <p class=\"card-text\">Ejercicios y actividades de esta semana.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n<!-- SEPARADOR -->\n<hr class=\"my-4\">\n<p class=\"text-center text-muted small\">\u2014 Fin del Bloque 1 \u2014<\/p><\/code><\/pre>\n\n\n\n
\n
\ud83d\udccc\ud83d\udcc4  PDF:<\/strong>
En este documento encontrar\u00e1s informaci\u00f3n m\u00e1s detallada sobre el uso de Bootstrap en Aules y la soluci\u00f3n de problemas frecuentes. \u00a1Click aqu\u00ed!<\/strong><\/a>

\ud83d\udd17 Enlace:<\/strong>
En la web de Bootstrap puedes encontrar muchos ejemplos m\u00e1s: https:\/\/getbootstrap.com\/docs\/<\/strong><\/a><\/pre>\n<\/blockquote>\n\n\n\n
 <\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Actualizar el estilo o a\u00f1adir nuevas funcionalidades a los recursos de tus aulas virtuales puede resultar muy sencillo. Tan solo necesitas copiar y pegar el dise\u00f1o de Bootstrap que m\u00e1s 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 … Llegir m\u00e9s \/ leer m\u00e1s<\/a><\/p>\n","protected":false},"author":71408,"featured_media":706,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[30],"tags":[],"class_list":["post-4768","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-avisos-es","no-featured-image-padding"],"lang":"es","translations":{"es":4768},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/portal.edu.gva.es\/aules\/wp-json\/wp\/v2\/posts\/4768"}],"collection":[{"href":"https:\/\/portal.edu.gva.es\/aules\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/portal.edu.gva.es\/aules\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/portal.edu.gva.es\/aules\/wp-json\/wp\/v2\/users\/71408"}],"replies":[{"embeddable":true,"href":"https:\/\/portal.edu.gva.es\/aules\/wp-json\/wp\/v2\/comments?post=4768"}],"version-history":[{"count":3,"href":"https:\/\/portal.edu.gva.es\/aules\/wp-json\/wp\/v2\/posts\/4768\/revisions"}],"predecessor-version":[{"id":4828,"href":"https:\/\/portal.edu.gva.es\/aules\/wp-json\/wp\/v2\/posts\/4768\/revisions\/4828"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/portal.edu.gva.es\/aules\/wp-json\/wp\/v2\/media\/706"}],"wp:attachment":[{"href":"https:\/\/portal.edu.gva.es\/aules\/wp-json\/wp\/v2\/media?parent=4768"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/portal.edu.gva.es\/aules\/wp-json\/wp\/v2\/categories?post=4768"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/portal.edu.gva.es\/aules\/wp-json\/wp\/v2\/tags?post=4768"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}