Discussion :

[lostsoul]

Bonjour,

Petit soucis pour intégrer Bootstrap en local (sans CDN) sur une page toute simple.
Les fichiers de Bootstrap sont dans un dossier bootstrap à la racine.
Voilà ce que j'ai dans le head :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<link href="bootstrap/bootstrap-grid.css" rel="stylesheet">
<link href="bootstrap/bootstrap-reboot.css" rel="stylesheet">
<link href="bootstrap/bootstrap.css" rel="stylesheet">
 
<link href="bootstrap/bootstrap.js" rel="stylesheet">
<link href="bootstrap/bootstrap.bundle.js" rel="stylesheet">

Et en bas de page pour jQuery :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<script
			  src="https://code.jquery.com/jquery-3.3.1.js"
			  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
			  crossorigin="anonymous"></script>

J'ai ces messages d'erreur dans la console :

Erreur dans les liens source : TypeError: NetworkError when attempting to fetch resource.
URL de la ressource : file:///home/moi/Exercices/bootstrap/bootstrap.css
URL du lien source : bootstrap.css.map[En savoir plus]
Erreur dans les liens source : TypeError: NetworkError when attempting to fetch resource.
URL de la ressource : file:///home/moi/Exercices/bootstrap/bootstrap-reboot.css
URL du lien source : bootstrap-reboot.css.map[En savoir plus]
Erreur dans les liens source : TypeError: NetworkError when attempting to fetch resource.
URL de la ressource : file:///home/moi/Exercices/bootstrap/bootstrap-grid.css
URL du lien source : bootstrap-grid.css.map

Mais certaines choses ne fonctionnent pas, comme un exemple de bouton par exemple :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

Il manque quelque chose, ou mes imports sont ma fait ?

Merci d'avance,
Cordialement,

ANDRE Ani

[psychadelic]

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<link href="bootstrap/bootstrap-grid.css" rel="stylesheet">

Il manque quelque chose, ou mes imports sont mal fait ?

oui, tes imports semblent mal faits.

Est-ce tes différents fichiers sont bien présent dans le bon répertoire avec exatement les mêmes noms que sur ta page ?

le mieux pour le vérifier c'est d' afficher la source de ton code et cliquer sur ces différents liens

[lostsoul]

Bon, j'ai fini par trouver, à l'instant.

Mes imports JS étaient mal fait, l'ordre n'allait pas (avec jQurey) mais il manquait aussi popper.js, à télécharger à part.

Voilà :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
    <link href="bootstrap/bootstrap-grid.css" rel="stylesheet">
    <link href="bootstrap/bootstrap-reboot.css" rel="stylesheet">
    <link href="bootstrap/bootstrap.css" rel="stylesheet">
 
 
       <script src="https://code.jquery.com/jquery-3.3.1.js"
        integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
        crossorigin="anonymous"></script>
 
    <script src="bootstrap/popper.js"></script>
    <script src="bootstrap/bootstrap.js"></script>
    <script src="bootstrap/bootstrap.bundle.js"></script>

Résolu, merci ;-)