Detailed analysis of front-end mobile advanced web five

Responsive layout plan

  • Media inquiries

  • Bootstrap framework

01-Media Inquiry

Basic writing

  • max-width: maximum width (less than or equal to)

  • min-width: minimum width (greater than or equal to)

Writing order

  • min-width (from small to large)

  • max-width (large to small)

Case-Hide on the left

Requirement: If the width of the web page is less than or equal to 768px, the left area will be hidden.

  • HTML structure

<div class="box">
  <div class="left">left</div>
  <div class="main">
    Responsive web page effectResponsive web page effectResponsive web page effectResponsive web page effectResponsive web page effectResponsive web page effectResponsive web page effectResponsive web page effectResponsive web page effectResponsive web page effectResponsive web page effect Web page effect Responsive web page effect Responsive web page effect Responsive web page effect Responsive web page effect Responsive web page effect Responsive web page effect Responsive web page effect Responsive web page effect Responsive web page effect Responsive web page effect Responsive web page effectResponsive web page effectResponsive web page effectResponsive web page effectResponsive web page effectResponsive web page effectResponsive web page effectResponsive web page effectResponsive web page effectResponsive web page effectResponsive web page effect Web page effect Responsive web page effect Responsive web page effect Responsive web page effect Responsive web page effect Responsive web page effect Responsive web page effect Responsive web page effect Responsive web page effect Responsive web page effect
  </div>
</div>

  • CSS styles

.box {
  display: flex;
}
?
.left {
  width: 300px;
  height: 500px;
  background-color: pink;
}
?
.main {
  flex: 1;
  height: 500px;
  background-color: skyblue;
}
?
@media (max-width: 768px) {
  .left {
    display: none;
  }
}

Media query-complete writing method

Keywords/logical operators

  • and

  • only

  • not

Media type

Media type is used to distinguish device types

  • screen: screen device

  • Print preview: print

  • Reader: speech

  • No distinction between types: all

Media properties

  • Viewport width and height: width / height

  • Viewport maximum width and height: max-width; max-height

  • Viewport minimum width and height: min-width; min-height

  • Screen orientation: orientation

    • protrait: vertical screen

    • landscape: horizontal screen

Media Query-External CSS

02-Bootstrap

Introduction

Bootstrap is a front-end UI framework developed and maintained by Twitter. It provides a large number of well-written CSS styles, allowing developers to quickly write fully functional web pages and common interactive effects by combining certain HTML structures and JavaScript.

Chinese official website: Bootstrap Chinese website

Usage steps

Download

Download: Bootstrap V5 Chinese documentation → Enter the Chinese documentation → Download → Download the Bootstrap production file

Use

  1. Introduce Bootstrap CSS files

<link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">

  1. Calling class name: container responsive layout layout class

<div class="container">Test</div>

Grid system

Function: Responsive layout

Rasterization refers to dividing the width of the entire web page into 12 equal parts, and each box occupies the corresponding number of parts.

For example: if there are 4 boxes in a row, then each box occupies 3 parts (12 / 4 = 3)

  • row class: row, which allows content to be arranged in one row (flex layout)

Global styles

Button

Class name

  • btn: default style

  • btn-success: success

  • btn-warning: warning

  • …

  • Button size: btn-lg/btn-sm

Table

Table class:

  • table: default style

  • table-striped: alternate rows change color

  • table-success: table color

  • …

Component

1.Introduce style sheets

2.Introduce js files

3. Copy the structure and modify the content

Font icon

Download

Navigation / Extend: Icon library → Installation → Download installation package → bootstrap-icons-1.X.X.zip

Use

  1. Copy the fonts folder to the project directory

  2. The web page introduces the bootstrap-icons.css file

  3. Call the CSS class name (the class name corresponding to the icon)

<i class="bi-android2"></i>

03-Comprehensive Case-alloyTeam

Preparation

  • HTML structure

Tencent Full Version


<link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">


?
?
?

  • less style

// out: ../css/

Head navigation

  • HTML structure

<!-- Navigation -->
<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#"><img src="./assets/images/logo.png" alt=""></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Homepage</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Blog</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Github</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">TWeb Conf</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">SuperStar</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Web front-end navigation</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

  • less style

//Navigation
.bg-body-tertiary {
  background-color: transparent !important;
  .navbar-collapse {
    flex-grow: 0;
  }
}

Carousel image

  • HTML structure

<!-- Carousel image -->
<div id="carouselExampleIndicators" class="carousel slide">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      
    </div>
    <div class="carousel-item">
      
    </div>
    <div class="carousel-item">
      
    </div>
    <div class="carousel-item">
      
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

  • less style

.carousel {
  .carousel-item {
    height: 500px;
    background-size: cover;
    background-position: center 0;
  }
  .carousel-item:nth-child(1) {
    background-image: url(../assets/uploads/banner_1.jpg);
  }
  .carousel-item:nth-child(2) {
    background-image: url(../assets/uploads/banner_2.jpg);
  }
  .carousel-item:nth-child(3) {
    background-image: url(../assets/uploads/banner_3.jpg);
  }
  .carousel-item:nth-child(4) {
    background-image: url(../assets/uploads/banner_4.jpg);
  }
}

Carousel chart responsive

  • less style

//Carousel image: less than 768 picture height 250 max; greater than or equal to 768 picture height 400 min; greater than or equal to 992 picture height 500
.carousel {
  // responsive → media query
  @media (max-width: 768px) {
    .carousel-item {
      height: 250px;
    }
  }
?
  @media (min-width: 768px) {
    .carousel-item {
      height: 400px;
    }
  }
  @media (min-width: 992px) {
    .carousel-item {
      height: 500px;
    }
  }
?
?
  .carousel-item {
    // height: 500px;
    background-size: cover;
    background-position: center 0;
  }
}

Open source project responsiveness

  • HTML structure

<!-- Open source project -->
<div class="project container">
  <div class="title">
    <h2>OpenSource / open source project</h2>
    <p>A wide variety of open source projects that you can’t put down</p>
  </div>
  <div class="content">
    <div class="row">
      <div class="col-lg-3 col-md-6">1</div>
      <div class="col-lg-3 col-md-6">2</div>
      <div class="col-lg-3 col-md-6">3</div>
      <div class="col-lg-3 col-md-6">4</div>
    </div>
  </div>
</div>

  • less style

//Open source project
// Viewport width is greater than 992; 4 boxes in a row col-lg-3
// Viewport width is greater than 768; 2 boxes in a row col-md-6
.project {
  margin-top: 60px;
  text-align: center;
}

Open source project content layout

  • HTML structure

<!-- Open source project -->
<div class="project container">
  <div class="title">
    <h2>OpenSource / open source project</h2>
    <p>A wide variety of open source projects that you can’t put down</p>
  </div>
  <div class="content">
    <div class="row">
      <div class="col-lg-3 col-md-6"><a href="#">1</a></div>
      <div class="col-lg-3 col-md-6"><a href="#">1</a></div>
      <div class="col-lg-3 col-md-6"><a href="#">1</a></div>
      <div class="col-lg-3 col-md-6"><a href="#">1</a></div>
    </div>
  </div>
</div>

  • less style

.project {
  margin-top: 60px;
  text-align: center;
  .row {
    div {
      margin-bottom: 10px;
      height: 200px;
      // background-color: pink;
      a {
        //The width of the block level is the same as the parent level
        display: block;
        height: 200px;
        background-color: green;
        border-radius: 4px;
      }
?
       & amp;:nth-child(1) a {
        background-color: #70c3ff;
      }
       & amp;:nth-child(2) a {
        background-color: #fd6a7f;
      }
       & amp;:nth-child(3) a {
        background-color: #7f8ea0;
      }
       & amp;:nth-child(4) a {
        background-color: #89d04f;
      }
    }
  }
}