Dans ce post nous allons commencer par faire un site avec Bootstrap, le framework open source qui nous permet de le rendre facilement réactif et de lui fournir une certaine interactivité. Il s'agit d'un modèle de base généré automatiquement par un plugin d'environnement de développement que nous avons recommandé auparavant et que nous devrons modifier.
Dans le article précédent Vous trouverez les instructions pour installer VS Codium, traduire son interface utilisateur en espagnol et installer le plugin Bootstrap.
Deux choses à garder à l'esprit :
- Les commandes que nous utilisons sont des raccourcis clavier, vous devez les taper. Le copier/coller ne fonctionne pas.
- Notre gestionnaire de contenu ne me permet pas d'afficher le code HTML donc je dois utiliser des captures d'écran. Pour que vous ayez accès au code des exemples je les ai téléchargés à GitHub.
Comment cloner un dépôt GitHub
Ce qui sépare les grands du reste d'entre nous, c'est la façon dont ils réagissent aux problèmes. Richard Stallman n'aimait pas son pilote d'imprimante et comme ils ne le laissaient pas le changer, il a lancé le mouvement du logiciel libre. Linus Torvalds n'a été convaincu par aucune des plateformes de partage de code et a créé la sienne. git.
Contrairement aux systèmes de distribution de logiciels traditionnels dans lesquels la seule interaction utilisateur autorisée est le téléchargement, avec Git vous pouvez suivre l'évolution du projet dans le temps. D'autres personnes peuvent cloner le référentiel, apporter des modifications et proposer que les développeurs du projet d'origine les incorporent. S'ils sont acceptés, les développeurs peuvent facilement le faire sans avoir à télécharger et à re-télécharger les fichiers.
Il existe plusieurs services basés sur Git, j'ai choisi GitHub simplement parce qu'il s'intègre à VS Codium.
Pour télécharger les exemples de fichiers sur votre ordinateur, il vous suffit d'installer le package git en suivant les instructions de votre distribution pour l'installation des packages dans le terminal.
Ensuite, vous tapez les commandes suivantes.
Je préfère enregistrer les fichiers dans le dossier Documents donc je change de répertoire avec
cd Documentos
Ensuite je clone les fichiers avec :
git clone https://github.com/dggonzalez1971/bootstrap.git
Je vais vous rappeler ces étapes dans chacun des articles restants, car vous mettrez ainsi à jour les fichiers d'exemple au fur et à mesure de leur téléchargement.
Pour voir les fichiers, ouvrez simplement l'explorateur de fichiers et recherchez le dossier amorcer.
Créer un site avec Bootstrap
Si vous préférez taper le code manuellement, nous commençons par créer un dossier dans lequel nous enregistrerons le site. Vous pouvez mettre le nom que vous voulez.
Ensuite, nous suivons les étapes suivantes :
- Allons au menu Archiver.
- Cliquer sur Nouveau fichier texte.
- Cliquer sur Garder.
- Nous recherchons le dossier que nous avons créé et mettons le nom du fichier exemple1.html.
- Cliquer sur Garder.
Parfois, la fenêtre de l'explorateur de fichiers peut être masquée par celle de VSCodium.
Laissons l'extension créer le modèle de base pour nous. Pour cela on tape !b5-$
Cela générera le code que vous trouverez dans le dossier des exemples sous example1.html
Nous verrons ce qui suit:
Il s'agit du code généré par l'extension Bootstrap.
Nous allons apporter quelques modifications à ce fichier. Vous trouverez les modifications sous le nom example2.html
- À la ligne 2, nous changeons la langue en remplaçant eng par es. Cela indique aux moteurs de recherche que la langue du site est l'espagnol.
- À la ligne 6, nous modifions le texte qui se trouve sous les étiquettes titre. nous mettons Mon premier site Bootstrap.
- À la ligne 12, nous modifions le contenu entre les balises h1 par Ceci est un site réalisé avec Bootstrap.
Ensuite, nous apporterons quelques modifications importantes. Ces modifications concernent :
- Le développeur du plugin ne peut pas suivre les versions de Bootstrap et il en existe d'autres plus récentes.
- Il existe de nombreuses options pour les composants d'amorçage et je suis intéressé par une autre.
- Selon la documentation officielle, les appels aux bibliothèques Javascript doivent être à l'intérieur des balises body.
Pour l'exemple 2, nous avons modifié le contenu de la ligne 7, supprimé les lignes 8 et 9 et téléchargé le contenu restant pour maintenir la compatibilité de la numérotation. Ensuite on clique sur la fin de la ligne 10 pour créer une nouvelle ligne 11 et mettre le lien vers les librairies Javascript.
Ne vous inquiétez pas si vous ne comprenez pas le code. J'expliquerai la fonction de chaque ligne dans le prochain article.