Створення середовища розробки Bootstrap

У цій статті Ми почнемо зі створення середовища розробки Bootstrap. Як ми пояснювали в попередній статті, Bootstrap — це фреймворк, який дозволяє нам легко створювати сайти, які автоматично адаптуються до будь-якого розміру екрана.

Насправді ніяких спеціальних інструментів не потрібно. Ви можете легко написати код у текстовому редакторі на робочому столі. Багато з них навіть підтримують HTML, CSS і Javascript. але, інтегровані середовища розробки включають інші інструменти, які полегшують написання та перевірку коду.

Створення середовища розробки Bootstrap

На мій смак, найкращим інтегрованим середовищем розробки є Visual Studio Code. Але багатьом користувачам Linux це не подобається, оскільки воно надсилає телеметрію до Microsoft. тим не менш, Існує альтернатива, яка використовує вихідний код VSCode під назвою VSCodium, який ні з ким не передає дані. Це версії якими ми будемо користуватися відтепер.

Встановлення VSCodium

Ми можемо встановити VSCodium такими способами:

Snap Store

sudo snap install codium --classic

плоский пакет

flatpak install flathub com.vscodium.codium

Debian та похідні

Ми отримали ключі перевірки

wget -qO - https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/raw/master/pub.gpg \
| gpg --dearmor \
| sudo dd of=/usr/share/keyrings/vscodium-archive-keyring.gpg
Додаємо сховище
echo 'deb [ signed-by=/usr/share/keyrings/vscodium-archive-keyring.gpg ] https://download.vscodium.com/debs vscodium main' \
| sudo tee /etc/apt/sources.list.d/vscodium.list
Ми оновлюємо та встановлюємо
sudo apt update
sudo apt install codium

Fedora / RHEL / CentOS / Rocky Linux / OpenSUSE

Отримуємо ключі перевірки

sudo rpmkeys --import https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/-/raw/master/pub.gpg

Додаємо сховища

Fedora/RHEL/CentOS/RockyLinux: printf "[gitlab.com_paulcarroty_vscodium_repo]\nname=download.vscodium.com\nbaseurl=https://download.vscodium.com/rpms/\nenabled=1\ngpgcheck=1\nrepo_gpgcheck=1\ngpgkey=https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/-/raw/master/pub.gpg\nmetadata_expire=1h" | sudo tee -a /etc/yum.repos.d/vscodium.repo

OpenSUSE/SUSE: printf "[gitlab.com_paulcarroty_vscodium_repo]\nname=gitlab.com_paulcarroty_vscodium_repo\nbaseurl=https://download.vscodium.com/rpms/\nenabled=1\ngpgcheck=1\nrepo_gpgcheck=1\ngpgkey=https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/-/raw/master/pub.gpg\nmetadata_expire=1h" | sudo tee -a /etc/zypp/repos.d/vscodium.repo

Для встановлення робимо:

Fedora/RHEL/CentOS/RockyLinux: sudo dnf install codium

OpenSUSE / SUSE: sudo zypper in codium

Arch Linux

Ми можемо використовувати будь-яку з цих двох команд

sudo aura -A vscodium-bin

o

yay -S vscodium-bin

Папуга ОС

sudo apt update
sudo apt install codium

Нікс (ОС)

nix-env -iA nixpkgs.vscodium

Налаштування VSCodium

Залежно від режиму встановлення VSCodium може бути англійською мовою. Ми можемо легко це змінити.

1. У меню Файли натисніть на Налаштування.
2. Натисніть на Розширення.
3. ми пишемо іспанська в пошуковій системі.
4. Натисніть на розширення Іспанська мова.
5. Починаємо установку, натиснувши на Встановити.
6. Натисніть на Змініть мову та перезапустіть.

VSCode має величезну колекцію розширень, які полегшують програмування різними мовами, і ми також можемо використовувати їх у VSCodium. Давайте встановимо те, що нам потрібно:

1. Натисніть на Вподобання.
2. Натисніть на Розширення.
3. ми пишемо Bootstrap в пошуковій системі.
4. Вибираємо той, який каже Фрагменти Bootstrap 5 і Font Awesome.
5. Натисніть на встановити

Ми побачимо застосування цього розширення, коли почнемо писати код сайту. Але я повинен зробити уточнення. Щоб він працював, вам доведеться вводити команди. Копіювання та вставка в цьому випадку не працює.

Отримання Bootstrap

По суті, Bootstrap — це набір компонентів. Коли ми пишемо код сайту на основі Bootstrap перше, що нам потрібно зробити, це вказати браузеру, де їх шукати.

Щоб отримати Bootstrap, є дві альтернативи. По-перше, це завантажити його з сайт і додати його до файлів проекту, а другий – розмістити посилання на сервери самого проекту. Його також можна завантажити за допомогою деяких менеджерів пакунків (я маю на увазі ті, що використовуються різними мовами програмування, а не ті, що використовуються дистрибутивами), але ми залишимо це для документації.

Майте на увазі, що якщо ви віддаєте перевагу працювати з файлами Bootstrap локально, вам потрібно буде завантажити їх на сервер з рештою веб-сайту. Якщо ви посилаєтеся на CDN-сервер проекту, це не буде потрібно.

Якщо ви завантажите пакет Bootstrap, ви побачите, що є дві папки та серія файлів. Нас цікавить лише два. З папки JS bootstrap.bundle.js і з папки CSS bootstrap.css.

Код для обох варіантів майже однаковий. Просто змініть шлях розташування.

Давайте розглянемо приклад
Використання Bootstrap локально

Використання з проекту CDN

Розташування локального файлу є довільним. Я помістив їх у папку під назвою bootrap і створив дві вкладені папки під назвами JS і CSS.

Не хвилюйтеся, якщо ви не зрозуміли решту коду. Ми подбаємо про це в наступній статті.

Увага

Після публікації статті я виявив, що наш контент-менеджер показує не HTML-код, а результат. Я завантажу приклади на Github або схожий і розміщу скріншоти тут.