One, introduction and type heart

1. Introduction:

Responsive layouts quickly and efficiently adapt to all screens on phones, tablets, PCS, and more using the same code

Responsive layout involves:

Screen width change: Media query

Layout knowledge: Traditional layout scheme (percentage, float, clear float, position)

2. Gear division:

Media enquiries: stall division; Default segmentation in the market; Three nodes, four stalls

  • W <768 Ultra-small screen (XS) (mobile phone, learn the shift division in REM layout is in this range)
  • 768<= W <992 Small Screen device (SM) (tablet)
  • 992<= W <1200 Medium screen (MD) (PC monitor with small display)
  • 1200<= W Large widescreen device (LG) (large desktop monitor)

​

Syntax: include all screens on the market;

/* @media screen and (min-width: 0px) {} /* 2. @media screen and (min-width: 768px) {} /* 3. @media screen and (min-width: 992px) {} /* 4. @media screen and (min-width: 1200px) {}Copy the code

3, type center:

Different stalls, different type heart;

Tap setting: type center;

All of the child elements are attributed to the layout of the heart, different width of the heart, means that the child elements to meet the needs of user browsing friendly layout;

Grammar:

/ / @media screen and (max-width: 767px) {. Container {width: 100%; }} @media screen and (min-width: 768px) {. Container {width: 750px; }} @media screen and (min-width: 992px) {. Container {width: 970px; }} /* @media screen and (min-width: 1200px) {. Container {width: 1170px; }}Copy the code

Note:

  • Media queries use symbolic correlation: min-, Max – contains equal signs followed by numeric units px;
  • Min-width: 768px; min-width: 750px; Reason: Leave blank on both sides for better user experience.
  • The above market default division, according to their own needs to add stalls;

Example 2,

​

​

​

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style> * {margin: 0; padding: 0; } @media screen and (min-width:0) {. Container {width: 100%; }} /* @media screen */ (min-width:768px) {. Container {width: 750px; }} @media screen and (min-width:992px) {. Container {width: 970px; } .container div { float: left; } .container .left { width: 40%; } .container .mid { width: 40%; } .container .right { width: 20%; }} / / @media screen and (min-width:1200px) {. Container {width: 1170px; } .container div { float: left; } .container .left { width: 20%; } .container .mid { width: 60%; } .container .right { width: 20%; } } .container { height: 2000px; border: 1px solid #000; margin: 0 auto; } .container .left { background: #ccc; height: 200px; } .container .mid { background: #222; height: 800px; } .container .right { background: pink; height: 400px; } </style> </head> <body> <div class="container"> <div class="left">1</div> <div class="mid">2</div> <div class="right">3</div> </div> </body> </html>Copy the code

Third, Bootstrap experience

The BootStrap framework can build responsive pages very quickly;

Global CSS Styles

1,

BootStrap, a product of Twitter, is currently the most popular front-end responsive framework.

Web site:

  • Chinese website: www.bootcss.com/

Version:

  • 2. X.x: stop the maintenance. The code is not concise enough and the function is not perfect enough.
  • X.x: the most used and stable Internet explorer 6 to Internet explorer 7 are not supported. Support for IE8 has a poor interface and a bias towards mobile-first WEB projects for developing responsive layouts.
  • 4. X.x: the latest version, not very popular at present

2, the use of

1) Access the official website www.bootcss.com/

2) Click on the Chinese document

​

3) Click to download Bootstrap

​

4) Download the installation method

​

Method one:

​

Method 2:

​

Method 3:

​

5) After downloading, put it in the corresponding directory

​

6) use

<! DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <! <meta http-equiv=" x-UA-compatible "content="IE=edge"> <meta http-equiv=" x-UA-compatible" content="IE=edge"> -- Viewport Settings: Viewport width is the same as the device, default zoom ratio is the same as PC, <meta name="viewport" content="width=device-width, initial-scale=1"> <title>BootStrap Template</title> <! <link href=" CSS /bootstrap.min. CSS "rel="stylesheet"> <! -- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <! -- Solve the problem that IE9 does not recognize new html5 tags and causes CSS to not work. Css3 Media Query is not recognized in IE9. -- WARNING: Respond.js doesn't work if you view the page via file:// --> <! -- Conditional comment: Fix some issues with IE9 versions smaller than --> <! -- [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> </body> </html>Copy the code

Conditional comment: If the condition is met, the following code link will issue the request;

3. Layout the container

Type Settings: BootStrap needs to wrap a. Container or. Container-fluid container around the page content, which provides two classes for this purpose.

​

. Container: Set the width of the type center in different stalls.

  • Xs: Extra Small: mobile phone; 0 px < = w; Type center width is 100%
  • Sm: Small: tablet; 768 px < = w; The width of the type center is 750px
  • Medium screen (MD: Medium) : desktop; 992 px < = w; Set the font center width to 970px
  • Large screen (LG: Large) : large desktop; 1200 px < = w; Set the type center width to 1170px

. Container -fluid: 100% width;

Features:

  • All elements are CSS3 box model;
  • The layout box has about 15px padding;

4. Preset class names

4.1 typesetting

<h1>h1. Bootstrap heading</h1> <h2>h2. Bootstrap heading</h2> <h3>h3. Bootstrap heading</h3> <h4>h4. Bootstrap heading</h4> <h5>h5. Bootstrap heading</h5> <h6>h6. Bootstrap heading</h6> <p>... </p>Copy the code

4.2 the button

<a class="btn btn-default" href="#" role="button">Link</a> <button class="btn btn-default" type="submit">Button</button>  <input class="btn btn-default" type="button" value="Input"> <input class="btn btn-default" type="submit" value="Submit">Copy the code

4.3 Helper class styles

<! --> < P class=" text-intensive ">... </p> <! <span class="caret"></span>Copy the code

4.4 Font ICONS

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Copy the code

For example: 4.5

You can refer to global CSS styles

​

<! DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <! <meta http-equiv=" x-UA-compatible "content="IE=edge"> <meta http-equiv=" x-UA-compatible" content="IE=edge"> -- Viewport Settings: Viewport width is the same as the device, default zoom ratio is the same as PC, <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Template</title> <! - the Bootstrap file import have initialization file Normalize. CSS - > < link href = ". / the Bootstrap/CSS/Bootstrap. Min. CSS "rel =" stylesheet "> <! -- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <! -- Solve the problem that IE9 does not recognize new html5 tags and causes CSS to not work. Css3 Media Query is not recognized in IE9. -- WARNING: Respond.js doesn't work if you view the page via file:// --> <! -- Conditional comment: Fix some issues with IE9 versions smaller than --> <! -- [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>h1. Bootstrap heading</h1> <h2>h2. Bootstrap heading</h2> <h3>h3. Bootstrap heading</h3> < H4 > H4. Bootstrap heading</ H4 > < H5 > H5. Bootstrap heading</ H5 > < H6 >h6. <a class=" BTN BTN default" href="#" role="button">Link</a> <button class=" BTN btn-default" type="submit">Button</button> <input class="btn btn-default" type="button" value="Input"> <input class="btn btn-default"  type="submit" value="Submit"> <! -- Standard button --> <button type="button" class=" BTN btn-default"> -- Provides extra visual weight and identifies the primary action in a set of buttons --> <button type="button" Class =" BTN btn-primary"> (preference) primary </button> <! <button type="button" class=" BTN BTN -success"> </button> <! -- Contextual button for informational alert messages --> <button type="button" class=" BTN btn-info"> <! -- Indicates caution should be taken with this action --> <button type="button" class="btn Btn-warning "> </button> <! -- Indicates a dangerous or potentially negative action --> <button type="button" class="btn < p style = "padding-bottom: 0px; padding-bottom: 0px; -- Deemphasize a button by making it look like a link while maintaining button behavior --> <button type="button" Class =" BTN btn-link"> (link) </button> <! - the color of the context - > < p > I am a little white dragon < / p > < p class = "text - muted" > I am iron eggs < / p > <! <span class="caret"></span> <span class="glyphicon glyphicon-search" aria-hidden="true"></span> <! <table class="table table-hover"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </body> </html>Copy the code

4. Bootstrap grid system

Function: Sets the layout of child elements in different stalls;

v3.bootcss.com/css/#grid

1,

Grid system, in each stall, control the layout of child elements is different;

The width of the type center is divided into 12 parts;

There are prefabricated class prefixes under each slot:

Super small Screen grass (mobile phone)

< 768px

Small screen devices (tablets)

> =768px

Medium screen (desktop monitor)

> = 992px

Widescreen device (large desktop display)

> =1200px

. Maximum width of container

Automatic (100%)

750px

970px

1170px

Class prefix

.col-xS-

.col-sm-

.col-md-

.col-lg-

Column (column)

12

Class prefix:

  • Xs: Extra Small: mobile phone;
  • Sm: Small: tablet;
  • Medium screen (MD: Medium) : desktop;
  • Large screen (LG: Large) : large desktop;

The grid system is used to create a page layout by combining a series of rows and columns. Your content can be placed into these created layouts, controlling how many sub-elements of a column are allocated in different stalls

​

2. Basic use

<! Container "> <div class="row"> <div class=" col-MD-6 ">. Col-md-6 </div> <div class="col-md-6">.col-md-6</div> </div> </div> <! -- In each gear, Container > <div class="row"> <div class=" col-MD-6 col-LG-4 ">1</div> <div class=" col-MD-6 col-lg-8">2</div> </div> </div>Copy the code

For example:

​

​

​

<! DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <! <meta http-equiv=" x-UA-compatible "content="IE=edge"> <meta http-equiv=" x-UA-compatible" content="IE=edge"> -- Viewport Settings: Viewport width is the same as the device, default zoom ratio is the same as PC, <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Template</title> <! - the Bootstrap file import have initialization file Normalize. CSS - > < link href = ". / the Bootstrap/CSS/Bootstrap. Min. CSS "rel =" stylesheet "> <! -- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <! -- Solve the problem that IE9 does not recognize new html5 tags and causes CSS to not work. Css3 Media Query is not recognized in IE9. -- WARNING: Respond.js doesn't work if you view the page via file:// --> <! -- Conditional comment: Fix some issues with IE9 versions smaller than --> <! -- [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]--> <style> .son { height: 30px; border: 1px solid #000; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6 col-lg-2 son">a</div> <div class="col-md-6 col-lg-8 son">b</div> <div class="col-lg-2 son">c</div> </div> <! <div class="row"> <! <div > <div class="col-lg-4 col-lg-offset-4 son">2</div> </div> <! <div class="row"> <! <div class="col-md-8 col-md-offset-2 son"> Middle box </div> </div> </div> </body> </ HTML >Copy the code

3. Features:

Single class prefix: indicates the class prefix in each rank. It is valid for the current and upward. For example, col-MD-6 has 6 cases of medium screen and above;

Multiple class prefixes: effective according to each stall column;

Each subitem: default 15px padding;

Row removes the 15px padding of the parent container: margin -15px;

4. Column nesting

Operation: you can continue to divide columns (a total of 12) within the child elements that have been divided;

Effect: continue to divide in a good layout;

Grammar:

<! - directly nested -- > < div class = "col - sm - 4" > < div class = "col - sm - 6" > small column < / div > < div class = "col - sm - 6" > small column < / div > < / div > <! <div class="col-sm-4"> <! -- Add 1 row to show that the left and right padding of the parent element is offset and the height is automatically the same as the parent; -- > < div class = "row" > < div class = "col - sm - 6" > small column < / div > < div class = "col - sm - 6" > small column < / div > < / div > < / div >Copy the code

5. Column offset

Operation: is the partition of the child items for column offset

Scene: left and right layout, center layout;

Grammar:

<! <div class="row"> <! - if only one box Then the offset = 12-4-4 -- > < div class = "col - lg - 4" > 1 < / div > <! <div class="col-lg-4 col-lg-offset-4">2</div> </div> <! <div class="row"> <! If only one box then offset = 2 8 2 --> <! <div class="col-md-8 col-md-offset-2"> </div> </div>Copy the code

6. Responsive tools

BS: prefabricated class name

Can control the elements in each position under the display or hide;

Grammar:

​

Note: In contrast to the arguments of the column class prefix,

  • Col-sm -* is ultra-small screen (including) the above screens are this partition;
  • The reactive tool only applies to the class prefix under the current tap;

Example: Controls the display and hiding of elements under stalls

​

​

<! DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <! <meta http-equiv=" x-UA-compatible "content="IE=edge"> <meta http-equiv=" x-UA-compatible" content="IE=edge"> -- Viewport Settings: Viewport width is the same as the device, default zoom ratio is the same as PC, <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Template</title> <! - the Bootstrap file import have initialization file Normalize. CSS - > < link href = ". / the Bootstrap/CSS/Bootstrap. Min. CSS "rel =" stylesheet "> <! -- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <! -- Solve the problem that IE9 does not recognize new html5 tags and causes CSS to not work. Css3 Media Query is not recognized in IE9. -- WARNING: Respond.js doesn't work if you view the page via file:// --> <! -- Conditional comment: Fix some issues with IE9 versions smaller than --> <! -- [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]--> <style> .son { height: 30px; border: 1px solid #000; } </style> </head> <body> <div class="container"> <div class="col-mg-3 son">1</div> <div class="col-mg-3 son">2</div> <div class="col-mg-3 son hidden-md">3</div> <div class="col-mg-3 son">4</div> </div> </body> </html>Copy the code

The chapters are summarized here (the better we understand you guys ~ 3 ~), the better we understand you guys.

Students who are interested in learning Java are welcome to join QQ Learning exchange group: 1126298731

Have a question welcome to ask, everyone together in learning Java on the road to play strange upgrade! (O ゜ – ゜▽゜)

​