响应式项目实战（微金所）

响应式项目开发流程

选择一种屏幕格式进行开发
相应功能模块完成后，测试是否响应式效果
确保响应式效果满足要求
进行下一个功能模块开发

使用自定义字体图标

通过@font-face定义自己的字体

@font-face {
    /*2.申明自己的字体名称*/
    font-family: 'wjs';
    /*3.引入字体文件（约束某一段字符代码什么图案）*/
    src:
    url(../fonts/MiFie-Web-Font.svg) format('svg'),
    url(../fonts/MiFie-Web-Font.eot) format('embedded-opentype'),
    url(../fonts/MiFie-Web-Font.ttf) format('truetype'),
    url(../fonts/MiFie-Web-Font.woff) format('woff');
}

怎么使用维护性更好，使用组合样式，通过修改类，直接修改字体图标

.wjs_icon{
    font-family: wjs;
}
/* css只能修改样式，伪元素可以修改html结构的内容 */
.wjs_icon_phone::before{
    content: "\e908";
}
.wjs_icon_tel::before{
    content: "\e909";
}

使用字体图标

 <a href="#" class="wjs_app">
     <span class="wjs_icon wjs_icon_phone"></span>
     <span>手机微金所</span>
     <span class="glyphicon glyphicon-menu-down"></span>
     <img src="images/code.jpg" alt="">
 </a>

单元素重置样式

 <div class="col-md-3">
     <a href="#" class="btn btn-default btn-register">免费注册</a>
     <a href="#" class="btn btn-link btn-login">登录</a>
 </div>

当使用默认样式不能满足需求时，可以重置样式，两种方式

重置引用的框架样式如btn-default，但会影其他页面
自定义样式，使用自定义样式类，可以方便修改样式（推荐）

.wjs_topBar .btn-register{
    border: none;
    background: #e92322;
    color: #fff;
    font-size: 12px;
    padding: 3px 12px;
}
.wjs_topBar .btn-register:hover{

}
.wjs_topBar .btn-login{
    font-size: 12px;
    color: #666;
}
.wjs_topBar .btn-login:hover{
    text-decoration: none;
    color: #666;
}

组件重置样式

组件中涉及的元素较多，一个个确定样式并进行修改过于麻烦，需要通过一种简便的方式进行设置，并要注意样式优先级，确保自定义样式的优先级高于bootstrap默认样式
设置如下结构的样式

<!--导航栏-->
<nav class="navbar wjs_nav">
    <!--<nav class="navbar navbar-default wjs_nav">-->
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <span class="wjs_icon wjs_icon_logo"></span>
                    <span class="wjs_icon wjs_icon_name"></span>
                </a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">我要投资</a></li>
                    <li><a href="#">我要借贷</a></li>
                    <li><a href="#">平台介绍</a></li>
                    <li><a href="#">新手专区</a></li>
                    <li><a href="#">最新动态</a></li>
                    <li><a href="#">微平台</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right hidden-sm">
                    <li><a href="#">个人中心</a></li>
                </ul>
            </div>
        </div>
    </nav>

方法

拷贝源码的模块样式：
bootstrap源码为分模块进行设置，相同的模块样式再一真起，可以方便的进行复制。
并可以准确定位到所有元素的选择器并且能保证优先级比源码高

以navbar-default为例，复制样式到自定义样式文件中

.navbar-default {
  background-color: #f8f8f8;
  border-color: #e7e7e7;
}
.navbar-default .navbar-brand {
  color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #5e5e5e;
  background-color: transparent;
}
.navbar-default .navbar-text {
  color: #777;
}
.navbar-default .navbar-nav > li > a {
  color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #333;
  background-color: transparent;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #555;
  background-color: #e7e7e7;
}
.navbar-default .navbar-nav > .disabled > a,
.navbar-default .navbar-nav > .disabled > a:hover,
.navbar-default .navbar-nav > .disabled > a:focus {
  color: #ccc;
  background-color: transparent;
}
.navbar-default .navbar-toggle {
  border-color: #ddd;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #ddd;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #888;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #e7e7e7;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #555;
  background-color: #e7e7e7;
}
@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #777;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #333;
    background-color: transparent;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #555;
    background-color: #e7e7e7;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #ccc;
    background-color: transparent;
  }
}
.navbar-default .navbar-link {
  color: #777;
}
.navbar-default .navbar-link:hover {
  color: #333;
}
.navbar-default .btn-link {
  color: #777;
}
.navbar-default .btn-link:hover,
.navbar-default .btn-link:focus {
  color: #333;
}
.navbar-default .btn-link[disabled]:hover,
fieldset[disabled] .navbar-default .btn-link:hover,
.navbar-default .btn-link[disabled]:focus,
fieldset[disabled] .navbar-default .btn-link:focus {
  color: #ccc;
}

针对功能进行覆盖：更改模块名称,.navbar-default修改为自定义模块.wjs_nav
直接在复制的样式文件上修改会影响其他使用此样式的结构，通过修改模块名，指定模块为当前要修改的模块，就可以方便的控制其只能当前模块生效。可以随意的在其基础上进行修改。

.wjs_nav {
    margin-bottom: 0;
    border: none;
    border-bottom: 1px solid #ccc;
    /*固定导航样式*/
    z-index: 999999;
    background: #fff;
    width: 100%;
    border-radius: 0;
    top: 0;
}
.wjs_nav .wjs_icon_logo{
    font-size: 50px;
    color: #e92322;
    vertical-align: middle;
}
.wjs_nav .wjs_icon_name{
    font-size: 36px;
    color: #333;
    vertical-align: middle;
}

.wjs_nav .navbar-brand {
    color: #777;
    height: 80px;
    line-height: 50px;
}
.wjs_nav .navbar-brand:hover,
.wjs_nav .navbar-brand:focus {
    color: #5e5e5e;
    background-color: transparent;
}
.wjs_nav .navbar-text {
    color: #777;
}
.wjs_nav .navbar-nav > li > a {
    color: #777;
    height: 80px;
    line-height: 50px;
}
.wjs_nav .navbar-nav > li > a:hover,
.wjs_nav .navbar-nav > li > a:focus {
    color: #777;
    background-color: transparent;
    border-bottom: 3px solid #e92322;
}
.wjs_nav .navbar-nav > .active > a,
.wjs_nav .navbar-nav > .active > a:hover,
.wjs_nav .navbar-nav > .active > a:focus {
    color: #555;
    border-bottom: 3px solid #e92322;
}
.wjs_nav .navbar-nav > .disabled > a,
.wjs_nav .navbar-nav > .disabled > a:hover,
.wjs_nav .navbar-nav > .disabled > a:focus {
    color: #ccc;
    background-color: transparent;
}
.wjs_nav .navbar-toggle {
    border-color: #ddd;
    margin-top: 23px;
}
.wjs_nav .navbar-toggle:hover,
.wjs_nav .navbar-toggle:focus {
    background-color: #ddd;
}
.wjs_nav .navbar-toggle .icon-bar {
    background-color: #888;
}
.wjs_nav .navbar-collapse,
.wjs_nav .navbar-form {
    border-color: #e7e7e7;
}
.wjs_nav .navbar-nav > .open > a,
.wjs_nav .navbar-nav > .open > a:hover,
.wjs_nav .navbar-nav > .open > a:focus {
    color: #555;
    background-color: #e7e7e7;
}
@media (max-width: 767px) {
    .wjs_nav .navbar-nav .open .dropdown-menu > li > a {
        color: #777;
    }
    .wjs_nav .navbar-nav .open .dropdown-menu > li > a:hover,
    .wjs_nav .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #333;
        background-color: transparent;
    }
    .wjs_nav .navbar-nav .open .dropdown-menu > .active > a,
    .wjs_nav .navbar-nav .open .dropdown-menu > .active > a:hover,
    .wjs_nav .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #555;
        background-color: #e7e7e7;
    }
    .wjs_nav .navbar-nav .open .dropdown-menu > .disabled > a,
    .wjs_nav .navbar-nav .open .dropdown-menu > .disabled > a:hover,
    .wjs_nav .navbar-nav .open .dropdown-menu > .disabled > a:focus {
        color: #ccc;
        background-color: transparent;
    }
}
.wjs_nav .navbar-link {
    color: #777;
}
.wjs_nav .navbar-link:hover {
    color: #333;
}
.wjs_nav .btn-link {
    color: #777;
}
.wjs_nav .btn-link:hover,
.wjs_nav .btn-link:focus {
    color: #333;
}
.wjs_nav .btn-link[disabled]:hover,
fieldset[disabled] .wjs_nav .btn-link:hover,
.wjs_nav .btn-link[disabled]:focus,
fieldset[disabled] .wjs_nav .btn-link:focus {
    color: #ccc;
}

缺点
有一些没有用到的选择器，代码的冗余

两种解决方案：

删除冗余代码：降低代码量
保留：利于维护，方便产品跟新的时候不用再去修改代码

可以根据喜好选择解决方案（建议保留）

方法2
所有复制的bootstrap样式前加入当前模块的前缀，声明只在当前模块生效，即不会影响其他模块。如下

.wjs_navbar .navbar-default {
  background-color: #f8f8f8;
  border-color: #e7e7e7;
}
.wjs_navbar .navbar-default .navbar-brand {
  color: #777;
}

Bootstrap使用方式

分析demo,引入到基本模板代码中
修改样式，完成项目样式要求
测试是否响应式效果
不满足响应式时，需要手动通过媒体查询进行设置

collapse组件(折叠)

类名：collapsed class 只有样式效果
属性：带JS交互效果，所有通过添加属性，添加动态效果
data-toggle="collapse" 申明是什么组件=折叠组件
data-target="#bs-example-navbar-collapse-1" 控制的目标元素=选择器

<!--
data-toggle="collapse"声明对象转换为切换按钮
data-target=".box" 控制的目标元素，为选择器
-->
<button data-toggle="collapse" data-target=".box">切换</button>

<!--
data-target=".box"具有相同效果
href=".box" 控制的目标元素，为选择器
-->
<a href=".box" data-toggle="collapse" >切换</a>
<div class="collapse box">
    内容<br>
    内容<br>
    内容<br>
    内容<br>
    内容<br>
</div>

总结：bootstrap通过属性声明为相应的组件，加上相应的功能

导航条

<!-- navbar 导航模块  navbar-default 默认样式  -->
<nav class="navbar navbar-default">
    <!-- 导航的内容容器 -->
    <div class="container">
        <!-- 包含 商标区域 和 切换按钮（在移动端显示） -->
        <div class="navbar-header">
            <!--切换按钮-->
            <!--
            类名：collapsed  样式
            属性：
            data-toggle="collapse"  申明是什么组件=折叠组件
            data-target="#bs-example-navbar-collapse-1" 控制的目标元素=选择器
            其他：(可以删除)
            aria-expanded="false"  aria-* 代表提供给屏幕阅读器使用的（盲人阅读器）
            class="sr-only" screen read only  代表提供给屏幕阅读器使用的（盲人阅读器）
            -->
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!--商标区域-->
            <a class="navbar-brand" href="#">Brand</a>
        </div>
        <!-- 导航连接  表单  其他内容  被切换 -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <!--默认的导航-->
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
            <!--右对齐的导航-->
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
            </ul>
        </div>
    </div>
</nav>

轮播图组件分析

<!-- carousel 轮播图的模块  slide是否加上滑动效果 -->
<!-- data-ride="carousel" 初始化轮播图属性-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- 指示器：点盒子 -->
    <ol class="carousel-indicators">
        <!--
            data-target="#carousel-example-generic" 控制目标轮播图
            data-slide-to="0" 控制的是轮播图当中的第几张 （索引）
            class="active" 当前选中的点
        -->
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>
    <!-- 图片盒子 -->
    <!-- role="listbox" 提供给屏幕阅读器使用 -->
    <div class="carousel-inner">
        <!--需要轮播的容器-->
        <div class="item active">
            <!--图片-->
            <img src="..." alt="...">
            <!--说明-->
            <div class="carousel-caption">
                ...
            </div>
        </div>
        <div class="item">
            <img src="..." alt="...">
            <div class="carousel-caption">
                ...
            </div>
        </div>
        ...
    </div>

    <!-- 上一张下一张按钮 -->
    <!--
     data-slide="prev"
     data-slide="next"
     href="#carousel-example-generic"   控制目标轮播图
    -->
    <a class="left carousel-control" href="#carousel-example-generic"  data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

经分析，bootstrap的轮播图pc/mobile端效果一致（移动端是高度并不会变化，不易于观看），不能满足所需要的响应式效果，所以需要自定义

PC端轮播图

需求：高度固定，图片居中，容器铺满
怎么设置不同图片：使用css选择器来设置不太好（html内容动态改变不利于维护）

.pc_imgBox{
    display: block;
    height: 400px;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
        	<!--模板代码，结合后台数据动态修改-->
            <a href="#" class="pc_imgBox" style="background-image: url(../images/slide_01_2000x410.jpg)"></a>
        </div>
        <div class="item">
            <a href="#" class="pc_imgBox" style="background-image: url(../images/slide_02_2000x410.jpg)"></a>
        </div>
        <div class="item">
            <a href="#" class="pc_imgBox" style="background-image: url(../images/slide_03_2000x410.jpg)"></a>
        </div>
        <div class="item">
            <a href="#" class="pc_imgBox" style="background-image: url(../images/slide_04_2000x410.jpg)"></a>
        </div>
    </div>
    <a class="left carousel-control" href="#carousel-example-generic"  data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

M端轮播图

需求：宽度自适应，高度自动变化

  .m_imgBox{
      display: block;
      width: 100%;
  }
  /*
  当img宽度固定，高度不设置时，高度会根据宽度等比缩放
  */
  .m_imgBox img{
      display: block;
      width: 100%;
  }

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
    </ol>
    <div class="carousel-inner">
    	<!--注意PC/M端的不同-->
        <div class="item active">
            <a href="#" class="m_imgBox"><img src="../images/slide_01_640x340.jpg" alt=""></a>
        </div>
        <div class="item">
            <a href="#" class="m_imgBox"><img src="../images/slide_02_640x340.jpg" alt=""></a>
        </div>
        <div class="item">
            <a href="#" class="m_imgBox"><img src="../images/slide_03_640x340.jpg" alt=""></a>
        </div>
        <div class="item">
            <a href="#" class="m_imgBox"><img src="../images/slide_04_640x340.jpg" alt=""></a>
        </div>
    </div>
    <a class="left carousel-control" href="#carousel-example-generic"  data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

静态响应式轮播图

通过添加响应式工具类控制不同设备间使用的轮播图

<a href="#" class="pc_imgBox hidden-xs" style="background-image: url(../images/slide_02_2000x410.jpg)"></a>
<!--除了超小屏设备都不显示-->
<a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="../images/slide_02_640x340.jpg" alt=""></a>

缺点：

hidden-xs只是设置display:none图片不会加载，当在M端时，不仅增加带宽，而且还影响加载速度

 .pc_imgBox{
   display: block;
    height: 400px;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.m_imgBox{
    display: block;
    width: 100%;
}
.m_imgBox img{
    display: block;
    width: 100%;
}

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <a href="#" class="pc_imgBox hidden-xs" style="background-image: url(../images/slide_01_2000x410.jpg)"></a>
            <a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="../images/slide_01_640x340.jpg" alt=""></a>
        </div>
        <div class="item">
            <a href="#" class="pc_imgBox hidden-xs" style="background-image: url(../images/slide_02_2000x410.jpg)"></a>
            <a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="../images/slide_02_640x340.jpg" alt=""></a>
        </div>
        <div class="item">
            <a href="#" class="pc_imgBox hidden-xs" style="background-image: url(../images/slide_03_2000x410.jpg)"></a>
            <a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="../images/slide_03_640x340.jpg" alt=""></a>
        </div>
        <div class="item">
            <a href="#" class="pc_imgBox hidden-xs" style="background-image: url(../images/slide_04_2000x410.jpg)"></a>
            <a href="#" class="m_imgBox hidden-lg hidden-md hidden-sm"><img src="../images/slide_04_640x340.jpg" alt=""></a>
        </div>
    </div>
    <a class="left carousel-control" href="#carousel-example-generic"  data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

动态轮播图

使用JS根据后台数据，动态控制前端html结构。

html修改使用模板代码

<!--使用模版引擎-->
<script type="text/template" id="pointTemplate">
    <% for(var i = 0 ; i < list.length ; i ++){ %>
        <li data-target="#carousel-example-generic" data-slide-to="<%=i%>" class="<%=i==0?'active':''%>"></li>
    <% } %>
</script>
    <script type="text/template" id="imageTemplate">
    <% for(var i = 0 ; i < list.length ; i ++){ %>
    <div class="item <%=i==0?'active':''%>">
        <% if(isMobile){ %>
        <a href="#" class="m_imgBox"><img src="<%=list[i].mUrl%>" alt=""></a>
        <% }else{ %>
        <a href="#" class="pc_imgBox" style="background-image: url(<%=list[i].pcUrl%>)"></a>
        <% } %>
    </div>
    <% } %>
</script>

模板代码说明

<% js代码 %>，<% %>中间可以书写任意的JS代码，但是不能写全局变量，只能用传递过来的局部变量

<% for(var i = 0 ; i < list.length ; i ++){ %>
     <li data-target="#carousel-example-generic" data-slide-to="<%=i%>" class="<%=i==0?'active':''%>"></li>
 <% } %>

两对<% %>html代码<% %>中间可以书写html代码

$(function () {
    /*动态轮播图*/
    banner();
    /*移动端页签*/
    initMobileTab();
    /*初始工具提示*/
    $('[data-toggle="tooltip"]').tooltip();
});
var banner = function () {
    /*1.获取轮播图数据    ajax */
    /*2.根据数据动态渲染  根据当前设备  屏幕宽度判断 */
    /*2.1 准备数据*/
    /*2.2 把数据转换成html格式的字符串 （动态创建元素，字符串拼接，模版引擎【artTemplate】*/
    /*2.3 把字符渲染页面当中*/
    /*3.测试功能 页面尺寸发生改变重新渲染*/
    /*4.移动端手势切换  touch*/

    /*ui框架：bootstrap,妹子UI,jqueryUI,easyUI,jqueryMobile,mui,framework7*/
    /*关于移动端的UI框架：bootstrap,jqueryMobile,mui,framework7*/
    /*模板引擎：artTemplate,handlebars,mustache,baiduTemplate,velocity,underscore*/

    /*做数据缓存*/
    var getData = function (callback) {
        /*缓存了数据*/
        if(window.data){
            callback && callback(window.data);
        }else {
            /*1.获取轮播图数据*/
            $.ajax({
                type:'get',
                url:'js/data.json',
                /*设置同步执行*/
                /*async:false,*/
                /*强制转换后台返回的数据为json对象*/
                /*强制转换不成功程序报错，不会执行success,执行error回调*/
                dataType:'json',
                data:'',
                success:function (data) {
                    window.data = data;
                    callback && callback(window.data);
                }
            });
        }
    }
    var render = function () {
        getData(function (data) {
            /*2.根据数据动态渲染  根据当前设备  屏幕宽度判断 */
            var isMobile = $(window).width() < 768 ? true : false;
            //console.log(isMobile);
            /*2.1 准备数据*/
            /*2.2 把数据转换成html格式的字符串*/
            /*使用模版引擎：那些html静态内容需要编程动态的*/
            /*发现：点容器  图片容器  新建模版*/
            /*开始使用*/
            /*<% console.log(list); %> 模版引擎内不可使用外部变量 */
            var pointHtml = template('pointTemplate',{list:data});
            //console.log(pointHtml);
            var imageHtml = template('imageTemplate',{list:data,isMobile:isMobile});
            //console.log(imageHtml);
            /*2.3 把字符渲染页面当中*/
            $('.carousel-indicators').html(pointHtml);
            $('.carousel-inner').html(imageHtml);
        });
    }
    /*3.测试功能 页面尺寸发生改变事件*/
    $(window).on('resize',function () {
        render();
        /*通过js主动触发某个事件*/
    }).trigger('resize');
    /*4.移动端手势切换*/
    var startX = 0;
    var distanceX = 0;
    var isMove = false;
    /*originalEvent 代表js原生事件*/
    $('.wjs_banner').on('touchstart',function (e) {
        startX = e.originalEvent.touches[0].clientX;
    }).on('touchmove',function (e) {
        var moveX = e.originalEvent.touches[0].clientX;
        distanceX = moveX - startX;
        isMove = true;
    }).on('touchend',function (e) {
        /*距离足够 50px 一定要滑动过*/
        if(isMove && Math.abs(distanceX) > 50){
            /*手势*/
            /*左滑手势*/
            if(distanceX < 0){
                //console.log('next');
                $('.carousel').carousel('next');
            }
            /*右滑手势*/
            else {
                //console.log('prev');
                $('.carousel').carousel('prev');
            }
        }
        startX = 0;
        distanceX = 0;
        isMove = false;
    });
}
var initMobileTab = function () {
    /*1.解决换行问题*/
    var $navTabs = $('.wjs_product .nav-tabs');
    var width = 0;
    $navTabs.find('li').each(function (i, item) {
        var $currLi = $(this);//$(item);
        /*
        * width()  内容
        * innerWidth() 内容+内边距
        * outerWidth() 内容+内边距+边框
        * outerWidth(true) 内容+内边距+边框+外边距
        * */
        var liWidth = $currLi.outerWidth(true);
        width += liWidth;
    });
    console.log(width);
    $navTabs.width(width);

    /*2.修改结构使之区域滑动的结构*/
    //加一个父容器给 .nav-tabs 叫  .nav-tabs-parent

    /*3.自己实现滑动效果 或者 使用iscroll */
    new IScroll($('.nav-tabs-parent')[0],{
        scrollX:true,
        scrollY:false,
        click:true
    });
}

固定导航组件(Affix)

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
  ...
</div>

.wjs_nav {
    margin-bottom: 0;
    border: none;
    border-bottom: 1px solid #ccc;
    /*固定导航样式*/
    z-index: 999999;
    background: #fff;
    /*设置宽度，默认为版心宽度*/
    width: 100%;
    border-radius: 0;
    /*bootstrap自动添加fix后未设置top*/
    top: 0;
}

常用类

pull-left左浮动
pull-right右浮动
text-right 文字靠右
阴影box-shadow

/*
参数1：x轴的偏移
参数2：y轴的偏移
参数3：阴影的模糊度
参数4：阴影的延伸（为实体颜色）
参数5：阴影的颜色
参数6：内阴影
*/
box-shadow: 0 -2px 2px #d8d8d8 inset;

bootstrap常用类

类名	说明
`.container`	响应式容器
`.row`	行
`.col--`	列
`.col--offset-`	列偏移
`.col--pull-`
`.col--push-`
`pull-left*`	左浮动
`pull-right`	右浮动
`text-center`	文字居中
`text-left`	文字左对齐
`text-right`
`hidden-xs`	超小屏隐藏
`hidden-sm`
`hidden-md`
`hidden-lg`

常用伪类选择器

找到P元素，通过P找到父元素，通过父元素找子元素当中类型为P的，然再去找第几个。

p:first-of-type{}
p:last-of-type{}
p:nth-of-type(n){}
p:nth-last-of-type(n){}

如果使用的是p:first-child，找到P元素,通过P找到父元素，通过父元素找所有的子元素，找第一个元素，匹配判断类型(如果不是无效选择器)

p:first-child{}

伪类与伪元素的区别https://blog.csdn.net/guangtouhan/article/details/88074008

补充

css3规范:伪类 :: 伪元素

移动Web开发--学习笔记三响应式项目实战（微金所）

响应式项目实战（微金所）

使用自定义字体图标

单元素重置样式

组件重置样式

Bootstrap使用方式

collapse组件(折叠)

导航条

轮播图组件分析

PC端轮播图

M端轮播图

静态响应式轮播图

动态轮播图

固定导航组件(Affix)

常用类

bootstrap常用类

常用伪类选择器

补充

相关资源

源码https://gitee.com/SoFeelLove/WeiJinSuo

.Net 8.0 下的新RPC，IceRPC之试试的新玩法"打洞"

关于游戏付费的一点想法

我通过CKA和CKS啦！

《最新出炉》系列入门篇-Python+Playwright自动化测试-42-强大的可视化追踪利器Trace Viewer

大数据怎么学？对大数据开发领域及岗位的详细解读，完整理解大数据开发领域技术体系

ArcGis-學習筆記6-5 外部Excel數據點導入

大數據 - MapReduce編程案例 -BH3

rem學習使用

Android通過藍牙與PC通信

ArcGis-學習筆記5 地圖可視化與出圖

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

移动Web开发--学习笔记三 响应式项目实战（微金所）

响应式项目实战（微金所）

使用自定义字体图标

单元素重置样式

组件重置样式

Bootstrap使用方式

collapse组件(折叠)

导航条

轮播图组件分析

PC端轮播图

M端轮播图

静态响应式轮播图

动态轮播图

固定导航组件(Affix)

常用类

bootstrap常用类

补充

相关资源

源码https://gitee.com/SoFeelLove/WeiJinSuo

移动Web开发--学习笔记三响应式项目实战（微金所）