76УДК 004
Клюев Михаил Владимирович Klyev Mikhail Vladimirovich
Студент Student
Кубанского Государственного Технического Университета
Kuban State Technical University
Поздняков Евгений Александрович Pozdnyakov Evgeny Alexandrovich
Студент Student
Кубанского Государственного Технического Университета
Kuban State Technical University
РАЗЛИЧИЯ BOOTSTRAP4 И BOOTSTRAP5 ПРИ РАЗРАБОТКЕ WEB-САЙТОВ
DIFFERENCES IN BOOTSTRAP4 AND BOOTSTRAP5 WHEN DEVELOPING WEB SITES
Аннотация: Статья посвящена Фреймворку Bootstrap. В ней описываются особенности выбора данного Фреймворка, а так же приводится описание крупного обновления Bootstrap5. В статье рассмотрены основные различия Bootstrap4 и Bootstrap5.
Abstract: This article is dedicated to the Bootstrap Framework. It describes the specifics of choosing this Framework, as well as a description of a major Bootstrap5 update. This article covers the main differences between Bootstrap4 and Bootstrap5.
Ключевые слова: Web-сайт, Framework, Bootstrap 4, Bootstrap 5.
Key words: Website, Framework, Bootstrap 4, Bootstrap 5.
Что такое Bootstrap? Bootstrap является открытым исходным кодом и бесплатной платформой HTML, CSS и JS, используемой веб-разработчиками для быстрого создания адаптивных веб-проектов и приложений.
Основная область применения - разработка интерфейсов и интерфейсов. Среди таких систем (Foundation, UIkit, Semantic UI.) Bootstrap является наиболее популярным.
Почему Bootstrap так популярен? Это потому, что он позволяет настраивать сайты во много раз быстрее, чем с «чистым» CSS и JavaScript. И в нашем мире время - самый ценный ресурс. Также его популярность связана с доступностью. Он заключается в том, что даже новичок может создавать качественные макеты для разработчиков, что было бы трудно сделать без глубоких знаний веб-технологий и достаточной практики. Bootstrap использует несколько важных глобальных стилей и настроек при использовании, которые почти исключительно направлены на нормализацию стилей в браузерах. Основными компонентами веб-платформы Bootstrap являются: классы форматирования текста, компоненты создания кнопок, различные формы на странице, горизонтальные и вертикальные меню навигации, ползунки, раскрывающиеся списки, аккордеоны, модалисты, рабочие столы и другие элементы интерфейса, вспомогательные классы решения проблем, чаще всего встречается веб-разработчиками
Преимущества выбора платформы Bootstrap:
высокая скорость создания высококачественного пользовательского макета даже разработчиками новых веб-сайтов
правильное отображение и работа веб-сайта во всех браузерах и операционных системах, поддерживаемых этой платформой
возможность настройки проекта, это достигается путем изменения переменных SCSS и использования комбинаций Bootstrap
наличие обширных библиотек и доступа, большого количества статей, работ и видеоматериалов; всё это при желании позволяет достигнут искомый результат и хорошо разобраться в Фреймворке [3].
Но, как и у всех веб-платформ Bootstrap имеет минусы, которые с каждым обновлением уменьшаются, что приводит к стабильной и комфортной работе при разработке веб приложений. Основными минусами исследуемой платформы стали:
- больший размер конечных файлов CSS и JavaScript, чем если бы они были написаны специально для этого проекта на чистом CSS и JavaScript (это связано с тем, что стили и код JavaScript содержат много всего, а большинству веб-сайтов нужна только та или иная часть).
- использование Bootstrap для настройки веб-сайтов, которые потребуют много переписывания кода CSS и JavaScript (простая настройка переменных Bootstrap здесь обязательна).
Первый недостаток не так важен, тем более что его можно несколько «выровнять», если мы выполним независимую композицию проекта из исходного кода и включим только эти компоненты. В этом случае код для этого кадра будет намного меньше. Но второй недостаток требует много времени, чтобы начать уже свободную разработку.
При использовании веб-инфраструктуры Bootstrap 4 можно сразу заметить, что более старые версии Bootstrap накладывают ограничение на поле содержимого. Большинству экспертов это кажется раздражающим. Теперь эта проблема была решена.
Сброс CSS еще далек и теперь называется новой перезагрузкой в новой версии Bootstrap.
Перезапуск основан на нормализации. Он избегает margin-top, использует наследование, блок rem и собственную композицию шрифтов для оптимальной визуализации текста.
Процесс редактирования улучшен по сравнению с предыдущими версиями, главным образом потому, что он влияет на структуру блоков на странице. Разработчики изменили структуру этой части каркаса, что в основном коснулось мобильных экранов. До этого, однако, он очень хорошо работал над загрузкой мобильных телефонов и планшетов, но теперь песни больше ориентированы на разные мобильные устройства.
Новые параметры настройки шаблона. Вам не нужно создавать отдельный файл темы, чтобы изменить стиль элемента сейчас. Все, что вам нужно сделать,
это изменить переменные в файле Sass по своему вкусу, и вы получите обновленный вид для всех элементов в составном файле. Например, вы можете представить тени, градиенты, закругленные углы, анимацию. Ранее вы создали свой собственный сброс, чтобы удалить закругленные углы с кнопок, а иногда использовали их! Важно, но теперь вам просто нужно изменить переменные в Sass. Ранее можно было изменить дизайн по умолчанию непосредственно в исходном коде, и CSS был перестроен, но теперь эти переменные специально собраны в отдельные файлы, поэтому анализировать и исследовать исходный код будет намного проще [2].
Еще одним заметным и приятным изменение стало то, что было улучшено пиксельное изображение, а точнее переработано на размеры rem и em, а так же был переработан поиск документации и его улучшения. Почти все руководство было переписано с примерами и исходным кодом. Поиск документации также работает быстро, хотя с такой структурой документа это не имеет большого
Предварительно скомпилированный Bootstrap 4
Как только скомпилированная версия Bootstrap 4 будет загружена, извлеките ZIP-файл, и вы увидите следующую структуру файлов / каталогов (рисунок 1).
смысла
bootstrap/
[ ess/
|-bootstrap-grid.ess
|-bootstrap-grid.css.map
|-bootstrap-grid.min.css
|-bootstrap-grid.min.css.map
|-bootstrap-reboot.css
|-bootstrap-reboot.css.map
|-bootstrap-reboot.min.css
|-bootstrap-reboot.min.css.map
|-bootstrap.css
|-bootstrap.css.map
|-bootstrap.min.css
| I-bootstrap.min.css.map
I-]s/
|-bootstrap, bundle.js
|-bootstrap.bundle.js.map
|-bootstrap.bundle.min.js
|-bootstrap.bundle.min.js.map
|-bootstrap.js
|-bootstrap.js.map
|-bootstrap.min.js
bootstrap.min.js.map
Рисунок 1. Файловая структура при компилировании файла
Как видите, есть скомпилированные CSS и JS (bootstrap. *), А также скомпилированные и минимизированные CSS и JS (bootstrap.min. *).
Если вы скачали исходный код Bootstrap 4, структура файла будет выглядеть следующим образом (рисунок 2).
Рисунок 2. Bootstrap 4 Исходный код
Файлы вjs / и scss /являются исходным кодом для Bootstrap CSS и JavaScript.
Папка dist / включает все, что перечислено в разделе предварительно скомпилированных загрузок выше.
Документы / examples / , содержит исходный код документации Bootstrap и примеры использования Bootstrap.
Какие существенные ошибки и изменения bootstrap4 были исправленные и переработаны в bootstrap5
Удаление jQuery
jQuery - это библиотека, которая предлагает широкие функциональные возможности для классического веб-скрипта, который эффективен практически во всех требованиях по разработке сайтов. Его масштабируемая структура позволяет получать доступ к элементам в документе без написания большого количества JavaScript, изменять внешний вид вашего контента на веб-сайте, который используется разработчиками для устранения пробелов во всех браузерах, изменять содержимое документа, реагировать на взаимодействие с пользователем, получать информацию с сервера без обновления страница с AJAX, добавить анимацию на сайт, упростить общие задачи JavaScript .
Адаптивные размеры шрифтов
Bootstrap 5 по умолчанию разрешает адаптивный размер шрифта, который автоматически изменяет размер обложки в соответствии с отображением пользователя с помощью механизма RFS или адаптивного размера шрифта.
В зависимости от хранилища RFS RFS - это механизм определения размера, который изначально был разработан для изменения размера шрифта. RFS предлагает возможность изменять практически любое значение для любого свойства CSS, используя такие единицы, как ребро, отступы, радиус границы или теневое поле [1].
Это механизм, основанный на процессе предварительной или постпроцессорной обработки, который автоматически рассчитывает соответствующие размеры шрифта в соответствии с размером экрана пользователя или поля обзора. Он работает на известных препроцессорах или пост процессорных инструментах, таких как Sass, Less, Stylus или PostCSS.
Отказаться от поддержки Internet Explorer 10 и 11
Основное и самое существенное изменение было то, что команда Bootstrap решила отказаться от поддержки Internet Explorer 10 и 11, что является очень продуманных ходом, потому что Internet Explorer очень сильно ограничивает работу платформы, увеличивает время отклика программы и всяческие ее перегружает.
Оптимизация Navbar
Компонент Bootstrap Navbar является основной частью программы Bootstrap и используется постоянно. В предыдущих версиях Bootstrap вам приходилось создавать приличный набор тегов, чтобы он работал. Однако в Bootstrap 4 они упростили это с помощью HTML-элемента nav или div и неупорядоченного списка. Класс navbar является классом по умолчанию и всегда должен присутствовать в компоненте.
Bootstrap 4 по умолчанию использовал встроенный блок в параметрах отображения, но он был удален в Bootstrap 5. Они также использовали аббревиатуру
аббревиатуры и удалили марку, которая обязательно использовала контейнеры в полосах navbar. Кроме того, в раскрывающемся меню «темный класс» они также вводят темный раскрывающийся список, который можно перетаскивать на черном фоне, который обычно отображается с помощью раскрывающихся панелей на панели навигации [4].
На основе вышеперечисленных исследований можно сделать вывод.
Один из разочаровывающих впечатлений разработчика - переосмысление базового HTML, CSS и JavaScript для каждого проекта. Хотя некоторые предпочитают писать свой собственный код, все же имеет смысл просто использовать существующий Фреймворк, такой как Bootstrap.
Во всех системах Bootstrap 5 все новые обновляются и появляются в Bootstrap 5, в котором можно с убедительным утверждением сказать, что команда Bootstrap сделает огромные шаги, чтобы счастье могло быть легким, лживым и быстрым для разработчиков.
Библиографический список:
1. Ф.А. Перепелица Эффективная разработка веб-сайтов. Bootstrap Учебное пособие СПб, 2017. С. 247-273.
2. ИТ Блог. Администрирование серверов на основе Linux (Ubuntu, Debian, CentOS, openSUSE) // Учебное пособие по framework Bootstrap [Электронныйресурс]: исследование, проведенное PwC. - M. - 2019. - Режим доступа: https://andreyex.ru/uchebnoe-posobie-po-framework-bootstrap/ (дата обращения 20.07.2020).
3. Исследование, проведенное Copyright © 2020 Rudebox Design [Электронный ресурс] - Режим доступа: https://www.rudebox.org.ua/bootstrap-5-what-is-new-and-release-date. (дата обращения 21.07.2020).
4. Обновление Bootstrap 5 и генератор статических сайтов Hugo /. Web разработка [Электронный ресурс] - Режим доступа: http://tods-blog.com.ua/web-development/bootstrap5-hugo.
