1. bootstrap

1.1 Grid system

Mainly used for responsive layout of pages

I extracted the grid system of Bootstrap separately. If you need it, you can go to bootstap-grid-mini-css. Container -fluid,. Row,. Container,. Col -*-,. Visible -lg-*,. Col -*-offset,. Col -*-push and a series of raster-related Settings

1.2 Four page sizes

.col-xs-  <768px     none
.col-sm-  >= 768px   .container(750px)
.col-md-  >= 992px   .container(970px)
.col-lg-  >= 1200px  .container(1170px) 
Copy the code

1.3 Corresponding Media Query (Location is important)

You can set a style directly inside

/ / @media (min-width: @screen-sm-min) {/ / @media (min-width: @screen-sm-min) {/ / @media (min-width: @screen-sm-min) {/ / @media (min-width: @screen-sm-min) { } / / @media (min-width: @screen-md-min) {} / / @media (min-width: @screen-md-min) {... } /* @media (min-width: @screen-lg-min) {/* @media (min-width: @screen-lg-min) {... }Copy the code

1.4 Media Query methods based on less

For an element

.phone(@rules) {
  @media screen and (max-width: 768px) {
    @rules()
  }
}

.tablet(@rules) {
  @media screen and (min-width: 768px) {
    @rules()
  }
}

.laptop(@rules) {
  @media screen and (min-width: 992px) {
    @rules()
  }
}

.desktop(@rules) {
  @media screen and (min-width: 1200px) {
    @rules()
  }
}

Copy the code

1.5 Displaying hidden classes

Visible -xs-* (* stands for block, inline, inline-block). Visible -sm-*. Visible - MD -*. Visible -lg-*. Hidden -xs .hidden-sm .hidden-md .hidden-lgCopy the code

1.6 two container

Container-fluid. ContainerCopy the code

1.7 The navigation bar

It is mainly used for the responsiveness of the navigation bar

2. Two ways to fix the bottom of the page

2.1 Minimum height of content

.content {
    min-height: 100vh - header - footer;
}

<body>
  <header></header>
  <div class="content"></div>
  <footer></footer>
</body>
Copy the code

2.2 positioning

body {
  padding-bottom: 100px;
  position: relative;
  min-height: 100vh;
}
footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100px;
  background-color: # 333;
}
Copy the code

3. The animation

  • Wow.js displays various animations when elements are loaded as the page scrolls down