响应式项目-微金所

1.页面结构

   // 使用bootstrap框架
  <!-- 头部块 -->
  <header class="wjs_header"></header>
  <!-- 导航条 -->
  <nav class="wjs_nav"></nav>
  <!-- 轮播图 -->
  <div class="wjs_banner"></div>
  <!-- 信息块 -->
  <div class="wjs_info"></div>
  <!-- 预约块 -->
  <div class="reverse"></div>
  <!-- 产品块 -->
  <div class="wjs_product"></div>
  <!-- 新闻块 -->
  <div class="wjs_news"></div>
  <!-- 合作伙伴 -->
  <footer class="wjs_partner"></footer>

2.头部块的制作

头部块的结构

• 在992以上的屏幕上按比例分为四块（col-md-2 col-md-5 col-md-2 col-md-3）
• 小于992的屏幕上隐藏（hidden-xs hidden-sm）
• 四块内容都是链接（包含字体图标）

3.导航条的制作

• 使用bootstrap的导航条组件
• 将组件头部navbar-header中的brand改为字体图标（头部中的手风琴按钮navbar-toggle默认小于768时显示）
• 将组件内容块navbar-collapse的form部分去除，ul中新增几块li(需要几块加几块)
• 为ul添加hidden-sm，小于992时隐藏，

4.轮播图的制作

• 使用bootstrap的carousel插件
• carousel-indicators添加标记
• carousel-inner添加轮播内容，添加时使用 data-large-image和data-small-image记录两张图片的路径
• 为了满足pc端使用背景图片（大图片，屏幕拉大的时候，仍然有背景），移动端使用img标签（屏幕缩小，图片相应缩小）的需求，使用js脚本根据宽度决定，使用hidden-xs和hidden-sm的话会 同时加载大图片和小图片，对性能有影响
• 使用js，window绑定resize事件，根据宽度给轮播内容添加链接包含img,或者链接，指定背景图片，最后trigger触发指定事件
• 在js中添加滑动操作，carousel-inner绑定touchstart和touchend事件，根据手指初始距离和离开的距离判断向前滑还是向后滑，滑动是调用carousel的carousel方法，方法中给参数prev或者next

5.信息块制作

信息块的需求是屏幕宽度小于992时，一行显示两块信息，大于992，一行显示三块信息，使用响应式col-sm-6和col-md-4实现，小于768隐藏，使用hidden-xs实现，信息块的格式是图片加文字，使用bootstrap组件中的媒体对象组件实现（左边字体图标，右边文字）

6.预约块制作

屏幕小于768隐藏，hidden-xs
左边9分，右边三分（col-sm-9 col-sm-3）

7.产品块制作

使用标签页插件实现，分为标签块nav_tabs和内容块tab-content
两块分别添加分类
给nav_tabs添加滚动效果，查找nav_tabs下所有li元素，计算宽度，赋值给ul，是ul的宽度大于其父元素，父元素overflow:hidden,然后使用
IScroll插件做滚动

var myScroll = new IScroll('.tabs_parent',{
		scrollX: true,scrollY: false //允许水平滑动 不允许垂直滑动
	});

tab-content块添加内容
使用container row包裹
row中包含四块内容，展示规则为768 一行一块 ，768-992 一行两块 ，往上一行三块，使用col-xs-12 col-sm-6 col-md-4实现
每块内容又分为左右两块，右侧块使用工具提示插件，
内容中使用工具提示插件（插件使用时，js中添加代码 $('[data-toggle="tooltip"]').tooltip()）

8.新闻块制作

使用标签页插件实现
分为三块（col-md-2 col-md-1 col-md-7）
第一块为标题
第二块nav-tabs为标签导航，下面添加li元素，包含a标签，a标签包含span标签，添加字体图标
第三块为标签也内容

9.合作伙伴制作

ul下添加字体图标，浮动