A brief analysis of the usage of list group, paging and progress bar components in Bootstrap

How to implement list groups, paging and progress bars in

Bootstrap? The following article will introduce to you the usage of list group, paging and progress bar components in Bootstrap. I hope it will be helpful to you!

List group

• Use .list-group to select the list group
• Add .active to a.list-group-item to indicate the current active selection. [Related recommendations: "bootstrap Tutorial"]
• Add .disabled to a.list-group-item to make it appear disabled
• Use <a> or <button> to create actionables with hover, disabled and active states by adding .list-group- item-actionList group item
• Add.list-group-flush to remove some borders and rounded corners to render the list group edge-to-edge in the parent container (e.g. card) Project
• Add .list-group-horizontal to change the layout of list group items from vertical to horizontal across all breakpoints
• Use context class to set background with state Style and color of list items
• With the help of some utilities, add badges to any list group item to show unread count, activity, etc.

Code exercise:

		<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

Add .pagination, add word tag .page-item, add link tag .page-link
You can add .pagination-lg or .pagination-sm to set the size paging effect You can add .justify-content-* to set the center, left, and right settings. Code exercise:

		<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 bar

• We use .progress as the outermost element to indicate the maximum value of the progress bar.
• We use .progress-bar internally to indicate progress so far.
• .progress-bar Its width needs to be set through inline styles, utility classes, or custom CSS properties.
• You can add a label to the progress bar by adding text within the .progress-bar element.
• sets a height value for .progress, so if you change that value, the inner .progress-bar will automatically Adjust the size accordingly.
• The appearance of a single progress bar can be changed by using the tool class related to the background color.
• If necessary, multiple progress bars can be added within a progress bar (progress) component.
• Add .progress-bar-striped to any .progress-bar to add a striped style. This is done through the gradient function of CSS in the progress bar. ) is achieved by applying a stripe effect to the background color.
• Striped gradients can also have animated effects. Add .progress-bar-animated to .progress-bar to use the CSS3 animation function to add an animation effect of stripes rolling from right to left.

Code practice:

		<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>

For more knowledge about bootstrap, please visit: bootstrap basic tutorial! !

The above is the detailed content of A brief analysis of the usage of list group, paging and progress bar components in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!