# Дизайн-система CoreUI ## Предпросмотр интерфейса дизайн-системы CoreUI Выберите заметки, архивируйте несколько за раз, откройте вкладку «Архив» и отмените последнюю операцию. ## Справочник по дизайн-системе CoreUI Значения по умолчанию для светлой темы CoreUI для Bootstrap 5.9.0 взяты из установленной скомпилированной таблицы стилей. Имена --cui-* соответствуют реальным переменным среды выполнения. В примере приложения используются бесплатные компоненты; он не предполагает наличия виджетов CoreUI PRO. ### Роли светлой темы | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --cui-primary | #5856d6 | Основной фиолетовый цвет CoreUI. | | --cui-primary-contrast | #fff | Текст, сочетающийся с основным цветом. | | --cui-secondary | #6b7785 | Вторичная роль. | | --cui-success | #1b9e3e | Роль успешного состояния. | | --cui-info | #39f | Информационная роль. | | --cui-warning | #f9b115 | Роль предупреждения. | | --cui-danger | #e55353 | Роль опасности. | | --cui-primary-bg-subtle | #cfc7f3 | Фон контекстной карточки с мягким основным оттенком. | | --cui-primary-text-emphasis | #3634a3 | Текст на поверхности с мягким основным оттенком. | | --cui-primary-border-subtle | #9d92e6 | Граница контекстной карточки. | | --cui-danger-bg-subtle | #f9d4d4 | Фон метки высокого приоритета. | | --cui-danger-text-emphasis | #671414 | Текст метки высокого приоритета. | | --cui-warning-bg-subtle | #feecc5 | Фон метки среднего приоритета. | | --cui-warning-text-emphasis | #764705 | Текст метки среднего приоритета. | ### Типографика и поверхности по умолчанию | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --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" | Системный стек шрифтов интерфейса. | | --cui-body-font-size | 1rem | Размер основного текста по умолчанию — 1rem; для плотной таблицы задано исходное переопределение 14px. | | --cui-body-line-height | 1.5 | Межстрочный интервал основного текста по умолчанию. | | --cui-body-color | rgba(37, 42.92, 54.02, 0.95) | Основной цвет текста для светлой темы. | | --cui-body-bg | #fff | Основная поверхность. | | --cui-tertiary-bg | #f3f4f7 | Фон страницы в этом примере. | | --cui-secondary-color | rgba(37, 42.92, 54.02, 0.681) | Роль вспомогательного текста. | | --cui-border-color | #dbdfe6 | Цвет разделителей по умолчанию. | ### Переменные скругления и фокуса | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --cui-border-radius | 0.375rem | Значение по умолчанию: эквивалент 6px при корневом размере 16px. | | --cui-border-radius-sm | 0.25rem | Малое значение: эквивалент 4px. | | --cui-border-radius-lg | 0.5rem | Большое значение: эквивалент 8px. | | --cui-border-radius-xl | 1rem | Очень большое значение: эквивалент 16px. | | --cui-border-radius-pill | 50rem | Форма капсулы. | | --cui-focus-ring-width | 0.25rem | Толщина индикатора фокуса. | | --cui-focus-ring-opacity | 0.25 | Непрозрачность индикатора фокуса. | | --cui-focus-ring-color | rgba(88, 86, 214, 0.25) | Цвет индикатора фокуса на основе основного цвета. | ### Исходные настройки плотности очереди | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | Page padding | 32px; 24px 14px mobile | Исходный внутренний отступ приложения. | | Table minimum width | 740px | Колонки остаются читаемыми в локальной адаптивной области прокрутки. | | Table cell padding | 16px | Исходная настройка плотности вокруг стандартной структуры таблицы. | | Table text | 14px; headings 12px | Исходная компактная иерархия. | | g-3 summary row | 1rem native gutter | В адаптивных карточках показателей используется стандартный интервал сетки. | | Toast behavior | autohide: false | Действие отмены остаётся доступным, пока его не скроют или не заменят более поздней групповой операцией. | ## Полное руководство по дизайн-системе CoreUI Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса. Подробные рекомендации, отправная точка для реализации и ссылки на источники. ## Дизайн-система CoreUI: выберите именно ту среду выполнения CoreUI, которой пользуетесь ### Выберите именно ту среду выполнения CoreUI, которой пользуетесь > В этом примере используется CoreUI для Bootstrap 5.9.0 — пакет CSS и browser-JavaScript. У CoreUI также есть пакеты для конкретных фреймворков, но импорты компонентов в них несовместимы с атрибутами данных из этого примера. Настройка подключает согласованные таблицу стилей и скрипт из комплекта, не предполагая наличия провайдера React или Vue. В рабочей панели проверки используются бесплатные карточки, таблицы, формы, вкладки и всплывающие уведомления. Вместо них незаметно не подставляются платная сетка данных PRO или расширенный платный селектор. Благодаря этому весь пример можно воспроизвести на основе указанного пакета, не приобретая шаблон, о котором не было сказано. Прочитать вспомогательную спецификацию ## Дизайн-система CoreUI: используйте фактический основной фиолетовый цвет и соответствующие ему роли статусов ### Используйте фактический основной фиолетовый цвет и соответствующие ему роли статусов Основной цвет светлой темы CoreUI — #5856d6; контрастный текст для него — белый. В карточке с принципом проверки дизайн-макета вместе используются primary-bg-subtle, primary-border-subtle и primary-text-emphasis. Эти имена обозначают согласованное оформление поверхности, поэтому вспомогательный текст не помещается на тонированный фон с произвольным цветом переднего плана. В метках высокого и среднего приоритета также сочетаются мягкие поверхности danger или warning и текст emphasis. Текстовые метки сохраняют классификацию независимо от цвета. Это приоритеты для примера проверки дизайн-макета, а не утверждение, что каждая красная метка в продукте должна обозначать одно и то же состояние предметной области. Прочитать вспомогательную спецификацию ## Дизайн-система CoreUI: отделяйте основной шрифт текста от шрифта плотной рабочей таблицы ### Отделяйте основной шрифт текста от шрифта плотной рабочей таблицы В скомпилированной версии CoreUI для основного текста по умолчанию заданы размер в один rem и межстрочный интервал 1.5. В примере для текста таблицы намеренно задан размер четырнадцать пикселей, а для заголовков столбцов — двенадцать пикселей, чтобы уместить плотную очередь на проверку. Для заголовка страницы и значений сводки отдельно заданы исходные увеличенные размеры. В руководстве эти переопределения приложения не выдаются за значения по умолчанию для всей библиотеки. В трёх контекстных карточках используются встроенная адаптивная сетка и интервал g-3. На небольших экранах «Входящие» и «Архив» остаются рядом, а третья карточка с пояснением занимает целую строку. Все числа рассчитаны по пяти видимым примерам записей; посторонние показатели панели управления и выдуманные графики роста отсутствуют. Прочитать вспомогательную спецификацию ## Дизайн-система CoreUI: атрибуты данных управляют настоящими панелями вкладок ### Атрибуты данных CoreUI управляют настоящими панелями вкладок «Входящие» и «Архив» — это вкладки-кнопки с data-coreui-toggle="tab" и целевыми селекторами соответствующих панелей вкладок. В разметке указаны связи tablist, tab, tabpanel, aria-controls и aria-labelledby. Компонент CoreUI JavaScript обновляет активное состояние и видимость, а не просто меняет подчёркивание с помощью обработчика приложения. Класс nav-underline-border задаёт визуальное оформление этого компонента. Переключение вкладки не архивирует записи и не снимает выделение. Вкладка определяет, какая часть локальной очереди отображается, а Sets выбранных и архивированных записей в приложении хранятся отдельно. Прочитать вспомогательную спецификацию ## Дизайн-система CoreUI: у выбора всех элементов есть осмысленное промежуточное состояние ### У выбора всех элементов есть осмысленное промежуточное состояние У каждой заметки есть постоянный идентификатор серии R. Установка флажка в строке добавляет этот идентификатор в Set выбранных элементов. Флажок в заголовке установлен, только если выбраны все текущие записи во входящих; если выбрана часть, он находится в промежуточном состоянии, а если входящие пусты — отключён. Эти состояния пересчитываются при каждой отрисовке очереди. Кнопка группового действия отключена, если ничего не выбрано, а соседний текст показывает текущее количество. После архивации выделение сбрасывается, чтобы уже архивированная запись случайно не попала в следующую группу. Исходные заметка и ответственный остаются прикреплены к записи, а не заменяются общей меткой «Решено». 1. Выберите две заметки и проверьте промежуточное состояние флажка в заголовке. 2. Архивируйте выбранные заметки и убедитесь, что количество входящих уменьшилось на две. 3. Откройте «Архив», чтобы прочитать исходные запросы и имена ответственных. Прочитать вспомогательную спецификацию ## Дизайн-система CoreUI: всплывающее уведомление сообщает об одной конкретной операции, которую можно отменить ### Всплывающее уведомление сообщает об одной конкретной операции, которую можно отменить Приложение сохраняет точные идентификаторы записей из последней архивированной группы, а затем вызывает метод show встроенного экземпляра Toast. Параметр autohide имеет значение false, поскольку уведомление содержит действие «Отменить»; в примере возможность отмены не исчезает по произвольному короткому таймеру. Уведомление по-прежнему можно закрыть вручную. Отмена удаляет из Set архивированных элементов только сохранённые идентификаторы, очищает снимок последней группы и отключает действие. Если отменить более позднюю группу, предыдущая останется в архиве. Это намеренно одноступенчатая операция, а не вводящее в заблуждение заявление о полноценной истории отмен. Прочитать вспомогательную спецификацию ## Дизайн-система CoreUI: сохраняйте читаемость запроса после его архивации ### Сохраняйте читаемость запроса после его архивации В таблице входящих показаны заголовок заметки, конкретное запрошенное изменение, область, приоритет и ответственный. В «Архиве» отображается компактный список, в котором сохранены заголовок, идентификатор, ответственный и полный текст запроса. После обработки таблица выглядит лаконичнее, но необходимая для понимания внесённых изменений информация не удаляется. На мобильных устройствах минимальная ширина таблицы составляет 740px; таблица размещена внутри table-responsive. Именованная область доступна для фокусировки с клавиатуры и имеет заметное оформление фокуса; горизонтальная прокрутка остаётся внутри таблицы, не расширяя документ. Удаление важных столбцов лишь ради избавления от полосы прокрутки ухудшило бы процесс проверки. Прочитать вспомогательную спецификацию ## Дизайн-система CoreUI: используйте постоянный результат, не выдумывая серверную часть ### Используйте постоянный результат, не выдумывая серверную часть У всплывающего уведомления есть роль status с вежливым режимом объявления и атомарным озвучиванием. Дополнительное встроенное сообщение описывает результат локальной архивации или отмены. Ни одно из них не утверждает, что внешняя задача закрыта: на странице прямо указано, что трекер задач не подключён. Предпросмотр меняет только находящиеся в памяти Sets, поэтому после перезагрузки восстанавливаются исходные пять заметок. Заголовки записей и их описания, в том числе в списке архива, вставляются с помощью textContent. Для двух известных приоритетов используются фиксированные сопоставления классов. Благодаря этому пользовательский текст отделён от структуры HTML, и за потоком данных в примере можно проследить. - Указывайте фактический размер группы и локальный характер операции. - Оставляйте кнопку отмены доступной, пока сохранённый снимок действителен. - Не называйте локальное обновление DOM успешным удалённым разрешением задачи. Прочитать вспомогательную спецификацию ## Дизайн-система CoreUI: загрузите пакет CoreUI перед локальным модулем ### Загрузите пакет CoreUI перед локальным модулем Полная настройка копирует ресурсы dist пакета в локальный общедоступный путь и загружает coreui.bundle.min.js перед app.js. Bundle предоставляет coreui.Toast и обеспечивает работу вкладок с атрибутами data-coreui. Добавлять ещё одну среду выполнения Bootstrap для этой композиции не нужно: это может привести к путанице из-за дублирования ответственности. Светлая тема явно задаётся атрибутом data-coreui-theme="light". Более крупное приложение может использовать механизм цветовых режимов CoreUI, но при этом следует проверять пары семантических цветов текста и поверхностей вместе. Локальная проверка охватывала частичный выбор, пакет из двух записей, просмотр содержимого вкладки архива, восстановление отменой и область просмотра шириной 390px. Прочитать вспомогательную спецификацию ## Примеры компонентов дизайн-системы CoreUI ### Очередь, вкладка архива и уведомление об отмене Атрибуты данных CoreUI, элементы управления таблицей, семантические значки приоритета и постоянное уведомление. ```

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.

    ``` Справочник по коду - Используйте с этим пакетом атрибуты data-coreui-*, а не скопированные из другой библиотеки data-bs-*. - Для таблицы предусмотрена именованная локальная область горизонтальной прокрутки. - Цвета приоритета сопровождаются явными подписями «Высокий» и «Средний». ### Выбор пакета и отмена последнего пакета Стабильные идентификаторы записей определяют наборы выбранных и архивированных записей, а встроенный Toast управляет видимостью уведомления. ``` 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(); ``` Справочник по коду - Функция «Выбрать все» поддерживает состояния «выбрано», «не выбрано» и «выбрано частично». - Отмена восстанавливает в точности идентификаторы записей из последнего пакета. - Весь текст записей вставляется с помощью textContent. ### Исходная плотность очереди Композиция страницы на основе встроенных карточек и оформления таблиц 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}} ``` Справочник по коду - Ширина таблицы 740px — это принятое в приложении решение для удобства чтения, а не значение по умолчанию CoreUI. ## Настройка AI-агента для дизайн-системы CoreUI ### Отправная точка для реализации Проверено для CoreUI и Bootstrap 5.9.0. Предоставленный app.js предполагает наличие полной разметки очереди и не выполняет сетевых операций. Обёртка HTML содержит полную разметку тела страницы; сохраните предоставленные примеры взаимодействия и CSS под указанными здесь именами файлов. ```

    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.

      ``` ### Запрос для вашего проекта ``` Начните с рабочего стола проверки дизайн-системы CoreUI 5.9.0. Сохраните встроенные вкладки и уведомление об отмене с атрибутами data-coreui, пять записей проверки и набор выбранных идентификаторов с вычисляемым состоянием частичного выбора. Архивируйте выбранный пакет, показывайте его на вкладке архива и позвольте отменить последнее действие восстановления. Ограничьте горизонтальную прокрутку таблицей и отделяйте выбранные записи от находящихся в архиве. Используйте соответствующий пакет CoreUI; не подменяйте его атрибутами Bootstrap и не утверждайте, что архивирование выполняется на сервере. ``` ## Источники и область применения дизайн-системы CoreUI CoreUI для бесплатных компонентов Bootstrap версии 5.9.0. Значения тем по умолчанию отделены от первоначально выбранной плотности. Архивирование и отмена затрагивают только локальные демонстрационные записи. - Введение Соответствует CSS и включённому в пакет JavaScript. - Переменные CSS Настройка темы во время выполнения. - Цвета Семантические роли темы. - Типографика Основы типографики. - Вкладки Атрибуты данных и семантика панелей. - Уведомления Постоянное уведомление и методы компонента. - Флажки Состояния встроенного флажка. - Таблицы Адаптивная компоновка таблиц. ## Полезные ресурсы по дизайн-системе CoreUI ### daisyUI Студия приглашений на основе CSS, демонстрирующая семантические темы daisyUI 5, парные цвета содержимого, объединённые переключатели, ползунки, встроенную проверку браузера и полноценный этап проверки в диалоговом окне. ### Element Plus Используйте настоящую модель Transfer в Element Plus, фильтры и отключённые параметры, чтобы создать рабочую область выбора модулей с проверенными цветами, размерами шрифта и габаритами элементов управления. ### Flowbite Композиция с нативными аккордеоном и боковой панелью Flowbite 4, проверенными семантическими псевдонимами темы, постоянным списком вещей для поездки и доступным локальным сценарием заметок о материалах. - [Справочник по реализации](https://coreui.io/bootstrap/docs/components/navs-tabs/) - [Источник](https://coreui.io/bootstrap/docs/customize/color/) - [Источник](https://coreui.io/bootstrap/docs/content/typography/) - [Источник](https://coreui.io/bootstrap/docs/customize/css-variables/) - [Источник](https://coreui.io/bootstrap/docs/layout/gutters/) - [Прочитать вспомогательную спецификацию](https://coreui.io/bootstrap/docs/getting-started/introduction/) - [Прочитать вспомогательную спецификацию](https://coreui.io/bootstrap/docs/customize/color/) - [Прочитать вспомогательную спецификацию](https://coreui.io/bootstrap/docs/content/typography/) - [Прочитать вспомогательную спецификацию](https://coreui.io/bootstrap/docs/components/navs-tabs/) - [Прочитать вспомогательную спецификацию](https://coreui.io/bootstrap/docs/forms/checks-radios/) - [Прочитать вспомогательную спецификацию](https://coreui.io/bootstrap/docs/components/toasts/) - [Прочитать вспомогательную спецификацию](https://coreui.io/bootstrap/docs/content/tables/) - [Справочник по коду](https://coreui.io/bootstrap/docs/components/navs-tabs/) - [Справочник по коду](https://coreui.io/bootstrap/docs/components/toasts/) - [Справочник по коду](https://coreui.io/bootstrap/docs/content/tables/) - [Введение Соответствует CSS и включённому в пакет JavaScript.](https://coreui.io/bootstrap/docs/getting-started/introduction/) - [Переменные CSS Настройка темы во время выполнения.](https://coreui.io/bootstrap/docs/customize/css-variables/) - [Цвета Семантические роли темы.](https://coreui.io/bootstrap/docs/customize/color/) - [Типографика Основы типографики.](https://coreui.io/bootstrap/docs/content/typography/) - [Вкладки Атрибуты данных и семантика панелей.](https://coreui.io/bootstrap/docs/components/navs-tabs/) - [Уведомления Постоянное уведомление и методы компонента.](https://coreui.io/bootstrap/docs/components/toasts/) - [Флажки Состояния встроенного флажка.](https://coreui.io/bootstrap/docs/forms/checks-radios/) - [Таблицы Адаптивная компоновка таблиц.](https://coreui.io/bootstrap/docs/content/tables/)