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!
.active
to a.list-group-item
to indicate the current active selection. [Related recommendations: "bootstrap Tutorial"].disabled
to a.list-group-item
to make it appear disabled<a>
or <button>
to create actionables with hover, disabled and active states by adding .list-group- item-action
List group item.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 .list-group-horizontal
to change the layout of list group items from vertical to horizontal across all breakpoints 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>
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
as the outermost element to indicate the maximum value of the progress bar. .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. .progress-bar
element. height
value for .progress
, so if you change that value, the inner .progress-bar
will automatically Adjust the size accordingly. .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. .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!