Création d'un environnement de développement Bootstrap

Dans cet article Nous allons commencer par créer un environnement de développement Bootstrap. Comme nous l'avons expliqué dans un article précédent, Bootstrap est un framework qui nous permet de créer facilement des sites qui s'adaptent automatiquement à n'importe quelle taille d'écran.

En fait, aucun outil spécial n'est nécessaire. Vous pouvez facilement écrire le code dans l'éditeur de texte sur votre bureau. Beaucoup prennent même en charge HTML, CSS et Javascript. Mais, Les environnements de développement intégrés incluent d'autres outils qui facilitent l'écriture et la relecture du code.

Création d'un environnement de développement Bootstrap

À mon goût, le meilleur environnement de développement intégré est Visual Studio Code. Mais, de nombreux utilisateurs de Linux ne l'aiment pas car il envoie la télémétrie à Microsoft. Cependant, Il existe une alternative qui utilise le code source VSCode appelé VSCodium qui ne partage les données avec personne. C'est la version que nous utiliserons désormais.

Installation de VSCodium

Nous pouvons installer VSCodium des manières suivantes :

Magasin Snap

sudo snap install codium --classic

paquet plat

flatpak install flathub com.vscodium.codium

Debian et dérivés

Nous avons les clés de vérification

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
Nous ajoutons le référentiel
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
Nous mettons à jour et installons
sudo apt update
sudo apt install codium

Fedora/RHEL/CentOS/RockyLinux/OpenSUSE

Nous obtenons les clés de vérification

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

Nous ajoutons les référentiels

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

OuvrirSUSE/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

Pour installer nous faisons :

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

OpenSUSE / SUSE: sudo zypper in codium

Arch Linux

Nous pouvons utiliser l'une ou l'autre de ces deux commandes

sudo aura -A vscodium-bin

o

yay -S vscodium-bin

Système d'exploitation perroquet

sudo apt update
sudo apt install codium

Nix (OS)

nix-env -iA nixpkgs.vscodium

Configuration de VSCodium

Selon le mode d'installation, VSCodium peut être en anglais. Nous pouvons facilement changer cela.

1. Dans le menu Fichiers cliquez sur Préférences.
2. Cliquer sur Extension.
3. Nous écrivons espagnol dans le moteur de recherche.
4. Cliquez sur l'extension Langue espagnole.
5. Nous commençons l'installation en cliquant sur Installer.
6. Cliquer sur Changez de langue et redémarrez.

VSCode possède une énorme collection d'extensions qui facilitent la programmation dans différents langages, et nous pouvons également les utiliser dans VSCodium. Installons celui dont nous avons besoin :

1. Cliquer sur Préférences.
2. Cliquer sur Extensions.
3. Nous écrivons Bootstrap dans le moteur de recherche.
4. Nous sélectionnons celui qui dit Bootstrap 5 & Font Awesome Snippets.
5. Cliquez sur installer

Nous verrons l'utilisation de cette extension lorsque nous commencerons à écrire le code du site. Mais, je dois apporter une précision. Pour que cela fonctionne, vous devrez taper les commandes. Copier et coller dans ce cas ne fonctionne pas.

Obtenir Bootstrap

Bootstrap est essentiellement une collection de composants. Quand on écrit le code d'un site web basé sur Bootstrap la première chose que nous devons faire est de dire au navigateur où les trouver.

Pour obtenir Bootstrap, il existe deux alternatives. La première consiste à le télécharger à partir du page Web et l'ajouter aux fichiers du projet et la seconde est de mettre un lien vers les serveurs du projet lui-même. Il peut également être téléchargé à l'aide de certains gestionnaires de packages (je veux dire ceux utilisés par différents langages de programmation, pas ceux utilisés par les distributions) mais, nous laisserons cela à la documentation.

On notera que si vous préférez travailler avec les fichiers Bootstrap localement, vous devrez les télécharger sur le serveur avec le reste du site. Si vous vous connectez au serveur CDN du projet, cela ne sera pas nécessaire.

Si vous téléchargez le package Bootstrap, vous verrez qu'il existe deux dossiers et une série de fichiers. Nous ne nous intéressons qu'à deux. Depuis le dossier JS bootstrap.bundle.js et depuis le dossier CSS bootstrap.css.

Le code pour les deux options est presque le même. Changez simplement le chemin de l'emplacement.

Voyons un exemple
Utiliser Bootstrap localement

Utilisation depuis le CDN du projet

L'emplacement du fichier local est arbitraire. Je les ai placés dans un dossier appelé bootrap et j'ai créé deux sous-dossiers appelés JS et CSS.

Ne vous inquiétez pas si vous n'avez pas compris le reste du code. On s'en occupe dans le prochain article.

Note

Après avoir publié l'article, j'ai découvert que notre gestionnaire de contenu n'affichait pas le code HTML mais le résultat. Je téléchargerai les exemples sur Github ou similaire et je mettrai des captures d'écran ici.