Shulou(Shulou.com)05/31 Report--

This article mainly introduces the Bootstrap list group, paging and progress bar components of how to use the relevant knowledge, the content is detailed and easy to understand, simple and fast operation, has a certain reference value, I believe that you read this Bootstrap list group, paging and progress bar components how to use the article will have a harvest, let's take a look at it.

List group

Use .list-group to select a list group

Add .active to a.list-group-item to indicate the current active selection.

Add .notify to a.list-group-item to make it appear disabled

Use or add to create actionable items with hover, disable, and activity. list-group-item-action list group items

Add .list-group-flush to remove some borders and fillets to render list group items opposite sides in the parent container (such as a card)

Add .list-group-horizontal to change the layout of list group items from vertical to horizontal across all breakpoints

Use context classes to style list items with status backgrounds and colors

With the help of some utilities, add badges to any list group item to display unread counts, activities, etc.

Code exercise:

List group one list group two list group three list group List group one list group two list group three list group one mark List group two list group three pages

Add .pagination, word tags add .pagination, link tags add .page-link

You can add .pagination-lg or .pagination-sm to set the size paging effect. You can add .justify-content-* to center, left and right to set the code exercise:

Home page 1 2 next page progress bar

We use .progress as the outermost element to indicate the maximum value of the progress bar (progress bar).

We use. Progress-bar internally to indicate progress so far.

The. progress-bar needs to set its width through inline styles, tool classes, or custom CSS properties

You can tag the progress bar (progress bar) by adding text inside the. progress-bar element

A height value is set for .progress, so if you change this value, the internal .progress-bar will automatically resize.

You can change the appearance of a single progress bar (progress bar) by using a background color-related utility class.

If desired, you can add multiple progress bars (progress bar) within one progress component.

Add .progress-bar-striped to any. Progress-bar to add stripe styles, which is achieved by applying the stripe effect to the background color of the progress bar (progress bar) through the gradient feature of CSS.

Stripe gradients can also be animated. Add .progress-bar-animated to .progress-bar to use the CSS3 animation feature to add the animation effect of stripes scrolling from right to left.

Code exercise:

30%

This is the end of the article on "how to use list groups, paging, and progress bar components in Bootstrap". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to use list groups, paging and progress bar components in Bootstrap". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.