comment écraser le CSS de boostrap ?

9 avril 2019 à 18:35:00

bonjour ! tout est dans le titre

actuellement, j'ai ça :

<!DOCTYPE html>
<html lang="fr">
<head>
    <title>Maquette</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

je fais appel à mon CSS boostrap après mon style.css, est-ce qu'il y a un ordre ou une hiérarchie à respecter ? j'ai entendu parler de la commande !important à mettre, sauf que c'est ultra archaïque et il y a sûrement quelque chose de plus rapide pour écraser le CSS de boostrap là on le souhaite !

exen

9 avril 2019 à 18:37:31

Bonjour,

Oui il y a un ordre.

Plus c'est bas plus c'est important

test comme ceci pour prioriser ton css.

<!DOCTYPE html>
<html lang="fr">
<head>
    <title>Maquette</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">

 </head>
<body>

Compos sui.

AliasDmc

9 avril 2019 à 18:47:16

Bonjour Kaleb_,

Il faudra en plus respecter le poids des sélecteur

-
Edité par AliasDmc 9 avril 2019 à 18:47:58

Découvrez les Css avec la zonecss.fr

Kaleb_

9 avril 2019 à 23:14:13

bonsoir ! alors effectivement, placer le style de boostrap plus haut permet de modifier par la suite le CSS et éviter que ça prenne la priorité... seulement ça ne fonctionne pas partout, et je me retrouve quand même à devoir rajouter !important la plupart du temps, si je veux que les modifications soient effectuées :/

l'autre problème, c'est qu'en ayant mis le style du boostrap au-dessus, certaines propriétés qu'il propose ne s'activent pas, et c'est à moi de les rajouter manuellement avec !important ensuite (c'est souvent le cas avec le padding)...

bref, c'est pas très pratique pour le moment ! est-ce normal ?