Mobile web development responsive layout (Bootstrap framework)

Responsive development

Principles of Responsive Development

It is to use media queries to set the layout and styles for devices of different widths to adapt to the purpose of different devices.

Equipment division

Ultra small screen (mobile phone): <768px

Small screen devices (tablets): >=768px ~ <992px

Medium screen (desktop monitor): >= 992px ~ <1200px

Widescreen devices (large desktop monitors): >= 1200px

Responsive container

Responsive requires a parent as a layout container to cooperate with child elements to achieve change effects.

The principle is to change the size of the layout container through media queries under different screens, and then change the arrangement and size of the child elements inside, so as to realize different page layouts and style changes under different screens.

Normally responsive size division

Ultra-small screen (mobile phone, less than 768px): set the width to 100%

Small screen device (tablet, greater than or equal to 768px): set the width to 750px

Medium screen (desktop monitor, greater than or equal to 992px): set the width to 970px

Widescreen device (large desktop monitor, greater than or equal to 1200px): set the width to 1170px

Bootstrap front-end development framework

Introduction to Bootstrap

Bootstrap is based on HTML, CSS, and JAVASCRIPT. It is concise and flexible, making Web development faster.

Chinese official website: http://www.bootcss.com/

Official website: http://getbootstrap.com/

Recommended use: http://bootstrap.css88.com/

Framework: As the name suggests, it is a set of architecture, which has a relatively complete set of webpage functional solutions, and the control is in the framework itself, with pre-made styles, components and plug-ins. The user has to develop in accordance with a certain specification stipulated by the framework.

advantage

Standardized html+css coding standard
Provides a set of simple, intuitive and powerful components
Have its own ecosystem and constantly update and iterate
Make development easier and improve the efficiency of development

Bootstrap use

Use four steps:

Create a folder structure
Create html skeleton structure
Introduce related style files
Written content

Create a folder structure

Create a separate folder in the project and put the decompressed bootstrap into it.

Create html skeleton structure

Refer to bootstrap's official documentation

[External link image transfer failed. The source site may have an anti-hotlinking mechanism. It is recommended to save the image and upload it directly (img-Q9EKRDFl-1596522555977)(C:\Users\FL\AppData\Roaming\Typora\typora-user-images\ image-20200802223411562.png)]

Introduce related style files

Import the compressed bootstrap related files into the project.

Verify that the import is successful: Write it in the webpage and open it to see if the margins are removed and the background color is changed.

Written content

Use bootstrap pre-defined styles directly
Modify the original style of bootstrap, pay attention to the weight problem
The key to learning bootstrap well is to know which styles it defines and what effects these styles can achieve

Layout container

Bootstrap needs to wrap a .container container for the page content and grid system. Bootstrap has predefined this class, called .container.

1. .container class

Responsive layout container fixed height

The width of the large screen (>=1200px) is set to 1170px
The width of the middle screen (>=992px) is set to 970px
The width of the small screen (>=768px) is set to 750px
Ultra small screen (100%)

2. Container-fluid class

Percentage width of fluid layout container
The container that occupies all viewports
Suitable for independent mobile development

Bootstrap grid system

Introduction to Grid System

Grid system English: grid systems. It refers to dividing the page layout into columns of equal width, and then modularizing the page layout through the definition of the number of columns.

Bootstrap provides a responsive, mobile device-first streaming grid system. As the screen or viewport size increases, the system will automatically be divided into up to 12 columns.

The width of the container in Bootstrap is fixed, but the width of the container is different under different screens, so we divide the container into 12 parts.

Grid system parameters

The grid system is used for a series of row and column combinations to create a page layout.

	Ultra-small screen (mobile phone, less than 768px)	Small screen device (tablet, greater than or equal to 768px)	Medium screen (desktop monitor, greater than or equal to 992px)	Widescreen device (large desktop monitor, 1200px or more)
.container maximum width	Automatic (100%)	750px	970px	1170px
Class prefix	.col-xs-	.col-sm-	.col-md-	.col-lg-
Number of columns	12	12	12	12

Row must be placed in the container layout container
To achieve the even division of columns, you need to add a class prefix to the columns
xs-extra small: super small; sm-small: small; md-medium: medium; lg-large: large
The column (column) is greater than 12, the extra "column" elements will be arranged as a whole in a new row
The column (column) is less than 12, it occupies less than the width of the entire container
Each column has 15 pixels of padding by default
You can assign multiple device class names to a column at the same time to divide different numbers of copies. For example: class="col-md-4 col-sm-6"

Use of grid system

<body>

    <div class="container">

        <div class="row">

            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>

            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>

            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>

            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>

    </div>

  </div>

</body>

Column nesting

The grid system built into the grid system nests the content again. The simple understanding is that a column is divided into several small columns. We can add a new .row element and a series of .col-sm-* elements to the existing .col-sm-* elements.

It is better to add a row "row" for column nesting, so that the padding value of the parent can be cancelled and the height is automatically as high as the parent.

<body>

    <div class="container">

        <div class="row">

            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">

                <div class="row">

                    <div class="col-sm-6">1</div>

                    <div class="col-sm-6">2</div>

        </div>

      </div>

            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>

            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>

            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>

    </div>

  </div>

</body>

Column offset

The column can be offset to the right through the .col-md-offset-* class. These are actually by using the * selector to add a left margin to the current element (margin)

<div class="container">
        <div class="row">
            <div class="col-md-4">左</div>
            <div class="col-md-4 col-md-offset-4">右</div>
        </div>
    </div>

The number of offset copies is 12-the number of copies in two boxes.

If there is only one box, then offset (12-8)/2

Column sort

It is easy to change the order of (column) by using the ".col-md-push" and ".col-md-pull" classes

<div class="container">
        <div class="row">
            <div class="col-md-4 col-md-push-8">左</div>
            <div class="col-md-8 col-md-pull-4">右</div>
        </div>
    </div>

Responsive tools

In order to speed up the development of pages that are friendly to mobile devices, use the media query function and use these tools to conveniently display or hide page content for different devices.

Class name	Ultra small screen	Small screen	Middle screen	Big screen
.hidden-xs	hide	visible	visible	visible
.hidden-sm	visible	hide	visible	visible
.hidden-md	visible	visible	hide	visible
.hidden-ig	visible	visible	visible	hide

In contrast, visble-xs visble-sm visble-md visble-lg is to display the content of a certain page