Tworzenie środowiska programistycznego Bootstrap

W tym artykule Zaczniemy od stworzenia środowiska programistycznego Bootstrap. Jak wyjaśniliśmy w poprzednim artykule, Bootstrap to framework, który ułatwia nam tworzenie witryn, które automatycznie dostosowują się do dowolnego rozmiaru ekranu.

Właściwie nie są potrzebne żadne specjalne narzędzia. Możesz łatwo napisać kod w edytorze tekstu na pulpicie. Wiele z nich obsługuje nawet HTML, CSS i JavaScript. Ale, zintegrowane środowiska programistyczne zawierają inne narzędzia, które ułatwiają pisanie i sprawdzanie kodu.

Tworzenie środowiska programistycznego Bootstrap

Według mnie najlepszym zintegrowanym środowiskiem programistycznym jest Visual Studio Code. Ale wielu użytkowników Linuksa nie lubi tego, ponieważ wysyła dane telemetryczne do firmy Microsoft. Niemniej jednak, Istnieje alternatywa, która używa kodu źródłowego VSCode o nazwie VSCodium, która nie udostępnia nikomu danych. To jest wersja z którego będziemy korzystać od teraz.

Instalowanie VSCodium

VSCodium możemy zainstalować w następujący sposób:

Snap Store

sudo snap install codium --classic

płaskie opakowanie

flatpak install flathub com.vscodium.codium

Debian i pochodne

Mamy klucze weryfikacyjne

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
Dodajemy repozytorium
echo 'deb [signed-by=/usr/share/keyrings/vscodium-archive-keyring.gpg ] https://download.vscodium.com/debs vscodium main' \
| koszulka sudo /etc/apt/sources.list.d/vscodium.list
Aktualizujemy i instalujemy
sudo apt update
sudo apt install codium

Fedora / RHEL / CentOS / Rocky Linux / OpenSUSE

Otrzymujemy klucze weryfikacyjne

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

Dodajemy repozytoria

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

Aby zainstalować wykonujemy:

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

OpenSUSE / SUSE: sudo zypper in codium

Arch Linux

Możemy użyć jednego z tych dwóch poleceń

sudo aura -A vscodium-bin

o

yay -S vscodium-bin

Papuga OS

sudo apt update
sudo apt install codium

Nix (system operacyjny)

nix-env -iA nixpkgs.vscodium

Konfiguracja VSCodium

W zależności od trybu instalacji, VSCodium może być w języku angielskim. Możemy to łatwo zmienić.

1. W menu Pliki kliknij Preferencje.
2. Kliknij Rozbudowa.
3. piszemy język hiszpański w wyszukiwarce.
4. Kliknij rozszerzenie Język hiszpański.
5. Instalację rozpoczynamy klikając Zainstaluj.
6. Kliknij Zmień język i uruchom ponownie.

VSCode posiada ogromną kolekcję rozszerzeń ułatwiających programowanie w różnych językach, a także możemy ich używać w VSCodium. Zainstalujmy ten, którego potrzebujemy:

1. Kliknij Preferencje
2. Kliknij Rozszerzenia.
3. piszemy Bootstrap w wyszukiwarce.
4. Wybieramy ten, który mówi Bootstrap 5 i niesamowite fragmenty czcionek.
5. Kliknij zainstaluj

Zobaczymy użycie tego rozszerzenia, gdy zaczniemy pisać kod strony. Ale muszę wyjaśnić. Aby to zadziałało, będziesz musiał wpisać polecenia. Kopiowanie i wklejanie w tym przypadku nie działa.

Zdobywanie Bootstrapa

Bootstrap to w zasadzie zbiór komponentów. Kiedy piszemy kod strony internetowej w oparciu o Bootstrap pierwszą rzeczą, którą musimy zrobić, to powiedzieć przeglądarce, gdzie je znaleźć.

Aby uzyskać Bootstrap, istnieją dwie alternatywy. Pierwszym z nich jest pobranie go z witryna internetowa i dodać go do plików projektu, a drugim jest umieszczenie linku do serwerów samego projektu. Można go również pobrać za pomocą niektórych menedżerów pakietów (mam na myśli te używane przez różne języki programowania, a nie te używane przez dystrybucje), ale zostawimy to w dokumentacji.

Pamiętaj o tym jeśli wolisz pracować z plikami Bootstrap lokalnie, będziesz musiał przesłać je na serwer z resztą serwisu. Jeśli łączysz się z serwerem CDN projektu, nie będzie to konieczne.

Jeśli pobierzesz pakiet Bootstrap, zobaczysz, że są dwa foldery i seria plików. Interesują nas tylko dwie. Z folderu JS bootstrap.bundle.js i z folderu CSS bootstrap.css.

Kod dla obu opcji jest prawie taki sam. Po prostu zmień ścieżkę lokalizacji.

Zobaczmy przykład
Lokalne używanie Bootstrapa

Korzystanie z projektu CDN

Lokalizacja pliku lokalnego jest dowolna. Umieściłem je w folderze o nazwie bootrap i utworzyłem dwa podfoldery o nazwach JS i CSS.

Nie martw się, jeśli nie zrozumiałeś reszty kodu. Zajmiemy się tym w następnym artykule.

uwaga

Po opublikowaniu artykułu odkryłem, że nasz menedżer treści nie pokazuje kodu HTML, ale wynik. Wrzucę przykłady na Github lub podobne i umieszczę tu zrzuty ekranu.