How to use Bootstrap to build a more logical HTML structure

Objective

Bootstrap's success lies not only in its ease of use, but also in its normative style and the rationality of its HTML structure. But many people use Bootstrap only blindly copy the paste according to the document, and do not carefully consider the usefulness of each class, and do not consider whether the HTML structure is reasonable. In my usual work, I have always stressed with colleagues that it is important to dig into the essence of the framework and use the framework itself as a class to implement the layout, and almost all UI layouts can be done using the framework itself without the need to write extra redundant styles. The purpose of this article is to show how to use Bootstrap to build a common layout and ensure that the layout has a reasonable HTML structure. Regardless of the traditional development, or the use of the framework, the idea of building a layout will not change. All the cases in this paper take Bootstrap 3 as an example, Bootstrap 4 change is larger, but also basic application, need readers careful comparison, not blindly copy.

Reasonable use of grid to ensure reasonable nesting

The arbitrary nesting of Bootstrap raster classes is the main reason for the clutter of the HTML structure, although Bootstrap's raster classes do not pose any serious problems when nested arbitrarily, but they can cause potential problems and are not tolerated for detail control. For example, the following common errors are nested:

<Divclass= "Row">  <Divclass= "Col-md-6">    <Divclass= "Col-md-8">. col-md-8</Div>    <Divclass= "Col-md-4">. col-md-4</Div>  </Div>  <Divclass= "Col-md-6">. col-md-6</Div></Div>

There is no big problem on the surface, but if you stroke the grid, you will see the difference, see the following codepen:

See the Pen Bootstrap-demo by Zongbin (@nzbin) on Codepen.

We must understand the role of each Bootstrap grid class. Which .row and .col-* must be used together, is indispensable, because .row it is to offset .col-* the margin negative, so it is not an optional class. So, the correct structure of the above example is as follows:

<Divclass= "Row">  <Divclass= "Col-md-6">    <Divclass= "Row">      <Divclass= "Col-md-8">. col-md-8</Div>      <Divclass= "Col-md-4">. col-md-4</Div>    </Div>  </Div>  <Divclass= "Col-md-6">. col-md-6</Div></Div>

This is one of the most common mistakes I've seen in my work, and I have to pay extra attention.

Flexible use of grid offsets

The grid's column offset .col-md-offset-* should also be a more commonly used layout class, but we tend to overlook its role in large layout layouts. For example, a login box on the right side of the login page:

There are many implementations for the layout on the right side of the form, such as using float classes to implement offsets alone, or using absolute/relative positioning implementations. But a better approach would be to use the raster's column offset, because the raster supports a responsive layout.

The following is an example of a responsive login page:

See the Pen Bootstrap-demo by Zongbin (@nzbin) on Codepen.

It is recommended to open the view in Codepen because my blog content area is narrower, so you can only see the small screen breakpoint of the responsive layout.

Although the grid layout is very good, but in the work must be used with caution, because many do not know the front-end of the designer or product will be critical to the front-end personnel, such words can only be adjusted according to specific requirements.

Horizontal form arrangement

The horizontal grid layout in the form is very common, and the Bootstrap official website also gives a case, but for multi-column horizontal form layouts It can be a little more complicated, and too many grid nesting is maddening. But as long as you remember, the layout will be effortless.

By adding .form-horizontal classes, the form can be arranged horizontally, where the class is the same as the class, and the .form-group .row behavior is the same, so there is no need to add classes at this time .row .

<formclass= "Form-horizontal">  <Divclass= "Form-group">    <label for= "InputEmail3"class= "Col-sm-2 Control-label">Email</label>    <Divclass= "Col-sm-10">      <inputtype= "Email"class= "Form-control"ID= "InputEmail3"placeholder= "Email">    </Div>  </Div>...</form>

Note that in Bootstrap 4, .row classes cannot be omitted and need to be written in such a way .form-group row . In fact, there is no difference, is to form. Row >. col-* >. row >. col-* this structure.

<form>  <Divclass= "Form-group row">    <label for= "InputEmail3"class= "Col-sm-2 Col-form-label">Email</label>    <Divclass= "Col-sm-10">      <inputtype= "Email"class= "Form-control"ID= "InputEmail3"placeholder= "Email">    </Div>  </Div>...</form>

The following is an example of Bootstrap 3 horizontal form layout:

See the Pen Bootstrap-demo by Zongbin (@nzbin) on Codepen.

The above example is more than the official website a layer of grid, only in the large screen to see the effect, this grid form nested in unfamiliar Bootstrap case is easy to write chaos, but as long as the above mentioned rules, you can easily write out.

Static form arrangement

Many people look at the structure above, almost apart, write ul>li such a layout, and add such meaningless .list .item classes. Still the beginning, we must always adhere to a principle, as far as possible not to add style, explore the framework itself has the class, almost can find a solution.

To think about it, the layout in the example above is nothing more than an inline form within a grid. So the implementation method is very simple, completely do not have to write their own style.

The following is a live demo, recommended for large screen viewing effects:

See the Pen Bootstrap-demo by Zongbin (@nzbin) on Codepen.

Table structure

There is not much to say about tables, but it is recommended to use a responsive tabular structure, which is to add .table-responsive elements. Because in the actual work, the number of columns in the table is generally more, the response table should be a more general scenario.

<class= "table-responsive">  <class  = "table">    ...   </ Table > </ Div >

Arrange first, then rank

This rule is only recommended, because HTML block-level elements default to a row, so the first arrangement can reduce the structure of HTML, so that the structure is more concise. On the other hand, for highly different elements, even if the gap is very small, there will be a dislocation of the layout, see the following codepen:

See the Pen Bootstrap-demo by Zongbin (@nzbin) on Codepen.

In order to solve this problem, it must be added in each row .row . But at some point, we have to write about it.

<Divclass= "Row">  <Divclass= "Col-xs-6">  ...  </Div>  <Divclass= "Col-xs-6">  ...  </Div></Div><Divclass= "Row">  <Divclass= "Col-xs-6">  ...  </Div>  <Divclass= "Col-xs-6">  ...  </Div></Div>...

If it is arranged first, do not worry about the above problem, this arrangement is a bit like waterfall flow.

<Divclass= "Row">  <Divclass= "Col-xs-6">  ...  ...  </Div>  <Divclass= "Col-xs-6">  ...  ...  </Div></Div>

This advice needs to be adjusted according to the actual needs, the need to communicate with the designer and the product, or the risk of rework must be faced. It can only be said that in terms of structure, the first arrangement will be better. If you use the Flex layout, you'll be able to solve this problem very well.

Summarize

First of all, I have always felt that excellent web works are not or not all designers decided, and should not even be decided by the designers, because the domestic designers really understand the front or a few, and design style is difficult to follow the trend. Designers and products often put their interactions on the tip of the tongue, but many of the interactions they put forward appear to be essential elements of the Web page for our front-end people, not a bright spot. Foreign, designers know the front-end or even very proficient, front-end developers are designers or interaction designers, everyone is a compound talent, this is worthy of our learning.

In the end, this article mainly introduces how to build a more reasonable structure when using Bootstrap, however, in the actual work, regardless of our use of the framework, we should be as concise as possible and standardize the HTML structure, this is the good habit that the front developers should develop. Another point, because the framework is a lot of problems of abstraction, so in the premise of generality, there will inevitably be some redundant HTML structure.

I emphasized at the outset to try not to write redundant styles, but if the layout requirements are really not met, we should first use helper to solve, Bootstrap 3 helper is not rich, and Bootstrap 4 added a lot of helper classes. I also wrote an article on helper "How to write a generic helper Class," which is interesting to look at.

How to use Bootstrap to build a more logical HTML structure