Създаване на среда за разработка 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

OS на папагал

sudo apt update
sudo apt install codium

Nix (ОС)

nix-env -iA nixpkgs.vscodium

Конфигуриране на VSCodium

В зависимост от режима на инсталиране, VSCodium може да е на английски. Можем лесно да променим това.

1. В менюто Файлове щракнете върху Предпочитания.
2. Кликнете върху Разширение.
3. Пишем испански в търсачката.
4. Кликнете върху разширението Испански език.
5. Започваме инсталацията, като щракнете върху Инсталирай.
6. Кликнете върху Променете езика и рестартирайте.

VSCode има огромна колекция от разширения, които улесняват програмирането на различни езици и можем да ги използваме и във VSCodium. Нека инсталираме този, от който се нуждаем:

1. Кликнете върху Предпочитания.
2. Кликнете върху Разширения.
3. Пишем Bootstrap в търсачката.
4. Избираме този, който казва Bootstrap 5 и Font Awesome Snippets.
5. Кликнете върху инсталиране

Ще видим използването на това разширение, когато започнем да пишем кода на сайта. Но трябва да направя едно уточнение. За да работи, ще трябва да въведете командите. Копирането и поставянето в този случай не работи.

Получаване на Bootstrap

Bootstrap е основно колекция от компоненти. Когато пишем кода на уебсайт, базиран на Bootstrap първото нещо, което трябва да направим, е да кажем на браузъра къде да ги намери.

За да получите Bootstrap има две алтернативи. Първият е да го изтеглите от уебсайт и го добавете към файловете на проекта и второто е да поставите връзка към сървърите на самия проект. Може също да бъде изтеглен с помощта на някои мениджъри на пакети (имам предвид тези, използвани от различни езици за програмиране, а не тези, използвани от дистрибуции), но ще оставим това на документацията.

Имайте предвид това ако предпочитате да работите с файловете на Bootstrap локално, ще трябва да ги качите на сървъра с останалата част от уебсайта. Ако се свържете към CDN сървъра на проекта, това няма да е необходимо.

Ако изтеглите пакета Bootstrap, ще видите, че има две папки и серия от файлове. Интересуват ни само две. От папката JS bootstrap.bundle.js и от папката CSS bootstrap.css.

Кодът и за двата варианта е почти еднакъв. Просто променете пътя на местоположението.

Нека да разгледаме един пример
Локално използване на Bootstrap

Използване от проекта CDN

Местоположението на локалния файл е произволно. Сложих ги в папка, наречена bootrap, и създадох две подпапки, наречени JS и CSS.

Не се притеснявайте, ако не сте разбрали останалата част от кода. Ще се погрижим за това в следващата статия.

Внимание

След публикуването на статията открих, че нашият мениджър на съдържание не показва HTML кода, а резултата. Ще кача примерите в Github или подобен и ще поставя екранни снимки тук.