Une brève analyse de l'utilisation des composants de groupe de liste, de pagination et de barre de progression dans Bootstrap

Comment implémenter des groupes de listes, des paginations et des barres de progression dans

Bootstrap ? L'article suivant vous présentera l'utilisation des composants de groupe de liste, de pagination et de barre de progression dans Bootstrap. J'espère qu'il vous sera utile !

Groupe de liste

• Utilisez .list-group pour sélectionner un groupe de liste
• Ajoutez .active à un .list-group-item pour indiquer le activité actuelle choisir. [Recommandations associées : "tutoriel bootstrap.active到 a.list-group-item以指示当前的活动选择。【相关推荐：《bootstrap教程》】
• 添加.disabled到 a.list-group-item以使其显示为禁用
• 使用<a> 或<button> 通过添加来创建具有悬停、禁用和活动状态的可操作.list-group-item-action列表组项
• 添加.list-group-flush以删除一些边框和圆角以在父容器（例如卡片）中边对边呈现列表组项目
• 添加.list-group-horizontal以跨所有断点将列表组项的布局从垂直更改为水平
• 使用上下文类来设置具有状态背景和颜色的列表项的样式
• 在某些实用程序的帮助下，将徽章添加到任何列表组项目以显示未读计数、活动等

代码练习：

		<ul class="list-group">
			<li class="list-group-item active">列表组一</li>
			<li class="list-group-item">列表组二</li>
			<li class="list-group-item disabled">列表组三</li>
		</ul>
		<br />
		<div class="list-group list-group-flush">
			<a href="#" class="list-group-item active list-group-item-action">列表组一</a>
			<a href="#" class="list-group-item list-group-item-action">列表组二</a>
			<a href="#" class="list-group-item disabled list-group-item-action">列表组三</a>
		</div>
		<br />
		<ul class="list-group list-group-horizontal-sm">
			<li class="list-group-item active">列表组一</li>
			<li class="list-group-item list-group-item-danger">列表组二</li>
			<li class="list-group-item disabled">列表组三</li>
		</ul>
		<br />
		<ul class="list-group">
			<li class="list-group-item d-flex justify-content-between align-items-center">列表组一
			<span class="badge badge-danger">标记</span></li>
			<li class="list-group-item">列表组二</li>
			<li class="list-group-item disabled">列表组三</li>
		</ul>

分页

添加.pagination，字标签添加.page-item，链接标签添加.page-link
可添加.pagination-lg或.pagination-sm设置大小分页效果 可添加.justify-content-*进行居中，居左，居右设置 代码练习：

		<ul class="pagination pagination-sm justify-content-center">
			<li class="page-item"><a href="#" class="page-link">首页</a></li>
			<li class="page-item"><a href="#" class="page-link">1</a></li>
			<li class="page-item"><a href="#" class="page-link">2</a></li>
			<li class="page-item"><a href="#" class="page-link">下一页</a></li>
		</ul>

进度条

• 我们使用 .progress 作为最外层元素，用于指示进度条（progress bar）的最大值。
• 我们在内部使用 .progress-bar 来指示到目前为止的进度。
• .progress-bar 需要通过内联样式、工具类或自定义 CSS 属性来设置其宽度。
• 通过在 .progress-bar 元素内添加文本，就可以为进度条（progress bar）添加标签。
• 为 .progress 设置了一个 height 值，因此，如果你改变了该值，内部的 .progress-bar 将自动地调整尺寸。
• 通过使用背景色相关的工具类可以改变单个进度条（progress bar）的外观。
• 如果需要，可以在一个进度条（progress）组件内可以添加多个进度条（progress bar）。
• 为任何 .progress-bar 添加 .progress-bar-striped 即可添加条纹样式，这是通过 CSS 的渐变功能在进度条（progress bar）的背景色上应用条纹效果实现的。
• 条纹渐变也可以有动画效果。为 .progress-bar 添加 .progress-bar-animated"]

Ajouter .disabled à un.list-group-item pour le faire apparaître désactivé

Utilisez <a> ou <button> /code> Créez des éléments de groupe de liste .list-group-item-action exploitables avec des états de survol, désactivés et actifs en ajoutant

Ajoutez .list-group-flush pour supprimer quelques bordures et coins arrondis pour afficher les éléments de groupe de liste côte à côte dans un conteneur parent (par exemple une carte)

Ajouter .list-group-horizontal à la liste de groupe sur tous les points d'arrêt La disposition des éléments a été modifiée par rapport à vertical à horizontal 🎜🎜Utilisez la classe de contexte pour styliser les éléments de la liste avec un arrière-plan et une couleur d'état 🎜🎜Ajoutez un badge à n'importe quel élément du groupe de liste pour afficher le nombre de non lus à l'aide de certains utilitaires, activités, etc.🎜🎜🎜Pratique du code : 🎜

		<div class="progress">
			<div class="progress-bar w-50 ">
			</div>
		</div>
		<br />
		<div class="progress" style="height: 30px;">
			<div class="progress-bar bg-danger" style="width: 35%;">
				30%
			</div>
		</div>
		<br>
		<div class="progress">
			<div class="progress-bar bg-success w-25"></div>
			<div class="progress-bar bg-danger w-25"></div>
			<div class="progress-bar bg-info w-25"></div>
		</div>
		<br />
		<div class="progress">
			<div class="progress-bar w-50 bg-info progress-bar-striped progress-bar-animated">
			</div>
		</div>

Pagination🎜🎜Ajoutez .pagination, ajoutez la balise de mot .page-item, ajoutez .page-link
à la balise de lien. Vous pouvez ajouter .pagination-lg ou .pagination-sm pour définir l'effet de pagination de taille. Vous pouvez ajouter .justify-content-* pour définir les paramètres centre, gauche ou droite Exercice de code : 🎜rrreee

Barre de progression🎜🎜🎜Nous utilisons .progress comme élément le plus externe pour indiquer la taille maximale de la valeur de la barre de progression. 🎜🎜Nous utilisons .progress-bar en interne pour indiquer les progrès réalisés jusqu'à présent. 🎜🎜.progress-bar doit définir sa largeur via des styles en ligne, des classes utilitaires ou des propriétés CSS personnalisées. 🎜🎜Vous pouvez ajouter une étiquette à la barre de progression en ajoutant du texte dans l'élément .progress-bar. 🎜🎜Définissez une valeur hauteur pour .progress, donc si vous modifiez cette valeur, la .progress-bar interne ajustera automatiquement la taille. 🎜🎜Vous pouvez modifier l'apparence d'une seule barre de progression (barre de progression) en utilisant des classes d'outils liées à la couleur d'arrière-plan. 🎜🎜Si nécessaire, plusieurs barres de progression peuvent être ajoutées dans un composant de barre de progression. 🎜🎜Ajoutez .progress-bar-striped à n'importe quel .progress-bar pour ajouter un style rayé, ce qui se fait sur la barre de progression via la fonction de dégradé CSS. Ceci est réalisé en appliquant un effet de rayures à la couleur de fond. 🎜🎜Les dégradés de rayures peuvent également avoir des effets animés. Ajoutez .progress-bar-animated à .progress-bar pour utiliser la fonction d'animation CSS3 afin d'ajouter un effet d'animation de rayures roulant de droite à gauche. 🎜🎜🎜Pratique du code : 🎜rrreee🎜Pour plus de connaissances sur le bootstrap, veuillez visiter : 🎜tutoriel de base du 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!