How many columns can bootstrap be divided into?

In bootstrap, the page can be divided into up to 12 columns; the grid system in bootstrap is relatively flexible and can divide the page into 1, 2, 3, 4, 6 and 12 columns. By default, bootstrap can divide up to 12 columns. The page is divided into 12 columns.

The operating environment of this tutorial: Windows 10 system, bootstrap version 3.3.7, DELL G3 computer

How many columns can bootstrap be divided at most

This grid layout system belongs to the Scaffolding (framework, layout) part. In Scaffolding, there are (fixed) grid layout (Grid System) and fluid grid layout (Fluid Grid System). This article discusses the first fixed grid layout.

Bootstrap uses a 12-column layout format, that is, up to 12 columns can be arranged within one row of the page.

bootstrap can only default to 12 columns because 12 is the least common multiple of the numbers "1, 2, 3, 4, 6", so the 12-column grid system is relatively flexible and supports dividing a row into 1 column, 2 columns, 3 columns, 4 columns, 6 columns.

Bootstrap stipulates that the total width of the page is 940px, which is different from other CSS frameworks (some others are 960px (960grid, etc.), some are 950px (blueprint, etc.)). This 940px is specified in a class named container, as follows

.container,
{
  width: 940px;
}

It is also specified that the page of this container is centered

.container {
  margin-left: auto;
  margin-right: auto;
  *zoom: 1;
}

(There is a trick here, in order to make the div in The simplest way to produce the same centering effect in various browsers is to set the values ​​of margin-left and margin-right to auto. *The zoom css hack is to be compatible with ie6 and 7, but why use zoom=1? Unknown.)

At the same time, the css pseudo-element selector is also used. In this class, the content before and after is also cleared, and the floating content is also cleared at the back.

.container:before,
.container:after {
  display: table;
  content: "";
}
.container:after {
  clear: both;
}

In the container It is not possible to directly perform multi-column layout. At this time, you need to use row as a secondary container. The style of the row container is quite interesting.

.row {
  margin-left: -20px;
  *zoom: 1;
}

The margin on the left is -20px. Note that it is minus 20. That is to say, row The width will exceed the outer container by 20 pixels. why? You'll find out later. Of course, there are also settings for emptying and floating content and floating styles in row, which are similar to containers, so I won’t go into details here.

Inside row is the span class for the specific multi-column layout we want to carry out. When using the layout specifically, the code looks like this

    <div class="container">
        <div class="row">
            <div class="span4">
                span4</div>
            <div class="span8">
                span8</div>
        </div>
    </div>

Why can't span be placed directly into the container, and why does row need margin-left=-20px? Let’s talk about span in detail. This is also the reason why the author talks about “sophisticated grid layout”.

In fact, Bootstrap has a total of 12 span classes, namely span1, span2,...span12. Their definitions are very simple

.span12 {
  width: 940px;
}
.span11 {
  width: 860px;
}
。。。
.span4 {
  width: 300px;
}
.span3 {
  width: 220px;
}
.span2 {
  width: 140px;
}
.span1 {
  width: 60px;
}

Of course, you can also use pseudo-class selectors to unify them Set to floating style

[class*="span"] {
  float: left;
}

Floating is another theory, we don’t press it. We looked carefully from span1 to span12 and found a pattern, that is, every time span is increased, it increases by 80px. It’s just that span1 starts counting from 60. Why not let span1 start counting from 80, and then each span is a multiple of 80. This is also easier to remember? In fact, span really starts counting from 80. It’s just that the visible part is 60, and the other 20 is set with margin-left=20 in the style; as follows

[class*="span"] {
  margin-left: 20px;
}

This 20 has another meaning, that is, it can represent two spans on the page. The spacing between spans means that there is a 20px spacing between all spans so that they will not stick together and make it inseparable for end users.

Related recommendations: bootstrap tutorial

The above is the detailed content of How many columns can bootstrap be divided into?. For more information, please follow other related articles on the PHP Chinese website!