1. Principle of responsive development
Media query is used to set the layout and style for devices with different widths, so as to adapt to different devices.
Division of equipment:
|Equipment division||Dimension interval|
|Ultra small screen (mobile phone)||< 768px|
|Small screen device (flat panel)||>= 768px ~ < 992px|
|Medium screen (desktop display)||>=992px ~ < 1200px|
|Widescreen device (large desktop display)||>= 1200px|
2. Responsive layout container
The response requires a parent as the layout container to match the child elements to achieve the change effect.
The principle is to change the size of the layout container through media query on different screens, and then change the arrangement and size of sub elements inside, so as to see different page layout and style changes on different screens.
General division of dimensions of parent container layout Center
- Ultra small screen: set the width to 100%
- Small screen: set the width to 750px
- Medium screen: width set to 970px
- Large screen: width set to 1170px
However, we can also define the division according to the actual situation
① Bootstrap introduction
, it is simple and flexible, making Web development faster.
Framework: as the name suggests, it is a set of architecture. It has a relatively complete web page function solution, and the control is in the framework itself, including prefabricated style libraries, components and plug-ins. Users should develop according to some specification specified in the framework.
- Standardized html+css coding specification
- It provides a set of simple, intuitive and powerful components
- It has its own ecosystem and is constantly updated and iterated
- It makes the development easier and improves the efficiency of development
- 2.x.x: the maintenance is stopped, the compatibility is good, the code is not concise enough, and the function is not perfect enough.
- 3.x.x: it is currently used most and stable, but IE6-IE7 is abandoned. It supports IE8, but the interface effect is not good. It is used to develop WEB projects with responsive layout and mobile device priority.
- 4.x.x: the latest version, which is not very popular at present
② Bootstrap usage
Import bootstrap file
bootstrap/ css/.. fonts/.. js/..
Create html skeleton structure
Import related style files
<!-- Bootstrap Core style--> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
- Directly use the predefined style of Bootstrap
- Modify the original Bootstrap style and pay attention to the weight
The key to learning Bootstrap well is to know what styles it defines and what effects these styles can achieve
③ Layout container
Bootstrap needs to wrap a for page content and grid system container, which provides two classes for this purpose
- container class
- Container fixed width for responsive layout
- The width of large screen (> = 1200px) is 1170px
- The width of the middle screen (> = 992px) is set to 970px
- The width of small screen (> = 768px) is set as 750px
- Ultra small screen (100%)
- Container fluid class
- Flow layout container 100% width
- A container that occupies all viewport s
④ Grid system
Also known as "grid systems" and "grid systems", it refers to dividing the page layout into equal width columns, and then modularizing the page layout through the definition of the number of columns.
Bootstrap provides a responsive, mobile device first streaming grid system
The grid system will automatically divide the current container into 1 ~ 12 columns of equal width according to the width of the current container. With the increase of the size of the screen or viewport, the width of the container will also increase, and the width of each column will also increase adaptively
Grid option parameters
The grid system is used to create a page layout by combining a series of row s and column s, and your content can be put into these created layouts.
|Ultra small screen||Small screen||Middle screen||Large screen|
|. container maximum width||Automatic (100%)||750px||970px||1170px|
|Number of columns||12||12||12||12|
Rows can remove the 15px margin of the parent container. Each child element under the container (the proportion of elements in the number of columns can be different) has a padding of about 15 pixels by default
xs-(extra small): ultra small
Small - (small): small
Note: the proportion of the number of columns of elements set on this screen is the same on a screen wider than this screen.
<div class="container"> <div class="row"> <div class="col-xs-4"></div> <div class="col-xs-4"></div> <div class="col-xs-4"></div> </div> </div> Known: under the ultra small screen, 3 are displayed in parallel div，So, it is also displayed in small screen, medium screen, large screen and lower screen.
If the total number of columns of elements in the container is greater than 12, the elements of the redundant "column" will be arranged in another row as a whole; If it is less than 12, it will not fill the width of the container and a blank will appear
You can specify the class names of multiple devices for a column at the same time to divide the number of copies. For example, class="col-md-4 col-sm-6"
The built-in grid system of the grid system nests the content again. A simple understanding is that a column is divided into several small columns. We can add a new one The row element and a series col - * - * (number of columns) element to existing col - * - * element.
<!-- Column nesting --> <div class="col-sm-4"> <div class="row"> <div class="col-sm-6">Small column</div> <div class="col-sm-6">Small column</div> </div> </div>
[external chain image transfer failed. The source station may have anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-xgyqeye2-1632677072914) (mobile Web development. assets/image-20210426164045896.png)]
The above effect will lose its effect on a screen smaller than the small screen.
use. Col MD offset - * class can offset the column to the right. These classes actually increase the left margin for the current element by using the * selector.
<!-- Column offset --> <div class="row"> <div class="col-lg-4">1</div> <div class="col-lg-4 col-lg-offset-4">2</div> </div>
By using col-*-push - * (number of columns) and The column - * - pull - * (number of columns) class can easily change the order of columns.
<!-- Column sorting --> <div class="row"> <!-- push Shift right --> <div class="col-lg-4 col-lg-push-8">left</div> <!-- pull Shift left --> <div class="col-lg-8 col-lg-pull-4">right</div> </div>
In order to speed up the development of mobile device friendly pages, we can easily display or hide page content for different devices by using media query function and these tools.
|Class name||Ultra small screen||Small screen||Middle screen||Large screen|
Visible - *: opposite to the hidden effect, it means visible.
Refer to the Bootstrap documentation for more information