logo bootstrap 5
HTML и CSS JavaScript Переводы

Вышла новая версия: Bootstrap 5 alpha!

Вышла первая версия Bootstrap 5 alpha! Мы приложили все усилия, в течение нескольких месяцев, чтобы улучшить то что мы начали в v4, и в то время как мы сделали так много, есть намного больше того что еще нужно сделать.

Мы были сосредоточены на том, чтобы сделать переход с v4 на v5 более доступным, но мы также не боялись отойти от того, что устарело или больше не подходит. Поэтому мы рады сообщить, что версия Bootstrap 5 больше не зависит от jQuery, и мы прекратили поддержку Internet Explorer. Мы заостряем внимание на создании инструментов, более ориентированных на будущее, и, хотя мы еще не все сделали, использование CSS-переменных, более быстрого JavaScript, уменьшение количества зависимостей и улучшение API-интерфейсов, безусловно, кажется нам правильным.

Прежде чем перейти к обновлению, помните, что v5 сейчас находится в альфа-версии — до нашей первой бета-версии будут происходить серьезные изменения. Мы еще не закончили добавлять или удалять все, поэтому проверяйте наличие открытых issues и pull requests, когда у вас есть вопросы или отзывы.

Теперь давайте углубимся в основные изменения!

Новый внешний вид

Мы улучшили нашу домашнюю страницы документации v4.5.0 и обновили интерфейс для остальной документации. Наши страницы документов больше не являются full-width, чтобы улучшить читаемость и сделать наш сайт менее похожим на приложение и более похожим на контент. Кроме того, мы обновили нашу боковую панель, чтобы использовать расширяемые разделы (работающие на нашем собственном плагине Collapse) для более быстрой навигации.

bootstrap 5 vs 4

Также мы обновили логотип! Подробнее об этом, мы расскажем когда выйдет более стабильная версия v5.

logo bootstrap 5

Вдохновленные CSS, который создал самые первые элементы этого проекта, наш логотип воплощает набор правил — стилей, ограниченных фигурными скобками. Мы любим это и думаем, что вы тоже. Ожидайте увидеть его в документации v4, нашем блоге со временем, так как мы продолжаем совершенствовать и выпускать новые релизы.

jQuery и JavaScript

За последние полтора десятилетия jQuery предоставил беспрецедентный доступ к сложному поведению JavaScript миллионам (миллиардам?) людей. Лично я всегда благодарен за предоставленные мне полномочия и поддержку, чтобы они продолжали писать front-end код, изучать новые вещи и использовать плагины сообщества. Возможно, он навсегда изменил сам JavaScript, и это само по себе является памятником успеха jQuery. Спасибо каждому вкладчику и сопровождающему jQuery, который сделал это возможным для таких людей, как я.

Благодаря прогрессу, достигнутому в инструментах front-end разработки и поддержке браузеров, мы теперь можем отбросить jQuery как зависимость (дословный перевод слов @Johann-S), наша основная поддержка JavaScript, в настоящее время помогла перенести эту миграцию. Это отмечает одно из самых больших изменений в структуре за последние годы и означает, что проекты, созданные на Bootstrap 5, будут значительно легче по размеру файла и загрузке страницы в будущем.

В дополнение к удалению jQuery мы внесли несколько других изменений и улучшений в наш JavaScript в v5, которые направлены на качество кода и преодоление разрыва между v4 и v5. Одним из наших более крупных изменений было удаление большей части нашего плагина Button для подхода только к HTML и CSS для переключения состояний. Теперь кнопки переключения питаются от флажков и переключателей и стали намного надежнее.

Вы можете увидеть полный список изменений, связанных с JS, в первом альфа-проекте v5 на GitHub.

Заинтересованы в помощи JavaScript Bootstrap? Мы всегда ищем новых участников для команды, чтобы помочь в написании новых плагинов, проверке запросов на удаление и исправлении ошибок. Дайте нам знать!

Переменные CSS

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

Возьмем, к примеру, наш компонент .table, в который мы добавили несколько локальных переменных, чтобы упростить стили таблиц, таблиц и активных таблиц:
.table {
--bs-table-bg: #{$table-bg};
--bs-table-accent-bg: transparent;
--bs-table-striped-color: #{$table-striped-color};
--bs-table-striped-bg: #{$table-striped-bg};
--bs-table-active-color: #{$table-active-color};
--bs-table-active-bg: #{$table-active-bg};
--bs-table-hover-color: #{$table-hover-color};
--bs-table-hover-bg: #{$table-hover-bg};

// Styles here...
}

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

Улучшенная документация

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

bootstrap 5 что нового

v5’s Customize документация v5 расширяются на странице Theming v4 с дополнительным содержимым и фрагментами кода для сборки поверх исходных файлов Sass Bootstrap. Мы добавили сюда больше контента и даже представили стартовый проект npm, чтобы вы могли быстрее и проще начать работу. Он также доступен в качестве репозитория шаблонов на GitHub, так что вы можете свободно форкать и использовать его.

новая версия bootstrap 5

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

Обновленные форм

В дополнение к новому разделу Customize мы пересмотрели нашу документацию по формам и компоненты. Мы объединили все наши стили форм в новый раздел Forms (включая компонент группы ввода), чтобы придать им особый акцент, которого они заслуживают.

bootstrap 5 обновил формы

Наряду с новыми страницами с документами, мы переработали и де-дупилировали все наши элементы управления формой. В версии 4 мы представили обширный набор пользовательских элементов управления формы – checks, radios, switches, files и многое другое – но они были в дополнение к любым настройкам по умолчанию, предоставляемым каждым браузером. С версией 5 мы полностью их адаптировали под браузеры.

checks, radios, switches, files bootstrap 5

Если вы знакомы с разметкой формы v4, они не должны показаться вам слишком сложными. Благодаря единому набору элементов управления формой и сосредоточению усилий на перепроектировании существующих элементов по сравнению с созданием новых с помощью псевдо-элементов мы получаем гораздо более согласованный внешний вид.

верстка сайтов bootstrap 5

Каждый checkbox, radio, select, file, range и многое другое включает настраиваемый внешний вид для унификации стиля и поведения элементов управления формы в ОС и браузере. Все эти новые элементы управления формой построены на полностью семантических, стандартных элементах управления – больше нет лишней разметки, только элементы управления формой и метки.

Обязательно изучите новую документацию форм и дайте нам знать, что вы об этом думаете.

Утилиты API

Нам нравится видеть, как многие люди создают новые и интересные библиотеки CSS и наборы инструментов, бросая вызов тому, что мы создавали в Интернете последние десять с лишним лет. Это освежает, по меньшей мере, и дает нам всем возможность обсудить и повторить. Таким образом, мы внедрили совершенно новый API утилит в Bootstrap 5.

$utilities: () !default;
$utilities: map-merge(
(
// ...
"width": (
property: width,
class: w,
values: (
25: 25%,
50: 50%,
75: 75%,
100: 100%,
auto: auto
)
),
// ...
"margin": (
responsive: true,
property: margin,
class: m,
values: map-merge($spacers, (auto: auto))
),
// ...
), $utilities);

С тех пор, как утилиты стали предпочтительным способом сборки, мы работали над поиском баланса для их реализации в Bootstrap, одновременно обеспечивая контроль и настройку. В v4 мы делали это с глобальными классами $enable-*, и мы даже продвинули это в v5. Но с помощью подхода на основе API, мы создали язык и синтаксис в Sass, чтобы создавать ваши собственные утилиты на лету, а также иметь возможность изменять или удалять те, которые мы предоставляем. Это все благодаря @MartijnCuppens, который также поддерживает проект RFS и отвечает за первоначальный PR и последующие улучшения.

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

Берегись! Мы переместили некоторые из наших бывших утилит v4 в новый раздел Helpers. Эти помощники представляют собой фрагменты кода, которые длиннее, чем обычные пары property-value для наших утилит. Просто наш способ реорганизации вещей для облегчения именования и улучшения документации.

Усовершенствованная система сетки

По замыслу Bootstrap 5 не является полным уходом от v4. Мы хотели, чтобы каждый мог более легко перейти на эту будущую версию, помня о трудностях перехода с v3 на v4. По этой причине мы сохранили основную часть системы сборки (за исключением jQuery), а также создали существующую систему сетки вместо того, чтобы заменить ее чем-то более новым и интересным.

Вот краткое изложение того, что изменилось в нашей сетке:

  • Мы добавили новый уровень сетки! Скажи привет xxl.
  • Классы .gutter были заменены утилитами .g*, так же, как наши утилиты margin/padding. Мы также добавили опции для grid отступов, которые соответствуют утилитам, которые вы уже знаете.
  • Параметры макета формы были заменены новой сеткой.
  • Были добавлены вертикальные классы расстояния.
  • Столбцы больше не используют position: relative по умолчанию.

Вот пример того, как можно использовать новые классы отступов для сетки:

grid bootstrap 5

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

Grid CSS все больше и больше готов к прайм-тайму, и хотя мы еще не использовали его здесь, мы продолжаем экспериментировать и учиться на нем. Посмотрите на будущие выпуски v5, чтобы охватить его больше.

Документация

Мы перевели наш генератор статической информации с сайта Jekyll на Hugo. Jekyll долгое время был нашим генератором выбора, учитывая то, как легко его запустить и запустить, а также простоту развертывания на страницах GitHub.

К сожалению, с Джекиллом мы столкнулись с двумя основными проблемами:

  1. Jekyll требует, чтобы Ruby был установлен
  2. Создание сайта было очень медленным

С другой стороны, Hugo написан на Go, поэтому он не имеет внешних зависимостей времени выполнения и работает намного быстрее. Мы создаем наш текущий основной ветвь сайта, в том числе документ Sass -> CSS в ~ 1.6s. Наш локальный сервер перезагружается за миллисекунды вместо 8-12 секунд, поэтому работа с документами снова стала приятным опытом.

Переключатель Hugo был бы невозможен без основной работы Хьюго, Бьорна Эрика Педерсена (@bep), который внес немало изменений в кодовую базу, чтобы сделать переход возможным и плавным!

Также поблагодарите @xhmikosr, который возглавил здесь преобразование сотен файлов и работу с разработчиками Hugo, чтобы убедиться, что наша локальная разработка была быстрой, эффективной и поддерживаемой.

Как начать

Посетите https://v5.getbootstrap.com, чтобы ознакомиться с новой версией. Мы также опубликовали это обновление в качестве предварительного релиза для npm, поэтому, если вы чувствуете смелость или хотите попробовать, что то новое, вы можете использовать последнюю версию таким образом.

npm i bootstrap@next

Что дальше?

У нас еще много работы над v5, включая некоторые серьезные изменения, но мы невероятно взволнованы этим выпуском. Дайте нам обратную связь, и мы сделаем все возможное, чтобы идти в ногу со всеми вами. Наша цель – выпустить еще одну альфу в течение 3-4 недель, и, вероятно, еще пару. Мы также выпустим релиз v4.5.1, чтобы исправить пару регрессий, и продолжим устранять разрыв между v4 и v5.

Кроме того, следите за обновлениями проекта Bootstrap Icons, нашего проекта RFS (теперь он включен по умолчанию в v5) и npm starter project.

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

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

<3, @mdo & team

Перевод статьи Bootstrap 5 alpha!

Предыдущий пост

Какие компании используют React, Vue, Angular? Какой JS фреймворк учить?

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

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