# sistema di design CoreUI ## Anteprima dell’interfaccia del sistema di design CoreUI Seleziona le note, archivia un gruppo, esamina la scheda Archivio e annulla l’operazione più recente. ## Riferimento di design per il sistema di design CoreUI Valori predefiniti del tema chiaro di CoreUI per Bootstrap 5.9.0, ricavati dal foglio di stile compilato installato. Questi nomi --cui-* sono variabili effettive di runtime. L’applicazione di esempio usa componenti gratuiti; non presuppone widget CoreUI PRO. ### Ruoli del tema chiaro | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --cui-primary | #5856d6 | Viola primario di CoreUI. | | --cui-primary-contrast | #fff | Testo abbinato al primario. | | --cui-secondary | #6b7785 | Ruolo secondario. | | --cui-success | #1b9e3e | Ruolo di successo. | | --cui-info | #39f | Ruolo informativo. | | --cui-warning | #f9b115 | Ruolo di avviso. | | --cui-danger | #e55353 | Ruolo di pericolo. | | --cui-primary-bg-subtle | #cfc7f3 | Sfondo tenue della scheda contestuale primaria. | | --cui-primary-text-emphasis | #3634a3 | Testo sulla superficie primaria tenue. | | --cui-primary-border-subtle | #9d92e6 | Bordo della scheda contestuale. | | --cui-danger-bg-subtle | #f9d4d4 | Superficie dell’etichetta ad alta priorità. | | --cui-danger-text-emphasis | #671414 | Testo dell’etichetta ad alta priorità. | | --cui-warning-bg-subtle | #feecc5 | Superficie dell’etichetta a media priorità. | | --cui-warning-text-emphasis | #764705 | Testo dell’etichetta a media priorità. | ### Valori predefiniti di tipografia e superfici | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --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" | Stack di font dell’interfaccia di sistema. | | --cui-body-font-size | 1rem | Dimensione predefinita del corpo del testo di 1rem; la tabella densa usa una sovrascrittura originale di 14px. | | --cui-body-line-height | 1.5 | Interlinea predefinita del corpo del testo. | | --cui-body-color | rgba(37, 42.92, 54.02, 0.95) | Colore principale del corpo del testo nel tema chiaro. | | --cui-body-bg | #fff | Superficie primaria. | | --cui-tertiary-bg | #f3f4f7 | Sfondo della pagina in questo esempio. | | --cui-secondary-color | rgba(37, 42.92, 54.02, 0.681) | Ruolo del testo di supporto. | | --cui-border-color | #dbdfe6 | Colore predefinito del separatore. | ### Variabili per angoli e indicatori di focus | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --cui-border-radius | 0.375rem | Valore predefinito equivalente a 6px con una radice di 16px. | | --cui-border-radius-sm | 0.25rem | Equivalente a 4px per il formato piccolo. | | --cui-border-radius-lg | 0.5rem | Equivalente a 8px per il formato grande. | | --cui-border-radius-xl | 1rem | Equivalente a 16px per il formato extra-large. | | --cui-border-radius-pill | 50rem | Forma a pillola. | | --cui-focus-ring-width | 0.25rem | Larghezza dell’indicatore di focus. | | --cui-focus-ring-opacity | 0.25 | Opacità dell’indicatore di focus. | | --cui-focus-ring-color | rgba(88, 86, 214, 0.25) | Colore dell’indicatore di focus basato sul primario. | ### Scelte originali di densità della coda | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | Page padding | 32px; 24px 14px mobile | Rientro originale dell’applicazione. | | Table minimum width | 740px | Le colonne restano leggibili in un’area di scorrimento locale adattabile. | | Table cell padding | 16px | Scelta originale della densità, basata sulla struttura nativa della tabella. | | Table text | 14px; headings 12px | Gerarchia compatta originale. | | g-3 summary row | 1rem native gutter | Le schede metriche adattabili usano la spaziatura standard della griglia. | | Toast behavior | autohide: false | L’azione di annullamento resta disponibile finché non viene chiusa o sostituita da un gruppo successivo. | ## Guida completa al sistema di design CoreUI Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale. Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti. ## sistema di design CoreUI: scegli l’ambiente di runtime CoreUI che stai effettivamente usando ### Scegli l’ambiente di runtime CoreUI che stai effettivamente usando > Questo esempio usa CoreUI per Bootstrap 5.9.0, il pacchetto CSS e JavaScript per browser. CoreUI offre anche pacchetti specifici per framework, ma le relative importazioni dei componenti non sono intercambiabili con gli attributi data di questo esempio. La configurazione fornisce un foglio di stile abbinato e uno script in bundle, senza presupporre un provider React o Vue. La postazione di revisione usa schede, tabelle, moduli, schede di navigazione e notifiche toast gratuite. Non sostituisce di nascosto questi elementi con una griglia di dati PRO o un selettore avanzato a pagamento. Questo limite permette di riprodurre l’esempio completo usando il pacchetto indicato, senza richiedere l’acquisto di un modello non documentato. Leggi la specifica di supporto ## sistema di design CoreUI: usa il viola primario effettivo e i ruoli di stato abbinati ### Usa il viola primario effettivo e i ruoli di stato abbinati Il colore primario chiaro di CoreUI è #5856d6, con contrasto bianco per il primario. La scheda dei principi di revisione usa insieme primary-bg-subtle, primary-border-subtle e primary-text-emphasis. Questi nomi descrivono un trattamento coordinato della superficie: il testo di supporto non viene quindi collocato su uno sfondo colorato con un colore di primo piano scelto arbitrariamente. Anche le etichette High e Medium abbinano superfici tenui danger o warning al rispettivo testo emphasis. Le etichette testuali mantengono la classificazione indipendentemente dal colore. Si tratta di priorità di revisione del design a scopo esemplificativo, non dell’affermazione che ogni etichetta rossa di un prodotto debba indicare lo stesso stato di dominio. Leggi la specifica di supporto ## sistema di design CoreUI: distingui la tipografia predefinita del corpo del testo da quella di una tabella densa ### Distingui la tipografia predefinita del corpo del testo da quella di una tabella densa Il corpo del testo di CoreUI compilato usa come valori predefiniti un rem e un’interlinea di 1.5. Nell’esempio, la tabella usa intenzionalmente un testo di quattordici pixel e intestazioni di colonna di dodici pixel per supportare una coda di revisione densa. Il titolo e i valori di riepilogo della pagina hanno dimensioni originali più grandi. La guida non presenta erroneamente queste sovrascritture dell’applicazione come valori predefiniti dell’intera libreria. Le tre schede contestuali usano la griglia adattabile nativa e la spaziatura g-3. Posta in arrivo e Archivio restano affiancate sugli schermi piccoli, mentre la terza scheda esplicativa occupa un’intera riga. Ogni numero deriva dai cinque record di esempio visibili: non ci sono metriche di dashboard estranee né grafici di crescita inventati. Leggi la specifica di supporto ## sistema di design CoreUI: gli attributi data controllano veri pannelli delle schede ### Gli attributi data di CoreUI controllano veri pannelli delle schede Posta in arrivo e Archivio sono schede basate su pulsanti, con data-coreui-toggle="tab" e target che puntano ai pannelli corrispondenti. Il markup include le relazioni tablist, tab, tabpanel, aria-controls e aria-labelledby. Il componente CoreUI JavaScript aggiorna lo stato attivo e la visibilità, invece di affidare a un semplice gestore dell’applicazione la modifica di una sottolineatura. La classe nav-underline-border definisce il trattamento visivo di questo componente. Cambiare scheda non archivia i record né cancella una selezione. La scheda controlla quale parte della coda locale viene mostrata, mentre gli insiemi selected e archived dell’applicazione restano stati separati. Leggi la specifica di supporto ## sistema di design CoreUI: la selezione di tutti gli elementi prevede uno stato intermedio significativo ### La selezione di tutti gli elementi prevede uno stato intermedio significativo Ogni nota usa un ID stabile della serie R. Selezionando una riga, il relativo ID viene aggiunto a un Set selected. La casella di selezione nell’intestazione è selezionata solo quando sono selezionati tutti i record correnti della posta in arrivo; è indeterminata quando ne è selezionato solo qualcuno e disabilitata quando la posta in arrivo è vuota. Questi stati vengono ricalcolati a ogni aggiornamento della coda. Il pulsante per l’azione in blocco è disabilitato quando non è selezionato nulla e il testo adiacente indica il conteggio corrente. Dopo un’archiviazione, la selezione viene cancellata, così un record già archiviato non può restare selezionato accidentalmente per il gruppo successivo. La nota originale e il proprietario restano associati al record, invece di essere sostituiti da un’etichetta generica Risolto. 1. Seleziona due note ed esamina lo stato intermedio della casella nell’intestazione. 2. Archivia la selezione e verifica che il conteggio della posta in arrivo diminuisca di due. 3. Apri Archivio per leggere le richieste originali e i relativi proprietari. Leggi la specifica di supporto ## sistema di design CoreUI: una notifica toast presenta un’unica operazione specifica e reversibile ### Una notifica toast presenta un’unica operazione specifica e reversibile L’applicazione registra gli ID esatti dell’ultimo gruppo archiviato, quindi chiama il metodo show dell’istanza nativa Toast. autohide è false perché la notifica contiene un’azione Annulla; l’esempio non rimuove la possibilità di annullare dopo un timer breve e arbitrario. La notifica può comunque essere chiusa esplicitamente. Annulla rimuove dal Set archived solo gli ID salvati, cancella l’istantanea dell’ultimo gruppo e disabilita l’azione. Se viene annullato un gruppo successivo, un gruppo archiviato in precedenza resta archiviato. È volutamente un’operazione a un livello, non una pretesa fuorviante di cronologia completa degli annullamenti. Leggi la specifica di supporto ## sistema di design CoreUI: mantieni leggibile la richiesta anche dopo averla archiviata ### Mantieni leggibile la richiesta anche dopo averla archiviata La tabella della posta in arrivo mostra il titolo della nota, la modifica richiesta in dettaglio, l’area, la priorità e il proprietario. Archivio visualizza un elenco compatto che conserva il titolo, l’ID, il proprietario e la richiesta completa. Dopo la risoluzione riduce gli elementi visivi della tabella senza eliminare le informazioni necessarie per capire cosa è stato modificato. Sui dispositivi mobili, la tabella mantiene una larghezza minima di 740px all’interno di table-responsive. L’area indicata è raggiungibile da tastiera e dispone di un trattamento del focus visibile; lo scorrimento orizzontale resta confinato alla tabella, senza allargare il documento. Rimuovere colonne importanti solo per evitare una barra di scorrimento renderebbe meno efficace questa attività di revisione. Leggi la specifica di supporto ## sistema di design CoreUI: usa un risultato persistente senza inventare un backend ### Usa un risultato persistente senza inventare un backend La notifica toast usa il ruolo di stato polite e un annuncio atomico. Un secondo stato in linea descrive il risultato dell’archiviazione o dell’annullamento locale. Nessuno dei due afferma che un ticket esterno sia stato chiuso: la pagina specifica che non è collegata ad alcun sistema di gestione delle issue. L’anteprima modifica solo i Set in memoria, quindi ricaricando la pagina tornano le cinque note originali. I titoli e le descrizioni dei record vengono inseriti con textContent, anche nell’elenco Archivio. Le classi associate sono mappate in modo fisso alle due priorità note. Così il testo simile a quello fornito da un utente resta separato dalla struttura HTML e il flusso dei dati dell’esempio è verificabile. - Descrivi le dimensioni effettive del gruppo e l’ambito locale. - Mantieni disponibile il pulsante di annullamento finché l’istantanea è valida. - Non definire un aggiornamento locale del DOM come una risoluzione remota riuscita. Leggi la specifica di supporto ## sistema di design CoreUI: carica il bundle CoreUI prima del modulo locale ### Carica il bundle CoreUI prima del modulo locale La configurazione completa copia gli asset dist del pacchetto in un percorso pubblico locale e carica coreui.bundle.min.js prima di app.js. Il bundle espone coreui.Toast e fornisce il comportamento delle schede per gli attributi data-coreui. Per questa composizione non serve aggiungere un secondo runtime Bootstrap, che potrebbe creare confusione sulla gestione duplicata. Il tema chiaro è esplicitato tramite data-coreui-theme="light". Un’applicazione più ampia può adottare il meccanismo di gestione della modalità colore di CoreUI, ma dovrebbe verificare insieme le coppie semantiche di testo e superficie. La verifica locale ha coperto la selezione parziale, un batch di due record, la visualizzazione della scheda Archivio, il ripristino con Annulla e una viewport di 390px. Leggi la specifica di supporto ## Esempi di componenti del sistema di design CoreUI ### Coda, scheda Archivio e notifica di annullamento Attributi data di CoreUI, controlli della tabella, badge di priorità semantici e notifica 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.

    ``` Riferimento del codice - Con questo bundle usa gli attributi data-coreui-*, non data-bs-* copiati da un’altra libreria. - La tabella dispone di un’area di scorrimento orizzontale locale e con nome accessibile. - I colori di priorità sono accompagnati dalle etichette esplicite Alta/Media. ### Selezione in batch e annullamento dell’ultimo batch Gli ID stabili dei record determinano gli insiemi selezionati e archiviati, mentre Toast nativo gestisce la visibilità della notifica. ``` 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(); ``` Riferimento del codice - La selezione di tutti gli elementi espone gli stati selezionato, non selezionato e indeterminato. - Annulla ripristina esattamente gli ID dell’ultimo batch. - Tutti i testi dei record vengono inseriti con textContent. ### Densità originale della coda Composizione della pagina basata sullo stile nativo di card e tabelle di CoreUI. ``` 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}} ``` Riferimento del codice - La larghezza della tabella di 740px è una scelta dell’applicazione per favorire la leggibilità, non un valore predefinito di CoreUI. ## Configurazione dell’agent per il sistema di design CoreUI ### Punto di partenza per l’implementazione CoreUI verificato per Bootstrap 5.9.0. Il file app.js fornito si aspetta il markup completo della coda e non espone operazioni di rete. Il wrapper HTML include il markup completo del body; salva gli esempi forniti di interazione e di CSS con i nomi file indicati qui. ```

    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 per il tuo progetto ``` Parti dalla postazione per le operazioni di revisione del design CoreUI 5.9.0. Mantieni le schede native e la notifica di annullamento usando gli attributi data-coreui, i cinque record di revisione e l’insieme di ID selezionati, con uno stato misto derivato per la selezione multipla. Archivia il batch selezionato, mostralo nella scheda Archivio e consenti ad Annulla di ripristinare l’ultimo batch. Mantieni lo scorrimento orizzontale della tabella al suo interno e distingui la selezione dall’appartenenza all’archivio. Usa il bundle CoreUI corrispondente; non sostituire i nomi degli attributi di Bootstrap né dichiarare che l’archiviazione avviene lato server. ``` ## Fonti e ambito del sistema di design CoreUI CoreUI per i componenti gratuiti di Bootstrap 5.9.0. Le impostazioni predefinite del tema e le scelte originali di densità sono indicate separatamente. L’archiviazione e l’annullamento riguardano solo i record di esempio locali. - Introduzione CSS e JavaScript abbinati e inclusi nel bundle. - Variabili CSS Personalizzazione del tema in fase di esecuzione. - Colori Ruoli semantici del tema. - Tipografia Fondamenti tipografici nativi. - Schede Attributi data e semantica dei pannelli. - Notifiche Toast Notifica persistente e metodi dei componenti. - Caselle di controllo Stati nativi delle caselle di controllo. - Tabelle Composizione di tabelle responsive. ## Risorse correlate al sistema di design CoreUI ### daisyUI Uno strumento nativo per CSS dedicato alla creazione di inviti, che mostra i 5 temi semantici di daisyUI, i colori coordinati per i contenuti, gruppi di pulsanti radio, controlli a intervallo, convalida del browser e un vero passaggio di revisione in una finestra di dialogo. ### Element Plus Usa il modello Transfer, i filtri e le opzioni disabilitate effettivi di Element Plus per creare un ambiente di lavoro per la selezione dei moduli, con colori, dimensioni tipografiche e dimensioni dei controlli verificati. ### Flowbite Una composizione nativa con accordion e drawer di Flowbite 4, con alias verificati per i temi semantici, una checklist di preparazione persistente e un flusso accessibile, eseguibile in locale, per annotare i materiali. - [Riferimento per l’implementazione](https://coreui.io/bootstrap/docs/components/navs-tabs/) - [Fonte](https://coreui.io/bootstrap/docs/customize/color/) - [Fonte](https://coreui.io/bootstrap/docs/content/typography/) - [Fonte](https://coreui.io/bootstrap/docs/customize/css-variables/) - [Fonte](https://coreui.io/bootstrap/docs/layout/gutters/) - [Leggi la specifica di supporto](https://coreui.io/bootstrap/docs/getting-started/introduction/) - [Leggi la specifica di supporto](https://coreui.io/bootstrap/docs/customize/color/) - [Leggi la specifica di supporto](https://coreui.io/bootstrap/docs/content/typography/) - [Leggi la specifica di supporto](https://coreui.io/bootstrap/docs/components/navs-tabs/) - [Leggi la specifica di supporto](https://coreui.io/bootstrap/docs/forms/checks-radios/) - [Leggi la specifica di supporto](https://coreui.io/bootstrap/docs/components/toasts/) - [Leggi la specifica di supporto](https://coreui.io/bootstrap/docs/content/tables/) - [Riferimento del codice](https://coreui.io/bootstrap/docs/components/navs-tabs/) - [Riferimento del codice](https://coreui.io/bootstrap/docs/components/toasts/) - [Riferimento del codice](https://coreui.io/bootstrap/docs/content/tables/) - [Introduzione CSS e JavaScript abbinati e inclusi nel bundle.](https://coreui.io/bootstrap/docs/getting-started/introduction/) - [Variabili CSS Personalizzazione del tema in fase di esecuzione.](https://coreui.io/bootstrap/docs/customize/css-variables/) - [Colori Ruoli semantici del tema.](https://coreui.io/bootstrap/docs/customize/color/) - [Tipografia Fondamenti tipografici nativi.](https://coreui.io/bootstrap/docs/content/typography/) - [Schede Attributi data e semantica dei pannelli.](https://coreui.io/bootstrap/docs/components/navs-tabs/) - [Notifiche Toast Notifica persistente e metodi dei componenti.](https://coreui.io/bootstrap/docs/components/toasts/) - [Caselle di controllo Stati nativi delle caselle di controllo.](https://coreui.io/bootstrap/docs/forms/checks-radios/) - [Tabelle Composizione di tabelle responsive.](https://coreui.io/bootstrap/docs/content/tables/)