響應式項目實戰（微金所）

響應式項目開發流程

選擇一種屏幕格式進行開發
相應功能模塊完成後，測試是否響應式效果
確保響應式效果滿足要求
進行下一個功能模塊開發

使用自定義字體圖標

通過@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開源強大、易於使用的緩存框架 - FusionCache

面試，有時候是個運氣活

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開發--學習筆記三響應式項目實戰（微金所）