Создание среды разработки Bootstrap

В этой статье Мы начнем с создания среды разработки Bootstrap. Как мы объясняли в предыдущей статье, Bootstrap — это платформа, которая позволяет нам легко создавать сайты, которые автоматически адаптируются к любому размеру экрана.

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

Создание среды разработки Bootstrap

На мой взгляд, лучшей интегрированной средой разработки является Visual Studio Code. Но многим пользователям Linux это не нравится, потому что оно отправляет данные телеметрии в Microsoft. Тем не менее, Существует альтернатива, использующая исходный код VSCode под названием VSCodium, которая никому не передает данные. То есть версия который мы будем использовать с этого момента.

Установка VSCodium

Мы можем установить VSCodium следующими способами:

Магазин Snap

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 тройник /etc/apt/sources.list.d/vscodium.list
Обновляем и устанавливаем
sudo apt update
sudo apt install codium

Fedora/RHEL/CentOS/RockyLinux/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. Мы пишем Начальная загрузка в поисковике.
4. Мы выбираем тот, который говорит Bootstrap 5 и сниппеты Font Awesome.
5. Нажмите «Установить»

Мы увидим использование этого расширения, когда начнем писать код сайта. Но, я должен сделать уточнение. Чтобы это работало, вам нужно будет ввести команды. Копировать и вставлять в этом случае не получится.

Получение начальной загрузки

Bootstrap — это, по сути, набор компонентов. Когда пишем код сайта на Bootstrap первое, что нам нужно сделать, это указать браузеру, где их найти.

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

Обратите внимание, что если вы предпочитаете работать с файлами Bootstrap локально, вам нужно будет загрузить их на сервер с остальной частью веб-сайта. Если вы ссылаетесь на CDN-сервер проекта, в этом нет необходимости.

Если вы загрузите пакет Bootstrap, вы увидите две папки и ряд файлов. Нас интересуют только два. Из JS-папки bootstrap.bundle.js и из папки CSS бутстрап.css.

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

Посмотрим на пример
Локальное использование Bootstrap

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

Расположение локального файла произвольно. Я поместил их в папку с именем bootrap и создал две подпапки с именами JS и CSS.

Не волнуйтесь, если вы не поняли остальную часть кода. Мы позаботимся об этом в следующей статье.

примечание

После публикации статьи я обнаружил, что наш контент-менеджер показывает не HTML-код, а результат. Я загружу примеры на Github или аналогичный сайт, а скриншоты выложу сюда.