Is bootstrap adaptive?

Bootstrap is adaptive; adaptive means that no matter how big the screen is, try not to wrap lines and just scale horizontally. Bootstrap is adaptive through the fence system; the grid system defines the size of the container. , divide it into 12 equal parts, and divide the browser into rows and columns to achieve adaptation.

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

Is bootstrap adaptive?

bootstrap is adaptive

Adaptive means that no matter how big the screen is, try not to wrap lines, but only scale horizontally. Boostrap is adaptive through the "fence system".

The fence system is made by defining the size of the container and dividing it into 12 equal parts, through a series of rows and columns, and combined with media queries to create a powerful responsive grid system.

The basis of Boosttrap's adaptive function is the "fence" mode, which divides the browser into rows and columns: a total of 12 columns, the number of rows is customized, and each element is displayed according to the elements you want to display. The size is the required number of columns. If it exceeds the range, it will automatically change rows. The size of each column is automatically allocated evenly by Boostrap based on the size of the current browser.

Working principle:

Data rows (rows) must be contained in .container (fixed width) or .container-fluid (100% width). In order to give it appropriate alignment and padding.

Create a group of columns in the horizontal direction through rows. As the screen or viewport size increases, the system will automatically divide it into up to 12 columns. .

Create gaps between columns by setting the padding attribute on the column (row). Set a negative margin by .row to offset the padding set by the .container element (introduction, the column (column) contained in the row (row) offsets the padding, which is the reason for the outward protrusion in the following example).

If there are more than 12 columns, the extra columns will be placed in a new row

Boostrap’s adaptive function

In fact, after understanding the fence mode, the adaptive function is simple There are many. According to the size of the browser, Boosttrap has four fence class names for use. The usage is the same as the Css style sheet class name selector style call:

xs: col-xs-1 ~ col- xs-12, multiple columns are always in one row.

sm: col-sm-1 ~ col-sm-12, multiple columns can only be in one line when the browser pixel width is greater than or equal to 768px.

md: col-md-1 ~ col-md-12, multiple columns can only be in one line when the browser pixel width is greater than or equal to 992px.

lg: col-lg-1 ~ col-lg-12, multiple columns can only be in one line when the browser pixel width is greater than or equal to 1200px.

I post a piece of pseudo code:

<div class="row">
   <div class="col-sm-4  col-md-1"></div>
   <div class="col-sm-4  col-md-1"></div>
    <div class="col-sm-4  col-md-10"></div>
</div>

The meaning of this paragraph is that when the width of the browser is between 768-992, it will be presented in 4:4:4 mode. When the device width is greater than 992, it will be presented in 1:1:10 mode.

Of course, you can also use all four, and you need to be careful about the breakdown. In any case, Boosttrap will automatically allocate column widths according to the width of the browser to match the presentation mode you want.

Related recommendations: bootstrap tutorial

The above is the detailed content of Is bootstrap adaptive?. For more information, please follow other related articles on the PHP Chinese website!