Je crée un lien vers le CSS de démarrage de bootstrap et j'ai un main.css personnel. J'ai lié le boostrap comme spécifié dans les instructions de démarrage, mais mon css personnalisé ne fonctionne que si je place une balise dans le index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Lunix</title>
</head>
<body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
</body>
</html>
4 Réponses :
Commande en panne
<!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="stylesheet" href="main.css">
Vous devez toujours ajouter votre lien de fichier css personnalisé en dernier de tous vos liens pour que cela fonctionne correctement.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="stylesheet" href="main.css">
Vous devez d'abord lier bootstrap css, puis votre css personnalisé qui est main.css
Pour que vous obteniez d'abord le bootstrap css, votre css personnalisé sera rendu et votre css sera appliqué. Aussi si vous voulez changer la classe personnalisée css de bootstrap (ce que vous devriez éviter de faire), vous pouvez utiliser! Important et cela fonctionnera.
Changement: -
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="stylesheet" href="main.css">
ajoutez votre css personnalisé main.css après le fichier css bootstrap
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="stylesheet" href="main.css">
Si vous souhaitez que votre CSS dans le fichier MAIN.CSS a écrasé les styles dans la Bootstrap CSS, vous devez le déclarer après le fichier BOOTSTRAT CSS -FILE. Alors déplacez-le après cela dans votre HTML.
Je suggérerais d'abord d'ajouter votre importation main.css après l'importation bootstrap, afin que vous puissiez remplacer tout style bootstrap par le vôtre. Deuxièmement, je ne suis pas sûr de comprendre ce que vous voulez dire, cela ne fonctionne que dans index.html?
oh mon dieu ça a juste fonctionné lol, merci beaucoup: P c'était plus facile que prévu lol.
@emke cela a fonctionné, j'ai mis le main.css après le bootstrap et ça marche maintenant. et je voulais dire que je devais mettre mon css dans le fichier index.html pour que cela fonctionne, mais cela fonctionne maintenant merci encore: D