Analysis of responsive website layout bootstrap

Bootstrap is a plug-in that relies on jquery to develop a responsive web layout that adjusts your page for different screen sizes and makes it perform well on a size screen.

Judging from the official website of Bootstrap, Bootstrap mainly consists of the following parts: CSS--bootstrap has a lot of CSS styles for us to pre-implement. Includes some pictures and a responsive layout of the site. Components--bootstrap has pre-implemented many CSS components for us. The following dropdown boxes, button groups, navigation, and so on. This means that the bootstrap content helps us define a lot of CSS styles, which you can apply directly to elements such as the previous drop-down boxes. JavaScript plugin --bootstrap also implemented some JS plugin for us, we can use its plug-in to complete a number of common functions, and do not need us to re-write JS code to implement like a cue box, modal window effect. 　　 The most important principle to implement a responsive web site is the grid system in CSS. 　　

The raster system is used to create a page layout with a series of rows and columns (column), and your content can be placed in a created layout. Here's how this bootstrap raster system works:

• The row must be included in the. Container to give it the appropriate arrangement (aligment) and inner complement (padding).
• Use row to create a set of columns in the horizontal direction.
• Your content should be placed in column, and only columns (column) can be a direct child element of row.
• Similar to predefined grid classes like. Row and. Col-xs-4 These predefined raster classes can be used to quickly create a raster layout. The mixin defined in the bootstrap source code can also be used to create a semantically formatted layout.
• Create the interval between columns (gutter) by setting padding. The effect of padding is then offset by setting a margin of negative value for the first and last.
• A column in a raster system represents a range that is spanned by specifying a value of 1 to 12. For example, three equal-width columns can be created using three. Col-xs-4.

　　 　　 　　

Analysis of responsive website layout bootstrap