Comment définir la barre de progression dans bootstrap-Tutoriel d'amorçage-php.cn

Comment définir la barre de progression dans bootstrap

尚

Libérer： 2019-07-27 13:51:35

original

3131 Les gens l'ont consulté

Comment définir la barre de progression dans bootstrap

1. La méthode de mise en œuvre est la suivante :

(1. ) Introduisez le fichier bootap :

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

Copier après la connexion

(2) Ajoutez un

(3) Ajoutez un

; div class="progress-bar">

<div class="progress-bar" aria-valuenow="40" aria-valuemax="100" aria-valuemin="0" style="width:40%;">

Copier après la connexion

aria-valuenow="40" - la valeur de progression actuelle de la barre de progression.

aria-valuemax="100" - Valeur de progression maximale.

aria-valuemin="0" - Valeur de progression minimale.

style="width:40%;" - Laissez la barre de progression pointer vers la position 40 %.

Le code complet est le suivant :




    
    进度条
    <link rel="stylesheet" href="../libs/bootstrap-3.3.7/css/bootstrap.css">



    默认的进度条

Copier après la connexion

Ce qui précède consiste à implémenter une barre de progression par défaut, la couleur d'arrière-plan est grise et la couleur de progression est bleue. Nous pouvons également ajouter différentes barres de progression en fonction. sur le style de barre de progression par défaut pour obtenir des barres de progression colorées.

2. Spécifiez la couleur.

progress-bar-success, progress-bar-info, progress-bar-warning, progress-bar-danger

<div class="progress">
    <div class="progress-bar progress-bar-success"style="width: 90%;">
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" style="width: 30%;">
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" style="width: 20%;">
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" style="width: 10%;">
    </div>
</div>

Copier après la connexion

Comment définir la barre de progression dans bootstrap

3. Forme rayée, vous pouvez ajouter des rayures de progression au div racine

<div class="progress progress-striped">
    <div class="progress-bar progress-bar-success" style="width: 90%;">
    </div>
   </div>

Copier après la connexion

4. Ajoutez un élément actif au div racine pour obtenir une barre de progression animée.

<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" 
         style="width: 40%;">
    </div>
  </div>

Copier après la connexion

Recommandé : Tutoriel d'introduction à Bootstrap

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：

bootstrap 进度条

source：php.cn

Article précédent：Comment implémenter la technologie de pagination dans bootstrap Article suivant：Comment implémenter la hauteur adaptative dans bootstrap

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur