Is bootstrap responsive?

bootstrap is responsive. Bootstrap provides a responsive, mobile device-first fluid grid system that uses different class attributes for different screens. During development, you can only write a set of code that can be used on mobile phones, tablets, and PCs without having to worry about it. Use media queries.

The operating environment of this article: Windows 7 system, bootstrapv4.4.1 version, Dell G3 computer.

What is responsiveness?

Responsive web design is a method that allows users to obtain good visual effects when browsing a website on devices of various sizes. For example, you first browse a website on a computer monitor, and then browse it on a smartphone. The screen size of the smartphone is much smaller than the computer monitor, but you do not feel any difference. The user experience of the two is almost the same, which means that the website Great job on responsive design.

Is bootstrap responsive?

bootstrap is responsive.

Bootstrap provides a responsive, mobile-first fluid grid system. As the screen or viewport size increases, the system will automatically be divided into 12 columns. The grid system is used to create page layouts through a series of rows and columns.

Bootstrap's responsive layout uses its grid system and uses different class attributes for different screens. During development, you can only write one set of code that can be used on mobile phones, tablets, and PCs, without having to consider using media queries (writing different codes for different devices).

The implementation principle of the grid system is to define the size of the container, divide it into 12 equal parts (it can also be divided into 24 or 32 parts, but 12 parts is the most common), then adjust the inner and outer margins, and finally combine the media Query to create a powerful responsive grid system. The grid system in the Bootstrap framework divides the container into 12 equal parts.

How the Bootstrap grid system works:

"Row" 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".

Your content should be placed within "column", and only "column" can be a direct child element of row.

Similar to .row Predefined classes such as .col-xs-4 can be used to quickly create grid layouts. The mixins defined in the Bootstrap source code can also be used to create semantic layouts.

By "column ( column)" sets the padding attribute to create a gap (gutter) between columns. By setting a negative margin for the .row element to offset the padding set for the .container element, it is indirectly "row" The included "column" offsets the padding.

Negative margins are why the following example sticks out. The content in the raster column lines up.

Columns in a raster system are represented by the range they span by specifying a value from 1 to 12. For example, three equal-width columns can be created using three .col-xs-4.

If the "column" contained in a "row" is greater than 12, the elements of the extra "column" will be arranged as a whole in another row.

Grid Grid classes apply to devices with screen widths greater than or equal to the breakpoint size, and grid classes are overridden for small screen devices. Therefore, applying any .col-md-* grid classes on an element applies to devices with screen widths greater than or equal to breakpoint sized devices, and override the grid class for small screen devices. Therefore, applying any .col-lg-* on an element does not also affect large screen devices.

Recommended:bootstrap video tutorial

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