Comment créer une barre de progression dynamique bootstrap-Tutoriel d'amorçage-php.cn

Comment créer une barre de progression dynamique bootstrap

(*-*)浩

Libérer： 2019-07-11 13:52:06

original

4410 Les gens l'ont consulté

Dans ce tutoriel, vous verrez comment utiliser Bootstrap pour créer une barre de progression pour les états de chargement, de redirection ou d'action.

Comment créer une barre de progression dynamique bootstrap

Les barres de progression Bootstrap utilisent des transitions et des animations CSS3 pour obtenir cet effet. Internet Explorer 9 et les versions antérieures et anciennes de Firefox ne prennent pas en charge cette fonctionnalité, et Opera 12 ne prend pas en charge les animations. (Apprentissage recommandé : Tutoriel vidéo Bootstrap)

Barre de progression animée

Les étapes pour créer une barre de progression animée sont les suivantes :

Ajoutez un

avec les classes .progress et .progress-striped.

Ajoutez également la classe .active.

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="60%" ; signifie que la barre de progression est à la position 60 %.

Cela donnera aux rayures une impression de mouvement de droite à gauche.

Jetons un coup d'œil à l'exemple suivant :

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 动画的进度条</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="progress progress-striped active">
	<div class="progress-bar progress-bar-success" role="progressbar"
		aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
		style="width: 40%;">
		<span class="sr-only">40% 完成</span>
	</div>
</div>

</body>
</html>

Copier après la connexion

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!

Étiquettes associées：

bootstrap

source：php.cn

Article précédent：Comment utiliser l'icône de police bootstrap Article suivant：La différence entre easyui et 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