1.Responsive Development Principle
It is the use of media queries to lay out and style settings for devices of different widths, thus adapting to the purpose of different devices.
Division of equipment:
| Equipment Division | Dimension interval |
|---|---|
| Ultra small screen (mobile phone) | < 768px |
| Small screen devices (flat panel) | >= 768px ~ < 992px |
| Medium screen (desktop display) | >=992px ~ < 1200px |
| Wide Screen Device (Large Desktop Display) | >= 1200px |
2.Responsive Layout Container
Responsive requires a parent as a layout container to work with child elements to achieve change.
The principle is to change the size of this layout container through media query under different screens, and then change the arrangement and size of the child elements inside, so that you can see different page layout and style changes under different screens.
General Dimension of Parent Container Centers
- Ultra small screen: set width to 100%
- Small screen: set width to 750px
- Medium screen: width set to 970px
- Large screen: width set to 1170px
But we can also define our own division based on the actual situation
3. Bootstrap
1 Introduction to Bootstrap
Bootstrap comes from Twitter and is currently the most popular front-end framework. Bootstrap is based on HTML, CSS and JAVASCRIPT
It is simple and flexible, making Web development faster.
Framework: As the name implies, it is a set of architectures, which have a complete set of web page function solutions, and control is in the framework itself, with prefabricated style libraries, components and plug-ins. Users are required to develop according to a certain specification specified in the framework.
-
Official Web
-
Advantage
- Standardized html+css encoding specification
- Provides a set of simple, intuitive and powerful components
- Have your own ecosphere, keep updating iterations
- Make development easier and more efficient
-
Edition
- 2.x.x: Stop maintenance, have good compatibility, code is not concise enough, function is not perfect.
- 3.x.x: currently used most, stable, but discarded IE6-IE7. IE8 support but poor interface, preferred to develop responsive layout, mobile device priority WEB projects.
- 4.x.x: Latest version, not very popular yet
(2) Bootstrap use
-
Import bootstrap file
bootstrap/ css/.. fonts/.. js/..
-
Create html skeleton structure
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <!--Require current page to use IE Maximum version of the browser kernel to render--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--Viewport settings: Viewport width is the same as the device, default zoom ratio and PC End consistency, user cannot zoom--> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"> <!-- Three of the above meta Label*Must*On top, anything else*Must*Follow it! --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--Solve ie9 The following browser pairs html5 The new tag is not recognized and causes CSS Ineffective Issues--> <!--Solve ie9 The following browser pairs css3 Media Query Unrecognized --> <!--[if lt IE 9]> <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello World!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>CSS hack
-
Introducing related style files
<!-- Bootstrap Core Style--> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
-
Writing Content
- Use Bootstrap's predefined style directly
- Modify the original Bootstrap style, noting weight issues
The key to learning Bootstrap well is to know what styles it defines and what effects they can achieve.
(3) Layout containers
Bootstrap needs to wrap a.Container container for page content and raster systems, which provides two classes for this purpose
- container class
- Responsive Layout Container Fixed Width
- Large screen (>=1200px) width set to 1170px
- Midscreen (>=992px) width set to 970px
- Small screen (>=768px) width set to 750px
- Ultra-small screen (100%)
- container-fluid class
- 100% Width of Flow Layout Container
- Containers that occupy all viewport s
(4) Raster system
brief introduction
Also known as a "grid system," grid systems. It refers to dividing a page layout into equal-width columns and then modularizing the page layout by defining the number of columns.
Bootstrap provides a responsive, mobile-device-first streaming raster system
The raster system is automatically divided into 1-12 columns of equal width based on the width of the current container. As the size of the screen or viewport increases, the width of the container increases, and the width of each column increases adaptively.
Raster Option Parameters
A raster system is used to create page layouts by combining a series of row s and column s into which your content can be placed.
| Ultra small screen | Small screen | Midscreen | Large screen | |
|---|---|---|---|---|
| Maximum width of.container | Automatic (100%) | 750px | 970px | 1170px |
| Class Prefix | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| Number of columns | 12 | 12 | 12 | 12 |
-
Rows remove the 15px margin from the parent container, and each child element under the container (elements can have different proportions of columns) defaults to a padding of about 15 pixels
-
xs-(extra small): extra small
sm-(small): small
md-(medium): medium
lg-(large): large
Note: The proportion of columns that set elements under this screen is the same under a wider 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: 3 displays in parallel under a very small screen div，Then, in small, medium, large and bottom screens, it is also displayed. -
If the total number of columns in the container is greater than 12, the extra columns will be arranged on a new line as a whole. If less than 12, the container will not be full of width and blanks will appear.
-
You can specify the class names of multiple devices for a column at the same time to divide different parts such as class="col-md-4 col-sm-6"
Raster Nesting
The built-in raster system nests the contents again. A simple understanding is to divide a column into smaller columns. We can add a new.row element and a series of.Col-*-* (number of columns) elements into existing.col-*-* elements.
<!-- Column Nesting -->
<div class="col-sm-4">
<div class="row">
<div class="col-sm-6">Small Columns</div>
<div class="col-sm-6">Small Columns</div>
</div>
</div>
[External chain picture transfer failed, source station may have anti-theft chain mechanism, it is recommended to save the picture and upload it directly (img-XgYQEye2-1632677072914) (Mobile Web Development.assets/image-20210426164045896.png)]
The above effect will be lost under a smaller screen than a small screen.
Column Offset
Columns can be offset to the right by using the.col-md-offset-* classes. These classes actually add a left margin to 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>
[External chain picture transfer failed, source station may have anti-theft chain mechanism, it is recommended to save the picture and upload it directly (img-zsuAdCJw-1632677072919) (Mobile Web Development.assets/image-20210426202655147.png)]
Column Sorting
You can easily change the order of columns by using the.col-*-push-* (number of columns) and.col-*-pull-* (number of columns) classes.
<!-- Column Sorting -->
<div class="row">
<!-- push Move Right -->
<div class="col-lg-4 col-lg-push-8">Left</div>
<!-- pull Move left -->
<div class="col-lg-8 col-lg-pull-4">Right</div>
</div>
[External chain picture transfer failed, source station may have anti-theft chain mechanism, it is recommended to save the picture and upload it directly (img-YfdraMS4-1632677072921) (Mobile Web Development.assets/image-20210426203319747.png)]
Responsive Tools
In order to speed up mobile device-friendly page development, using the media query function, and using these tool classes can easily display or hide page content for different devices.
| Class name | Ultra small screen | Small screen | Midscreen | Large screen |
|---|---|---|---|---|
| .hidden-xs | hide | So | So | So |
| .hidden-sm | So | hide | So | So |
| .hidden-md | So | So | hide | So |
| .hidden-lg | So | So | So | hide |
Visible-*: Contrary to hidden effect, means visible.
Refer to the Bootstrap documentation for more information