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

2023-06-27 0 ∞

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 5
Установка Bootstrap 5
Заключение

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

Прежде чем мы перейдем к ключевым изменениям новой версии 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.

Как можно увидеть на изображениях приведенных выше, здесь много файлов 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 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>

В качестве альтернативы можно использовать класс .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. Элементы формы, такие как элементы <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>

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

Отказавшись от поддержки 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 команда разработчиков расширила цветовую палитру за счет обширной встроенной цветовой системы. Теперь вы сможете легко настроить внешний вид приложения, даже не покидая базы кода.

Вы сможете установить цвет по своему выбору, который доступен в виде переменных 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 5 не требуется зависимость jQuery.

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

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

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

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

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

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

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

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

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

Иконки 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 и протестировать их на практике.