Maison > Article > interface Web > Comment définir la barre de progression dans bootstrap4
Comment définir la barre de progression dans bootstrap4
- (*-*)浩original
- 2019-07-12 10:05:392697parcourir
Le composant bootstrap est souvent utilisé dans le développement front-end. Aujourd'hui, cet article partagera avec vous l'utilisation de base de la barre de progression du composant bootstrap. Les amis qui en ont besoin peuvent s'y référer
Utilisation de base de la barre de progression (Apprentissage recommandé : Tutoriel vidéo Bootstrap)
S'appuie principalement sur .progress et .progress -bararia-valuenow Indique la valeur actuelle aria-valuemin indique la valeur minimale aria-valuemax indique la valeur maximale largeur : 60 % indique la position actuelle de la barre de progression barre de progression Peut afficher le processus d'achèvement des tâches de l'utilisateur.Les étapes pour créer une barre de progression de base sont les suivantes :
Ajoutez un Ensuite, à l'intérieur du
ci-dessus, ajoutez un
vide avec la classe .progress-bar . Ajoutez un attribut de style avec une largeur exprimée en pourcentage, par exemple style="width:70%" signifie que la barre de progression est à la position 70%.
Exemple :
<div class="progress"> <div class="progress-bar" style="width:70%"></div> </div>Pour plus d'articles techniques liés à Bootstrap, veuillez visiter la colonne
Tutoriel Bootstrap pour apprendre !
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!
Déclaration：
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
Article précédent：Comment configurer la boîte modale dans bootstrap4Article suivant：Comment configurer la boîte modale dans bootstrap4