Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to add a list in Bootstrap". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let Xiaobian take you to learn "How to add a list in Bootstrap"!

1 Unordered list

List groups are flexible and powerful components that display a range of content. Bootstrap modifies and extends them to support anything in them. The most basic list group is an unordered list containing list items and appropriate classes. Use the following options on top of it, or use your own CSS as needed.

1.1 Simple disordered list example

Look at the following list is not very simple, that is, on the basis of html list elements added two classes list-group and ist-group-item

the first row the second row the third row the fourth row the fifth row

1.2 Active and disabled items

Adding active to list-group-item indicates the current active state. Add disabled to list-group-item to disable its rendering.

the first row the second row the third row the fourth row the fifth row

1.3 links and buttons

Use a or button and add list-group-item-action to create dynamic list groups with hover, disabled, and enabled states. We separate these pseudo-categories to ensure that groups of lists made up of non-interactive elements, such as li or div, do not offer clicks or taps.

Make sure you don't use standard btn here.

the first row the second row the third row the fourth row the fifth row The first button the second row the third row the fourth row the fifth row

1.4 Remove borders and rounded corners

Add list-group-flush to list-group to remove some borders and rounded corners to produce a list group with flush edges in the parent container (e.g. card).

the first row the second row the third row the fourth row the fifth row

2 Numbered ordered lists 2.1 Simple content

Add the list-group-numbered modifier class (and optionally the ol element) to list-group to select numbered list group items. Numbers are generated via CSS (as opposed to ol's default browser style) to better fit within list group items and allow for better customization.

Numbers are generated by counter reset on ol, then styled with::before elements on li and placed in counter increment and content.

the first element the second element the third element

2.1 custom content

Other elements can also be used in li.

Title of item 1 the first element Title II the second element Title III the third element

3 Horizontal arrangement

Lists are not always arranged vertically, so adding list-group-horizontal to list-group changes the list display to horizontal.

You also chose to join Responsive Change.list-group-horizontal-{sm| md| lg| xl| xxl}, so that the list group is placed horizontally from the minimum min-width of the breakpoint.

Currently horizontal list groups cannot be combined with Flush list groups.

the first element the second element the third element

4 Colors and effects 4.1 Background and colors

Adding list-group-item-color to list-group-item changes the background color of the list.

default list-group-item-primary list-group-item-secondary list-group-item-success list-group-item-danger list-group-item-warning list-group-item-info list-group-item-light list-group-item-dark

4.1 Background and color

Here you add hover styles that weren't in the previous example. The active state is also supported; it is applied to indicate active selection on contextual list group items.

default list-group-item-primary list-group-item-secondary list-group-item-success list-group-item-danger list-group-item-warning list-group-item-info list-group-item-light list-group-item-dark

5 Complex List Groups 5.1 Badged

As with the generic class, add tags to any list item to show unread counts, activity, and so on.

the first element 14 the second element 14 the third element 14

5.2 custom content

Almost any HTML can be added to a project through the FlexBox generic class, such as the following list group links.

article title release date Article Summary

Small print, can be used for article source, author and other information Will Ali take over Suning? 3 days ago After Suning refuted rumors on the Internet, Dolphin Society exclusively received news that Ali had sent people to Suning's branches in some provinces.

Source: Sohu Technology Apple's "revolutionary" mysterious new product is confirmed! 3 days ago Like building cars, Apple's VR glasses have long been an open secret. Although he had been living in rumors and hadn't seen a finished product appear every year, his progress had been slowly exposed.

Source: Sohu Technology

5.3 Checkboxes and Single Button 5.3.1 Simple Example

Place Bootstrap checkboxes and radio boxes in list groups and customize them as needed. You can use them without labels, but remember to include aria-labels along with the necessary content.

The following two examples use the same radio and checkbox, so each demonstrates one.

option one option two option three the fourth choice Option 5

5.3.2 Using label as a clickable area

If you want to use label as a list-group-item to create a larger clickable area, that's fine. With... Wrap the form and text together.

option one option two option three the fourth choice Option 5

At this point, I believe everyone has a deeper understanding of "how to add lists in Bootstrap," so let's actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!

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.