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

VSCodium — идеальная среда разработки для создания сайта с помощью 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

Bootstrap хранится локально

Локальный вызов компонентов Bootstrap

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

Использование Bootstrap из CDN

HTML-код, который загружает компоненты Bootstrap из CDN

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

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

примечание

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


Содержание статьи соответствует нашим принципам редакционная этика. Чтобы сообщить об ошибке, нажмите здесь.

2 комментариев, оставьте свой

Оставьте свой комментарий

Ваш электронный адрес не будет опубликован.

*

*

  1. Ответственный за данные: AB Internet Networks 2008 SL
  2. Назначение данных: контроль спама, управление комментариями.
  3. Легитимация: ваше согласие
  4. Передача данных: данные не будут переданы третьим лицам, кроме как по закону.
  5. Хранение данных: база данных, размещенная в Occentus Networks (ЕС)
  6. Права: в любое время вы можете ограничить, восстановить и удалить свою информацию.

  1.   Richo сказал

    Это очень сложно для меня, но учебник очень ценится, когда-нибудь он может мне помочь, спасибо

    1.    Хорхе сказал

      Привет, богатый. Это кажется очень продвинутым, но это не так (по крайней мере, не для практических целей). Вам просто нужно иметь четкие понятия: веб-сервер, CDN, редакторы кода, базовая структура веб-страницы и еще немного.

      Я веб-разработчик и могу сказать, что Bootstrap — отличное начало. Его должен изучить каждый, кто начинает заниматься веб-разработкой.

      Примечание. Вы должны иметь базовые знания html css, прежде чем начать с Bootstrap ;-)