bootstrap Installation manuelle de Booststrap, fichiers CSS et JS

Nicolas · 24 Déc. 2020

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.

Nicolas · 24 Déc. 2020

Ok il suffit de lire la doc... Pan ! sur les doigts Nicolas !!

Anthony · 25 Déc. 2020

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 · 26 Déc. 2020

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.

Wazz9 · 26 Déc. 2020

L'avantage de Bootstrap c'est clairement les container et grid mais le reste c'est cool aussi pour développer vite et bien.

Audrey · 27 Déc. 2020

Dans quels dossiers il faut charger les fichiers Bootstrap svp ?

WWWest · 27 Déc. 2020

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>

Cascadeur · 28 Déc. 2020

Audrey à dit:
Dans quels dossiers il faut charger les fichiers Bootstrap svp ?

Si tu as déjà des dossiers CSS et JS sur ton serveur tu les charges dedans, pas la peine de recréer des dossiers spécialement pour Bootstrap.
A priori tu as au moins un dossier CSS déjà

Hamza · 29 Déc. 2020

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.

yule · 30 Déc. 2020

Hamza à dit:
C'est tellement mis en avant les CDN par les frameworks je me pose la question de l'intérêt.

Disons qu'habituellement avec avec le CDN, tu profites de la dernière version . Sinon faut zieuter de tant à autres, les nouvelles versions sur le dudit site.
Pour plus, lire ici

Eleven Up · 31 Déc. 2020

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 · 31 Déc. 2020

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 · 31 Déc. 2020

yule à dit:
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.

yule à dit:
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 · 1 Janv. 2021

yule à dit:
Disons qu'habituellement avec avec le CDN, tu profites de la dernière version

Les CDN se mettent à jour automatiquement sans changer le lien dans l'HTML ?

yule · 1 Janv. 2021

Hamza à dit:
Les CDN se mettent à jour automatiquement sans changer le lien dans l'HTML ?

Exactement. Si il y a une MAJ, cest le fichier distant qui est adapté, ton lien de destination ne change pas.
Yule

Hamza · 1 Janv. 2021

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 · 1 Janv. 2021

Hamza à dit:
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 !

Hamza à dit:
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 · 2 Janv. 2021

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:

Download

Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.

getbootstrap.com

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

Eleven Up · 2 Janv. 2021

yule à dit:
généralement , tu te fais un main.css perso avec tes couleurs

Tu n'utilises que GRID ou alors le complet mais tu refais la sauce à ton goût ?

yule · 3 Janv. 2021

7UP à dit:
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

bootstrap Installation manuelle de Booststrap, fichiers CSS et JS

Membre actif

Pièces jointes

Membre actif

Membre

Membre actif

Membre

Membre

Membre

Membre

Membre

Membre

Membre

Membre

Membre

Membre

Membre

Membre

Membre

Membre

Membre

Membre

Ces discussions pourraient vous intéresser...