This is the third day of my participation in the More text Challenge. For details, see more text Challenge
“Bootstrap5 zero base to master” an old liu original, strive for a daily update section
1. Breakpoint of Bootstrap5
1.1 Mobile First
When we talk about mobile first, we should first mention responsive design. Responsive interface is about designing a page that can adapt to different devices. Responsive design uses technologies like media queries to adapt to different devices/Windows, which means that it will present different page layouts to users depending on the device you’re using.
The way this works is that there is a media query technology based on HTML5 that takes the width of the screen and then uses CSS to use different CSS effects with different widths.
Mobile first is to develop an interface suitable for mobile client first, and then adapt the corresponding style according to the situation of PC terminal on this basis. In contrast, the design idea is PC first, which way to choose is considered according to your habits and the proportion of users. Now it’s generally mobile first.
1.2 Breakpoints for Bootstrap
A break point is a critical point. This table and its contents must be kept in mind, and in particular that class infix is often used. This will be shown in detail in the next section of the layout, so just look at it a few times, and if you don’t remember it, you can check it out.
| Breakpoint types | Class infix | The resolution of the |
|---|---|---|
| X-small (super Small, usually mobile phone) | None | <576px |
| Small (Small, tablet or old laptop) | sm |
P 576 px. |
| It’s a Medium. | md |
P 768 px. |
| (Large computer) | lg |
P 992 px. |
| Extra large | xl |
P 1200 px. |
| Extra large, high definition computer or advertising equipment | xxl |
P 1400 px. |
As you can see from the table above, the screen is divided into 6 sizes with 5 breakpoints, which the reader only needs to understand here, and will be covered further in section 3 on grid systems.
2. Containers
2.1 Containers are used to hold things
The container is the basic layout element in Bootstrap. It is required when designing responsive websites using the default grid system. The maximum width of the container can be changed depending on the width of the browser. Using a container is as simple as placing the container tag directly inside the body. Typically, you only need one container tag for a page and wrap all the other visual content in it, but in this demonstration, multiple containers are placed on a page to compare the effects of different containers.
2.2 Classification of Bootstrap containers
There are three default types of Bootstrap containers:
- .container, the default container whose width is the maximum width of the previous breakpoint before each response breakpoint.
- Container-fluid is always 100% of the browser width.
- .container-{breakpoint}, the breakpoint container, whose width is always 100% of the browser width until the breakpoint is reached, and whose width is always the maximum breakpoint width after the power failure is reached. Where the breakpoint value corresponds to the breakpoint described earlier.
The following table shows the container widths at different resolutions.
| Extra small <576px |
Small P 576 px. |
Medium P 768 px. |
Large P 992 px. |
X-Large P 1200 px. |
XX-Large P 1400 px. |
|
|---|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-sm |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md |
100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg |
100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl |
100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320px |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
2.3 Container parsing varies with browser width
2.3.1 Simple Examples
Some of you may not understand the table 2.2, so LET me give you a few simple examples:
For example, in container-md, when the screen width is less than 768px, the container width takes up 100% of the screen width. When the screen width is greater than 768px and smaller than 992px, the container width remains 720px. When the screen width is greater than 992px and less than 1200px, the container width is always 960px, and so on, as is the other breakpoint container and the default container.
2.3.2 Several features of Bootstrap containers (excluding streaming containers
- The container width is jumpy, is not smooth, and is the same width between every two breakpoints
- The container is borderless before the breakpoint and borderless after the breakpoint, 768px screen, the container width is 720px.
- The default container (container) and small container (container-SM) are currently equivalent, but changes in the next step are not excluded.
2.4 Container changes with browser width demo code
The following is the demo code for different browser widths, as well as the GIF renderings. If you don’t understand the code, you can download the code and study it yourself. The style section is written by me to set the background color of the containers and set the interval between each container to make it easier to distinguish and view.
2.4.1 Demonstration animation
2.4.2 Demo source code
<! doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link Href = "bootstrap5 / bootstrap. Min. CSS" rel = "stylesheet" > < title > container width under different width demo < / title > < style > div {background - color: Rgba (0, 0, 255, 0.178); padding: 10px; margin: 10px; } </style> </head> <body> <div class="container"> Default container </div> <div class="container-sm"> Container -sm 100% wide until small breakpoint</div> <div class="container-md">container-md 100% wide until medium breakpoint</div> <div class="container-lg">container-lg 100% wide until large breakpoint</div> <div class="container-xl">container-xl 100% wide until extra large breakpoint</div> <div class="container-xxl">container-xxl 100% wide until extra extra large Breakpoint < / div > < div class = "container - fluid" > streaming container < / div > < script SRC = "bootstrap5 / bootstrap. Bundle. Min. Js" > < / script > </body> </html>Copy the codeThis is the end of today’s course, please pay attention to me, timely learning my old Liu’s original “Bootstrap Web layout grid system” the third section.