This is the sixth day of my participation in Gwen Challenge
“Bootstrap5 zero foundation to master” my old liu original, strive to update a section every day.
1. Bootstrap grid layout
In the last section, we introduced the grid in Bootstrap. Grid is a key and difficult point in web layout. Layout is the starting point and foundation of web design. Of course, for a web designer with a certain foundation, these contents believe that a look at the understanding, today we further study grid layout.
This section covers some of the functionality in the elastic box (Flex) of the generic class.
2. Align vertically
2.1 Set vertical alignment in the ROW label
You can change the vertical alignment of rows in the container by adding align- kitems-start, align- Kitems-center, align- Kitems-end to the row TAB. Align top, center, and bottom labels, respectively. Below is a demo code and renderings of the code CSS code to set the background color and spacing, easy to view the effect.
<! 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" > < style >. Row {background - color: rgba (0, 0, 255, 0.178); height: 260px; margin:30px; }. Col {background-color: rgba(101, 101, 161, 0.842); height: 80px; padding: 30px; margin: 10px; } </style> <title> vertical alignment demonstration </title> </head> <body> <div class="container"> <div class="row align-items-start"> <div class="col"> </div> <div class="col"></div> <div class="col"></div> </div> <div class="row align-items-center"> <div class="col"> </div> <div class="col"></div> <div class="col"></div> </div> <div class="row align-items-end"> <div class="col"> </div> <div class="col"></div> <div class="col"></div> </div> </div> <script src="bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>Copy the code
2.2 Vertical alignment is set in col labels
Align-self-start, align-self-center, align-self-end you can change the vertical alignment of a column row by adding the align-self-start, align-self-center, and align-self-end labels to the COL TAB, with the top, center, and bottom labels, respectively. Below is a demo code and renderings of the code CSS code to set the background color and spacing, easy to view the effect.
<! 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" > < style >. Row {background - color: rgba (0, 0, 255, 0.178); height: 260px; margin:30px; }. Col {background-color: rgba(101, 101, 161, 0.842); height: 80px; padding: 30px; margin: 10px; } </style> <title> vertical alignment demonstration </title> </head> <body> <div class="container"> <div class="row align-items-start"> <div class="col align-self-start"> </div> <div class="col align-self-center"></div> <div class="col align-self-end"></div> </div> </div> <script src="bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>Copy the code
3. Align horizontally
3.1 Set vertical alignment in the ROW label
Through the ROW tag Add context-content-start, context-content-center, context-content-end, context-content-around, context-content-between, and justif Y-content-instituted changes the horizontal alignment in a column row. Below is a demo code and renderings of the code CSS code to set the background color and spacing, easy to view the effect.
<! 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" > < style >. Row {background - color: rgba (0, 0, 255, 0.178); height: 120px; margin:10px; }. Col-4 {background-color: rgba(101, 101, 161, 0.842); height: 30px; padding: 10px; margin: 10px; } </style> <title> vertical alignment demonstration </title> </head> <body> <div class="container"> <div class="row context-content-start "> <div class="col-4"> </div> <div class="col-4"></div> <div class="col-4"></div> </div> <div class="row justify-content-center"> <div class="col-4"> </div> <div class="col-4"></div> <div class="col-4"></div> </div> <div class="row justify-content-end"> <div class="col-4"> </div> ## <div class="col-4"></div> <div class="col-4"></div> </div> <div class="row justify-content-around"> <div class="col-4"> </div> <div class="col-4"></div> <div class="col-4"></div> </div> <div class="row justify-content-between"> <div class="col-4"> </div> <div class="col-4"></div> <div class="col-4"></div> </div> <div class="row justify-content-evenly"> <div class="col-4"> </div> <div class="col-4"></div> <div class="col-4"></div> </div> </div>Copy the code
Today’s course is here, please pay attention to me, timely learning an old Liu’s original “Bootstrap5 zero foundation to master” the latest chapter.