Ускорение процесса разработки с помощью Bootstrap 5

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

 npm установить синхронизацию браузера gulp gulp-sass --save-dev 

Шаг 5. Создайте локальный сервер для автоматического отслеживания изменений файлов Sass и запустите сервер BrowserSync JS

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

const gulp = require ("глоток");
const sass = require ("глоток-sass");
const browserSync = require ("браузер-синхронизация"). create ();

// Компилируем .scss в .css файл
function compileCSS () {
  ответный глоток
    .src ("приложение / scss / *. scss")
    .pipe (sass ())
    .pipe (gulp.dest ("приложение / css"))
    .pipe (browserSync.stream ());
}

// Следим за изменениями
function watchChanges () {
  browserSync.init ({
    сервер: "./app/",
    index: "./index.html",
  });

  gulp.watch ("приложение / scss / *. scss", compileCSS);
  gulp.watch ("./*. html"). on ("изменить", browserSync.reload);
  gulp.watch ("./ js / *. js"). on ("изменить", browserSync.reload);
}

export.compileCSS = compileCSS;
export.watchChanges = watchChanges;
export.default = смотреть;

Давайте подробнее рассмотрим приведенный выше код. В первых нескольких строках нашего кода нам требовались пакеты gulp, sass и browserSync для нашего кода.

Затем мы вызвали две функции: compileCSS и watchChanges . Функция compileCSS обрабатывает всю компиляцию всех файлов. scss внутри папки app / scss в файлы .css которые отображаются внутри Папка app / css .

Функция watchChanges обрабатывает всю синхронизацию (с использованием BrowserSync JS) с браузером и отслеживает изменения внутри папки / app через файл index.html .

Последние несколько строк нашего кода с gulp.watch () API позволяют просматривать глобусы и запускать все функциональные задачи, когда происходит « изменение ». Если задача не сигнализирует об асинхронном завершении, она никогда не будет запущена во второй раз. Этот API обеспечивает встроенную задержку и постановку в очередь на основе значений по умолчанию.

Шаг 6. Установите и импортируйте Bootstrap 5

Следующее, что нам нужно сделать, это установить Bootstrap 5 и импортировать его в наш файл custom.scss . Используя следующую команду, давайте установим Bootstrap 5 через npm:

 npm i bootstrap@5.0.0-alpha3 --save 

Мы снова будем использовать флаг –save чтобы сохранить его как зависимость разработки.

Теперь нам просто нужно импортировать Bootstrap 5 в файл custom.scss используя следующий оператор импорта:

 @import '../../node_modules/bootstrap/scss/bootstrap.scss';

Шаг 7. Добавьте необходимую разметку в файл index.html

Внутри index.html нам нужно включить ссылку на файл custom.css чтобы наши стили работали. Кроме того, в демонстрационных целях давайте добавим базовый элемент формы Bootstrap 5, чтобы убедиться, что наш CSS Bootstrap работает.

Наша разметка должна выглядеть так:

   
      
      
      
      
   
   
      

         

            

               

                  

                      Адрес электронной почты  
                  
                  

                      Пароль  
                  
                  

                       Зацените меня 
                  
                   Отправить 
               
            
         
      
   

Шаг 8. Автоматизация локального сервера с помощью BrowserSync JS и Gulp JS

Чтобы убедиться, что наша установка работает, нам нужно запустить команду gulp на нашем терминале. Он должен открыть новую вкладку в вашем браузере по умолчанию с адресом локального сервера http: // localhost: 3000 / .

К этому времени вы должны увидеть нашу разметку и элемент формы Bootstrap, отображаемые на экране браузера.

yourusername @ users ~ / мой-проект> глоток [11:19:31] Использование gulpfile ~ / my-project / gulpfile.js [11:19:32] Запуск "по умолчанию" ... [Browsersync] URL-адреса доступа: --------------------------------------- Локальный: http: // localhost: 3000 Внешний: http://192.168.100.11:3000 --------------------------------------- Пользовательский интерфейс: http: // localhost: 3001 Внешний интерфейс: http: // localhost: 3001 --------------------------------------- [Browsersync] Обслуживание файлов из: ./app/

Это просто подтверждение того, что Gulp JS выполняет задачи внутри файла gulpfile.js а BrowserSync JS обслуживает вывод через файл index.html .

Теперь вы можете начать добавлять свой собственный код Sass или перезаписывать переменные Sass Bootstrap 5 по умолчанию внутри файла custom.scss . Вы увидите, что он автоматически компилирует ваши файлы Sass в файлы CSS и синхронизируется с выводом браузера.

При желании вы также можете включить файл _variable.scss для организации ваших переменных. Все зависит от размера и сложности вашего проекта.

Настройка Bootstrap 5, сборка с помощью Sass

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

В качестве примера, если вы загружаете 152 КБ минимизированного исходного файла CSS Bootstrap 5, все равно это звучит много. Помните, что CSS — очень важная часть веб-сайта или приложения, поскольку он загружается в заголовок и служит ресурсом блокировки рендеринга, что означает, что браузер не будет отображать обработанный контент, пока не будет загружен CSS.

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

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

// 1. Сначала включите функции (чтобы вы могли манипулировать цветами, SVG, вычислением и т. Д.)
@import "../node_modules/bootstrap/scss/functions";

// 2. Включите сюда любые переопределения переменных по умолчанию

// 3. Включите оставшуюся часть требуемых таблиц стилей Bootstrap
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Включите любые необязательные компоненты Bootstrap, как вам нравится
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";

// 5. Добавьте сюда дополнительный пользовательский код

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

Изучение строительных лесов

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

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

Рассмотрим схему расположения ниже:

Примечание : мы явно указываем на наш код Bootstrap выше. Есть и другие способы сделать эту сеточную структуру. Тем не менее, это отличная демонстрация того, как работают строительные леса.

Используйте наборы пользовательского интерфейса и темы Bootstrap 5

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

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

Что такое набор пользовательского интерфейса Bootstrap?

Люди часто путают комплекты пользовательского интерфейса Bootstrap с темами Bootstrap. Хотя в какой-то момент у них есть сходство, комплект пользовательского интерфейса Bootstrap — это комплект пользовательского интерфейса, который состоит из набора красивых, гибких и простых в использовании компонентов пользовательского интерфейса на основе Bootstrap и ресурсов веб-сайта, которые вы можете быстро подключить. в и настроить в соответствии с желаемым результатом дизайна. Некоторые примеры компонентов пользовательского интерфейса Bootstrap, которые регулярно встречаются, — это отзывы, формы ввода, виджеты и меню навигации.

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

Отличные примеры комплектов пользовательского интерфейса Bootstrap 5

В Интернете доступно множество отличных наборов пользовательского интерфейса Bootstrap 5, которые вы можете использовать, от простых структурных наборов до всеобъемлющих комплексных наборов.

Ниже приведены некоторые из известных наборов пользовательского интерфейса Bootstrap 5, которые вы можете использовать в своих проектах:

Pixel — Бесплатный набор пользовательского интерфейса для Bootstrap 5

Pixel — это бесплатный, легкий и открытый комплект пользовательского интерфейса Bootstrap 5 с более чем 80 полностью закодированными компонентами пользовательского интерфейса и примерами страниц, которые помогут вам создать прототип и создать веб-сайт, который вы можете использовать в своих проектах.

Fabrx UI Kit Pro

Fabrx — это комплексный набор пользовательского интерфейса на основе Bootstrap 5 с потрясающей библиотекой из 250+ каркасов, 500+ адаптивных компонентов и готового шаблона, легко закодированного с помощью HTML, CSS и Bootstrap 5.

Материальный дизайн для Bootstrap 5 и ванильный JavaScript

Material Design — один из самых популярных наборов пользовательского интерфейса с открытым исходным кодом на основе Bootstrap 5 для разработки компонентов на основе Material Design с использованием HTML, CSS и простого JS, но также работает с jQuery. Он содержит более 700+ компонентов пользовательского интерфейса и шаблонов с очень простым процессом установки.

Что такое тема Bootstrap?

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

Разница между темой Bootstrap и комплектом пользовательского интерфейса Bootstrap зависит от ее использования. Темы начальной загрузки часто используются в упакованном виде, что означает, что вы просто изменяете некоторое содержимое, ресурсы и стили и вуаля! Ваш сайт или приложение готовы к публикации. Хотя комплекты пользовательского интерфейса Bootstrap часто используются по частям, это означает, что вы выбираете только определенный компонент или ресурс, который вам нужен, как того требует ваш дизайн.

Рекомендуемые примеры комплектов пользовательского интерфейса Bootstrap 5

Как и в UI-пакетах Bootstrap, существует множество тем Bootstrap 5, которые вы можете использовать и быстро изменять в соответствии с требованиями вашего проекта.

Ниже приведены некоторые из рекомендуемых мной тем пользовательского интерфейса Bootstrap 5, которые вы можете использовать в своем следующем проекте:

Темы Bootstrap 5 от Официальной торговой площадки Bootstrap

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

Космос

Пространство, если бесплатная Многоцелевая тема Bootstrap 5 с чистым, креативным и высококачественным дизайном с тремя различными вариантами домашней страницы, 20+ бизнес-страницами, 100+ элементами пользовательского интерфейса и полностью современным адаптивным макетом.

Массивная

Massive — это многоцелевая тема HTML, CSS и JavaScript с модным, уникальным и креативным дизайном, полностью созданная с помощью Bootstrap 5 и Sass. Он создан практически для любых типов веб-сайтов, таких как бизнес-сайты, корпоративные сайты, сайты мобильных приложений, веб-приложений и личные портфолио.

Создайте свой веб-сайт с помощью Bootstrap 5 Page Builders

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

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

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

Startup Bootstrap Builder

Startup Bootstrap Builder — это простой конструктор на основе начальной загрузки, который позволяет дизайнерам и разработчикам быстро создавать прототипы и проектировать веб-сайты, целевые страницы и приложения. Это быстрый и простой в использовании конструктор тем Bootstrap 5, основанный на браузере, с потрясающими функциями для создания веб-страниц для ваших личных и деловых нужд. Самое приятное то, что он совместим со всеми устройствами Retina и поддерживает простой экспорт для получения чистых файлов HTML, CSS и JavaScript, готовых к публикации.

Бесплатный Bootstrap Builder

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

Будьте в курсе

Независимо от того, сколько вы знаете о фреймворке, очень важно, чтобы вы всегда были в курсе последних выпусков и новых функций Bootstrap.

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

Краткое содержание

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

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

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

Нравится то, что вы читаете? Подпишитесь на наши главные новости.