Responsive pages are mobile compatible

  • Technical selection:
    1. Media queries
    2. bootstrap

Responsive development

  • Principles of responsive development
    • useMedia queriesLayouts and styles are set for devices of different widths to suit the purpose of different devices.

Reactive layout container

  • Reactive requires a parent as a layout container to coordinate with the child elements to achieve the change effect.

  • Principle: 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.

  • Normal responsive size division

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

  • Example: Responsive navigation

    • Demand analysis
    • Responsive principle.html

Bootstrap Front-end development framework

  • Bootstrap comes from Twitter and is 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: www.bootcss.com/
    • Liverpoolfc.tv: getbootstrap.com/

  • Framework: 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.

  • 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

The Bootstrap version

  • 2. X.x: stop maintenance, compatibility is good, the code is not simple enough, the function is not perfect
  • X.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

Use the Bootstrap

  • Use tetralogy:

    1. Create folder structure

    2. Create the HTML skeleton structure

        <! -- Requires the current web page to be rendered using the highest version of Internet Explorer kernel -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <! Viewport Settings: viewport width is the same as the device, the default zoom ratio is the same as PC, users can not scale by themselves -->
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0, user - scalable = 0">
  <! --[if lt IE 9]> <! -- Solve the problem that IE9 does not recognize new html5 tags and causes CSS to fail -->
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
     <! Css3Media Query not recognized by IE9 -->
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script><! [endif]-->Copy the code

    3. Introduce related style files

          <! Bootstrap core style -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
Copy the code

    4. Writing content

      • Use the bootstrap predefined styles directly
      • Change the style of Bootstrap (usually set through the class selector) 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

Bootstrap Layout container

  • You need to wrap a. Container container around the page content and the raster system.
  • It provides two classes for this purpose

    1. The container class

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

    2. The container – fluid type

      • Stream layout container or percentage width
      • A container that occupies all viewports
      • Suitable for mobile development

Bootstrap grid system

  • Introduction (grid systems)

    • Divide the page layout into columns of equal width, and then modularize the page layout by defining the number of columns.
    • Bootstrap provides a responsive, mobile-first streaming grid system that automatically divides into up to 12 columns as the screen or viewport size increases. (More will squeeze down, less will lack a piece)

  • Grid option parameter

    • 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: great.
    • Columns greater than 12, the elements of the extra column are arranged as a whole on another row
    • Each column defaults to about 15 pixels of padding
    • You can specify the class names of multiple devices in a column, for example, class=” col-mD-4 col-SM-6 “.

  • Column nested

    • The built-in raster system nested the content again. The simple understanding is:A column is subdivided into smaller columns 
        <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

    • Use. Col – md – offset –Classes can beThe column is offset to the right. These classes are actually created by usingThe selector adds a margin to the left of the current element 
        <div class="row">
    <div class="col-lg-4">1</div>
    <div class="col-lg-4 col-lg-offset-4"></div>
  </div>
Copy the code

  • Column sorting

    • Use. Col – md – push – *Push rightAnd col – md – pull – *zolaThe two classes easily change the order of the columns. 
        <div class="row">
    <div class="col-lg-4 col-lg-push-8">On the left side of the</div>
    <div class="col-lg-8 col-lg-pull-4">On the right side</div>
  </div>
Copy the code

Responsive tool

  • Meaning: These utility classes make it easy to show or hide page content for different devices

    • In contrast, visible-XS, visible-SM visible-MD, and visible-LG display certain content for different devices

  • Bootstrap For other items (buttons, expressions, tables), see Bootstrap

Alibaixiu Home Page case (see code for details)