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

Editor to share with you how to sort and offset columns in the Bootstrap grid layout. I hope you will get something after reading this article. Let's discuss it together.

1. Sorting of columns 1.1 example of reordering of columns

Sometimes for some reason (such as SEO), the visual effects we need to display are different from those shown in the source code. For example, the page is divided into left and right parts. We need navigation on the left and a list of the latest articles on the right, but for seo reasons, we want the spiders of search engines to get the latest list of articles first, so we need to reorder the columns.

Of course, you may have other reasons to do so.

Sorting of columns the latest article list article title author release date Keep track of your mood in the navigation of the site.

* * isn't that amazing? next I'll give you another example to explain the collation in detail. **

.col {height: 50px; border: 1px solid # 000;} h6 {text-align: center } Grid rows and rows demonstrate default order 1 2 3 4 5 6 7 8 using numeric adjustment order 1 2 order-1 3 order-5 4 order--1 5 order-6 6 order-0 7 order-4 8 use word order 1 2 order-last 3 4 order-first 5 order-first 6 7 8 number and word adjustment order 1 2 order-last 3 order-5 4 order-3 5 order-first 6 order-2 7 order-1 8

Concrete effect

1.2 use numeric sorting

Use the order-* class to control the visual order of the content, where * is the number 1-5. I'm sorry to support these five numbers. If you use other numbers, it won't work, as you can see from the sample table above:

The first table is sorted directly in order when sorting is not used.

A number other than 1-5 is used, which does not work, but is displayed in its original order, such as the original 4, 5, and 6 columns.

Columns that use numbers are ranked after columns that do not use sorting, sorted from smallest to largest.

Sorted numbers do not need to be used sequentially, for example, 2 and 3 are not used in the above example.

1.3 sort with words

Sorting by words is very simple, with two classes order-first and .order-last, which represent the beginning and the end, respectively. As you can see from the example, word sorting can be sorted together with numeric sorting, and the word sorting priority is higher than the numeric and default sorting.

2. Column offset 2.1 uses .offset-class

Use the offset-md-* class to move the column right * grid, which is achieved by increasing the left margin of the column by * grid. The other columns after the offset column are arranged with the offset column as the new starting point.

Here is the code to demonstrate the following:

[class^ = "col-"] {height: 50px; border: 1px solid # 000;} h6 {text-align: center } sort of columns 12 3 4 5 6 7 8 9 10 11 12. Col-md-4. Col-md-4. Offset -md-4 .col-md-3 .offset-md-3 .col-md-3 .offset-md-3 .col-md-6 .offset-md-3

The display results are as follows

2.2. Offset-class supports responsive layout

The .offset-class also supports responsive layout. Here is an example. You can check the effect for yourself to deepen your understanding.

[class^ = "col-"] {height: 50px; border: 1px solid # 000;} h6 {text-align: center } sort of columns 12 3 4 5 6 7 8 9 10 11 12. Col-sm-5. Col-md-6 .col-sm-5. Offset-sm-2. Col-md-6. Offset-md-0. Col-sm-6. Col-md-5. Col-lg-6-sm-6. Col-md-5. Offset-md-2. Col-lg-6. Offset-lg-0

Responsive effect animation

2.3 use. The outer margin utility class implements offset

The details of this section are described in detail in the automatic margins in the practical class of the bootstrap5 Chinese Manual. This part of the content, the manual is not very clear, the following code to demonstrate, and then explain in detail:

[class^ = "col-"] {height: 50px; border: 1px solid # 000;} h6 {text-align: center } the sort of column 12 3 4 5 6 7 8 9 10 11 12 is followed only by itself.col-md-2 .col-md-2. Ms-auto does not need a line break. Col-md-2. Col-md-2. Ms-auto. Col-md-2. Col-md-2 requires a line break. Col-md-2 .col-md-2. Ms-auto. Col-md-2. Col-md-2 is followed only by the Col-md-2. Col-md-2. Me-auto does not need a line break. Col-md-2. Col-md-2. Me-auto. Col-md-2. Col-md-2 Requires a newline .col-md-2 .col-md-2. Me-auto. Col-md-2. Col-md-2 .col-md-2 .col-md-2

Display effect

Both parameters are valid when the row is not satisfied with the row (that is, the sum of the grid number of the row is less than 12), and if the row is exactly full, the parameter is invalid.

Ms-auto: align yourself and the columns on your right by adding a left margin.

.me-auto: align the columns on your right (excluding yourself) to the right by adding a right margin.

It's a bit of a mouthful, but to put it simply, ms-auto achieves a full line by adding a gap to its left. Me-auto achieves a full row by adding a gap to its right, even if it happens to be full.

Let's use another example to verify it:

[class^ = "col-"] {height: 50px; border: 1px solid # 000;} h6 {text-align: center } column offset when each grid is 5. Col-md-5. Col-md-5. Ms-auto. Col-md-5. Ms-auto. Col-md-5. Col-md-5 me-auto. Col. -md-5 .col-md-5 .col-md-5 me-auto

Display effect

3 independent column classes

The .col-* class can also be used outside .row to provide a specific width for the element. When a column class is used as an indirect child of a row, padding is ignored. I will not demonstrate this part of the content, just move the contents of the manual over, interested friends can try more.

.col-3: width of 25%.col-sm-9: width of 75% above sm breakpoint

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

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.

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.

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.

After reading this article, I believe you have a certain understanding of "how to sort and offset columns in Bootstrap grid layout". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

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.