# Système de design CoreUI ## Aperçu de l’interface du système de design CoreUI Sélectionnez des notes, archivez-en plusieurs, consultez l’onglet Archive et annulez la dernière opération. ## Référence de conception du système de design CoreUI Valeurs par défaut du thème clair de CoreUI pour Bootstrap 5.9.0, tirées de la feuille de style compilée installée. Ces noms --cui-* correspondent à de véritables variables d’exécution. L’application d’exemple utilise des composants gratuits ; elle ne suppose pas l’utilisation de composants CoreUI PRO. ### Rôles du thème clair | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --cui-primary | #5856d6 | Couleur primaire violette de CoreUI. | | --cui-primary-contrast | #fff | Texte associé à la couleur primaire. | | --cui-secondary | #6b7785 | Rôle secondaire. | | --cui-success | #1b9e3e | Rôle de réussite. | | --cui-info | #39f | Rôle d’information. | | --cui-warning | #f9b115 | Rôle d’avertissement. | | --cui-danger | #e55353 | Rôle de danger. | | --cui-primary-bg-subtle | #cfc7f3 | Arrière-plan doux de la carte de contexte, associé à la couleur primaire. | | --cui-primary-text-emphasis | #3634a3 | Texte sur la surface douce associée à la couleur primaire. | | --cui-primary-border-subtle | #9d92e6 | Bordure de la carte de contexte. | | --cui-danger-bg-subtle | #f9d4d4 | Surface du badge de priorité élevée. | | --cui-danger-text-emphasis | #671414 | Texte du badge de priorité élevée. | | --cui-warning-bg-subtle | #feecc5 | Surface du badge de priorité moyenne. | | --cui-warning-text-emphasis | #764705 | Texte du badge de priorité moyenne. | ### Valeurs par défaut de la typographie et des surfaces | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --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" | Pile de polices de l’interface système. | | --cui-body-font-size | 1rem | Taille par défaut du corps : 1rem ; le tableau dense utilise une surcharge personnalisée de 14px. | | --cui-body-line-height | 1.5 | Hauteur de ligne par défaut du corps de texte. | | --cui-body-color | rgba(37, 42.92, 54.02, 0.95) | Couleur principale du texte pour le thème clair. | | --cui-body-bg | #fff | Surface principale. | | --cui-tertiary-bg | #f3f4f7 | Arrière-plan de page dans cet exemple. | | --cui-secondary-color | rgba(37, 42.92, 54.02, 0.681) | Rôle du texte secondaire. | | --cui-border-color | #dbdfe6 | Couleur du séparateur par défaut. | ### Variables de rayon et de focus | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --cui-border-radius | 0.375rem | Équivalent de 6px par défaut avec une racine de 16px. | | --cui-border-radius-sm | 0.25rem | Équivalent de 4px pour la petite taille. | | --cui-border-radius-lg | 0.5rem | Équivalent de 8px pour la grande taille. | | --cui-border-radius-xl | 1rem | Équivalent de 16px pour la très grande taille. | | --cui-border-radius-pill | 50rem | Forme de pilule. | | --cui-focus-ring-width | 0.25rem | Épaisseur de l’anneau de focus. | | --cui-focus-ring-opacity | 0.25 | Opacité de l’anneau de focus. | | --cui-focus-ring-color | rgba(88, 86, 214, 0.25) | Couleur de l’anneau de focus basée sur la couleur primaire. | ### Choix de densité propres à la file d’attente | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Page padding | 32px; 24px 14px mobile | Marge intérieure propre à l’application. | | Table minimum width | 740px | Les colonnes restent lisibles dans une zone de défilement adaptative locale. | | Table cell padding | 16px | Choix de densité propre, adapté à la structure native du tableau. | | Table text | 14px; headings 12px | Hiérarchie compacte propre à l’exemple. | | g-3 summary row | 1rem native gutter | Les cartes de mesures adaptatives utilisent la gouttière de grille standard. | | Toast behavior | autohide: false | L’action d’annulation reste disponible jusqu’à sa fermeture ou son remplacement par une opération ultérieure. | ## Guide complet du système de design CoreUI Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## Système de design CoreUI : choisissez le runtime CoreUI que vous utilisez réellement ### Choisissez le runtime CoreUI que vous utilisez réellement > Cet exemple utilise CoreUI pour Bootstrap 5.9.0, le package CSS et celui destiné au navigateur JavaScript. CoreUI propose également des packages spécifiques à certains frameworks, mais leurs imports de composants ne sont pas interchangeables avec les attributs de données de cet exemple. La configuration fournit une feuille de style adaptée et un script intégré, sans supposer l’utilisation de React ou d’un fournisseur Vue. L’espace de gestion utilise des cartes, tableaux, formulaires, onglets et notifications gratuits. Il ne remplace pas discrètement ces éléments par une grille de données PRO ou un sélecteur avancé payant. Cette limite permet de reproduire l’exemple complet avec le package nommé, sans devoir acheter un modèle dont l’existence n’est pas documentée. Consultez la spécification associée ## Système de design CoreUI : utilisez la véritable couleur primaire violette et les rôles d’état associés ### Utilisez la véritable couleur primaire violette et les rôles d’état associés La couleur primaire claire de CoreUI est #5856d6, avec un contraste blanc. La carte de principe du récapitulatif associe primary-bg-subtle, primary-border-subtle et primary-text-emphasis. Ces noms désignent un traitement coordonné des surfaces ; le texte d’accompagnement n’est donc pas placé sur un arrière-plan teinté avec une couleur de premier plan choisie arbitrairement. Les badges High et Medium associent eux aussi des surfaces discrètes de danger ou d’avertissement à leur texte de mise en évidence. Les libellés textuels indiquent la classification indépendamment de la couleur. Il s’agit d’exemples de priorités pour une revue de design, et non d’une affirmation selon laquelle chaque badge rouge d’un produit doit désigner le même état métier. Consultez la spécification associée ## Système de design CoreUI : distinguer le corps de texte par défaut d’un tableau de travail dense ### Distinguez la typographie du corps par défaut de celle d’un tableau dense Le corps de texte compilé de CoreUI utilise par défaut une taille d’un rem et une hauteur de ligne de 1.5. L’exemple utilise volontairement un texte de quatorze pixels dans le tableau et des libellés de colonnes de douze pixels afin de faciliter la lecture d’une file de revue dense. Le titre de la page et les valeurs du résumé ont leurs propres tailles, plus grandes. Le guide ne présente pas à tort ces adaptations de l’application comme des valeurs par défaut de toute la bibliothèque. Les trois cartes contextuelles utilisent la grille responsive native et la gouttière g-3. Boîte de réception et Archives restent côte à côte sur les petits écrans, tandis que la troisième carte explicative occupe une ligne entière. Chaque nombre est calculé à partir des cinq exemples d’enregistrements visibles : il n’y a ni indicateurs de tableau de bord sans rapport avec le sujet ni graphiques de croissance inventés. Consultez la spécification associée ## Système de design CoreUI : des attributs de données pilotent de véritables panneaux d’onglet ### Les attributs de données CoreUI contrôlent de véritables panneaux d’onglets Boîte de réception et Archives sont des onglets basés sur des boutons, avec data-coreui-toggle="tab" et des cibles correspondant aux panneaux d’onglet. Le balisage comprend les relations tablist, tab, tabpanel, aria-controls et aria-labelledby. Le composant CoreUI JavaScript met à jour l’état actif et la visibilité, au lieu de se contenter de modifier un soulignement via un gestionnaire de l’application. La classe nav-underline-border définit le traitement visuel de ce composant. Changer d’onglet n’archive pas les enregistrements et n’efface aucune sélection. L’onglet détermine la partie de la file locale affichée, tandis que les Sets selected et archived de l’application conservent un état distinct. Consultez la spécification associée ## Système de design CoreUI : la sélection de tous les éléments comporte un état mixte pertinent ### La sélection de tous les éléments prévoit un état mixte pertinent Chaque note possède un identifiant stable de la série R. Cocher une ligne ajoute cet identifiant à un Set selected. La case à cocher de l’en-tête est cochée uniquement lorsque tous les enregistrements actuels de la boîte de réception sont sélectionnés ; elle est à l’état indéterminé lorsqu’une partie seulement l’est, et désactivée si la boîte de réception est vide. Ces états sont recalculés à chaque affichage de la file. Le bouton de traitement groupé est désactivé lorsqu’aucun élément n’est sélectionné, et le texte adjacent indique le nombre actuel. La sélection est effacée après l’archivage afin qu’un enregistrement déjà archivé ne puisse pas être inclus par inadvertance dans le traitement groupé suivant. La note d’origine et son propriétaire restent associés à l’enregistrement au lieu d’être remplacés par un libellé générique « Résolu ». 1. Sélectionnez deux notes et vérifiez l’état mixte de la case à cocher de l’en-tête. 2. Archivez la sélection et vérifiez que le nombre d’éléments dans la boîte de réception diminue de deux. 3. Ouvrez Archives pour consulter les demandes d’origine et leurs propriétaires. Consultez la spécification associée ## Système de design CoreUI : une notification toast présente une opération réversible précise ### Une notification présente une opération réversible précise L’application enregistre les identifiants exacts du dernier lot archivé, puis appelle la méthode show de l’instance native de Toast. autohide est défini sur false, car la notification contient une action Annuler ; cet exemple ne supprime pas cette possibilité après un délai arbitrairement court. La notification peut toujours être fermée explicitement. L’annulation retire uniquement ces identifiants enregistrés du Set archived, efface l’instantané du dernier lot et désactive son action. Un lot archivé précédemment reste archivé si un lot ultérieur est annulé. Cette opération est volontairement limitée à un seul niveau et ne prétend pas offrir un historique complet des annulations. Consultez la spécification associée ## Système de design CoreUI : conserver la lisibilité de la demande après son archivage ### Gardez la demande lisible après son archivage Le tableau de la boîte de réception affiche le titre de la note, la modification demandée, la zone concernée, la priorité et le propriétaire. La vue Archives affiche une liste compacte qui conserve le titre, l’identifiant, le propriétaire et la demande complète. Elle réduit les éléments d’habillage du tableau après résolution sans supprimer les informations nécessaires pour comprendre ce qui a été modifié. Sur mobile, le tableau conserve une largeur minimale de 740px dans table-responsive. La région nommée peut recevoir le focus au clavier et dispose d’un indicateur de focus visible ; le défilement horizontal reste limité au tableau au lieu d’élargir le document. Supprimer des colonnes importantes pour éviter une barre de défilement nuirait à cette tâche de revue. Consultez la spécification associée ## Système de design CoreUI : afficher un résultat persistant sans inventer de backend ### Utilisez un résultat persistant sans inventer de serveur La notification toast a un rôle status poli et une annonce atomique. Un second message d’état en ligne décrit le résultat local de l’archivage ou de l’annulation. Aucun des deux n’affirme qu’un problème externe a été fermé : la page précise qu’aucun outil de suivi des problèmes n’est connecté. L’aperçu ne modifie que ses Sets en mémoire ; le rechargement rétablit donc les cinq notes d’origine. Les titres et descriptions des enregistrements sont insérés avec textContent, y compris dans la liste d’archives. Des associations fixes de classes représentent les deux priorités connues. Les textes semblables à ceux fournis par un utilisateur restent ainsi séparés de la structure HTML, et le flux de données de l’exemple peut être examiné. - Indiquez la taille réelle du lot et la portée locale de l’opération. - Laissez le bouton d’annulation disponible tant que son instantané reste valide. - Ne présentez pas une mise à jour locale du DOM comme une résolution distante réussie. Consultez la spécification associée ## Système de design CoreUI : charger le bundle CoreUI avant le module local ### Chargez le bundle CoreUI avant le module local La configuration complète copie les ressources dist du package vers un chemin public local et charge coreui.bundle.min.js avant app.js. Le bundle expose coreui.Toast et fournit le comportement des onglets pour les attributs data-coreui. Il n’est pas nécessaire d’ajouter un second runtime Bootstrap à cette composition, ce qui pourrait créer une répartition ambiguë des responsabilités. Le thème clair est explicitement défini avec data-coreui-theme="light". Une application plus vaste peut adopter le mécanisme de gestion des modes de couleur de CoreUI, mais doit examiner ensemble les paires de couleurs sémantiques du texte et des surfaces. La vérification locale a couvert la sélection partielle, un lot de deux enregistrements, la consultation de l’onglet Archives, la restauration après annulation et une fenêtre d’affichage de 390px. Consultez la spécification associée ## Exemples de composants du système de design CoreUI ### File, onglet Archives et notification toast d’annulation Attributs data de CoreUI, commandes du tableau, badges de priorité sémantiques et notification toast persistante. ```

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.

    ``` Référence du code - Avec ce bundle, utilisez les attributs data-coreui-*, et non des data-bs-* copiés depuis une autre bibliothèque. - Le tableau se trouve dans une zone nommée de défilement horizontal local. - Les couleurs des priorités sont associées aux libellés explicites High/Élevée et Medium/Moyenne. ### Sélection groupée et annulation du dernier lot Les identifiants stables des enregistrements alimentent les Sets selected et archived, tandis que Toast gère nativement l’affichage de la notification. ``` 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(); ``` Référence du code - La sélection de tous les éléments expose les états coché, décoché et indéterminé. - Annuler restaure exactement les identifiants du lot le plus récent. - Tout le texte des enregistrements est inséré avec textContent. ### Densité de la file d’attente d’origine Composition de la page autour des cartes CoreUI natives et du style du tableau. ``` 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}} ``` Référence du code - La largeur de tableau de 740px est un choix de lisibilité propre à l’application, et non une valeur par défaut de CoreUI. ## Configuration de l’agent de système de design CoreUI ### Point de départ de l’implémentation CoreUI vérifié pour Bootstrap 5.9.0. Le fichier app.js fourni attend le balisage complet de la file d’attente et n’expose aucune opération réseau. Le conteneur HTML inclut tout le balisage du corps de la page ; enregistrez les exemples d’interaction et de CSS fournis sous les noms de fichier indiqués ici. ```

    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.

      ``` ### Un prompt pour votre projet ``` Partez du bureau des opérations de revue de conception de CoreUI 5.9.0. Conservez les onglets natifs et la notification d’annulation à l’aide des attributs data-coreui, les cinq éléments à examiner et l’ensemble des identifiants sélectionnés, avec un état mixte de sélection groupée calculé à partir de ces données. Archivez le lot sélectionné, affichez-le dans l’onglet des archives et permettez l’annulation du dernier lot. Contenez le défilement horizontal du tableau et distinguez la sélection de l’appartenance aux archives. Utilisez le bundle CoreUI correspondant ; ne remplacez pas les noms d’attributs Bootstrap et ne prétendez pas que l’archivage est effectué côté serveur. ``` ## Sources et périmètre du système de design CoreUI CoreUI pour les composants gratuits de Bootstrap 5.9.0. Les valeurs de thème par défaut sont distinguées des choix de densité d’origine. L’archivage et l’annulation ne concernent que les enregistrements d’exemple locaux. - Introduction CSS et bundle JavaScript correspondants. - Variables CSS Personnalisation du thème à l’exécution. - Couleurs Rôles sémantiques du thème. - Typographie Fondements typographiques natifs. - Onglets Attributs de données et sémantique des panneaux. - Notifications Notification persistante et méthodes du composant. - Cases à cocher États natifs des cases à cocher. - Tableaux Composition de tableaux adaptative. ## Ressources associées au système de design CoreUI ### daisyUI Un studio d’invitation natif de CSS qui présente les 5 thèmes sémantiques de daisyUI, les couleurs associées au contenu, les options d’adhésion par boutons radio, les commandes de plage, la validation du navigateur et une véritable étape de révision dans une boîte de dialogue. ### Element Plus Utilisez le véritable modèle Transfer de Element Plus, ses filtres et ses options désactivées pour créer un espace de travail de sélection de modules, fondé sur des couleurs, des tailles de caractères et des dimensions de commandes vérifiées. ### Flowbite Une composition native d’accordéon et de panneau coulissant Flowbite 4, avec des alias de thème sémantique vérifiés, une liste de préparation persistante et un parcours accessible de prise de notes sur les matériaux, enregistré localement. - [Référence de mise en œuvre](https://coreui.io/bootstrap/docs/components/navs-tabs/) - [Source](https://coreui.io/bootstrap/docs/customize/color/) - [Source](https://coreui.io/bootstrap/docs/content/typography/) - [Source](https://coreui.io/bootstrap/docs/customize/css-variables/) - [Source](https://coreui.io/bootstrap/docs/layout/gutters/) - [Consultez la spécification associée](https://coreui.io/bootstrap/docs/getting-started/introduction/) - [Consultez la spécification associée](https://coreui.io/bootstrap/docs/customize/color/) - [Consultez la spécification associée](https://coreui.io/bootstrap/docs/content/typography/) - [Consultez la spécification associée](https://coreui.io/bootstrap/docs/components/navs-tabs/) - [Consultez la spécification associée](https://coreui.io/bootstrap/docs/forms/checks-radios/) - [Consultez la spécification associée](https://coreui.io/bootstrap/docs/components/toasts/) - [Consultez la spécification associée](https://coreui.io/bootstrap/docs/content/tables/) - [Référence du code](https://coreui.io/bootstrap/docs/components/navs-tabs/) - [Référence du code](https://coreui.io/bootstrap/docs/components/toasts/) - [Référence du code](https://coreui.io/bootstrap/docs/content/tables/) - [Introduction CSS et bundle JavaScript correspondants.](https://coreui.io/bootstrap/docs/getting-started/introduction/) - [Variables CSS Personnalisation du thème à l’exécution.](https://coreui.io/bootstrap/docs/customize/css-variables/) - [Couleurs Rôles sémantiques du thème.](https://coreui.io/bootstrap/docs/customize/color/) - [Typographie Fondements typographiques natifs.](https://coreui.io/bootstrap/docs/content/typography/) - [Onglets Attributs de données et sémantique des panneaux.](https://coreui.io/bootstrap/docs/components/navs-tabs/) - [Notifications Notification persistante et méthodes du composant.](https://coreui.io/bootstrap/docs/components/toasts/) - [Cases à cocher États natifs des cases à cocher.](https://coreui.io/bootstrap/docs/forms/checks-radios/) - [Tableaux Composition de tableaux adaptative.](https://coreui.io/bootstrap/docs/content/tables/)