# Sistema de diseño de CoreUI ## Vista previa de la interfaz del sistema de diseño de CoreUI Seleccione notas, archive un lote, inspeccione la pestaña Archivo y deshaga la operación más reciente. ## Referencia de diseño del sistema de diseño de CoreUI Valores predeterminados del tema claro de CoreUI para Bootstrap 5.9.0, obtenidos de la hoja de estilos compilada instalada. Estos nombres --cui-* son variables reales del entorno de ejecución. La aplicación de ejemplo utiliza componentes gratuitos; no presupone el uso de widgets PRO de CoreUI. ### Roles del tema claro | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --cui-primary | #5856d6 | Color primario morado de CoreUI. | | --cui-primary-contrast | #fff | Texto combinado con el color primario. | | --cui-secondary | #6b7785 | Rol secundario. | | --cui-success | #1b9e3e | Rol de éxito. | | --cui-info | #39f | Rol informativo. | | --cui-warning | #f9b115 | Rol de advertencia. | | --cui-danger | #e55353 | Rol de peligro. | | --cui-primary-bg-subtle | #cfc7f3 | Fondo suave de la tarjeta de contexto principal. | | --cui-primary-text-emphasis | #3634a3 | Texto sobre la superficie principal suave. | | --cui-primary-border-subtle | #9d92e6 | Borde de la tarjeta de contexto. | | --cui-danger-bg-subtle | #f9d4d4 | Superficie de la insignia de prioridad alta. | | --cui-danger-text-emphasis | #671414 | Texto de la insignia de prioridad alta. | | --cui-warning-bg-subtle | #feecc5 | Superficie de la insignia de prioridad media. | | --cui-warning-text-emphasis | #764705 | Texto de la insignia de prioridad media. | ### Valores predeterminados de tipografía y superficie | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --cui-font-sans-serif | system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" | Pila de fuentes de la interfaz del sistema. | | --cui-body-font-size | 1rem | Tamaño predeterminado del texto del cuerpo de 1rem; la tabla densa usa un ajuste original de 14px. | | --cui-body-line-height | 1.5 | Interlineado predeterminado del texto del cuerpo. | | --cui-body-color | rgba(37, 42.92, 54.02, 0.95) | Color principal del texto del cuerpo en el tema claro. | | --cui-body-bg | #fff | Superficie principal. | | --cui-tertiary-bg | #f3f4f7 | Fondo de página de este ejemplo. | | --cui-secondary-color | rgba(37, 42.92, 54.02, 0.681) | Rol del texto complementario. | | --cui-border-color | #dbdfe6 | Color predeterminado del separador. | ### Variables de esquinas y foco | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --cui-border-radius | 0.375rem | Equivalente al valor predeterminado de 6px con una raíz de 16px. | | --cui-border-radius-sm | 0.25rem | Equivalente al valor pequeño de 4px. | | --cui-border-radius-lg | 0.5rem | Equivalente al valor grande de 8px. | | --cui-border-radius-xl | 1rem | Equivalente al valor extragrande de 16px. | | --cui-border-radius-pill | 50rem | Forma de píldora. | | --cui-focus-ring-width | 0.25rem | Ancho del anillo de foco. | | --cui-focus-ring-opacity | 0.25 | Opacidad del anillo de foco. | | --cui-focus-ring-color | rgba(88, 86, 214, 0.25) | Color del anillo de foco basado en el color primario. | ### Opciones originales de densidad de la cola | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Page padding | 32px; 24px 14px mobile | Margen interior original de la aplicación. | | Table minimum width | 740px | Las columnas siguen siendo legibles en una región de desplazamiento adaptable local. | | Table cell padding | 16px | Opción de densidad original en torno a la estructura nativa de la tabla. | | Table text | 14px; headings 12px | Jerarquía compacta original. | | g-3 summary row | 1rem native gutter | Las tarjetas de métricas adaptables usan la separación estándar de la cuadrícula. | | Toast behavior | autohide: false | La acción para deshacer permanece disponible hasta que se descarte o la reemplace un lote posterior. | ## Guía completa del sistema de diseño de CoreUI Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real. Orientación completa, un punto de partida para la implementación y enlaces al código fuente. ## Sistema de diseño de CoreUI: elija el entorno de ejecución de CoreUI que realmente utiliza ### Elija el entorno de ejecución de CoreUI que realmente utiliza > Este ejemplo usa CoreUI para Bootstrap 5.9.0, el paquete CSS y JavaScript para navegador. CoreUI también dispone de paquetes específicos para frameworks, pero las importaciones de componentes no son intercambiables con los atributos de datos de este ejemplo. La configuración proporciona una hoja de estilos y un script incluidos que son compatibles entre sí, sin presuponer un proveedor de React o Vue. La mesa de revisión usa tarjetas, tablas, formularios, pestañas y notificaciones toast gratuitas. No sustituye de forma encubierta estos elementos por una cuadrícula de datos PRO o un selector avanzado de pago. Este límite permite reproducir el ejemplo completo a partir del paquete indicado, sin exigir la compra de una plantilla no documentada. Consulta la especificación complementaria ## Sistema de diseño de CoreUI: use el color primario morado real y los roles de estado asociados ### Use el color primario morado real y los roles de estado asociados El color primario del tema claro de CoreUI es #5856d6, con contraste blanco para el color primario. La tarjeta del principio de revisión usa conjuntamente primary-bg-subtle, primary-border-subtle y primary-text-emphasis. Estos nombres describen un tratamiento coordinado de la superficie, de modo que el texto complementario no se coloca sobre un fondo teñido con un color de primer plano arbitrario. Las insignias de prioridad alta y media también combinan superficies suaves de peligro o advertencia con texto de énfasis. Las etiquetas de texto indican la clasificación independientemente del color. Son prioridades de ejemplo para la revisión de diseño, no una afirmación de que todas las insignias rojas de un producto deban representar el mismo estado del dominio. Consulta la especificación complementaria ## Sistema de diseño de CoreUI: separe la tipografía predeterminada del texto de una tabla de trabajo densa ### Separe la tipografía predeterminada del texto de una tabla de trabajo densa El cuerpo compilado de CoreUI tiene por defecto un rem y una altura de línea de 1,5. La muestra usa intencionalmente texto de catorce píxeles en la tabla y etiquetas de columna de doce píxeles para facilitar la revisión de una cola densa. Los valores del encabezado de página y del resumen tienen sus propios tamaños originales, más grandes. La guía no presenta incorrectamente esas personalizaciones de la aplicación como valores predeterminados de toda la biblioteca. Las tres tarjetas de contexto usan la cuadrícula adaptable nativa y el espacio g-3. Bandeja de entrada y Archivados permanecen una al lado de la otra en pantallas pequeñas, mientras que la tercera tarjeta explicativa ocupa una fila completa. Todos los números se derivan de los cinco registros de ejemplo visibles; no hay métricas de panel ajenas al contexto ni gráficos de crecimiento inventados. Consulta la especificación complementaria ## Atributos de datos del sistema de diseño CoreUI para controlar paneles de pestañas reales ### Los atributos de datos de CoreUI controlan paneles de pestañas reales Bandeja de entrada y Archivo son pestañas basadas en botones, con data-coreui-toggle="tab" y destinos que corresponden a los paneles de pestañas. El marcado incluye las relaciones tablist, tab, tabpanel, aria-controls y aria-labelledby. El componente CoreUI JavaScript actualiza el estado activo y la visibilidad, en lugar de limitarse a cambiar un subrayado mediante un controlador de la aplicación. La clase nav-underline-border proporciona el tratamiento visual de este componente. Cambiar de pestaña no archiva registros ni borra una selección. La pestaña controla qué parte de la cola local se muestra, mientras que los Set de elementos seleccionados y archivados de la aplicación mantienen estados independientes. Consulta la especificación complementaria ## El estado mixto de la selección total tiene sentido en el sistema de diseño CoreUI ### La selección de todo ofrece un estado mixto significativo Cada nota usa un ID estable de la serie R. Al marcar una fila, se añade ese ID a un Set de elementos seleccionados. La casilla de encabezado aparece marcada solo cuando están seleccionados todos los registros actuales de la bandeja de entrada; aparece en estado indeterminado cuando solo se han seleccionado algunos, y deshabilitada cuando la bandeja está vacía. Estos estados se recalculan cada vez que se representa la cola. El botón de acción por lotes está deshabilitado cuando no hay nada seleccionado, y el texto contiguo indica el recuento actual. La selección se borra después de archivar para que un registro ya archivado no permanezca por error en el siguiente lote. La nota original y su responsable siguen vinculados al registro, en vez de sustituirse por una etiqueta genérica de «Resuelto». 1. Selecciona dos notas y comprueba el estado mixto de la casilla de encabezado. 2. Archiva la selección y confirma que el recuento de la bandeja de entrada disminuya en dos. 3. Abre Archivo para consultar las solicitudes originales y sus responsables. Consulta la especificación complementaria ## Un aviso emergente del sistema de diseño CoreUI presenta una operación reversible concreta ### Una notificación toast presenta una operación específica y reversible La aplicación registra los ID exactos del lote archivado más reciente y, a continuación, llama al método show de la instancia nativa de Toast. autohide está desactivado porque el aviso incluye una acción para deshacer; el ejemplo no elimina esta posibilidad tras un temporizador breve arbitrario. El aviso puede cerrarse de forma explícita. Deshacer elimina del Set de elementos archivados solo los ID guardados, borra la instantánea del último lote y deshabilita su acción. Si se deshace un lote posterior, un lote archivado anteriormente permanece archivado. Esta operación intencionalmente permite deshacer un solo nivel; no pretende ofrecer un historial completo de deshacer. Consulta la especificación complementaria ## Mantén legible la solicitud después de archivarla con el sistema de diseño CoreUI ### Mantenga la solicitud legible después de archivarla La tabla de la bandeja de entrada muestra el título de la nota, el cambio solicitado concreto, el área, la prioridad y el responsable. Archivo muestra una lista compacta que conserva el título, el ID, el responsable y la solicitud completa. Tras resolverla, reduce los elementos visuales de la tabla sin eliminar la información necesaria para entender qué se cambió. En dispositivos móviles, la tabla conserva un ancho mínimo de 740px dentro de table-responsive. La región identificada se puede enfocar con el teclado y tiene un indicador de foco visible; el desplazamiento horizontal se mantiene dentro de la tabla, en lugar de ampliar el documento. Eliminar columnas importantes solo para evitar una barra de desplazamiento dificultaría esta tarea de revisión. Consulta la especificación complementaria ## Usa un resultado persistente sin inventar un backend con el sistema de diseño CoreUI ### Use un resultado persistente sin inventar un backend El aviso emergente tiene un rol de estado cortés y un anuncio atómico. Un segundo estado integrado describe el resultado local de archivar o deshacer. Ninguno afirma que se haya cerrado una incidencia externa: la página indica explícitamente que no está conectada a un sistema de seguimiento de incidencias. La vista previa solo modifica sus Set en memoria, por lo que al recargar se restauran las cinco notas originales. Los títulos y las descripciones de los registros se insertan con textContent, incluida la lista de Archivo. Las asignaciones de clases fijas representan las dos prioridades conocidas. Así, el texto similar al proporcionado por usuarios se mantiene separado de la estructura de HTML y se puede inspeccionar el flujo de datos del ejemplo. - Describe el tamaño real del lote y su alcance local. - Mantén disponible el botón para deshacer mientras la instantánea siga siendo válida. - No presentes una actualización local del DOM como una resolución remota exitosa. Consulta la especificación complementaria ## Carga el paquete de CoreUI antes del módulo local en el sistema de diseño CoreUI ### Cargue el paquete de CoreUI antes del módulo local La configuración completa copia los recursos de dist del paquete en una ruta pública local y carga coreui.bundle.min.js antes de app.js. El paquete expone coreui.Toast y proporciona el comportamiento de pestañas para los atributos data-coreui. No es necesario añadir un segundo entorno de ejecución de Bootstrap para esta composición, y hacerlo podría generar una duplicación confusa de responsabilidades. El tema claro se especifica explícitamente mediante data-coreui-theme="light". Una aplicación más grande puede adoptar el mecanismo de modo de color de CoreUI, pero debería revisar conjuntamente los pares semánticos de texto y superficie. La verificación local abarcó la selección parcial, un lote de dos registros, la consulta de la pestaña Archivo, la restauración al deshacer y una ventana gráfica de 390px. Consulta la especificación complementaria ## Ejemplos de componentes del sistema de diseño CoreUI ### Cola, pestaña de archivo y aviso emergente para deshacer Atributos data-coreui de CoreUI, controles de tabla, insignias semánticas de prioridad y un aviso emergente persistente. ```

COREUI · REVIEW OPERATIONS

Keep the review queue moving.

Archive resolved design notes and undo the last local batch.

LOCAL WORKSPACE
Inbox
5design notes
Archived
0local resolutions
Review principle

Keep the original request visible, even after the note is resolved.

No notes selected
Design noteAreaPriorityOwner

Resolved in this local session

The original note and owner stay attached to the record.

    No notes archived yet.

    High

    Blocks a clear next action or access to important information.

    Medium

    Creates avoidable friction while the flow remains usable.

    Local archive updated

    No external issue tracker is connected.

    ``` Referencia de código - Usa los atributos data-coreui-* con este paquete, no los data-bs-* copiados de otra biblioteca. - La tabla tiene una región de desplazamiento horizontal local e identificada. - Los colores de prioridad se acompañan de las etiquetas explícitas Alto/Medio. ### Selección por lotes y opción para deshacer el último lote Los ID estables de los registros determinan los Set de elementos seleccionados y archivados, mientras que Toast, el componente nativo, controla la visibilidad del aviso. ``` const records=[{id:'R-201',title:'Explain the empty search result',detail:'Offer a way to clear the filter without losing the query.',area:'Search',priority:'High',owner:'Maya'},{id:'R-202',title:'Label the compact navigation icons',detail:'The collapsed sidebar needs understandable accessible names.',area:'Navigation',priority:'High',owner:'Jules'},{id:'R-203',title:'Keep form errors beside their fields',detail:'Retain entered values after a failed submission.',area:'Forms',priority:'High',owner:'Alex'},{id:'R-204',title:'Align the table’s numeric column',detail:'Right-align quantities so differences can be scanned.',area:'Tables',priority:'Medium',owner:'Sam'},{id:'R-205',title:'Clarify the download format',detail:'Show the file type before the visitor starts the download.',area:'Content',priority:'Medium',owner:'Maya'}];const archived=new Set(),selected=new Set();let lastBatch=[];const q=s=>document.querySelector(s),toast=coreui.Toast.getOrCreateInstance(q('#undo-toast'),{autohide:false}); function render(){const inbox=records.filter(r=>!archived.has(r.id));q('#inbox-rows').replaceChildren();q('#archive-list').replaceChildren();records.forEach(r=>{if(archived.has(r.id)){let li=document.createElement('li');li.className='list-group-item px-0';let title=document.createElement('strong'),detail=document.createElement('p');title.textContent=`${r.id} · ${r.title}`;detail.className='small text-body-secondary mb-0 mt-1';detail.textContent=`${r.owner} · ${r.detail}`;li.append(title,detail);q('#archive-list').append(li);return;}let tr=document.createElement('tr');tr.innerHTML='

    ';let cells=tr.children,check=tr.querySelector('input');check.setAttribute('aria-label',`Select ${r.id}: ${r.title}`);check.checked=selected.has(r.id);check.onchange=()=>{check.checked?selected.add(r.id):selected.delete(r.id);sync();};cells[1].querySelector('strong').textContent=r.title;cells[1].querySelector('p').textContent=r.detail;cells[2].textContent=r.area;let badge=tr.querySelector('.badge');badge.classList.add(r.priority==='High'?'bg-danger-subtle':'bg-warning-subtle',r.priority==='High'?'text-danger-emphasis':'text-warning-emphasis');badge.textContent=r.priority;cells[4].textContent=r.owner;q('#inbox-rows').append(tr);});q('#inbox-count').textContent=inbox.length;q('#archive-count').textContent=archived.size;q('#inbox-empty').hidden=inbox.length!==0;q('#archive-empty').hidden=archived.size!==0;sync();} function sync(){let total=records.length-archived.size;q('#selection').textContent=selected.size?`${selected.size} ${selected.size===1?'note':'notes'} selected`:'No notes selected';q('#archive').disabled=!selected.size;q('#select-all').disabled=!total;q('#select-all').checked=total>0&&selected.size===total;q('#select-all').indeterminate=selected.size>0&&selected.size{selected.clear();if(e.target.checked)records.filter(r=>!archived.has(r.id)).forEach(r=>selected.add(r.id));render();};q('#archive').onclick=()=>{lastBatch=[...selected];lastBatch.forEach(id=>archived.add(id));selected.clear();render();q('#toast-copy').textContent=`${lastBatch.length} ${lastBatch.length===1?'note was':'notes were'} archived locally. You can undo this most recent batch.`;q('#undo').disabled=false;toast.show();q('#result').textContent='The archive is local. No external issue tracker was changed.';};q('#undo').onclick=()=>{let count=lastBatch.length;lastBatch.forEach(id=>archived.delete(id));lastBatch=[];q('#undo').disabled=true;render();toast.hide();q('#result').textContent=`Restored ${count} ${count===1?'note':'notes'} to the inbox.`;};render(); ``` Referencia de código - La selección total expone los estados marcado, desmarcado e indeterminado. - Deshacer restaura exactamente los ID del lote más reciente. - Todo el texto de los registros se inserta con textContent. ### Densidad original de la cola Composición de página basada en tarjetas nativas de CoreUI y estilos de tabla. ``` html,body{min-height:0;height:auto}body{background:var(--cui-tertiary-bg)}.review-desk{max-width:1120px;padding:32px;margin:auto}.desk-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:28px}.eyebrow{color:var(--cui-primary);font-size:11px;font-weight:700;letter-spacing:.12em}h1{font-size:32px;line-height:1.2;margin:12px 0}.desk-heading p:last-child{font-size:15px;line-height:1.6}.metric{height:100%}.metric strong{display:inline-block;font-size:32px;line-height:1.2;margin:12px 10px 0 0}.metric span{font-size:12px;color:var(--cui-secondary-color)}.context-card{background:var(--cui-primary-bg-subtle);border-color:var(--cui-primary-border-subtle)}.context-card p{font-size:14px;line-height:1.6;color:var(--cui-primary-text-emphasis)}.batch-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px}.table{min-width:740px;font-size:14px}.table th,.table td{padding:16px}.table th:first-child,.table td:first-child{width:48px}.table td:nth-child(2){max-width:380px}.table td:nth-child(2) p{line-height:1.5}.table th{font-size:12px;color:var(--cui-secondary-color);font-weight:600}.empty-copy{padding:24px;margin:0}.decision-key{display:grid;grid-template-columns:max-content 1fr;align-items:start;gap:10px 14px;margin-top:24px;font-size:12px;color:var(--cui-secondary-color)}.decision-key p{margin:0;line-height:1.6}.toast-container{max-width:520px}[hidden]{display:none!important}@media(max-width:650px){.review-desk{padding:24px 14px}.desk-heading{flex-direction:column;gap:4px}h1{font-size:28px}.metric strong{font-size:28px}.batch-bar{padding:14px}.table-responsive:focus-visible{outline:3px solid var(--cui-primary);outline-offset:-3px}} ``` Referencia de código - El ancho de tabla de 740px es una decisión de legibilidad de la aplicación, no un valor predeterminado de CoreUI. ## Configuración del agente del sistema de diseño CoreUI ### Punto de partida para la implementación Verificado CoreUI para Bootstrap 5.9.0. El app.js proporcionado espera el marcado completo de la cola y no expone ninguna operación de red. El contenedor HTML incluye todo el marcado del cuerpo; guarda los ejemplos proporcionados de interacción y CSS con los nombres de archivo que se indican aquí. ```

    COREUI · REVIEW OPERATIONS

    Keep the review queue moving.

    Archive resolved design notes and undo the last local batch.

    LOCAL WORKSPACE
    Inbox
    5design notes
    Archived
    0local resolutions
    Review principle

    Keep the original request visible, even after the note is resolved.

    No notes selected
    Design noteAreaPriorityOwner

    Resolved in this local session

    The original note and owner stay attached to the record.

      No notes archived yet.

      High

      Blocks a clear next action or access to important information.

      Medium

      Creates avoidable friction while the flow remains usable.

      Local archive updated

      No external issue tracker is connected.

      ``` ### Una instrucción para tu proyecto ``` Parte del escritorio de operaciones de revisión de CoreUI 5.9.0. Conserva las pestañas nativas y la notificación para deshacer mediante atributos data-coreui, los cinco registros de revisión y el conjunto de ID seleccionados, con un estado mixto derivado para la selección en bloque. Archiva el lote seleccionado, muéstralo en la pestaña de archivados y permite deshacer para restaurar el último lote. Mantén contenido el desplazamiento horizontal de la tabla y distingue la selección de la pertenencia al archivo. Usa el paquete de CoreUI correspondiente; no sustituyas nombres de atributos de Bootstrap ni afirmes que el archivado se realiza en el servidor. ``` ## Fuentes y alcance del sistema de diseño de CoreUI CoreUI para los componentes gratuitos de Bootstrap 5.9.0. Se distinguen los valores predeterminados del tema y las elecciones originales de densidad. El archivado y la acción de deshacer solo afectan a los registros de ejemplo locales. - Introducción CSS correspondiente y JavaScript incluido en el paquete. - Variables de CSS Personalización del tema en tiempo de ejecución. - Colores Roles semánticos del tema. - Tipografía Fundamentos tipográficos nativos. - Pestañas Atributos de datos y semántica de los paneles. - Notificaciones Aviso persistente y métodos de los componentes. - Casillas de verificación Estados de las casillas de verificación nativas. - Tablas Composición de tablas adaptable. ## Recursos relacionados con el sistema de diseño de CoreUI ### daisyUI Un estudio de invitaciones nativo de CSS que muestra los temas semánticos 5 de daisyUI, colores de contenido emparejados, grupos de botones de opción, controles de rango, validación del navegador y un paso de revisión con un diálogo real. ### Element Plus Usa el modelo Transfer real de Element Plus, sus filtros y sus opciones deshabilitadas para crear un espacio de trabajo de selección de módulos, con colores, tamaños tipográficos y dimensiones de controles verificados. ### Flowbite Una composición con acordeón y panel lateral nativos de Flowbite 4, con alias semánticos del tema verificados, una lista de equipaje persistente y un flujo accesible para añadir notas sobre materiales de forma local. - [Referencia de implementación](https://coreui.io/bootstrap/docs/components/navs-tabs/) - [Fuente](https://coreui.io/bootstrap/docs/customize/color/) - [Fuente](https://coreui.io/bootstrap/docs/content/typography/) - [Fuente](https://coreui.io/bootstrap/docs/customize/css-variables/) - [Fuente](https://coreui.io/bootstrap/docs/layout/gutters/) - [Consulta la especificación complementaria](https://coreui.io/bootstrap/docs/getting-started/introduction/) - [Consulta la especificación complementaria](https://coreui.io/bootstrap/docs/customize/color/) - [Consulta la especificación complementaria](https://coreui.io/bootstrap/docs/content/typography/) - [Consulta la especificación complementaria](https://coreui.io/bootstrap/docs/components/navs-tabs/) - [Consulta la especificación complementaria](https://coreui.io/bootstrap/docs/forms/checks-radios/) - [Consulta la especificación complementaria](https://coreui.io/bootstrap/docs/components/toasts/) - [Consulta la especificación complementaria](https://coreui.io/bootstrap/docs/content/tables/) - [Referencia de código](https://coreui.io/bootstrap/docs/components/navs-tabs/) - [Referencia de código](https://coreui.io/bootstrap/docs/components/toasts/) - [Referencia de código](https://coreui.io/bootstrap/docs/content/tables/) - [Introducción CSS correspondiente y JavaScript incluido en el paquete.](https://coreui.io/bootstrap/docs/getting-started/introduction/) - [Variables de CSS Personalización del tema en tiempo de ejecución.](https://coreui.io/bootstrap/docs/customize/css-variables/) - [Colores Roles semánticos del tema.](https://coreui.io/bootstrap/docs/customize/color/) - [Tipografía Fundamentos tipográficos nativos.](https://coreui.io/bootstrap/docs/content/typography/) - [Pestañas Atributos de datos y semántica de los paneles.](https://coreui.io/bootstrap/docs/components/navs-tabs/) - [Notificaciones Aviso persistente y métodos de los componentes.](https://coreui.io/bootstrap/docs/components/toasts/) - [Casillas de verificación Estados de las casillas de verificación nativas.](https://coreui.io/bootstrap/docs/forms/checks-radios/) - [Tablas Composición de tablas adaptable.](https://coreui.io/bootstrap/docs/content/tables/)