微金所页面制作（Bootstrap 响应式开发 栅格布局 响应式布局）

该页面适用于 PC端 和 移动端，在响应式开发的媒体查询下能够适配所有屏幕。

一、页面效果

二、结构样式说明 (需引入bootstrap 相关样式文件)

结构分为八块：

1. 头部块：.wjs_header
2. 导航条：.wjs_nav
3. 轮播图：.wjs_banner
4. 信息块：.wjs_info
5. 预约块：.wjs_reverse
6. 产品块：.wjs_product
7. 新闻块： .wjs_news
8. 合作伙伴： .wjs_partner

栅格系统 ： 就是用来描述设置当前子元素在指定屏幕下，占据当前屏幕默认12等分中的 n（1-12取值）等分

1. width > 1200 : lg
2. width (992-1200) : md
3. width (768-992) : sm
4. width < 768 : xs extra small (超小屏幕)
5. 格式 col-md-4 (设置当前div占据当前md屏幕下12等分中的4等分)
6. 如需在哪个屏幕隐藏就用： hidden-xs / hidden-sm / hidden-md
   

1. 头部块：.wjs_header (bootstrap 全局css样式中的 栅格系统 支持响应式布局)
   不是全屏 用.container
   

2. 导航条：.wjs_nav （bootstrap 组件中的 导航条）在移动端要具有手风琴效果

   1. 导航条相关注释说明：
      class="navbar-toggle collapsed"：说明在移动端会有手风琴菜单的效果
data-toggle="collapse"：它是一个手风琴组件
data-target="#bs-example-navbar-collapse-1":说明当前手风琴菜单是控制哪一个导航条的
   2. 效果（bootstrap中导航条要进行相应的结构样式修改）：
      

3. 轮播图：.wjs_banner （Bootstrap 插件中的Carousel ）
   为了实现在移动端和pc端轮播图片的不同变化 参考：
   https://blog.csdn.net/weixin_45026839/article/details/113861560
   pc端（w>768px）：图片做为背景，当屏幕宽度变宽的时候，会显示更多的图片的两边区域
   
   移动端（w<768px) :图片会随着屏幕的缩小自动适应–缩小 做法：将img的宽度为100%,通过img标签来实现

4. 信息块: .wjs_info (栅格系统)
   不是全屏用 .container .row 在超小屏幕下隐藏 添加class="hidden-xs"

5. 预约块： .wjs_reverse (栅格系统 .container .row) 超小屏幕下隐藏
   

6. 产品块：.wjs_product (使用Bootstrap 组件中的标签页 和工具提示 iscroll.js 实现滑动)
   1 .去除背景： background-color : transparent ; <b> 加粗标签 <sub>下标
   2 .导航条具有水平滑动效果 参照：https://blog.csdn.net/weixin_45026839/article/details/113993101
   3 .4 .工具提示参考：https://blog.csdn.net/weixin_45026839/article/details/114126311

7. 新闻块：.wjs_news (栅格系统 .container 和标签页)

怎么把一个结构从左中右结构 切换成 上中下结构？

1. 当你使用了栅格系统 container 将屏幕宽度缩小到 992px时 默认宽度为100% ，所以会自动换行。

8. 合作伙伴: .wjs_partner (.container )

三、相关代码资料：
链接：https://pan.baidu.com/s/1OOgCofrd6Mn33xg7tcJCsg
提取码：rk3s