Bootstrap blog: Bootstrap Blog · Official blog for the Bootstrap framework.

Содержание

Шаблон блога | Blog Template for Bootstrap. Версия v3.4

Sample blog post

January 1, 2014 by Mark

This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, images, and code are all supported.


Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.

Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.

Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.

Heading

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Sub-heading

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Example code block

Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.

Sub-heading

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

  • Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
  • Donec id elit non mi porta gravida at eget metus.
  • Nulla vitae elit libero, a pharetra augue.

Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.

  1. Vestibulum id ligula porta felis euismod semper.
  2. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  3. Maecenas sed diam eget risus varius blandit sit amet non magna.

Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.

Another blog post

December 23, 2013 by Jacob

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.

Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.

Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

New feature

December 14, 2013 by Chris

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

  • Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
  • Donec id elit non mi porta gravida at eget metus.
  • Nulla vitae elit libero, a pharetra augue.

Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.

Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.

Шаблон блога · Bootstrap v5.0

Пример сообщения в блоге

1 января 2021 года Марк

В этом сообщении блога показано несколько различных типов контента, которые поддерживаются и стилизованы с помощью Bootstrap. Как и ожидалось, поддерживаются базовая типографика, списки, таблицы, изображения, код и многое другое.


Это дополнительный контент-заполнитель абзаца. Он был написан, чтобы заполнить доступное пространство и показать, как более длинный фрагмент текста влияет на окружающий контент. Мы будем повторять это часто, чтобы демонстрация продолжалась, так что ищите точно такую же строку текста.

Цитаты

Это пример цитаты в действии:

Цитируемый текст идет сюда.

Это дополнительный контент-заполнитель абзаца. Он был написан, чтобы заполнить доступное пространство и показать, как более длинный фрагмент текста влияет на окружающий контент. Мы будем повторять это часто, чтобы демонстрация продолжалась, так что ищите точно такую же строку текста.

Примеры списков

Это дополнительный контент-заполнитель абзаца. Это немного более короткая версия другого часто повторяющегося основного текста, используемого повсюду. Это пример неупорядоченного списка:

  • Первый элемент списка
  • Второй элемент списка с более длинным описанием
  • Третий пункт списка, чтобы закрыть его

И это упорядоченный список:

  1. Первый элемент списка
  2. Второй элемент списка с более длинным описанием
  3. Третий пункт списка, чтобы закрыть его

И это список определений:

Язык гипертекстовой разметки (HTML)
Язык, используемый для описания и определения содержимого веб-страницы.
Каскадные таблицы стилей (CSS)
Используется для описания внешнего вида веб-контента.
JavaScript (JS)
Язык программирования, используемый для создания сложных веб-сайтов и приложений.

Встроенные элементы HTML

HTML определяет длинный список доступных встроенных тегов, полный список которых можно найти на странице Mozilla Developer Network.

  • Чтобы выделить текст полужирным, используйте <strong>.
  • Чтобы выделить текст курсивом, используйте <em>.
  • В сокращениях, таких как HTML, следует использовать <abbr> с необязательным title атрибут для полной фразы.
  • Цитирования, такие как — Марк Отто, должны использовать
    <cite>
    .
  • Удаленный текст должен использовать <del> и inserted текст должен использовать <ins>.
  • Верхний индекс text использует <sup> и нижний индекс text использует <sub>.

Большинство этих элементов стилизованы браузерами с небольшими изменениями с нашей стороны.

Заголовок

Это дополнительный контент-заполнитель абзаца. Он был написан, чтобы заполнить доступное пространство и показать, как более длинный фрагмент текста влияет на окружающий контент. Мы будем повторять это часто, чтобы демонстрация продолжалась, так что ищите точно такую же строку текста.

Подзаголовок

Это дополнительный контент-заполнитель абзаца. Он был написан, чтобы заполнить доступное пространство и показать, как более длинный фрагмент текста влияет на окружающий контент. Мы будем повторять это часто, чтобы демонстрация продолжалась, так что ищите точно такую же строку текста.

Пример блока кода

Это дополнительный контент-заполнитель абзаца. Это немного более короткая версия другого часто повторяющегося основного текста, используемого повсюду.

Другой пост в блоге

23 декабря 2020 г. Джейкоб

Это дополнительный контент-заполнитель абзаца. Он был написан, чтобы заполнить доступное пространство и показать, как более длинный фрагмент текста влияет на окружающий контент. Мы будем повторять это часто, чтобы демонстрация продолжалась, так что ищите точно такую же строку текста.

Здесь идет более длинная цитата, возможно, с некоторым

выделенным текстом посередине.

Это дополнительный контент-заполнитель абзаца. Он был написан, чтобы заполнить доступное пространство и показать, как более длинный фрагмент текста влияет на окружающий контент. Мы будем повторять это часто, чтобы демонстрация продолжалась, так что ищите точно такую же строку текста.

Пример таблица

И не забывайте о таблицах в этих постах:

НаименованиеГолосование заГолосов против
Alice1011
Bob43
Charlie79
Totals2123

Это дополнительный контент-заполнитель абзаца.

Это немного более короткая версия другого часто повторяющегося основного текста, используемого повсюду.

Новая особенность

14 декабря 2020 г. Крис

Это дополнительный контент-заполнитель абзаца. Он был написан, чтобы заполнить доступное пространство и показать, как более длинный фрагмент текста влияет на окружающий контент. Мы будем повторять это часто, чтобы демонстрация продолжалась, так что ищите точно такую же строку текста.

  • Первый элемент списка
  • Второй элемент списка с более длинным описанием
  • Третий пункт списка, чтобы закрыть его

Это дополнительный контент-заполнитель абзаца. Это немного более короткая версия другого часто повторяющегося основного текста, используемого повсюду.

Блог Bootstrap · Официальный блог фреймворка Bootstrap.

@мдо

24 декабря 2022 г.

Это рождественское чудо — Bootstrap v5. 3.0-alpha1 прибыл как раз к праздничным каникулам! В этом выпуске добавлена ​​поддержка нового цветового режима, расширенная цветовая палитра с переменными и утилитами и многое другое.

В этой записи блога мы будем говорить кратко и просто, а более подробно расскажем о новых цветовых режимах и о других подробностях в следующих статьях. А пока мы хотим, чтобы вы насладились каникулами и вернулись в следующем году, чувствуя себя отдохнувшими и помолодевшими. Продолжайте читать, чтобы узнать, что нового, и увидимся в следующем году!

Темный режим и цветовые режимы

Bootstrap теперь поддерживает явное согласие на создание нескольких цветовых режимов через атрибут data-bs-theme в корневом элементе . Мы выбрали решение атрибута данных , чтобы вы могли создавать любое количество тем, а не только светлые и темные. Мы используем новый миксин Sass, color-mode() , для создания стилей темного режима либо с атрибутом данных (по умолчанию), либо с медиа-запросом. Последнее полезно, если у вас есть только два цветовых режима и вы хотите автоматически менять цветовой режим через CSS.

Подробнее читайте в документации по новому цветовому режиму.

Для тех, кто хочет создать что-то более продвинутое, вы можете прочитать, как мы создали наш собственный инструмент выбора цветового режима с помощью JavaScript, который по умолчанию учитывает настройки устройства или операционной системы, но все же позволяет кому-то переопределить его с явной темой.

Если вы используете CDN или начальный шаблон, использовать новые цветовые режимы несложно. Добавьте атрибут data-bs-theme с light или dark соответствует элементу , и вы будете использовать либо светлую, либо темную тему.

 

  <голова>
    <мета-кодировка="utf-8">
    
    Демо Bootstrap
     jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" целостность="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="анонимный">
  
  <тело>
     

Привет, мир!

Хотите вместо этого использовать мультимедийные запросы CSS для изменения цветового режима? Вы также можете создать Bootstrap с помощью Sass и настроить использование цветовых режимов. Прочтите документы, чтобы узнать больше. Вы даже можете создавать собственные цветовые режимы.

Расширенная цветовая палитра

У нас есть огромное обновление цветовой палитры с новыми переменными Sass, переменными CSS и утилитами для загрузки. Цвета переднего плана и фона имеют новые вторичные, третичные и акцентные цвета на выбор, в то время как наши цвета темы были расширены и теперь включают их тонкие цвета фона, тонкие цвета границ и более темные цвета текста. Мы перестроили некоторые компоненты (например, группы списков и оповещения), чтобы использовать эти новые переменные в их исходном Sass, и скомпилировали CSS, чтобы они реагировали на изменения цветового режима.

Ознакомьтесь с документацией по новым цветам.

И многое другое!

И еще несколько примечательных изменений:

  • Добавлены новые переменные CSS для точек останова сетки, цветов ссылок, кнопки закрытия, ссылок предупреждений, форм и т. д. Кроме того, многие компоненты были обновлены, чтобы использовать более глобальные переменные CSS, такие как --bs-border-color , чтобы лучше реагировать на изменение цветовых режимов.

  • Плавающие формы были обновлены, чтобы сделать их более пуленепробиваемыми, и теперь они включают правильную поддержку текстовых областей.

  • Добавлено много новых утилит, в том числе fw-medium , overflow и object-fit утилиты, z-index и другие. Кроме того, утилиты border-radius были обновлены, чтобы вы могли комбинировать .rounded-{top|bottom|start|end} с .rounded-{0-5|pill|circle} .

  • Исправлены некоторые проблемы с согласованностью всплывающих подсказок и всплывающих окон.

Обязательно ознакомьтесь с руководством по миграции версии 5.3.0, чтобы узнать, что изменилось.

Следующее

По мере того, как мы дорабатываем выпуск с учетом ваших отзывов и отчетов об ошибках, мы также будем обновлять блог Bootstrap и сайты Bootstrap Icons для использования новых тем в ближайшее время. Мы также продолжим совершенствовать работу наших компонентов и утилит с новыми цветовыми режимами, добавим тестирование Sass, чтобы улучшить охват того, как люди строят с помощью Bootstrap, и многое другое.

Получить выпуск

Перейдите на https://getbootstrap.com, чтобы получить последнюю версию. Он также был перемещен в npm:

 нпм в начальной загрузке @v5. 3.0-альфа1
 

Прочтите журнал изменений GitHub v5.3.0-alpha1, чтобы узнать полный список изменений в этом выпуске.

Поддержите команду

Посетите нашу страницу Open Collective или профили членов нашей команды на GitHub, чтобы поддержать тех, кто занимается поддержкой Bootstrap.

@мдо

22 ноября 2022 г.

Мы отказались от разработки v5.3.0, чтобы выпустить новую версию исправления, Bootstrap v5.2.3, с несколькими более срочными исправлениями ошибок.

Highlights

  • Добавлены отсутствующие переменные :root CSS в наш пакет утилит
  • Исправлено предупреждение об устаревании в Sass 1.56.0
  • Исправлено направление RTL translate() для каруселей
  • Исправлены несоответствия всплывающих подсказок и всплывающих окон

Мы возвращаемся к нему с версией 5.3.0 с поддержкой цветовых режимов, новых утилит и многого другого. Ищите предварительный выпуск этого в ближайшее время.

Получить выпуск

Перейдите на https://getbootstrap.com, чтобы получить последнюю версию. Он также был отправлен в npm:

 npm i [email protected]
 

Прочитайте журнал изменений GitHub v5.2.3, чтобы узнать полный список изменений в этом выпуске.

Поддержите команду

Посетите нашу страницу Open Collective или профили членов нашей команды на GitHub, чтобы поддержать тех, кто занимается поддержкой Bootstrap.

@мдо

11 ноября 2022 г.

Bootstrap Icons v1.10.0 уже здесь с почти 150 новыми значками. Этот выпуск включает в себя множество новых вариантов значков людей, зданий и баз данных, а также новые бренды, ракеты, дорожные знаки, глобусы и многое другое. Нам сейчас более 1900 иконок !

150 новых значков

Вот краткий обзор всех новых значков в версии 1. 10.0:

Некоторые особенности новых значков:

  • 22 новых значка людей
  • 26 новых значков домов
  • 24 значка новых зданий, в том числе переименованное здание с по зданий
  • 22 новых значка базы данных
  • 24 новых значка дорожных знаков
  • Новые иконки земного шара
  • Новые значки транспорта для электромобилей, такси, автобусов и скутеров
  • Новые ракеты
  • и больше!

Мы также исправили правила заполнения для нескольких ошибок в документах, в том числе:

  • Дедупликация названий категорий Марка и Бренды , чтобы они были просто Маркой
  • Обновлены теги на нескольких страницах значков для дополнительных псевдонимов

Ищете новые значки? Перейдите к системе отслеживания проблем, чтобы проверить наличие открытых запросов или отправить новый.

Установка

Для начала установите или обновите через npm:

 npm i bootstrap-icons
 

Или Composer:

 composer требуют twbs/bootstrap-icons
 

Вы также можете загрузить выпуск с GitHub или загрузить только SVG и шрифты (без остальных файлов репозитория).

Figma

Файл Figma теперь опубликован в сообществе Figma! Это тот же файл Bootstrap Icons Figma, который вы видели в предыдущих выпусках, только немного более доступный для тех, кто использует приложение.

@мдо

03 октября 2022 г.

Bootstrap v5.2.2 выпущен с новыми исправлениями ошибок и обновлениями документации — продолжайте читать, чтобы узнать, что изменилось!

Основные моменты

  • Аккордеон
    • Используйте переменную Sass для цвета аккордеона вместо недопустимой переменной CSS
  • Кнопки
    • Отменить изменения до .btn:hover из версии 5.2.1. Теперь мы явно нацеливаемся на .btn-check 9Вместо этого стили 0016.
  • Выпадающие списки
    • Временно восстановить возможность работы раскрывающихся списков без явного атрибута data (будет снова удалено в v6)
  • Модалы
    • Улучшение прослушивателей модальных событий
    • Использовать

      для всех экземпляров . modal-title в наших документах
  • Столы
    • Не переопределять $border-color в вариант таблицы() примесь
  • Вкладки
    • Вкладки больше не автофокусируются и вызывают переход страниц tab.show()
    • Fix .active class переключение вкладок в раскрывающихся списках
  • Тосты
    • Правильно установленный toast z-index на .toast-container в отличие от отдельных .toast s, которые не получают никакого другого позиционирования
  • Подсказки
    • Исправить селекторы всплывающих подсказок с атрибутом title для динамически создаваемых элементов

Получить выпуск

Перейдите на https://getbootstrap.com, чтобы получить последнюю версию. Он также был отправлен в npm:

 npm i bootstrap@v5. 2.2
 

Прочтите журнал изменений GitHub v5.2.2, чтобы узнать полный список изменений в этом выпуске.

Поддержите команду

Посетите нашу страницу Open Collective или профили членов нашей команды на GitHub, чтобы поддержать тех, кто занимается поддержкой Bootstrap.

@мдо

07 сентября 2022 г.

Bootstrap v5.2.1 здесь с исправлениями из нашего последнего дополнительного выпуска, v5.2. В виде выпуска исправлений эти изменения ограничены исправлениями ошибок, обновлениями документации и некоторыми обновлениями зависимостей.

Мы также продолжили работу над несколькими другими проектами, чтобы помочь людям начать работу с Bootstrap с npm, другими JS-фреймворками и различными инструментами сборки. Продолжайте читать, чтобы узнать больше.

Основные изменения

У нас обновил наши функции calc() , чтобы обойти очевидную ошибку в postcss-values-parser , которая препятствовала правильной компиляции наших исходных файлов Sass при сборке с помощью React и PostCSS. Исправление состояло в том, чтобы изменить порядок нашего умножения внутри функций calc() . Имейте в виду, что вам может потребоваться внести аналогичные изменения в зависимости от ваших собственных настроек.

Мы также решили некоторые давние проблемы, связанные с фокусом кнопок и активным стилем, в частности, с флажками и переключателями. На мобильных устройствах кнопки на основе ввода имеют проблемы со сбросом стилей фокуса. Это было решено в v5.2.1 с изменением с :focus до :focus-visible для нашего .btn s. Теперь флажки и переключатели больше не меняют свой background-color на :focus-visible , и они не получают стиль :hover . Обычные .btn по-прежнему имеют знакомые стили наведения и фокусировки.

Мы обсуждали, что не следует включать изменение фокуса кнопки в v5.2.1, но сочли это достаточно важным, чтобы закрыть несколько ошибок. Дайте нам знать, что вы думаете, и мы продолжим совершенствовать нашу реализацию.

Основные моменты

В дополнение к вышеуказанным изменениям мы исправили ошибки в нескольких компонентах:

  • Аккордеон
    • Обновите значение color , чтобы использовать переменную Sass $accordion-button-color вместо нашей функции цветового контраста
  • Кнопки
    • Добавлена ​​ прозрачная переменная CSS цвета рамки при наведении курсора по умолчанию для кнопок, чтобы исправить визуальную регрессию
    • .btn-link больше не имеет градиента, когда для $enable-gradients установлено значение true
  • Формы
    • Группы ввода обновлены значения z-index для обеспечения правильного отображения проверенных полей формы
    • Плавающие метки теперь сбрасывают text-align для обеспечения согласованного стиля
  • Группы списков
    • Горизонтальные группы списка только с одним дочерним элементом теперь отображают правильный радиус границы
    • Изменены селекторы list-group-item для лучшей поддержки вложенного импорта CSS Bootstrap
  • Модалы
    • Обновлены прослушиватели событий, чтобы игнорировать щелчки по щелчкам полосы прокрутки, щелчки, которые начинаются внутри . modal-dialog , но заканчиваются за его пределами, и реагируют на щелчки, которые начинаются и заканчиваются за пределами .modal-dialog
  • Пагинация
    • Исправлено неверно border-radius значения внутри компонентов пагинации
  • Шпион прокрутки
    • Опция порога Scrollspy теперь настраивается
  • Подсказки и всплывающие окна
    • Отменены некоторые обновления подключаемых модулей всплывающих подсказок, чтобы предотвратить проблемы с селектором , динамическим содержимым и удаленными всплывающими подсказками с использованием заголовка
    • Исправлен триггер : «ручной» показывался и сразу скрывался при вызове переключить()

Зависимости

  • Обновлен Autoprefixer для исправления предупреждений о свойстве color-adjust (спасибо @julien-deramond из нашей команды за сообщение о проблеме выше по течению здесь)

Документы

  • Улучшен поиск наших документов на мобильных устройствах: поле поиска теперь всегда отображается на адаптивных узких окнах просмотра
  • Удалены ссылки и упоминания о Slack из кодовой базы, поскольку мы намерены закрыть Slack в пользу GitHub Обсуждения
  • Вновь введены правильные стили структуры для образцов кода и кнопок документов, когда :not(:focus-visible)

Прощай, Слэк!

Как упоминалось более месяца назад, мы приняли решение закрыть наш Slack-канал сообщества. Slack не очень хорош в управлении большим сообществом, и это непомерно дорого для сообщества такого размера, как наше (в Slack было более 45 000 человек!). Вместо использования Slack или аналогичного инструмента мы призываем людей использовать нашу вкладку «Обсуждения» на GitHub.

Исследуйте обсуждения Bootstrap

Репозиторий примеров

Не забудьте проверить (каламбур!) наш последний проект, репозиторий twbs/examples! Проект примеров включает в себя функциональные демонстрации для всех видов сред и JS-фреймворков, и в планах еще больше! Вы даже можете открыть каждый пример в StackBlitz и отредактировать его в браузере.

  • Starter — ссылки CDN для нашего CSS и JS
  • Sass & JS — Импортируйте Sass, Autoprefixer, Stylelint и наш пакет JS через npm
  • Sass и ESM JS — импортируйте Sass, Autoprefixer и Stylelint через npm, а затем загрузите наш ESM JS с прокладкой
  • Webpack — Импорт и объединение Sass и JS с Webpack
  • Parcel - Sass, JS через Parcel
  • Vite — Sass, JS через Vite
  • Шрифт Bootstrap Icons — Импортируйте и скомпилируйте Sass, Stylelint, PurgeCSS и наш иконочный шрифт

Есть идея для нового начального примера? Не стесняйтесь открывать тикеты или пулреквесты!

Стартовый проект v4

Мы выпустили обновление v2. 0.0 для проекта twbs/bootstrap-npm-starter. Этот выпуск включает в себя Bootstrap v4.6.2, Bootstrap Icons v1.9.1, новую функцию оперативной перезагрузки для локальной разработки и несколько обновлений зависимостей. Этот проект по-прежнему будет посвящен Bootstrap 4, в то время как наш репозиторий twbs/examples будет посвящен v5 и будущим основным выпускам.

Получить выпуск

Перейдите на https://getbootstrap.com, чтобы получить последнюю версию. Он также был перемещен в npm:

 нпм в начальной загрузке @v5.2.1
 

Прочтите журнал изменений GitHub v5.2.1, чтобы узнать полный список изменений в этом выпуске.

Поддержите команду

Посетите нашу страницу Open Collective или профили членов нашей команды на GitHub, чтобы поддержать тех, кто занимается поддержкой Bootstrap.

Начальная загрузка 5.2.1 | Блог Bootstrap

@мдо

07 сентября 2022 г.

Bootstrap v5.2.1 здесь с исправлениями из нашего последнего дополнительного выпуска, v5.2. В виде выпуска исправлений эти изменения ограничены исправлениями ошибок, обновлениями документации и некоторыми обновлениями зависимостей.

Мы также продолжили работу над несколькими другими проектами, чтобы помочь людям начать работу с Bootstrap с npm, другими JS-фреймворками и различными инструментами сборки. Продолжайте читать, чтобы узнать больше.

Основные изменения

Мы обновили наши функции calc() , чтобы обойти очевидную ошибку в postcss-values-parser , которая препятствовала правильной компиляции наших исходных файлов Sass при сборке с помощью React и PostCSS. Исправление состояло в том, чтобы изменить порядок нашего умножения внутри 9.0015 calc() функций. Имейте в виду, что вам может потребоваться внести аналогичные изменения в зависимости от ваших собственных настроек.

Мы также решили некоторые давние проблемы, связанные с фокусом кнопок и активным стилем, в частности, с флажками и переключателями. На мобильных устройствах кнопки на основе ввода имеют проблемы со сбросом стилей фокуса. Это было решено в v5.2.1 с изменением :focus на :focus-visible для нашего .btn s. Теперь флажки и переключатели больше не меняют свои background-color на :focus-visible , и они не получают стиля :hover . Обычные .btn по-прежнему имеют знакомые стили наведения и фокусировки.

Мы обсуждали, что не следует включать изменение фокуса кнопки в v5.2.1, но сочли это достаточно важным, чтобы закрыть несколько ошибок. Дайте нам знать, что вы думаете, и мы продолжим совершенствовать нашу реализацию.

Highlights

В дополнение к вышеуказанным изменениям мы исправили ошибки в нескольких компонентах:

  • Аккордеон
    • Обновите значение color , чтобы использовать переменную Sass $accordion-button-color вместо нашей функции цветового контраста
  • Кнопки
    • Добавлена ​​ прозрачная переменная CSS цвета рамки при наведении курсора по умолчанию для кнопок, чтобы исправить визуальную регрессию
    • . btn-link больше не имеет градиента, когда для $enable-gradients установлено значение true
  • Формы
    • Группы ввода обновлены значения z-index для обеспечения правильного отображения проверенных полей формы
    • Плавающие метки теперь сбрасывают text-align для обеспечения согласованного стиля
  • Группы списков
    • Горизонтальные группы списка только с одним дочерним элементом теперь отображают правильный радиус границы
    • Изменены селекторы list-group-item для лучшей поддержки вложенного импорта CSS 9 Bootstrap.0064
  • Модалы
    • Обновлены прослушиватели событий, чтобы игнорировать щелчки по щелчкам полосы прокрутки, щелчки, которые начинаются внутри .modal-dialog , но заканчиваются за его пределами, и реагируют на щелчки, которые начинаются и заканчиваются за пределами . modal-dialog
  • Пагинация
    • Исправлены неверные значения border-radius внутри компонентов пагинации
  • Шпион прокрутки
    • Опция порогового значения Scrollspy теперь настраивается
  • Подсказки и всплывающие окна
    • Отменены некоторые обновления подключаемых модулей всплывающих подсказок, чтобы предотвратить проблемы с селектором , динамическим содержимым и удаленными всплывающими подсказками с использованием заголовка
    • Фиксированный триггер : «ручной» отображение и немедленное скрытие при вызове toggle()

Зависимости

  • Обновлен Autoprefixer для исправления предупреждений о свойстве color-adjust (спасибо @julien-deramond из нашей команды за сообщение о проблеме вверх по течению здесь)

Документы

  • Улучшен поиск наших документов на мобильных устройствах: поле поиска теперь всегда отображается на адаптивных узких окнах просмотра
  • Удалены ссылки и упоминания Slack из кодовой базы, поскольку мы намерены закрыть Slack в пользу обсуждений на GitHub
  • Вновь введены правильные стили структуры для образцов кода и кнопок документов, когда :not(:focus-visible)

Прощай, Слэк!

Как упоминалось более месяца назад, мы приняли решение закрыть наш Slack-канал сообщества. Slack не очень хорош в управлении большим сообществом, и это непомерно дорого для сообщества такого размера, как наше (в Slack было более 45 000 человек!). Вместо использования Slack или аналогичного инструмента мы призываем людей использовать нашу вкладку «Обсуждения» на GitHub.

Исследуйте обсуждения Bootstrap

Репозиторий примеров

Не забудьте проверить (каламбур!) наш последний проект, репозиторий twbs/examples! Проект примеров включает в себя функциональные демонстрации для всех видов сред и JS-фреймворков, и в планах еще больше! Вы даже можете открыть каждый пример в StackBlitz и отредактировать его в браузере.

  • Starter — ссылки CDN для нашего CSS и JS
  • Sass & JS — Импортируйте Sass, Autoprefixer, Stylelint и наш пакет JS через npm
  • Sass и ESM JS — импортируйте Sass, Autoprefixer и Stylelint через npm, а затем загрузите наш ESM JS с прокладкой
  • Webpack — Импорт и объединение Sass и JS с Webpack
  • Parcel — Sass, JS через Parcel
  • Vite — Sass, JS через Vite
  • Шрифт Bootstrap Icons — Импортируйте и скомпилируйте Sass, Stylelint, PurgeCSS и наш иконочный шрифт

Есть идея для нового начального примера? Не стесняйтесь открывать тикеты или пулреквесты!

Стартовый проект v4

Мы выпустили обновление v2.

Оставить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *