快速开发一个网页用到的工具1. bootstrap 2. 页面底部固定的两种方式 3. 动画

1. bootstrap

1.1 栅格系统

主要用于页面的响应式布局

我将 bootstrap 的栅格系统单独抽了出来，有需要的同学可以去取 bootstap-grid-mini.css，包括 .container-fluid、.row、.container、.col-*-、 .visible-lg-*、.col-*-offset、.col-*-push等一系列栅格相关的设置

1.2 四种页面尺寸

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

1.3 对应的媒体查询（位置很重要）

可以直接在里面对某种样式进行设置

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，*/

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

1.4 基于less提供的媒体查询方法

针对某个元素

.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()
  }
}

1.5 显示隐藏类

.visible-xs-* (* 代表 block、inline、inline-block)  只在 xs 的时候显示   
.visible-sm-*
.visible-md-*
.visible-lg-*	
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg

1.6 两种container

.container-fluid（撑开整个屏幕）
.container

1.7 导航条

主要用于导航条的响应式

2. 页面底部固定的两种方式

2.1 内容最小高度

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

<body>
  <header></header>
  <div class="content"></div>
  <footer></footer>
</body>

2.2 定位

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

3. 动画

wow.js 当页面向下滚动的时候，当元素加载出来的时候显示各种动画