Tutoriel Bootstrap 5 – #2 Installation de Bootstrap
Informerick
mars 31, 2023
Aucun commentaire
Tuto bootstrap: Aujourd'hui nous voyons comment installer Bootstrap 5. Nous allons biensur tenter de télécharger bootstrap 5 mais il existe d'autres façons
Aujourd’hui dans ce tutoriel sur apprendre à utiliser Bootstrap, nous commençons à mettre les mains à la pâte : Comment installer Bootstrap.
Cela peut sembler simple, mais du fait, Bootstrap permet plusieurs façons de le télécharger et surtout, chacune de ses façons offrent énormément d’avantages comparés à d’autres ainsi que d’inconvénients.
Tu préfères la version vidéo? Je t’invite à regarder ce tutoriel version vidéo sur la chaîne YouTube Informerick.
Installer Bootstrap avec les fichiers source
Nous avons bien sûr la base pour installer n’importe lesquels ressources CSS et JavaScript : télécharger les fichiers, les inclure dans notre projet et les importer via les balises existants.
Voici comment le faire avec Bootstrap:
Temps total :5 minutes
Aller sur le site de téléchargement de Bootstrap
Le lien pour le télécharger, c’est ici: Télécharger Bootstrap Nous allons bien sûr choisir le “Compiled CSS and JS”
Choisir la version
Dans les fichiers CSS et JS, vous aurez une panoplie de versions de Bootstrap, du RTL, du min.css, du .css.
Comment me retrouver dans tout ceci ? Pour avoir Bootstrap complet, vous pouvez utiliser Bootstrap.min.css, la version .min.css est compressé et illisible, mais beaucoup plus rapide.
Les autres versions vous juste différer les composants, mais nous allons voir les composants plus tard dans la série de tutoriels, si vous avez besoin d’un composant précis, vous allez pouvoir l’importer au projet.
Pour ce qui est de JS, nous allons utiliser Bootstrap.bundle.min.js, le .bundle ce sont des ajouts JavaScript pour des composants de plus, comme Popover.
Les importer dans votre projet avec les balises HTML
Pour le CSS, ce sera: <link rel=”stylesheet” href=”bootstrap.min.css”> <!– Bien sûr changer les bootstrap.min.css par votre fichier choisi avec la location –>
Pour le JavaScript, ce sera: <script src=”bootstrap.bundle.min.js”> </script> <!– Même chose, choisir lui souhaité et remplacer les valeurs –>
Quels avantages offrent de télécharger les fichiers compilés ?
Cela vous donne un seul et gros unique avantage:
Vous pouvez le personnaliser. Bootstrap utilise des variables CSS dans ces couleurs exemple, vous allez pouvoir modifier ces couleurs, car vous allez voir que l’offre de couleurs de bootstrap et un peu limité.
Installation via un CDN
Par la suite, nous avons l’installation via le Content delivery Network. Ce sont des réseaux de partages via internet, même pas besoin de télécharger les fichiers, vous insérer les balises données (qui comportent des liens) et votre navigateur va le télécharger automatiquement.
Juste à copier ces balises et les insérer dans vos projets !
Quels avantages offrent cette solution ?
En fait, un gros avantage : La vitesse. Même si cela semble contre intuitif que lorsque nous téléchargeons une ressource externe cela peut être plus vite, mais c’est vrai !
Pour un petit principe: Le cache. Prenons exemple:
Un utilisateur se rend sur le site abc.com qui utilise bootstrap avec un CDN.
Le navigateur se cet utilisateur télécharge bootstrap et le garde dans son cache local.
Cet utilisateur se rend par la suite sur votre site qui lui aussi a Bootstrap via CDN, que fait le navigateur ?
Il ne téléchargera pas Bootstrap encore une fois, il l’a déjà téléchargé depuis le CDN, du coup moins de temps de chargement !
Installation avec un gestionnaire de paquets
Finalement, nous avons l’installation via le gestionnaire de paquets.
Je ne vais pas m’étendre sur cette façon, car vous devrez connaître d’avance ces gestionnaires de paquets pour savoir l’utiliser.
Mais je vous donne l’information qu’il est possible de télécharger Bootstrap avec:
NPM
Yarn
Rubygems
Composer
Nuget
FAQ
Quelle fichier de bootstrap choisir ?
Lorsque vous téléchargez boostrap, vous avez remarqué qu’il y a beaucoup de fichiers sont le dossier CSS et JS. Dans le fond, pour le CSS, vous allez vouloir la version Bootstrap.min.CSS, qui est la version complète minifier. Pour le JavaScript, vous allez avoir le Bootstrap.bundle.min.js, qui se trouve à être bootstrap avec des fonctionnalités javascript externe comme les popovers.
Quel gestionnaire de paquets pour Bootstrap ?
Vous pouvez installer bootstrap avec les gestionnaires de paquets:
NPM
Yarn
Rubygems
Composer
Nuget
Profitez pleinement de l'informatique
L’informatique est un domaine qui est en constante évolution. Faites partie des premiers à recevoir les dernières nouveautés
Tutoriel Bootstrap 5 – #2 Installation de Bootstrap
Aujourd’hui dans ce tutoriel sur apprendre à utiliser Bootstrap, nous commençons à mettre les mains à la pâte : Comment installer Bootstrap.
Cela peut sembler simple, mais du fait, Bootstrap permet plusieurs façons de le télécharger et surtout, chacune de ses façons offrent énormément d’avantages comparés à d’autres ainsi que d’inconvénients.
Version vidéo
Tu préfères la version vidéo? Je t’invite à regarder ce tutoriel version vidéo sur la chaîne YouTube Informerick.
Installer Bootstrap avec les fichiers source
Nous avons bien sûr la base pour installer n’importe lesquels ressources CSS et JavaScript : télécharger les fichiers, les inclure dans notre projet et les importer via les balises existants.
Voici comment le faire avec Bootstrap:
Temps total : 5 minutes
Aller sur le site de téléchargement de Bootstrap
Le lien pour le télécharger, c’est ici: Télécharger Bootstrap
Nous allons bien sûr choisir le “Compiled CSS and JS”
Choisir la version
Dans les fichiers CSS et JS, vous aurez une panoplie de versions de Bootstrap, du RTL, du min.css, du .css.
Comment me retrouver dans tout ceci ?
Pour avoir Bootstrap complet, vous pouvez utiliser Bootstrap.min.css, la version .min.css est compressé et illisible, mais beaucoup plus rapide.
Les autres versions vous juste différer les composants, mais nous allons voir les composants plus tard dans la série de tutoriels, si vous avez besoin d’un composant précis, vous allez pouvoir l’importer au projet.
Pour ce qui est de JS, nous allons utiliser Bootstrap.bundle.min.js, le .bundle ce sont des ajouts JavaScript pour des composants de plus, comme Popover.
Les importer dans votre projet avec les balises HTML
Pour le CSS, ce sera:
<link rel=”stylesheet” href=”bootstrap.min.css”>
<!– Bien sûr changer les bootstrap.min.css par votre fichier choisi avec la location –>
Pour le JavaScript, ce sera:
<script src=”bootstrap.bundle.min.js”> </script>
<!– Même chose, choisir lui souhaité et remplacer les valeurs –>
Quels avantages offrent de télécharger les fichiers compilés ?
Cela vous donne un seul et gros unique avantage:
Vous pouvez le personnaliser. Bootstrap utilise des variables CSS dans ces couleurs exemple, vous allez pouvoir modifier ces couleurs, car vous allez voir que l’offre de couleurs de bootstrap et un peu limité.
Installation via un CDN
Par la suite, nous avons l’installation via le Content delivery Network. Ce sont des réseaux de partages via internet, même pas besoin de télécharger les fichiers, vous insérer les balises données (qui comportent des liens) et votre navigateur va le télécharger automatiquement.
Télécharger Bootstrap via CDN
Temps total : 5 minutes
Aller sur le site de bootstrap
Le lien pour s’y rendre, c’est ici: getbootstrap.com
Descendre et copier les balises du CDN
Juste à copier ces balises et les insérer dans vos projets !
Quels avantages offrent cette solution ?
En fait, un gros avantage : La vitesse. Même si cela semble contre intuitif que lorsque nous téléchargeons une ressource externe cela peut être plus vite, mais c’est vrai !
Pour un petit principe: Le cache. Prenons exemple:
Un utilisateur se rend sur le site abc.com qui utilise bootstrap avec un CDN.
Le navigateur se cet utilisateur télécharge bootstrap et le garde dans son cache local.
Cet utilisateur se rend par la suite sur votre site qui lui aussi a Bootstrap via CDN, que fait le navigateur ?
Il ne téléchargera pas Bootstrap encore une fois, il l’a déjà téléchargé depuis le CDN, du coup moins de temps de chargement !
Installation avec un gestionnaire de paquets
Finalement, nous avons l’installation via le gestionnaire de paquets.
Je ne vais pas m’étendre sur cette façon, car vous devrez connaître d’avance ces gestionnaires de paquets pour savoir l’utiliser.
Mais je vous donne l’information qu’il est possible de télécharger Bootstrap avec:
FAQ
Quelle fichier de bootstrap choisir ?
Lorsque vous téléchargez boostrap, vous avez remarqué qu’il y a beaucoup de fichiers sont le dossier CSS et JS. Dans le fond, pour le CSS, vous allez vouloir la version Bootstrap.min.CSS, qui est la version complète minifier. Pour le JavaScript, vous allez avoir le Bootstrap.bundle.min.js, qui se trouve à être bootstrap avec des fonctionnalités javascript externe comme les popovers.
Quel gestionnaire de paquets pour Bootstrap ?
Vous pouvez installer bootstrap avec les gestionnaires de paquets:
Profitez pleinement de l'informatique
L’informatique est un domaine qui est en constante évolution. Faites partie des premiers à recevoir les dernières nouveautés
Partager ceci
À voir également