Official website: List Group - Bootstrap Framework (bootstrapdoc.com)
Rookie Tutorial: Bootstrap List Group | Rookie Tutorial (runoob.com)
1. What is bootstrap
Bootstrap is a front-end framework for rapid development of web applications and websites. Based on HTML, CSS and JavaScript encapsulation
Responsive
ElementUI is more suitable for application scenarios such as internal management systems and background management of enterprises, while Bootstrap is more suitable for building responsive front-end pages such as web sites and blogs.
2. Bootstrap5 responsive container
A container is a fundamental building block of Bootstrap that contains, fills, and aligns content within a given device or viewport.
Bootstrap needs a container element to wrap the content of the website
- The .container class is used for fixed-width containers that support responsive layouts.
- The .container-fluid class is used for 100% width and occupies the entire viewport (viewport) container
3. Bootstrap grid system
Bootstrap provides a responsive, mobile-first fluid grid system that automatically divides into up to 12 columns as the screen or viewport size increases.
To operate the grid system, the container of the grid system must first be created.
"container" and "row" together form a grid container, and "row" represents a row.
After creating the grid container, set the div named col-md-. When the number of digits is 1, it means that the width of each div occupies 1/12, so each row can place up to 12 sub-divs.
If there are more than 12, it will be displayed on the next line.
3.1 Nested columns
3.2 Column Offset
Column offsets are set via class names (offset-*-*). The first * can be sm, ms, lg, xl, indicating the type of screen device, and the second asterisk * can be a number from 1 to 11.
3.3 Column sorting
order-* must be set for each div to take effect.
If only one is set, it will be sorted if I set it, and will not be sorted if it is not set.
Numbers 1-5 are valid, other numbers are not valid .
order-first, order-last : can also be sorted, the priority is higher than order-*
4. Bootstrap typography
4.1 Title
h1~h6: Both labels and classes can be used
4.1.1：class="display-1"
Highlight larger titles: class="display-1"
4.2.2.class="lead"
Highlight paragraphs: class="lead"
4.3.3small
If you need to add an inline subheading to any heading, simply add <small> around the element, or add the .small class, so you get a lighter text with a smaller font size ( parent element size 85% of
4.3.1<small class=' text-mutedclass'>
Create smaller font size and lighter color
4.2text-center text centering
| .lead | make paragraphs highlight | try it |
| .small | Set small text (set to 85% size of parent text) | try it |
| .text-left | set text left alignment | try it |
| .text-center | set text center alignment | try it |
| .text-right | set text right alignment | try it |
| .text-justify | Set the text alignment, and the part of the text in the paragraph that exceeds the screen will automatically wrap | try it |
| .text-nowrap | Do not break lines in paragraphs that exceed the screen | try it |
| .text-lowercase | set text lowercase | try it |
| .text-uppercase | set text capitalization | try it |
| .text-capitalize | set word capitalization | try it |
| .initialism | The text displayed in the <abbr> element is displayed in a small font, and can convert lowercase letters to uppercase letters | try it |
| .blockquote-reverse | set quote right alignment | try it |
| .list-unstyled | Remove the default list style, left-aligned list items (in <ul> and <ol>). This class applies only to immediate child list items (if you need to remove nested list items, you need to use this style on the nested list) | try it |
| .list-inline | Put all list items on the same line | try it |
| .dl-horizontal | This class sets the float and offset, which are applied to the <dl> element and the <dt> element. For the specific implementation, please refer to the example | try it |
| .pre-scrollable | Make the <pre> element scrollable. The maximum height of the code block area is 340px. Once this height is exceeded, a scroll bar will appear on the Y axis |
For longer texts, the class .text-truncate can be used to truncate the text with an ellipsis. It is especially useful when displaying a block of text on a single line but there is not enough space available.
4.2.1 Font weight, italics
