bootstrap Installation manuelle de Booststrap, fichiers CSS et JS

Nicolas

Membre actif
Salut,

Je vais utiliser Bootstrap pour développer devcometrue.fr

J'ai commencé par télécharger les fichiers mais dans le dossier CSS il y a une multitude de fichiers .css et également leurs équivalent en .map
Après avoir visionné un tuto je pensais simplement installer bootstrap.min.css mais vu la quantité de fichiers différents je me pose la question...
bootstrap.grid.min.css notamment, faut-il l'installer ou bien il est compris dans bootstrap.min.css qui est LE fichier global ??

C'est un peu pareil avec les fichiers .js d'ailleurs.
 

Pièces jointes

  • Capture d’écran 2020-12-24 220445.png
    Capture d’écran 2020-12-24 220445.png
    30.4 KB · Affichages: 2
  Solution
Salut Audrey, tu peux les charger plus ou moins où tu veux.

Le plus académique est de créer à la racine de ton site, là où se trouve ton fichier index.html deux dossier : CSS et JS et tu y places respectivement tes fichiers bootstrap.min.css et bootstrap.min.js

Il te reste plus qu'à les appeler dans ton fichier index.html
HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mon site</title>
    <!-- CSS -->
    <link rel="stylesheet" href="CSS/bootstrap.min.css" />
  </head>
  <body>
    <!-- JS -->
    <script src="JS/bootstrap.min.js"></script>...

Anthony

Membre
Et tu as installé lequel finalement ?
Personnellement je ne suis pas super fan de tout le contenu proposé par Bootstrap, en général tu y colles du CSS maison donc je m'en passerais.
Ce qui m'intéresse le plus dans Bootstrap c'est grid, à ta place je n'utiliserais que ça.

Pour la création rapide d'un site responsif c'est juste ce qu'il te faut.
Bon courage et bonnes expérimentation
 

Nicolas

Membre actif
C'est vrai que GRID semble assez puissant pour créer des blocs responsifs.
C'est probablement le principal intérêt de Bootstrap, je te suis sur ce point là. Mais comme je découvre à peine le framework je veux tester un peu tout ce qu'il propose, histoire de pouvoir répondre le cas échéant à des questions des membres.

Et puis qui peut le plus peut le moins, ce ne sera pas perdu de toucher un peu à tout.
 

WWWest

Membre
Salut Audrey, tu peux les charger plus ou moins où tu veux.

Le plus académique est de créer à la racine de ton site, là où se trouve ton fichier index.html deux dossier : CSS et JS et tu y places respectivement tes fichiers bootstrap.min.css et bootstrap.min.js

Il te reste plus qu'à les appeler dans ton fichier index.html
HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mon site</title>
    <!-- CSS -->
    <link rel="stylesheet" href="CSS/bootstrap.min.css" />
  </head>
  <body>
    <!-- JS -->
    <script src="JS/bootstrap.min.js"></script>
  </body>
</html>
 

Hamza

Membre
Bonsoir tout le monde, si c'est aussi simple que ça d'utiliser Bootstrap, juste uploader 2 fichiers dans quel cas ce serait intéressant d'utiliser les CDN proposés ? C'est tellement mis en avant les CDN par les frameworks je me pose la question de l'intérêt.
 

Eleven Up

Membre
Pas mal le lien,
Je ne comprends pas deux informations qu'il donne si le framework est chargé sur le serveur du site visité.
L’internaute doit récupérer les données de votre site afin de l’afficher et de le rendre fonctionnel.
Avec un CDN c'est pareil non ? l'internaute doit de toutes façons récupérer les données du site pour l'afficher correctement..

Un des avantages du CDN serait
Les librairies peuvent exister en cache de votre navigateur, si elles ont été précédemment chargées lors de vos visites (librairies en cache).
Elles peuvent également être mis en cache par le navigateur si elle sont sur le serveur du site, qu'elles soient sur le serveur du site ou sur le serveur CDN n'empêche pas la mise en cache il me semble. Un serveur c'est un serveur.
Bon...
 

yule

Membre
Je te l'accorde @7UP , c'est tordu...

Moi j'héberge tout chez moi pour faire plus simple ;) Maintenant et dans ma logique, si je reprends tes deux questions, je dirai

Avec un CDN, l'internaute récupère également le fichier mais plus rapidement, car il va le télécharger proche de son lieu de connexion

Vu sur le net
Les serveurs DNS sont interrogés. Grâce à la technologie IPAnycast, le CDN redirige la requête vers le PoP CDN xxx le plus proche de l’utilisateur et dont les temps de latence sont les plus courts pour lui

pour la seconde question, je pense que

Disons que mon site utilise la librairie Y, un visiteur quitte mon site pour se rendre sur le tien, tu utilises également la librairie Y. Pour le visiteur, le cache de son navigateur va l'aider pour l'afficher plis rapidement..

Voilà un autre lien en image qui devrait trancher nos suspicions

A+
Yule
 

DaCode

Membre
Disons que mon site utilise la librairie Y, un visiteur quitte mon site pour se rendre sur le tien, tu utilises également la librairie Y. Pour le visiteur, le cache de son navigateur va l'aider pour l'afficher plis rapidement..
Oui c'est dans ce sens qu'il faut l'interpréter mais ça reste tordu puisque la librairie Y se mettra en cache de toutes façons. Le navigateur ne va pas faire la différence entre un CDN et hébergé sur le serveur du site, d'ailleurs héberger Bootstrap sur son propre serveur c'est un peu utiliser son propre CDN.

Avec un CDN, l'internaute récupère également le fichier mais plus rapidement, car il va le télécharger proche de son lieu de connexion
Les CDN des frameworks sont multi-hébergés dans différents endroits du monde ? Ok donc ça c'est un bon point pour eux.
C'est un avantage si les visiteurs d'un site viennent de partout dans le monde. Pour un site par exemple en .fr avec un 98% de visiteurs .fr cela représente un avantage moindre.

La question n'est pas totalement tranchée :)
 

Hamza

Membre
Merci yule, tu es réactif en cette nouvelle année, que je te souhaite très bonne par ailleurs.
Et il n'y a pas de risque d'avoir son site chamboulé par de nouvelles fonctionnalités ou une syntaxe différente sur certaines propriété ?

Si on utilise la classe btn-button par exemple, si Booststrap décide d'en changer la couleur ou le radius cela impacte directement le site non ?
Il y a eu de gros changements en la version 4 et 5, cela n'affecte pas les sites qui l'utilisaient via CDN ?
Je m'intéresse de près à ce framework mais je débute donc mes questions peuvent sembler un peu naïves mais bon, après je saurais.
 

yule

Membre
Merci yule, tu es réactif en cette nouvelle année, que je te souhaite très bonne par ailleurs.
Merci et à toi aussi pour ce nouveau cru !

Si on utilise la classe btn-button par exemple

Oui si bootstrap le fait , mais c'est pas le genre de modification qu'il fait , généralement , tu te fais un main.css perso avec tes couleurs. Il faut te dire que c'est l'ossature et plus le fichier bootstrap.css mais que les spécificités propre à tes gouts, elles doivent se faire sur un css à part.

S'agissant du passage de la version 4 à 5, oui cela va affecter les fichiers car les changements sont "majeurs" mais de la à rendre ton site inutilisable, je pense pas. Perso j'ai pas essayé ce passage. Pour le passage du 4 au 5 , j'ai changé le design de mon site, j'ai travaillé directement sur la version 5 Alpha.

Tu dois te dire que si tu travailles avec le CDN, la version que tu utilises est dans le lien* ce qui fait que tu auras l'update que sur cette version, si tu veux utiliser une autre version, tu changes ton lien.

*
h*tps://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1.....
h*tps://cdn.jsdelivr.net/npm/bootstrap@4.5.3........
etc...

Yule
 

Eleven Up

Membre
Ok les CDN permettent de rester à jour mais je comprends pas bien comment car si on regarde les liens de la dernière version qu'on obtient sur le site de Bootstrap:
HTML
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

On voit effectivement dans les liens CSS ou JS la version @5.0.0-beta1
Ok, demain la versions passe en 5.0.0-beta2 comment le CDN sur mon HTML le sait ?? Puisque je suppose que le nouveau CDN sera
https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css
au lieu de
https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css
 

yule

Membre
Tu n'utilises que GRID ou alors le complet mais tu refais la sauce à ton goût ?
On va dire le middle.. soit bootstrap.css et bootstrap.js (pas le bundle) dans la version min et je refais à ma sauce ou selon un template existant.

Je vais souvent sur les sites qui m'intéresse et je visualise le code source pour comprendre, comparer etc... mais 🤫 d'autres le font sur le mien :sneaky:

Pour la mise à jour, comme je l'ai dit plus haut, la mise à jour se fait que sur la version que tu utilises. C'est un peu spécial actuellement car Bootstrap passe de la 4 à la 5. Si admettons, tu utilises la version 4.5.3 et que bootstrap corrige un bug, tu y verras rien mais il y aura bien la correction pour ton utilisation. Si Bootstrap sort la nouvelle version disons la 4.5.4, tu devras changer ton lien de la nouvelle version car au préalable, tu auras testé si tout est ok avec ton site.. tu peux pas laisser boostrap faire de MAJ de version sans ton accord ;)

Moi perso, c'est sous mon serveur et sans dénomination de la version dans mon link, ainsi, je change de version comme je veux en remplaçant uniquement mon fichier bootstrap-min.css et bootstrap.min.js... (Mais liens seront toujours les mêmes)

Bonne bonne
Yule
 
Dernière édition:

Ces discussions pourraient vous intéresser...

  • Résolue
Salut, J'ai une erreur PHP que je n'arrive pas à résoudre, voici le code simplifié <!DOCTYPE html> <html> <head> <title>Cours PHP & MySQL</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Titre</h1>...
  • Résolue
Bonjour, Une question pour la mise à jour de Bootstrap quand une nouvelle version sort. Comment vous procédez ? J'utilise les CDN de bootstrap donc je me demandais ce que je devrais faire avant de les changer pour la nouvelle version ? Comment savoir ce qui va changer sur mon site internet ...
  • Résolue
Hello, Je voulais tester un peu node.JS et je l'ai donc installé sur mon Win 10, l'installation s'est bien passé. Par contre quand j'essaie de faire tourner un petit code simple qui permet de créer un serveur, je l'ai enregistré sous serveur.js var http = require('http')...
Haut