How to implement adaptive bootstrap

Adaptive: No matter how big the screen is, try not to wrap lines, but only scale horizontally.

Boostrap’s “fence” mode (Recommended learning: Bootstrap video tutorial)

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

Boostrap’s adaptive function

In fact, after understanding the fence mode, the adaptive function is much simpler. According to the size of the browser, Boosttrap has four fence class names Provided 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. No matter what, Boosttrap will automatically allocate column widths according to the width of the browser to match the presentation mode you want.

As for how it is done, you don’t have to worry about it. You only need to consider the design of your web page presentation style on the mobile phone or the presentation style on the PC. Next, leave it to Boostrap.

For more technical articles related to Bootstrap, please visit the Bootstrap Tutorial column to learn!

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