Html learning 5-4_ responsive layout

Responsive

1. Responsive layout

Concept: Responsive layout is a concept proposed by Ethan Marcotte in May 2010. In short, a website can be compatible with multiple terminals-instead of making a specific version for each terminal. This concept was born to solve mobile Internet browsing.

1.1 Involving knowledge points

• Screen width change: media query
• Layout knowledge: traditional layout scheme (percentage, float, clear float, positioning)

1.2 Gear division

Media query: division of gears; the default division on the market; three nodes, four gears

• w<768 ultra-small screen (xs) (mobile phones, the gear divisions in the learning rem layout are all 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)

1.3 Media query syntax

/* 1. 超小屏幕下 xs 小于 768 */
@media screen and (min-width: 0px) {
    
    
}
/* 2. 小屏幕下 sm 大于等于768 */
@media screen and (min-width: 768px) {
    
    
}
/* 3. 中等屏幕下 md 大于等于 992px */
@media screen and (min-width: 992px) {
    
    
}
/* 4. 大屏幕下 lg 大于等于1200 */
@media screen and (min-width: 1200px) {
    
    
}

1.4 Version Heart

1. In different gears, the layout is different;

2. Gear setting: plate center;

3. All sub-elements are attributed to the page center. Different layout center widths means that the sub-elements should be typeset in different layouts to meet the needs of user-friendly browsing;

4. grammar

   /* 1. 超小屏幕下 xs 小于 768 布局容器的宽度为 100% */
   @media screen and (max-width: 767px) {
         
         
       .container {
         
         
       	width: 100%;
       }
   }
   /* 2. 小屏幕下 sm 大于等于768 布局容器改为 750px */
   @media screen and (min-width: 768px) {
         
         
       .container {
         
         
       	width: 750px;
       }
   }
   /* 3. 中等屏幕下 md 大于等于 992px 布局容器修改为 970px */
   @media screen and (min-width: 992px) {
         
         
       .container {
         
         
       	width: 970px;
       }
   }
   /* 4. 大屏幕下 lg 大于等于1200 布局容器修改为 1170 */
   @media screen and (min-width: 1200px) {
         
         
       .container {
         
         
       	width: 1170px;
       }
   }
   

5. To be careful of

   • Relevance of the symbols used in media queries: min-, max- include the equal sign, followed by the numerical unit px;
   • Except for ultra-small screens: the width of the plate center is set to be smaller than the minimum limit of the current gear, such as min-width: 768px, and the plate center is 750px; reason: leave blank on both sides, good user experience

二、BootStrap

reference

2.1 Introduction

Bootstrap is a front-end framework for rapid development of Web applications and websites. Bootstrap is based on HTML, CSS, and JAVASCRIPT. An open source product released on GitHub in August 2011.

2.2 version

• 2.xx: Stop maintenance, the code is not concise enough, and the function is not perfect.
• 3.xx: Currently used most, stable, and does not support IE6-IE7. Support for IE8, the interface effect is not good, and it is biased for the development of web projects with responsive layout and mobile device priority.
• 4.xx: The latest version, not very popular yet

2.3 Advantages

• The BootStrap framework can build responsive pages very quickly;
• Mobile device first : Since Bootstrap 3, the framework includes mobile device first styles throughout the library;
• Browser support : All major browsers support Bootstrap;
• Easy to use : as long as you have the basic knowledge of HTML and CSS, you can start learning Bootstrap;
• Responsive design : Bootstrap's responsive CSS can adapt to desktops, tablets and mobile phones;
• Provides a simple and unified solution for developers to create interfaces;
• Contains powerful built-in components, easy to customize, and also provides Web-based customization;
• Open source .

2.4 BootStrap use

2.4.1 BootStrap package content

• Basic structure : Bootstrap provides a basic structure with grid system, link style, and background.
• CSS : Bootstrap comes with the following features: global CSS settings, definition of basic HTML element styles, extensible classes, and an advanced grid system.
• Components : Bootstrap contains more than a dozen reusable components for creating images, drop-down menus, navigation, warning boxes, pop-up boxes, etc.
• JavaScript plug-ins : Bootstrap includes more than a dozen custom jQuery plug-ins. All plug-ins can be included directly, or they can be included one by one.
• Customization : You can customize Bootstrap components, LESS variables and jQuery plug-ins to get your own version.

2.4.2 Use initialization

initialization index.html

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
    <meta charset="utf-8">
    <!-- 要求 当前网页 使用 IE浏览器 最高版本的内核 来渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>BootStrap Template</title>
    <!-- Bootstrap 的文件引入 已经有初始化文件 Normalize.css-->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题-->
    <!--解决ie9以下浏览器对 css3 Media Query 的不识别 -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!-- 条件注释:解决小于IE9的版本一些问题 -->
    <!--[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>
</body>
</html>

It should be noted that: Conditional comment: If the condition is met, the following code link will issue a request;

2.4.3 Layout container

• Version setting: BootStrap needs to wrap a .container or .container-fluid container for the page content. It provides two classes for this purpose
• .container: set the width of the plate center under different gears;
  1. Ultra small screen (xs: extra small): mobile phone; 0px <=w; the width of the center is 100%
  2. Small screen (sm: small): tablet; 768px<=w; the width of the center of the plate is set to 750px
  3. Medium screen (md: medium): desktop; 992px<=w; the center width is set to 970px
  4. Large screen (lg: large): large desktop; 1200px<=w; the width of the center is set to 1170px
• .container-fluid: 100% width
• Features:
  • All elements are CSS3 box model
  • The layout box has left and right 15px padding values

2.4.4 Prefabricated class names

Title, all title tags in HTML 到can be used. In addition, also it provided .h1to .h6the class, in order to give the inline text (inline) gives the title style attribute.

Main page, Bootstrap the global font-sizeset to 14px , line-heightset to 1.428 . These attributes are directly assigned to the 元素和所有段落元素。另外，(paragraph) element and the bottom margin is set equal to 1/2 the line height (ie 10px).

Center content by adding .leadlets paragraph class highlighted.

Underlined text, underline text, using the <u>label.

Wait for many pre-made class names.

Three, grid system

3.1 Introduction

Bootstrap provides a responsive, mobile device-first streaming grid system. As the size of the screen or viewport increases, the system is automatically divided into up to 12 columns. It includes easy-to-use predefined classes , and powerful mixins for generating more semantic layouts.

The grid system is used to create page layouts through a series of row and column combinations, and your content can be placed in these created layouts.

3.2 Function

The grid system controls the layout of the sub-elements in different positions; divides the center width into 12 parts; sets the layout of the sub-elements in different positions;

3.3 Grid parameters

3.4 Basic usage

3.4.1 Syntax

<!-- 中屏和以上占有6份 -->
<div class="container">
    <div class="row">
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-6">.col-md-6</div>
    </div>
</div>
<!-- 各个档位下，按照各个档位下布局 -->
<div class="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>

3.4.2 Features

• Single type prefix: the type prefixes under each gear position include current and upward effect; for example: .col-md-6 is 6 copies for middle screen and above
• Multiple class prefixes: separate into effect according to each gear column
• Each child: 15px padding by default
• Row (.row) can remove the padding value of 15px left and right of the parent container: the left and right margin of .row is -15px

3.5 Column nesting

• Operation: You can continue to divide the columns within the already divided sub-elements (12 copies in total)

• Effect: Continue to divide within the divided layout

• grammar

  <!-- 直接嵌套 -->
  <div class="col-sm-4">
      <div class="col-sm-6">小列</div>
      <div class="col-sm-6">小列</div>
  </div>
  <!-- 使用row嵌套 -->
  <div class="col-sm-4">
      <!-- 加1个行 row 这样可以表现出抵消父元素的左右15padding值 而且高度自动和父级一样高; -->
      <div class="row">
          <div class="col-sm-6">小列</div>
          <div class="col-sm-6">小列</div>
      </div>
  </div>
  

3.6 Column offset

• Operation: offset the number of copies of the divided sub-items

• Scene: left and right layout, center layout

• grammar

  <!-- 左右对齐-->
  <div class="row">
      <!-- 如果只有一个盒子 那么就偏移 = 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">
      <!-- 如果只有一个盒子 那么就偏移 = 2 8 2 -->
      <div class="col-md-8 col-md-offset-2">中间盒子</div>
  </div>
  

3.7 Responsive tools

In order to speed up the development of pages that are friendly to mobile devices, using the media query function and using these tools can easily display or hide page content for different devices. In addition, BootStrap also contains tools for displaying or hiding content on the printer.