1.0 Principles of responsive development

1.1 Principle of responsive development

The idea is to use media queries to set layouts and styles for devices of different widths to suit their purposes.

Division of equipment:

  • Smaller than 768 is the ultra-small screen (mobile phone)
  • 768~992 are small screen devices (tablet)
  • Medium screen from 992 to 1200 (desktop monitor)
  • Widescreen devices larger than 1200 (large desktop monitor)

1.2 Responsive layout containers

Reactive requires a parent as a layout container to coordinate with the child elements to implement changes.

The principle is in different screens, through media query to change the size of the layout container, and then change the arrangement and size of the face elements, so as to achieve different screens, see different page layout and style changes.

The size division of the parent container

  • Ultra Small Screen (mobile phone, less than 768px) : Set the width to 100%
  • Small screen (flat screen, 768px or larger) : Set the width to 750px
  • Medium screen (desktop monitor, 992px or more) : Set the width to 970px
  • Large screen (large desktop display, 1200px or greater) : Set the width to 1170px

But we can also define our own division based on the actual situation

2.0 Bootstrap introduction

2.1 introduction of the 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.

Chinese website recommended website

Framework: as the name implies is a set of architecture, it has a relatively complete web function solution, and control in the framework itself, with prefabricated style library, components and plug-ins. Users develop according to some specification specified by the framework.

2.2 the bootstrap advantages

  • Standard HTML + CSS coding specification
  • Provides a set of simple, intuitive, powerful components
  • It has its own ecosystem, constantly updated and iterated
  • It makes development easier and improves the efficiency of development

2.3 Version Introduction

2. X.x: stop maintenance, compatibility is good, the code is not simple enough, the function is not perfect.

X: the most used, stable, but abandoned IE6-IE7. IE8 is supported but has a poor interface and is biased towards mobile-first WEB projects for developing responsive layouts.

4. X.x: the latest version, not very popular at present

2.4 Basic Use of Bootstrap

We haven’t touched on JS classes at this stage, so we’ll just consider using its style library.

Bootstrap uses four steps:

  1. Create folder structure

  1. Create the HTML skeleton structure

    <! DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <! The above 3 meta tags must come first, and everything else must come after them! --> <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:// --> <! -- [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>Copy the code

  2. Introduce related style files

    <! - the Bootstrap core style -- -- > < link rel = "stylesheet" href = "Bootstrap/CSS/Bootstrap. Min. CSS" >Copy the code

  3. Writing content

    Use the Bootstrap predefined styles directly

    Modify the original style of Bootstrap, and pay attention to the weight problem

    The key to learning Bootstrap well is to know what styles it defines and what they can achieve

2.5 Bootstrap Layout container

Bootstrap involves wrapping a.container or.container-fluid container around the page content and raster system, which provides two classes for this purpose.

.container

  • Responsive layout of the container with fixed width
  • The large screen (>=1200px) width is set to 1170px
  • The middle screen (>=992px) is 970px wide
  • The small screen (>=768px) is 750px wide
  • Super small screen (100%)

.container-fluid

  • The flow layout container is 100 percent wide
  • A container that occupies all viewports.

2.6 Bootstrap Grid system

Bootstrap provides a responsive, mobile-first streaming grid system that automatically divides into up to 12 columns as the screen or viewport size increases.

The grid system is used to create a page layout with a series of rows and columns into which your content can be placed.

  • It is divided into 1 to 12 equal portions according to different screens
  • A row can remove 15px margins from the parent container
  • Xs -extra small: super small; Sm – small: small; Md-medium: medium; Lg – large: big;
  • If a column is greater than 12, the element containing the extra column will be arranged as a whole on another line
  • Each column defaults to about 15 pixels of padding
  • For example, class=” col-mD-4 col-SM-6″

Nested grid

The built-in raster system nested the content again. The simple idea is that a column is divided into smaller columns. We can do this by adding a new.row element and a series of.col-sm-* elements to existing.col-sm-* elements.

<! - column nested -- > < 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>Copy the code

The column offset

Columns can be offset to the right using the.col-md-offset-* class. These classes actually add a margin to the left of the current element by using the * selector.

<! - the column offset - > < div class = "row" > < div class = "col - lg - 4" > 1 < / div > < div class = "col - lg - 4 col - lg - offset - 4" > 2 < / div > < / div >Copy the code

Column sorting

You can easily change the order of columns by using the.col-md-push-* and.col-md-pull-* classes.

<! Sort - column -- > < div class = "row" > < div class = "col - lg - 4 col - lg - push - 8" > left < / div > < div class = "col - lg - 8 col - lg - pull - 4" > right < / div > </div>Copy the code

Responsive tool

To speed up mobile-friendly page development, take advantage of media queries and use these utility classes to make it easy to show or hide page content for different devices.