Sujet Précédent Sujet Suivant

Pas de couleur dans les bar progress

Résolu/Fermé
Diego987 Messages postés 64 Date d'inscription vendredi 28 décembre 2018 Statut Membre Dernière intervention 9 janvier 2024 - 4 mai 2020 à 16:49
Diego987 Messages postés 64 Date d'inscription vendredi 28 décembre 2018 Statut Membre Dernière intervention 9 janvier 2024 - 4 juin 2020 à 22:38
Bonjour, toujours dans un tuto sur Bootstrap, je n'arrive pas à avoir les couleurs dans les progress-bar. Auriez-vous une idée de pourquoi? Merci
code:
Code : 
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=devise-width, initial-scale=1">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" ></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container" style="margin-top: 50px;">
            
            <div class="progress">
                <div class="progress-bar progress-bar-success" role="progressbar" style="width: 30%">30%</div>
            </div>
            
            <div class="progress">
                <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" style="width: 40%">40%</div>
            </div>
            
            <div class="progress">
                <div class="progress-bar progerss-bar-warning" role="progressbar" style="width: 60%">60%</div>
            </div>
            
            <div class="progress">
                <div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" style="width: 80%">80%</div>
            </div>
            
        </div>
    </body>
</html>

j'ai ça :


et non :


Merci

Configuration: Macintosh / Chrome 81.0.4044.129
A voir également:

4 réponses

Réponse 1 / 4
jordane45 Messages postés 38392 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 23 janvier 2025 4 731
4 mai 2020 à 19:39
Je ne sais pas où tu trouves tes tutos...
mais ce n'est pas les bonnes classes utilisées
https://www.w3schools.com/bootstrap4/bootstrap_progressbars.asp

pour "info" par exemple, il faut utiliser :bg-info 
<div class="progress">
      <div class="progress-bar bg-info progress-bar-striped" role="progressbar" style="width: 40%">40%</div>
            </div>

1
Réponse 2 / 4
Narwaouidi
Modifié le 4 mai 2020 à 17:45
Salut,
sans voir le CSS impossible de dire quoi que ce soit...
C'est quoi l'intérêt de passer par un cours payant avec des
"
Cours donnés par des formateurs confirmés
Trouvez le formateur qui vous correspond
"
Si vous devez passer par un forum d'entraide pour avoir des réponses à vos exercices?

Vous aurez les mêmes services dans des cours gratuit. Comme pour tout les cours payant ou gratuit c'est surtout le travail personnel qui compte.

Je voit que votre leçon parle de bootstrap.
Pensez à développer vos connaissances (et pratiquer) si ce n'est pas assez fait :
_CSS car boostrap utilise le CSS
_JavaScript car Bootstrap s'appuie sur une bibliothèque de fonctions JavaScript(JQuery)
_HTML bien évidemment car HTML si vous avez des lacunes sur les balises à utiliser, les rôles de chaque élément, la syntaxe et les attributs à utiliser et dans quels cas. CSS s'appliquant au HTML et JavaScript permet de manipuler HTML c'est essentiel.

Bon travail, prendre du recul pour voir par une autre leçon sur le même sujet ou un autre thème est une bonne méthode pour avancer quand on est bloqué.

Par exemple le plus ismple quand on a un doute c'est d regarder le manuel:

https://getbootstrap.com/docs/4.0/components/progress/

Ah ben tiens donc! la leçon qu'on vous a proposé est exactement de réaliser l'exemple du manuel à appliquer...

Autant commencer par le manuel la prochaine fois ;)
0
Réponse 3 / 4
Diego987 Messages postés 64 Date d'inscription vendredi 28 décembre 2018 Statut Membre Dernière intervention 9 janvier 2024
4 mai 2020 à 22:35
En effet le tuto ne part pas sur les bonnes classes. C'était peut-être pour une ancienne version de Bootstrap. J'arrive au bon résultat mais je n'arrive pas encore à faire sauter une ligne entre chaque bar. Je vais chercher mais si tu as un indice, il est le bien venu. Merci
0
jordane45 Messages postés 38392 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 23 janvier 2025 4 731
4 mai 2020 à 23:05
En html pour faire des retours à la ligne (ou ajouter des sauts de lignes) c'est avec le tag 
 <br>

Mais le mieux serait plutôt de jouer avec du margin ou du padding en css.
0
Réponse 4 / 4
Diego987 Messages postés 64 Date d'inscription vendredi 28 décembre 2018 Statut Membre Dernière intervention 9 janvier 2024
4 juin 2020 à 22:38
merci
0

Discussions similaires

Transparence en tete et bas de page
Sabrina -
sabrina -

8 réponses
Rajout de lien sur plusieurs pages
leparradiss -
David -

11 réponses
sertissage des cables rj45
lekludo -
brupala -

7 réponses
NB.SI critère couleur
albelo03 -
Wanam -

19 réponses
Couleur transparente
ando26 -
Turtlee -

25 réponses