приложение к исследованию · редакция 1.0.3 · 9 октября 2026

Демо-сайт Bootstrap 6 в скриншотах

43 экранов демо-сайта на Bootstrap 6.0.0-alpha.1, снятых в Chromium 153.0.8010.0 через Playwright 1.56 в масштабе 2×: семь страниц на десктопе и телефоне, тёмная схема, открытые состояния и крупные планы — с разбором того, что на каждом экране делает фреймворк.

Клик по снимку открывает оригинал PNG; на странице показаны превью WebP шириной 1200 пикселей; оригиналы PNG лежат в репозитории на GitHub Pages. Тёмная схема включена эмуляцией системного предпочтения, а не атрибутом. Автор — Бейбит Саханов, Астана.

открыть демо-сайт читать доклад репозиторий

Страницы целиком: десктоп 1440 px

Семь страниц в светлой схеме при ширине окна 1440 пикселей. Снимки сделаны целиком, в масштабе 2×; длинные страницы прокручиваются внутри рамки.

Главная — Герой на текучем заголовке fs-5xl: при 1440 пикселях он отрисован в 64 px, на телефоне сожмётся до 48 без единого медиазапроса. Правее — карточка card-translucent со степпером выпуска и стопкой аватаров. Ниже сетка CSS Grid «восемь плюс четыре»: большой материал и три горизонтальные карточки card-row, у каждой из которых ссылка растянута на всю карточку классом stretched-link. Дальше три карточки рубрик на flex-сетке md:row-cols-3, демонстрация контейнерных запросов, площадка токенов и форма подписки.

Рубрика «Технологии» — Строка подрубрик — компонент nav-overflow: девять пунктов не помещаются, и плагин убрал «Архив» в меню «Ещё», измерив ширину обёртки. Справа комбобокс сортировки — кнопка combobox-toggle с меню на Floating UI. Лента — горизонтальные карточки с мягкими значками badge-subtle, замыкает её скелет placeholder-wave. Боковая колонка — отзывчивый ящик lg:drawer, который при 1440 пикселях стоит обычным блоком.

Статья — Хлебные крошки с явными разделителями breadcrumb-divider, заголовок fs-4xl, строка автора с аватаром из инициалов. Тело статьи — класс prose: абзацы, цитата с подписью blockquote-footer, таблица, список получили оформление без единого класса на элементе. Ниже аккордеон вопросов на <details>, чипы меток, обсуждение и форма комментария. Правая колонка липкая: lg:sticky-top.

Витрина компонентов — Левая колонка — вертикальные таблетки nav-pills flex-column, прилипшие к верху. Матрица кнопок пять форм на восемь тем, значки трёх форм, чипы, четыре оповещения с темами, полоса хода и стопка полос, спиннеры, кнопки, открывающие диалоги и ящики, меню, вкладки, подчёркнутая и таблеточная навигация, два степпера, две карусели, аватары, три варианта карточек, список и таблица в обёртке md:table-responsive.

Формы — Регистрация читателя в три раздела. Поля разложены сеткой form-field; обёртки с иконками — form-adorn; плавающая подпись «Город»; комбобокс роли с поиском; поле с чипами; кнопки-переключатели формата рассылки; флажки и переключатели с описаниями; ползунок с подписью значения и делениями; измеритель пароля; код подтверждения в шесть ячеек; группа ввода с тенге. Справа памятка о новом и исчезнувшем и два серверных состояния is-valid и is-invalid.

Токены и темы — Живая настройка с тремя ползунками и выбором схемы, палитра из 208 ячеек, восемь семантических тем по четыре роли, нейтральные поверхности bg-1–bg-4 и ступени текста, лестница из одиннадцати слоёв каскада, шесть теней, одиннадцать радиусов, шкала шрифтов с вычисленными размерами.

Редакционная панель — Контейнер на всю ширину. Слева колонка с профилем главреда, индикатором статуса и меню разделов — это отзывчивый ящик, которому для вертикальной раскладки понадобился lg:flex-column. Четыре карточки показателей, одна из них card-subtle theme-danger; степпер конвейера с подписями-значками на каждом шаге; таблица материалов с аватарами, значками стадий, чипами меток и меню действий; дедлайны, стопка полос корректуры и предупреждение.

Тёмная схема

Тёмная схема включена эмуляцией системного предпочтения prefers-color-scheme: dark, а не атрибутом. В стилях сайта нет ни одного правила для тёмной темы: пары light-dark() в токенах ядра выбрали вторые значения сами.

Главная в тёмной схеме — Поверхности bg-body и bg-1 стали почти чёрными, текст — светлым, мягкие значки и карточки с темами перешли на ступени 900 и 800 своих оттенков. Градиенты-заглушки тоже потемнели, потому что собраны из токенов --bs-primary-bg-subtle и соседних. Тени углубились токеном --bs-shadow-strength.

Панель в тёмной схеме — Таблица, значки стадий, карточка с темой danger и стопка полос читаются так же, как в светлой. Это и есть смысл семантических ролей: компонент просит «мягкий фон темы», а не конкретный цвет.

Витрина в тёмной схеме, первый экран — Матрица кнопок: сплошные формы сохранили цвет, контурные и текстовые перешли на светлые ступени fg, тема inverse стала светлой кнопкой с тёмным текстом — роль contrast перевернулась вместе со схемой.

Восемь тем в тёмной схеме — Те же восемь карточек, что на странице токенов в светлой схеме: роли contrast, subtle, muted и две ступени текста. Жёлтая и бирюзовая темы в роли contrast дают тёмный текст, остальные — белый; это задано в карте $theme-colors и не требует правок.

Открытые состояния

Снимки видимой области после действия пользователя: клик, наведение, ввод. Всё, что открыто, — настоящие компоненты в работе, а не нарисованные макеты.

Диалог «Поделиться» — Родной элемент <dialog>: подложка с размытием нарисована псевдоэлементом ::backdrop, страница за ним инертна, фокус заперт браузером. Внутри группа ввода со ссылкой и кнопкой «Копировать», которая кладёт адрес в буфер и показывает тост. Полоса прокрутки страницы не исчезла и макет не прыгнул — заслуга scrollbar-gutter: stable.

Тёмный диалог на светлой странице — Атрибут data-bs-theme="dark" стоит только на диалоге: внутри него все токены пересчитаны, снаружи страница светлая. Так можно темнить одно окно, одну карточку или одну колонку.

Меню с подменю — Меню «Рубрики» с заголовком группы menu-header, разделителем и подменю «Спецпроекты», раскрытым по наведению. Обёртки dropdown нет: кнопка и меню — соседние элементы, позицию считает Floating UI. Рядом ещё два меню с направлением через data-bs-placement, поповер и подсказка.

Ящик слева — Тот же элемент <dialog>, что у диалога, но с геометрией drawer-start: отступ от края, скругление, тень, подложка. На сенсорном экране его можно смахнуть обратно — жест встроен в плагин.

Комбобокс сортировки — Меню из четырёх пунктов под кнопкой-переключателем; активный пункт подсвечен. После выбора пункта «Самые читаемые» значение переписалось в кнопку и в скрытое поле sort. В консоли при загрузке страницы ядро пишет ошибку о втором экземпляре — она разобрана в докладе и занесена в реестр М-01.

Календарь — Плагин Datepicker на Vanilla Calendar Pro открылся по фокусу в поле «Дата рождения». Дни недели и месяц — на русском, язык взят из браузера. Календарь закрывается после выбора, по Escape и при уходе фокуса.

Форма после отправки с ошибками — Нажата «Зарегистрироваться» при пустых имени, почте и согласии. Атрибут data-bs-validate включил стили :user-invalid: подсвечены только тронутые поля. Поле с чипами приняло метку «дизайн», измеритель оценил пароль как «Хороший» (подписи переведены атрибутом data-bs-messages), код разложился по ячейкам 3+3, тост внизу сообщил об ошибках.

Площадка токенов после перестройки — Оттенок primary — teal, базовый радиус — 1,25 rem, шаг отступов — 1,25 rem. Навбар, карточка, три кнопки, значки, оповещение, поле, переключатель, полоса хода, степпер и аккордеон перестроились разом; слева — CSS, который даёт тот же результат на любом сайте. Пересборки Sass не было.

Контейнерный запрос: рамка сжата до 45 процентов — Окно браузера — 1440 пикселей, но обёртка contains-inline сжата ползунком, и группа карточек сложилась в столбик, а список внизу остался вертикальным, потому что его порог — 1024 пикселя ширины контейнера. Это невозможно сделать медиазапросом: он знает только ширину окна.

Три тоста — Три уведомления в контейнере toast-container в правом нижнем углу: обычное, с темой success и об ошибке. Появляются из @starting-style, исчезают через четыре секунды; метод show() вернул промис.

Крупные планы

Фрагменты страниц, снятые по границам элемента с небольшим полем.

Матрица кнопок — Пять форм — solid, outline, subtle, text, styled — на восемь тем. В пятой версии этот набор требовал шестнадцати классов вида btn-outline-danger; здесь любая ячейка — два класса. Ниже размеры от xs до lg, квадратная btn-icon, кнопка с подъёмом, отключённая, кнопка-ссылка, группа переключателей на btn-check и разделённая кнопка с меню.

Значки и чипы — Три ряда значков — сплошные, мягкие, контурные — по восемь тем. Значок в заголовке, счётчик «99+» поверх кнопки, чипы: простой, с картинкой, с темой, активный, с иконкой и удаляемый с крестиком.

Навигация и шаги — Вкладки на плагине Tab, подчёркнутая и таблеточная навигация, горизонтальный степпер пути материала по редакции с темой и значком на каждом шаге и вертикальный степпер по умолчанию.

Аватары и карточки — Аватары пяти размеров из инициалов, мягкий вариант, индикаторы статуса online, busy и away, стопка с перекрытием. Три карточки: мягкая с темой accent, матовое стекло поверх градиента и горизонтальная.

Палитра 16 × 13 — Двести восемь ячеек построены скриптом из переменных --bs-{оттенок}-{ступень}. Базовая ступень 500 записана в oklch, остальные — color-mix() с белым и чёрным в том же пространстве, поэтому строки выглядят равномерными по светлоте.

Одиннадцать слоёв каскада — Лестница из _root.scss: от colors до utilities. Слой custom подсвечен — в нём лежит site.css демо-сайта.

Герой главной — Фон — два радиальных градиента на токенах --bs-primary-bg-subtle и --bs-accent-bg-subtle. Заголовок с text-balance, подзаголовок с text-pretty, две кнопки размера lg, пять чипов, карточка матового стекла.

Карусель после перелистывания — Три слайда в ряд заданы переменными --bs-carousel-items: 3 и --bs-carousel-items-gap: 1rem; кнопка «вперёд» прокрутила ленту на один кадр. Лента — контейнер с привязкой прокрутки, поэтому колёсико и свайп работают без плагина. Ниже карусель с наложенными элементами управления и индикаторами в тёмной схеме.

Телефон 390 px

Экран телефона 390 на 844 пикселя при масштабе 2×, с эмуляцией сенсорного ввода. Страницы сняты целиком.

Главная на телефоне — Заголовок героя сжался до 48 px той же функцией clamp(). Сетка CSS Grid разложилась в одну колонку — после того как к md:g-col-8 и md:g-col-4 добавлен базовый g-col-12; без него элемент занимал одну двенадцатую ширины. Группа карточек в демонстрации контейнерных запросов стоит столбиком, потому что обёртка уже 576 пикселей.

Рубрика на телефоне — Переполнение навигации убрало в меню «Ещё» почти все подрубрики. Боковой колонки нет: она стала ящиком, который открывает кнопка «Фильтры» (снимок 29). Изображения горизонтальных карточек сохранили ширину 14 rem.

Статья на телефоне — Колонка prose читается без горизонтальной прокрутки, таблица внутри неё переносит строки. Аккордеон, чипы и форма комментария легли в одну колонку.

Витрина на телефоне — Левое меню разделов скрыто классом d-none lg:d-block. Матрица кнопок переносится по строкам, таблица в обёртке md:table-responsive получила горизонтальную прокрутку, карусель показывает три узких кадра.

Формы на телефоне — Все поля сетки grid встали в одну колонку благодаря базовому g-col-12. Код подтверждения в шесть ячеек поместился в ширину, памятка из боковой колонки ушла вниз.

Токены на телефоне — Палитра прокручивается по горизонтали внутри своей обёртки overflow-x-auto, остальные блоки легли в колонку. Кнопки выбора схемы в группе ужались.

Панель на телефоне — Боковая колонка превратилась в кнопку «Разделы панели» (ящик — снимок 30). Карточки показателей встали по две в ряд благодаря sm:row-cols-2, степпер конвейера прокручивается внутри stepper-overflow, таблица — внутри md:table-responsive.

Ящик фильтров рубрики — Отзывчивый ящик lg:drawer в раскрытом состоянии: список популярного, флажки, радиокнопки периода, переключатель подписки. Кнопка закрытия нашла свой ящик без data-bs-target.

Разделы панели в ящике — Левая колонка панели как ящик drawer-start: профиль, меню со счётчиками, пояснение. Заголовок ящика, скрытый на десктопе классом lg:d-none, здесь виден.

Главная на телефоне в тёмной схеме — Первый экран героя в тёмной схеме: градиенты, чипы, карточка матового стекла и кнопки перешли на тёмные ступени без правок.

Диалог, выезжающий снизу — Класс dialog-slide-up на телефоне: окно поднялось от нижнего края, как системный лист действий. Разметка та же, что у обычного диалога.

Статья на телефоне в тёмной схеме — Хлебные крошки, значок рубрики, заголовок и строка автора в тёмной схеме; кнопки «Поделиться» и закладки сохранили контраст.