{"id":4867,"date":"2026-04-21T07:47:34","date_gmt":"2026-04-21T05:47:34","guid":{"rendered":"https:\/\/portal.edu.gva.es\/aules\/?p=4864"},"modified":"2026-06-05T13:41:07","modified_gmt":"2026-06-05T11:41:07","slug":"moderniza-el-diseno-de-tus-aulas-virtuales-con-bootstrap-va","status":"publish","type":"post","link":"https:\/\/portal.edu.gva.es\/aules\/moderniza-el-diseno-de-tus-aulas-virtuales-con-bootstrap-va\/","title":{"rendered":"Modernitza el disseny de les teues aules virtuals amb Bootstrap"},"content":{"rendered":"\n

Actualitzar l’estil o afegir noves funcionalitats als recursos de les teues aules virtuals pot resultar molt senzill. Tan sols necessites <\/strong>copiar i pegar el disseny de Bootstrap que m\u00e9s t’agrade en l’editor de text dels recursos de la teua aula virtual.<\/p>\n\n\n\n

Bootstrap <\/strong>\u00e9s un conjunt d’estils i components visuals llestos per a usar que permet millorar l’aspecte de qualsevol p\u00e0gina web sense necessitat d’escriure CSS des de zero. <\/p>\n\n\n\n

En Aules, Bootstrap ja est\u00e0 incl\u00f2s 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\u00e0gines, etiquetes, seccions del curs, etc.<\/p>\n\n\n\n

A continuaci\u00f3, alguns exemples d’estils i components <\/strong>amb el codi perqu\u00e8 els pugues copiar i utilitzar en els teus recursos:<\/p>\n\n\n

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

Codi font:<\/strong><\/p>\n\n\n\n

<!-- Informaci\u00f3 general (gris fosc) --><\/strong>\n<div class=\"alert alert-dark\" role=\"alert\"><strong>Informaci\u00f3 general<\/strong>\n<\/div>\n<!-- Informaci\u00f3 general (blava) -->\n<\/strong><div class=\"alert alert-info\">Recorda revisar els materials abans de la classe.\n<\/div>\n<!-- Av\u00eds de tasca o termini (groc) --><\/strong>\n<div class=\"alert alert-warning\"><strong>Lliurament:<\/strong> Puja el teu\n  treball abans del diumenge a les 23.59 h.<\/div>\n<!-- Confirmaci\u00f3 o assoliment (verd) --><\/strong>\n<div class=\"alert alert-success\">Unitat completada! Ja pots passar al seg\u00fcent\n  bloc.<\/div>\n<!-- Av\u00eds cr\u00edtic (roig) --><\/strong>\n<div class=\"alert alert-danger\">Esta activitat \u00e9s <strong>obligat\u00f2ria<\/strong>\n  per a superar el m\u00f2dul.<\/div><\/code><\/pre>\n\n\n\n
\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Codi font:<\/strong><\/p>\n\n\n\n
<div class=\"container-fluid\">\n  <div class=\"row\">\n    <div class=\"col-md-6\">\n      <h5>Teoria<\/h5>\n      <p>Enlla\u00e7 als apunts del tema 1.<\/p>\n    <\/div>\n    <div class=\"col-md-6\">\n      <h5>Pr\u00e0ctica<\/h5>\n      <p>Exercicis per a entregar esta setmana.<\/p>\n    <\/div>\n  <\/div>\n<\/div><\/code><\/pre>\n\n\n\n
\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Codi font:<\/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\"> Unitat 2: La c\u00e8l\u00b7lula<\/h5>\n <p class=\"card-text\">\n Estudiarem l'estructura cel\u00b7lular, els org\u00e0nuls\n i els processos de divisi\u00f3 cel\u00b7lular.\n <\/p>\n <a href=\"#\" class=\"btn btn-outline-primary btn-sm\">Veure continguts<\/a>\n <\/div>\n<\/div><\/code><\/pre>\n\n\n\n
\n\n\n\n
I un exemple de l’estil “Cards”<\/strong>. Nom\u00e9s has de reempla\u00e7ar el src<\/code> de la imatge, el t\u00edtol, el text i l’enlla\u00e7 del bot\u00f3.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Codi font:<\/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
\n\n\n\n
\"\"<\/figure>\n\n\n\n
Codi font:<\/strong><\/p>\n\n\n\n
<!-- CAP\u00c7ALERA DEL BLOC -->\n<div class=\"p-3 mb-4 rounded\" style=\"background:#EDE7F6; border-left:5px solid #6F42C1;\">\n <h4 style=\"color:#3D1D6E; margin:0;\">\ud83d\udcd6 Bloc 1 \u2014 T\u00edtol del tema<\/h4>\n<\/div>\n\n<!-- AV\u00cdS IMPORTANT -->\n<div class=\"alert alert-warning\">\n <strong>Recorda:<\/strong> El lliurament \u00e9s el divendres a les 23.59 h.\n<\/div>\n\n<!-- DOS COLUMNES: teoria i pr\u00e0ctica -->\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 Teoria<\/h5>\n         <p class=\"card-text\">Apunts i materials 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\u00e0ctica<\/h5>\n         <p class=\"card-text\">Exercicis i activitats d'esta setmana.<\/p>\n       <\/div>\n     <\/div>\n   <\/div>\n <\/div>\n<\/div>\n\n<!-- SEPARADOR -->\n<hr class=\"my-4\">\n<p class=\"text-center text-muted small\">\u2014 Fi del Bloc 1 \u2014<\/p><\/code><\/pre>\n\n\n\n
\n
\ud83d\udccc\ud83d\udcc4 PDF:<\/strong>
En este document trobar\u00e0s informaci\u00f3 m\u00e9s detallada sobre l'\u00fas de Bootstrap en Aules i la soluci\u00f3 de problemes freq\u00fcents. Clic ac\u00ed!<\/a><\/strong>

\ud83d\udd17 Enlla\u00e7:<\/strong>
En la web de Bootstrap pots trobar molts exemples m\u00e9s: https:\/\/getbootstrap.com\/docs\/<\/strong><\/a><\/pre>\n<\/blockquote>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
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\u00e9s t’agrade en l’editor de text dels recursos de la teua aula virtual. Bootstrap \u00e9s un conjunt d’estils i components visuals llestos per a usar que permet … Llegir m\u00e9s \/ leer m\u00e1s<\/a><\/p>\n","protected":false},"author":71408,"featured_media":701,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23,373],"tags":[434,466],"class_list":["post-4867","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-avisos-va","category-gestio-de-laula","tag-bootstrap","tag-connector","no-featured-image-padding"],"lang":"va","translations":{"va":4867},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/portal.edu.gva.es\/aules\/wp-json\/wp\/v2\/posts\/4867"}],"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=4867"}],"version-history":[{"count":3,"href":"https:\/\/portal.edu.gva.es\/aules\/wp-json\/wp\/v2\/posts\/4867\/revisions"}],"predecessor-version":[{"id":4979,"href":"https:\/\/portal.edu.gva.es\/aules\/wp-json\/wp\/v2\/posts\/4867\/revisions\/4979"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/portal.edu.gva.es\/aules\/wp-json\/wp\/v2\/media\/701"}],"wp:attachment":[{"href":"https:\/\/portal.edu.gva.es\/aules\/wp-json\/wp\/v2\/media?parent=4867"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/portal.edu.gva.es\/aules\/wp-json\/wp\/v2\/categories?post=4867"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/portal.edu.gva.es\/aules\/wp-json\/wp\/v2\/tags?post=4867"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}