This is the 7th day of my participation in Gwen Challenge

“Bootstrap5 zero foundation to master” my old liu original, strive to update a section every day.

7.1 Column sorting

7.1.1 Column reorder example

Sometimes, for some reason (such as SEO), we need to display the visual effect and the source code, shown in suitable for different, such as web pages about two parts, we need the navigation on the left, the right is the latest list of articles, but for SEO reasons, we want the search engine spiders first to obtain the latest list of articles, This is where we need to reorder the columns. Of course, you may have other reasons as well. Let’s start with a visual example. For clarity, this is just the demo code, not the embellishment.

<! 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 > column sorting < / title > < / head > < body > < div class = "container" > < div Class ="row row-cols-3"> <div class="col-9 order-2"> <h5> </h5> <ol> <li> </li> < li > post title author release date < / li > < li > < / li > < li > < / li > < / ul > < / div > < div class = "col - 3 order - 1" > < h5 > site navigation < / h5 > < ul > < li > note-taking < / li > < li > the mood a bit < / li > < li > professionals < / li > < / ul > < / div > < / div > < / div > < script SRC = "bootstrap5 / bootstrap. Bundle. Min. Js" > < / script > </body> </html>Copy the code

** isn’t that amazing, so let me give you another example to explain the collation in detail. 支那

<! 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> .col {height: 50px; border: 1px solid #000; } h5{text-align: center; } </style> <title> Grid row and column demonstration </title> </head> <body> <h5> default order </h5> <div class="container"> <div class="row row-cols-3"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> <div class="col">4</div> <div class="col">5</div> < div class = "col" > 6 < / div > < div class = "col" > 7 < / div > < div class = "col" > 8 < / div > < / div > < / div > < h5 > use digital adjustment order < / h5 > < div class="container"> <div class="row row-cols-3"> <div class="col">1</div> <div class="col order-1">2 order-1</div> <div class="col order-5">3 order-5</div> <div class="col order--1">4 order--1</div> <div class="col order-6">5 order-6</div> <div class="col order-0">6 order-0</div> <div class="col order-4">7 order-4</div> <div class="col">8</div> </div> </div> </h5> <div class="container"> <div class="row row-cols-3"> <div class="col">1</div> <div class="col" order-last">2 order-last</div> <div class="col">3</div> <div class="col order-first">4 order-first</div> <div class="col  order-first">5 order-first</div> <div class="col">6</div> <div class="col">7</div> <div class="col">8</div> </div> </div> <h5> <div class="container"> <div class="row row-cols-3"> <div class="col">1</div> <div class="col" order-last">2 order-last</div> <div class="col order-5">3 order-5</div> <div class="col order-3">4 order-3</div> <div class="col order-first">5 order-first</div> <div class="col order-2">6 order-2</div> <div class="col order-1">7 order-1</div> <div class="col">8</div> </div> </div> <script src="bootstrap5/bootstrap.bundle.min.js"></script> </body> </html>Copy the code

The specific effect

7.1.2 Sorting by numbers

Use the order-* class to control the visual order of content, where * is numbers 1-5. Sorry to support these five numbers, if you use other numbers, it will not work, as can be seen from the example table above:

  1. The first table is the case where sort is not used and is sorted by order.
  2. The use of numbers other than 1-5 does not have any effect, or it is displayed in the original order, such as the original 4, 5, 6 columns.
  3. Columns that use numbers are sorted from smallest to largest by sorted number, following columns that do not use sort
  4. Sorting numbers need not be used in order, for example, 2 and 3 are not used in the above example.

7.1.3 Using Word Sorting

It is very simple to sort by words, just two classes: orderfirst and.orderlast, which represent the beginning and the end, respectively. As you can see from the example, word sort can be combined with number sort, and word sort takes precedence over number and default sort.

7.2. Column offset

7.2.1 Using the. Offset – class

Use the offset-md-* classes to move the column * grids to the right by increasing the left margin of the column * grids. The other columns following the offset column are arranged at the new start point of the offset column.

Again, use code to demonstrate the following:

<! 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> [class^="col-"] {height: 50px; border: 1px solid #000; } h5{text-align: center; } </style> <title> </head> <body> <div class="container"> <div class="row"> <div class=" col-mD-1 ">1</div> <div class="col-md-1">2</div> <div class="col-md-1">3</div> <div class="col-md-1">4</div> <div class="col-md-1">5</div> <div class="col-md-1">6</div> <div class="col-md-1">7</div> <div class="col-md-1">8</div> <div class="col-md-1">9</div> <div class="col-md-1">10</div> <div class="col-md-1">11</div> <div class="col-md-1">12</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div> </div> <div class="row"> <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div> <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div> </div> <div class="row"> <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div> </div> </div>  <script src="bootstrap5/bootstrap.bundle.min.js"></script> </body> </html>Copy the code

The following output is displayed:

7.2.2. Offset – The class supports responsive layout

The.offset- class also supports responsive layout. Here is an example, you can see for yourself.

<! 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> [class^="col-"] {height: 50px; border: 1px solid #000; } h5{text-align: center; } </style> <title> </head> <body> <div class="container"> <div class="row row-cols-12"> <div class="col-1">1</div> <div class="col-1">2</div> <div class="col-1">3</div> <div class="col-1">4</div> <div class="col-1">5</div> <div class="col-1">6</div> <div class="col-1">7</div> <div class="col-1">8</div> <div class="col-1">9</div> <div class="col-1">10</div> <div class="col-1">11</div> <div class="col-1">12</div> </div> <div class="row"> <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div> <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div> </div> <div class="row"> <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div> <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div> </div> </div> <script src="bootstrap5/bootstrap.bundle.min.js"></script> </body> </html>Copy the code

Responsive effects animation

7.2.3. The margin utility class implements the offset

This part is described in detail in automatic margins in the practical class of bootstrap5 Chinese manual. This part of the content, the manual is not very clear, or to use the code to demonstrate, and then explain in detail:

<! 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> [class^="col-"] {height: 50px; border: 1px solid #000; } h5{text-align: center; } </style> <title> </head> <body> <div class="container"> <div class="row row-cols-12"> <div class="col-1">1</div> <div class="col-1">2</div> <div class="col-1">3</div> <div class="col-1">4</div> <div class="col-1">5</div> <div class="col-1">6</div> <div class="col-1">7</div> <div class="col-1">8</div> <div class="col-1">9</div> <div class="col-1">10</div> <div class="col-1">11</div> <div class="col-1">12</div> </div> < h5 > behind only oneself < / h5 > < div class = "row" > < div class = "col - md - 2" >. Col - md - 2 < / div > < div class = "col - md - 2 ms - auto" >. Col - md - 2 . Ms - auto < / div > < / div > < h5 > do not need to wrap the < / h5 > < div class = "row" > < div class = "col - md - 2" >. Col - md - 2 < / div > < div class = "col - md - 2 ms-auto">.col-md-2 .ms-auto</div> <div class="col-md-2">.col-md-2</div> <div class="col-md-2">.col-md-2</div> </div> < h5 > need to wrap the < / h5 > < div class = "row" > < div class = "col - md - 2" >. Col - md - 2 < / div > < div class = "col - md - 2 ms - auto" >. Col - md - 2 .ms-auto</div> <div class="col-md-2">.col-md-2</div> <div class="col-md-2">.col-md-2</div> <div class="col-md-2">.col-md-2</div> <div class="col-md-2">.col-md-2</div> <div class="col-md-2">.col-md-2</div> <div Class = "col - md - 2" >. Col - md - 2 < / div > < div class = "col - md - 2" >. Col - md - 2 < / div > < / div > < h5 > behind only oneself < / h5 > < div class = "row" > < div Class = "col - md - 2" >. Col - md - 2 < / div > < div class = "col - md - 2 me - auto" >. 2 col - md - me - auto < / div > < / div > < h5 > do not need to wrap the < / h5 > < div class="row"> <div class="col-md-2">.col-md-2</div> <div class="col-md-2 me-auto">.col-md-2 .me-auto</div> <div Class = "col - md - 2" >. Col - md - 2 < / div > < div class = "col - md - 2" >. Col - md - 2 < / div > < / div > < h5 > need to wrap the < / h5 > < div class = "row" > < div class="col-md-2">.col-md-2</div> <div class="col-md-2 me-auto">.col-md-2 .me-auto</div> <div class="col-md-2">.col-md-2</div> <div class="col-md-2">.col-md-2</div> <div class="col-md-2">.col-md-2</div> <div class="col-md-2">.col-md-2</div> <div class="col-md-2">.col-md-2</div> <div class="col-md-2">.col-md-2</div> <div class="col-md-2">.col-md-2</div> </div> </div> <script src="bootstrap5/bootstrap.bundle.min.js"></script> </body> </html>Copy the code

According to the effect

  • Both parameters are valid if the row is less than one row (that is, the total number of grids in the row is less than 12), and invalid if the row is exactly full.
  • .ms-auto: Align yourself and the column to your right by adding a left margin.
  • .me-auto: Aligns columns to the right of you (excluding yourself) by adding a right margin.

It’s a bit of a mouthful, but mS-Auto simply adds a space to its left to achieve a full line. Me-auto achieves a full line by adding an interval to its right, or if it happens to be a full line.

Let’s use another example to verify:

<! 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> [class^="col-"] {height: 50px; border: 1px solid #000; } h5{text-align: center; } </style> <title> column offset </title> </head> <body> <div class="container"> <h5> each grid is 5 </h5> <div class="row"> <div class="col-md-5">.col-md-5</div> <div class="col-md-5 ms-auto">.col-md-5 .ms-auto</div> <div class="col-md-5 ms-auto">.col-md-5 .ms-auto</div> <div class="col-md-5">.col-md-5</div> <div class="col-md-5 me-auto">.col-md-5 me-auto</div> <div class="col-md-5">.col-md-5</div> <div class="col-md-5">.col-md-5</div> <div class="col-md-5 me-auto">.col-md-5 me-auto</div> </div> </div> <script src="bootstrap5/bootstrap.bundle.min.js"></script> </body> </html>Copy the code

According to the effect

7.3 Independent Column Classes

The.col-* class can also be used outside of.row to provide specific widths for elements. When a column class is used as an indirect child of a row, the population is ignored. This part of the content I will not demonstrate, directly move the manual content over, interested friends can try more.

<div class="col-3 bg-light p-3 border">
.col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
.col-sm-9: width of 75% above sm breakpoint
</div>
Copy the code

These classes can be used with utilities to create a floating image of the response. If the text is short, be sure to wrap the content in a.clearfix wrapper to clear the float.

<div class="clearfix">
<img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">

<p>
A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
</p>

<p>As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual  content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.</p>

<p>
And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
</p>
</div>
Copy the code

Today’s lesson is here, please pay attention to me, timely learn my original “Bootstrap5 zero foundation to master” section 8 Bootstrap web layout between the grid detailed explanation. If this article is helpful, please feel free to like it!