Как перейти с Bootstrap 4 на Bootstrap 5

Как перейти с Bootstrap 4 на Bootstrap 5
Bootstrap как никогда актуален благодаря легким в освоении и использовании обновлениям. С выпуском Bootstrap 5 фреймворк претерпел ряд ключевых обновлений. Хотя весь фреймворк в полном объеме не переписывался, качество кода было существенно улучшено. Были добавлены новые пользовательские свойства, переработаны элементы управления формы, расширена цветовая палитра, и явно ожидается поддержка переменных CSS и более быстрая интеграция JavaScript с минимальными зависимостями и улучшенным API.

Ключевое обновление включают в себя то, что Bootstrap больше не зависит от jQuery, он будет полагаться на vanilla JavaScript. Кроме того прекращена поддержка Internet Explorer 10 и 11. Bootstrap также получил новый логотип, это обновленная буква B в закругленном квадрате.

В данной статье мы рассмотрим изменения и новые возможности Bootstrap 5, описав некоторые конкретные изменения в классах и поведении, которые будут полезны при переходе с Bootstrap 4 на Bootstrap 5.

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

Поддержка браузерами

Прежде чем мы перейдем к ключевым изменениям новой версии Bootstrap, давайте рассмотрим поддержку браузерами. Если вы используете Bootstrap 4 или более старую версию платформы Bootstrap, вам может потребоваться изменить уровень поддержки при переходе на Bootstrap 5. Поддержка Internet Explorer 10 и 11 была официально исключена из новой версии. Сейчас поддерживаемые браузеры — это Microsoft Edge вместе с иными наиболее популярными браузерами, такими как Google Chrome и Firefox, включая последнюю версию Firefox с расширенной поддержкой(ESR). Обратите внимание на то, что прокси-браузеры(такие как Opera Mini, Opera Mobile’s Turbo mode, Amazon Silk, UC Browser Mini) не поддерживаются. Bootstrap 5 также может отлично работать в Chromium и Chrome для Linux, а также Firefox для Linux, но официально это не указано.

Кроме того, альтернативные браузеры, которые используют последнюю версию WebKit, Blink или Gecko, прямо или через WebView API, официально не поддерживаются.

Когда дело доходит до поддержки мобильных устройств, минимальная поддерживаемая версия iOS — это версия 7 и выше. Для Android это версия 6 и выше в браузере и WebView. Более старые версии Android и iOS официально не поддерживаются. Некоторые свойства CSS, такие как hidden ; для элемента <body> весьма ограничены в iOS и Android.

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

Глобальные изменения

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

Вот вкратце ключевые изменения:

  • Расширенная система сетки;
  • Обновленные элементы управления формой;
  • Добавлено пару компонентов и вариантов компоновки;
  • Расширенная цветовая палитра;
  • Улучшенная поддержка JavaScript;
  • Новый генератор статических веб-сайтов;
  • Добавлена ​​библиотека иконок SVG;
  • Скоро: RTL, off-canvas и многое иное.

Исходный код Bootstrap 5

Прежде чем мы перейдем к углубленному рассмотрению новой версии Bootstrap, давайте посмотрим на исходный программный код Bootstrap 5. Если скачать исходный код здесь, и распаковать файл, вы найдете много файлов, но мы сосредоточимся только на папке dist, внутри которой находится ядро файлов CSS и JS.

Как перейти с Bootstrap 4 на Bootstrap 5Как перейти с Bootstrap 4 на Bootstrap 5Как можно увидеть на картинках приведенных выше, здесь много файлов CSS и JavaScript. Однако вам понадобятся только два из них, чтобы вручную воспользоваться возможностями Bootstrap 5 в минимизированной версии: bootstrap.min.css и bootstrap.min.js. Если вы планируете использовать неминимизированную версию, вам понадобятся файлы bootstrap.css и bootstrap.js .

Установка Bootstrap 5

Bootstrap 5 можно без труда установить при помощи разных опций. Вы можете загрузить и установить его, скомпилировав при помощи CSS и JavaScript, через исходный код или просто включить его в современных инструментах разработки, таких как менеджеры пакетов, к примеру, npm, RubyGems и иные.

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

  • Скомпилированный CSS и JS. Готовый к использованию скомпилированный код для Bootstrap v5.0.0-alpha1, который можно без труда запросто включить в проект. Он включает скомпилированные и минифицированные пакеты CSS, а также скомпилированные минимизированные подключаемые модули JavaScript.
  • Исходные файлы. Вы можете без проблем использовать этот вариант для компиляции Bootstrap с использованием собственного конвейера ресурсов через Sass и JavaScript. Он содержит компилятор Sass(поддерживаются Libsass или Ruby Sass) и Autoprefixer для добавления вендорных префиксов CSS.
  • Bootstrap CDN. Если вы не планируете загружать скомпилированные коды CSS и JavaScript и исходные коды, то можете без проблем пропустить процесс загрузки и просто добавить в HTML-файл ссылку на Bootstrap Content Delivery Network.
  • Менеджеры пакетов. Используя инструменты программирования для создания сред проекта и простого импорта внешних зависимостей, таких как bootstrap, вам не необходимо изобретать велосипед, так как bootstrap предоставляет список менеджеров пакетов для использования. Bootstrap можно установить через npm, yarn, RubyGems, Composer и NuGet.

Расширенная сетка

С технической точки зрения Bootstrap 5 не будет в полном объеме переписанным Bootstrap 4. Команда разработчиков Bootstrap решила создать новую версию фреймворка без использования jQuery и всех иных факторов, учитывая при этом процесс миграции посетителей, который был заметно затруднен при переходе от версии Bootstrap 3 к версии Bootstrap 4. Вместо того чтобы заменять кучу классов, команда разработчиков Bootstrap решила просто улучшить их.

Добро пожаловать, класс.xxl

Сетка Bootstrap сейчас по умолчанию может адаптироваться ко всем шести контрольным точкам. Шесть классов сетки по умолчанию следующие:

  • Очень маленький(xs);
  • Маленький(sm);
  • Средний(md);
  • Большой(lg);
  • Очень большой(xl);
  • Очень большой(xxl).

Как перейти с Bootstrap 4 на Bootstrap 5Bootstrap 5 представил новый служебный класс, который применяется к сверхшироким экранам. Класс .xxl будет обрабатывать контрольные точки, которые выходят за рамки обычных контрольных точек медиа-запросов Bootstrap, он имеет в себя минимальный размер контрольной точки 1400 пикселей в макете из 12 столбцов.

К примеру, если вы планируете изменить таргетинг на экран, ширина которого превышает 1400 пикселей, можно использовать:

<div class="container"> <div class="row"> <div class="col-xxl> <p>Your content here</p>   </div>    </div></div>

Классы зазоров

Зазоры — это интервалы между столбцами. Они были введены для адаптивного размещения и выравнивания содержимого в сетке Bootstrap.

В Bootstrap 4 зазоры можно изменить при помощи специальных классов отступов и отрицательного поля ввода. Но в Bootstrap 5 классы зазоров были заменены утилитами.g *, которые похожи на утилиты margin / padding.

Зазоры — это пространство между содержимым столбца, созданное горизонтальным отступом. Чтобы установить его, надо установить padding-right и padding-left для каждого столбца и использовать отрицательное поле ввода для смещения этого поля ввода в начале и конце каждой строки для выравнивания содержимого.

Например, если вы хотите контролировать ширину горизонтального зазора, вам надо использовать класс gx- *.

<div class="container px-4">    <div class="row gx-5">        <div class="col">            <div class="p-3 border bg-light">Custom column padding</div>        </div>        <div class="col">            <div class="p-3 border bg-light">Custom column padding</div>        </div>    </div></div>
Как перейти с Bootstrap 4 на Bootstrap 5

В виде альтернативы можно без труда использовать класс .gy- * для управления шириной вертикального зазора:

<div class="container overflow-hidden">    <div class="row gy-5">        <div class="col-6">            <div class="p-3 border bg-light">Custom column padding</div>        </div>        <div class="col-6">            <div class="p-3 border bg-light">Custom column padding</div>        </div>        <div class="col-6">            <div class="p-3 border bg-light">Custom column padding</div>        </div>        <div class="col-6">            <div class="p-3 border bg-light">Custom column padding</div>        </div>    </div></div>

Как перейти с Bootstrap 4 на Bootstrap 5

Обновленные элементы управления формой

В Bootstrap 4 элементы управления формой получают глобальный стиль тем Bootstrap. Элементы формы, такие как элементы <input>, <textarea> и <select> с классом .form-control, имеют ширину 100%. Чтобы правильно предоставить согласованные поля ввода в форме, надо добавить класс элемента-оболочки .form-group для каждого подмножества элементов:

<form>    <div class="form-group">        <label for="exampleInputEmail1">Email address</label>        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"> <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> </div>    <div class="form-group">        <label for="exampleInputPassword1">Password</label>        <input type="password" class="form-control" id="exampleInputPassword1"> </div>    <div class="form-group form-check">        <input type="checkbox" class="form-check-input" id="exampleCheck1">        <label class="form-check-label" for="exampleCheck1">Check me out</label>    </div>    <button type="submit" class="btn btn-primary">Submit</button></form>

Но в Bootstrap 5 класс.form-group был удален и заменен системой сеток. Это предоставит настраиваемые дисплеи для более последовательного рендеринга в различных браузерах и на разных устройствах более простым методом.

<form><form>    <div class="mb-3">        <label for="exampleInputEmail1" class="form-label">Email address</label>        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">        <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>    </div>    <div class="mb-3">        <label for="exampleInputPassword1" class="form-label">Password</label>        <input type="password" class="form-control" id="exampleInputPassword1"> </div>    <div class="mb-3 form-check">        <input type="checkbox" class="form-check-input" id="exampleCheck1">        <label class="form-check-label" for="exampleCheck1">Check me out</label>    </div>    <button type="submit" class="btn btn-primary">Submit</button></form>

Как перейти с Bootstrap 4 на Bootstrap 5

Компоненты и настройки макета

Отказавшись от поддержки Internet Explorer 10 и 11, команда разработчиков Bootstrap смогла без труда включить пару компонентов и вариантов компоновки.

Возьмем, например, класс .table. Если вы используете Sass, то сможете воспользоваться преимуществами новых локальных переменных, чтобы упростить чередование, перемещение и активные стили таблиц.

@mixin table-variant($state, $background) {.table-#{$state} {    $color: color-contrast(opaque($body-bg, $background));    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));    $active-bg: mix($color, $background, percentage($table-active-bg-factor));     --bs-table-bg: #{$background};    --bs-table-striped-bg: #{$striped-bg};    --bs-table-striped-color: #{color-contrast($striped-bg)};    --bs-table-active-bg: #{$active-bg};    --bs-table-active-color: #{color-contrast($active-bg)};    --bs-table-hover-bg: #{$hover-bg};    --bs-table-hover-color: #{color-contrast($hover-bg)};     color: $color;    border-color: mix($color, $background, percentage($table-border-factor));  }}

Вы можете посетить эту страницу, чтобы узнать больше о разных вариантах таблиц Bootstrap.

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

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

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

Как перейти с Bootstrap 4 на Bootstrap 5Вы сможете легко установить цвет по выбору, который доступен в виде переменных Sass и карт Sass в файле scss/_variables.scss .

Все данные цвета доступны в виде карт Sass, $theme-colors.

$theme-colors: ( "primary": $primary, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark );

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

Поддержка JavaScript

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

Помимо отказа от jQuery, команда разработчиков Bootstrap создала пару иных улучшений кода JavaScript в версии 5, они ориентированы на качество кода и устранение разрыва между версией Bootstrap 4 и версией Bootstrap 5.

Одно из заметных обновлений – это массовое перелючение состояний плагинов кнопок . Кнопки переключения основаны на чек-боксах и переключателях. Плагин Button удален в пользу решения на чистом CSS, чек-бокса / переключателя с классом .btn-toggle . Это решение работает как с обычными, так и с контурными кнопками. При этом вам больше не потребуется сниппет jQuery $().button(‘toggle’) .

Чтобы вы лучше поняли суть данных обновлений JavaScript, давайте попробуем добавить модальное окно при помощи Bootstrap 4, а далее сравним рабочий процесс с Bootstrap 5.

Чтобы сделать это в Bootstrap 4, необходимо сначала добавить следующие зависимости, которые включают библиотеку jQuery к тегу html:

<!-- Button trigger modal --><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button><!-- Modal --><div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">    <div class="modal-dialog" role="document">        <div class="modal-content">            <div class="modal-header">                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>                <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>            </div>            <div class="modal-body"> ... </div>            <div class="modal-footer">                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>                <button type="button" class="btn btn-primary">Save changes</button>            </div>        </div>    </div></div>

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

$('#myModal').on('shown.bs.modal', function () {  $('#myInput').trigger('focus')})

Сейчас давайте попробуем создать аналогичный эффект в Bootstrap 5. Сначала нам необходимо добавить следующие зависимости в HTML, но на этот раз библиотека jQuery задействована не будет .

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" "></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js "></script>

Далее мы добавляем кнопку и разметку для модального окна:

<div class="modal" tabindex="-1">    <div class="modal-dialog">        <div class="modal-content">            <div class="modal-header">                <h5 class="modal-title">Modal title</h5>                <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>            </div>            <div class="modal-body">                <p>Modal body text goes here.</p>            </div>            <div class="modal-footer">                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>                <button type="button" class="btn btn-primary">Save changes</button>            </div>        </div>    </div></div>

В конце надо добавить следующий код JavaScript, чтобы выводить модальное окно на экране при нажатии кнопки:

var myModal = document.getElementById('myModal')var myInput = document.getElementById('myInput') myModal.addEventListener('shown.bs.modal', function () {  myInput.focus()})

Как перейти с Bootstrap 4 на Bootstrap 5Как можно увидеть оба метода работают, но в версии Bootstrap 5 не требуется зависимость jQuery.

Новый генератор статических веб-сайтов

Создание статического сайта — один из самых быстрых и эффективных вариантов развертывания сайта в настоящее время, он имеет в себя несколько преимуществ, поскольку используются простые инструменты разработки, а производительность невероятно высока. Для этого есть два основных решения: Jekyll и Hugo .

Bootstrap 4 был отличным инструментом для интеграции с Jekyll через Sass (Syntactically Awesome Style Sheets) и был известен вашей простотой при развертывании на Github Pages. Однако в Bootstrap 5 команда разработчиков решила использовать Hugo. Одна из основных причин перехода заключается в том, что Jekyll требует установки Ruby, и это было медленно. В очередь Hugo написан на Go и не имеет в себя внешних зависимостей времени выполнения, что обеспечивает молниеносный и достаточно расширяемый генератор статических веб-сайтов, который содержит основные инструменты: файлы на основе Markdown, шаблоны и многое иное.

Если вы хотели бы интегрировать Hugo в проект Bootstrap, вот как это сделать:

  1. Выполните настройку указанных выше инструментов, чтобы установить все необходимые зависимости.
  2. Из каталога root /bootstrap запустите в командной строке npm run docs-serve .
  3. Откройте в браузере http://localhost: 9001/

Чтобы узнать больше о том, как использовать Hugo, посетите их страницу документации .

Библиотека иконок SVG

Ещё в версии 3 Bootstrap предлагал 250 повторно используемых компонентов иконок, называемых « Glyphicons », которые были лицензированы на веб-сайте GLYPHICONS.com . В конце концов, данные значки были удалены из Bootstrap 4.

Впервые в истории Bootstrap в версии 5 появилась собственная библиотека иконок, которая была разработана и создана специально для используемых компонентов, от элементов управления формы до навигации. Самое лучшее в данных иконках то, что они имеют формат SVG. Это означает, что они отлично масштабируются в различных окнах просмотра, не влияя на качество, и их можно стилизовать при помощи CSS. Хотя они созданы для Bootstrap, но будут работать в любом проекте. Иконки Bootstrap 5 имеют открытый исходный код (MIT), так что вы сможете бесплатно загружать, использовать и расширять их.

Как перейти с Bootstrap 4 на Bootstrap 5Иконки Bootstrap 5 публикуются в менеджере пакетов node (npm), но при необходимости их также можно без труда загрузить вручную.

Вы можете установить значки Bootstrap через npm при помощи следующей команды:

npm install bootstrap-icons

Далее вы сможете без проблем использовать тег svg, чтобы встроить иконку по выбору:

<svg class="bi bi-chevron-right" width="32" height="32" viewBox="0 0 20 20" fill="currentColor" xmlns="https://www.w3.org/2000/svg">    <path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z" /></svg>

Если вы хотите использовать иконки Bootstrap 5 вручную, то сможете загрузить последнюю версию zip-архива на данной странице и включить их при помощи тега image.

Готовится к выпуску

С выпуском Bootstrap 5 некоторые вещи были упразднены и добавлено пару новых. Одной из ожидаемых возможностей в будущем выпуске, будет интеграция RTLCSS , который представляет собой метод преобразования каскадных таблиц стилей (CSS) из режима написания слева-направо (LTR) в справа-налево (RTL). Это предоставит мощный набор директив для управления процессом преобразования напрямую из CSS.

Ещё одна ожидаемая функцию — это реализация offcanvas меню , которое всплывает, когда посетитель кликает по иконке или выполняет какое-либо действие (к примеру, клик по меню), что приводит к перемещению меню вертикальной навигации на экран. Она все ещё находится в процессе разработки.

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

Заключение

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

Чтобы понять все обновления, внедренные на данный момент, попробуйте просмотреть документацию на официальном сайте Bootstrap 5 и протестировать их на практике.

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

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