jQuery五 - 快速開發

3.1 jQuery事件註冊

jQuery 爲我們提供了方便的事件註冊機制，具體的操作優缺點如下：

優點: 操作簡單，且不用擔心事件覆蓋等問題。
缺點: 普通的事件註冊不能做事件委託，且無法實現事件解綁，需要藉助其他方法。

3.1.1 jQuery事件註冊

下面我們來看一下具體怎麼進行事件的註冊呢？我們先看一下基本語法:

也就是說jQuery把常見的事件都封裝成了方法，我們直接調用即可，內部傳遞一個函數參數即可，函數中寫事件要處理的業務邏輯。

我們來看一下演示的代碼:

<body>
    <div></div>
    <script>
        $(function() {
            // 1. 單個事件註冊
            $("div").click(function() {
                $(this).css("background", "purple");
            });
            $("div").mouseenter(function() {
                $(this).css("background", "skyblue");
            });
        })
    </script>
</body>

在上面的例子中上面我們主要是看了一下基本的事件綁定方式，從上面的例子我們可以看出來，這種方式特別簡單，寫法也很快捷，是事件綁定中最常用的方式，我們也稱之爲事件綁定的經典用法。

3.2 jQuery事件處理

因爲普通註冊事件方法的不足，jQuery又開發了多個處理方法，重點講解如下：

on(): 用於事件綁定，目前最好用的事件綁定方法
off(): 事件解綁
trigger() / triggerHandler(): 事件觸發

3.2.1 事件處理on綁定事件

因爲普通註冊事件方法的不足，無法實現事件委託，無法實現事件解綁，jQuery又創建了多個新的事件綁定方法bind() / live() / delegate() / on()等，其中最好用的是: on()

那我們來看一下on()事件綁定有哪些優勢呢？

優勢1

優勢2

優勢3

總的來說：on()事件綁定優勢還是挺多的：

可以一次性綁定多個事件
做事件委託使用
綁定未來事件，比如添加的DOM節點需要有刪除功能的時候可以使用on方法綁定

演示代碼

<body>
    <div></div>
    <ul>
        <li>我們都是好孩子</li>
        <li>我們都是好孩子</li>
        <li>我們都是好孩子</li>
    </ul>
    <ol></ol>

    <script>
        $(function() {
            // (1) on可以綁定1個或者多個事件處理程序
            // $("div").on({
            //     mouseenter: function() {
            //         $(this).css("background", "skyblue");
            //     },
            //     click: function() {
            //         $(this).css("background", "purple");
            //     }
            // });
            $("div").on("mouseenter mouseleave", function() {
                $(this).toggleClass("current");
            });

            // (2) on可以實現事件委託（委派）
            // click 是綁定在ul 身上的，但是 觸發的對象是 ul 裏面的小li
            // $("ul li").click();
            $("ul").on("click", "li", function() {
                alert(11);
            });

            // (3) on可以給未來動態創建的元素綁定事件
            $("ol").on("click", "li", function() {
                alert(11);
            })
            var li = $("<li>我是後來創建的</li>");
            $("ol").append(li);
        })
    </script>
</body>

3.2.2 案例-發佈微博案例

思路

頁面的基本佈局
點擊發布按鈕，動態創建一個小li，放入文本框的內容和刪除按鈕，並且添加到ul 中。
點擊的刪除按鈕，可以刪除當前的微博留言。

效果如下

<img src="media/wb.gif"/>代碼如下所示

<style>
        * {
            margin: 0;
            padding: 0
        }

        ul {
            list-style: none
        }

        .box {
            width: 600px;
            margin: 100px auto;
            border: 1px solid #000;
            padding: 20px;
        }

        textarea {
            width: 450px;
            height: 160px;
            outline: none;
            resize: none;
        }

        ul {
            width: 450px;
            padding-left: 80px;
        }

        ul li {
            line-height: 25px;
            border-bottom: 1px dashed #cccccc;
            display: none;
        }

        input {
            float: right;
        }

        ul li a {
            float: right;
        }
    </style>
<body>
    <div class="box" id="weibo">
        <span>微博發佈</span>
        <textarea name="" class="txt" cols="30" rows="10"></textarea>
        <button class="btn">發佈</button>
        <ul>
        </ul>
    </div>
    <script>
        $(function () {
            // 1.點擊發布按鈕， 動態創建一個小li，放入文本框的內容和刪除按鈕， 並且添加到ul 中
            $(".btn").on("click", function () {
                var li = $("<li></li>");
                li.html($(".txt").val() + "<a href='javascript:;'> 刪除</a>");
                $("ul").prepend(li);
                li.slideDown();
                $(".txt").val("");
            })

            // 2.點擊的刪除按鈕，可以刪除當前的微博留言li
            // $("ul a").click(function() {  // 此時的click不能給動態創建的a添加事件
            //     alert(11);
            // })
            // on可以給動態創建的元素綁定事件
            $("ul").on("click", "a", function () {
                $(this).parent().slideUp(function () {
                    $(this).remove();
                });
            })

        })
    </script>
</body>

3.2.3 事件處理 off 解綁事件

當某個事件上面的邏輯，在特定需求下不需要的時候，可以把該事件上的邏輯移除，這個過程我們稱爲事件解綁。jQuery 爲我們提供了多種事件解綁方法：die() / undelegate() / off() 等，甚至還有隻觸發一次的事件綁定方法 one()，在這裏我們重點講解一下 off() ;

我們先來看一下語法:

演示代碼

<body>
    <div></div>
    <ul>
        <li>我們都是好孩子</li>
        <li>我們都是好孩子</li>
        <li>我們都是好孩子</li>
    </ul>
    <p>我是一個P標籤</p>
    <script>
        $(function() {
            // 事件綁定
            $("div").on({
                click: function() {
                    console.log("我點擊了");
                },
                mouseover: function() {
                    console.log('我鼠標經過了');
                }
            });
            $("ul").on("click", "li", function() {
                alert(11);
            });

            // 1. 事件解綁 off
            // $("div").off();  // 這個是解除了div身上的所有事件
            $("div").off("click"); // 這個是解除了div身上的點擊事件
            $("ul").off("click", "li");

            // 2. one() 但是它只能觸發事件一次
            $("p").one("click", function() {
                alert(11);
            })
        })
    </script>
</body>

3.2.4 事件處理 trigger 自動觸發事件

有些時候，在某些特定的條件下，我們希望某些事件能夠自動觸發, 比如輪播圖自動播放功能跟點擊右側按鈕一致。可以利用定時器自動觸發右側按鈕點擊事件，不必鼠標點擊觸發。由此 jQuery 爲我們提供了兩個自動觸發事件 trigger() 和 triggerHandler() ;

我們先來看一下語法:

第一種

第二種

下面我們來看一下代碼演示:

<body>
    <div></div>
    <input type="text">

    <script>
    $(function() {
      // 綁定事件
      $("div").on("click", function() {
        alert(11);
      });

      // 自動觸發事件
      // 1. 元素.事件()
      // $("div").click();會觸發元素的默認行爲

      // 2. 元素.trigger("事件")
      // $("div").trigger("click");會觸發元素的默認行爲
      $("input").trigger("focus");

      // 3. 元素.triggerHandler("事件") 就是不會觸發元素的默認行爲
      $("input").on("focus", function() {
        $(this).val("你好嗎");
      });
      // 一個會獲取焦點，一個不會
      $("div").triggerHandler("click");
      // $("input").triggerHandler("focus");
    });
    </script>
</body>

3.3 jQuery事件對象

jQuery 對DOM中的事件對象 event 進行了封裝，兼容性更好，獲取更方便，使用變化不大。事件被觸發，就會有事件對象的產生。

3.3.1 jQuery事件對象

下面我們來看一下他的基本語法是怎樣的:

下面我們通過一個案例來看一下它的具體使用:

<body>
    <div></div>
    <script>
        $(function() {
            $(document).on("click", function() {
                console.log("點擊了document");
            })
            $("div").on("click", function(event) {
                // console.log(event);
                console.log("點擊了div");
                event.stopPropagation();
            })
        })
    </script>
</body>

注意：jQuery中的 event 對象使用，可以借鑑 API 和 DOM 中的 event 。

上面我們通過給div綁定點擊事件，在函數參數中接受了event對象，阻止事件冒泡。

3.4 jQuery 拷貝對象

3.4.1 jQuery拷貝對象

jQuery中可以$.extend()方法拷貝對象，具體操作語法如下所示:

下面我們來看一下具體的代碼實現:

<script>
        $(function() {
            // 1.合併數據
            var targetObj = {};
            var obj = {
                id: 1,
                name: "andy"
            };
            // $.extend(target, obj);
            $.extend(targetObj, obj);
            console.log(targetObj);

            // 2. 會覆蓋 targetObj 裏面原來的數據
            var targetObj = {
                id: 0
            };
            var obj = {
                id: 1,
                name: "andy"
            };
            // $.extend(target, obj);
            $.extend(targetObj, obj);
            console.log(targetObj);
        })
</script>

3.5 jQuery 多庫共存

實際開發中，很多項目連續開發十多年，jQuery版本不斷更新，最初的 jQuery 版本無法滿足需求，這時就需要保證在舊有版本正常運行的情況下，新的功能使用新的jQuery版本實現，這種情況被稱爲，jQuery 多庫共存。

3.5.1 jQuery多庫共存

下面我們來看一下具體語法:

通過一個案例來簡單瞭解下具體的使用

<script>
    $(function() {
        // 讓jquery 釋放對$ 控制權 讓用自己決定
        var suibian = jQuery.noConflict();
        console.log(suibian("span"));
    })
</script>

3.6 jQuery 插件

jQuery 功能比較有限，想要更復雜的特效效果，可以藉助於 jQuery 插件完成。這些插件也是依賴於jQuery來完成的，所以必須要先引入jQuery文件，因此也稱爲 jQuery 插件。

jQuery 插件常用的網站：

jQuery 插件庫 http://www.jq22.com/
jQuery 之家 http://www.htmleaf.com/

jQuery 插件使用步驟：

引入相關文件。（jQuery 文件和插件文件）
複製相關html、css、js (調用插件)。

下面咱們來認識一下幾個我們常見的jQuery插件 :

3.6.1 瀑布流插件

我們學習的第一個插件是jQuery之家的開源插件，瀑布流。我們將重點詳細講解，從找到插件所在網頁，然後點擊下載代碼，到插件的使用等，後面的插件使用可參考瀑布流插件的使用。

插件具體的使用可參考如下所示網站:

插件的引入步驟:

第一步: 引入css文件
第二步: 引入js文件
第三步: 引入html文件（有的簡單插件只需引入html和js，甚至有的只需引入js）

下面我們一步步來看一下他的實現:

引入css文件

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/default.css">
<!-- 下面的樣式代碼爲頁面佈局，可以引入，也可以自己寫，自己設計頁面樣式，一般爲直接引入，方便 -->
<style type="text/css">
  #gallery-wrapper {
    position: relative;
    max-width: 75%;
    width: 75%;
    margin: 50px auto;
  }

  img.thumb {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .white-panel {
    position: absolute;
    background: white;
    border-radius: 5px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
    padding: 10px;
  }

  .white-panel h1 {
    font-size: 1em;
  }

  .white-panel h1 a {
    color: #A92733;
  }

  .white-panel:hover {
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    margin-top: -5px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
</style>

引入js的文件

<!-- 前兩個必須引入 -->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/pinterest_grid.js"></script>
<!-- 下面的爲啓動瀑布流代碼，參數可調節屬性，具體功能可參考readme.html -->
<script type="text/javascript">
    $(function() {
      $("#gallery-wrapper").pinterest_grid({
          no_columns: 5,
          padding_x: 15,
          padding_y: 10,
          margin_bottom: 50,
          single_column_breakpoint: 700
      });
    });
</script>

引入html文件

<!-- html結構一般爲事先寫好，很難修改結構，但可以修改內容及圖片的多少（article標籤） -->
<section id="gallery-wrapper">
        <article class="white-panel">
            <img src="images/P_000.jpg" class="thumb">
            <h1><a href="#">我是輪播圖片1</a></h1>
            <p>裏面很精彩哦</p>
        </article>
        <article class="white-panel">
            <img src="images/P_005.jpg" class="thumb">
            <h1><a href="#">我是輪播圖片1</a></h1>
            <p>裏面很精彩哦</p>
        </article>
        <article class="white-panel">
            <img src="images/P_006.jpg" class="thumb">
            <h1><a href="#">我是輪播圖片1</a></h1>
            <p>裏面很精彩哦</p>
        </article>
        <article class="white-panel">
            <img src="images/P_007.jpg" class="thumb">
            <h1><a href="#">我是輪播圖片1</a></h1>
            <p>裏面很精彩哦</p>
        </article>
</section>

效果如下

(media/water.gif)

3.6.2 圖片懶加載插件

圖片的懶加載就是：當頁面滑動到有圖片的位置，圖片才進行加載，用以提升頁面打開的速度及用戶體驗。也就是延遲加載，加入一個頁面首頁有100張圖片，我們不可能一次性加載完，我們可以只加載在可視區域內的圖片。

加載方式

懶加載只需引入html 和 js操作即可，此插件不涉及css。

引入js

<script src="js/EasyLazyload.min.js"></script>
<script>
    lazyLoadInit({
        showTime: 1100,
        onLoadBackEnd: function(i, e) {
            console.log("onLoadBackEnd:" + i);
        },
        onLoadBackStart: function(i, e) {
            console.log("onLoadBackStart:" + i);
        }
    });
</script>

引入html

<!-- 推薦服務模塊 start -->
    <div class="recommend w">
        <div class="recom-hd fl">
            <img data-lazy-src="img/clock.png" alt="">
            <h3>今日推薦</h3>
        </div>
        <div class="recom-bd fl">
            <ul>
                <li>
                    <a href="#">
                        <img data-lazy-src="upload/pic.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img data-lazy-src="upload/pic.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img data-lazy-src="upload/pic.jpg" alt="">
                    </a>
                </li>
                <li class="last">
                    <a href="#">
                        <img data-lazy-src="upload/pic.jpg" alt="">
                    </a>
                </li>

            </ul>
        </div>
    </div>
    <!-- 推薦服務模塊 end -->

把圖片的src路徑替換爲data-lazy-src，避免圖片直接請求地址:

效果如下所示

(media/lazy.gif)

3.6.3 全屏滾動插件

全屏滾動插件比較大，所以，一般大型插件都會有幫助文檔，或者網站。全屏滾動插件介紹比較詳細的網站爲：

http://www.dowebok.com/demo/2014/77/

代碼演示

全屏滾動因爲有多重形式，所以不一樣的風格html和css也不一樣，但是 js 變化不大。所以下面只演示js的引入，html和css引入根據自己實際

項目需要使用哪種風格引入對應的HTML和CSS。

<style>
        #fp-nav ul li a.active span,
        #fp-nav ul li a span {
            background-color: red!important;
        }

        .section1 {
            background: url(http://idowebok.u.qiniudn.com/77/1.jpg) 50%;
        }

        .section2 {
            background: url(http://idowebok.u.qiniudn.com/77/2.jpg) 50%;
        }

        .section3 {
            background: url(http://idowebok.u.qiniudn.com/77/3.jpg) 50%;
        }

        .section4 {
            background: url(http://idowebok.u.qiniudn.com/77/4.jpg) 50%;
        }
</style>
<script src="js/jquery.min.js"></script>
<script src="js/fullpage.min.js"></script>
<script>
    $(function() {
        $('#dowebok').fullpage({
            sectionsColor: ['pink', '#4BBFC3', '#7BAABE', '#f90'],
            navigation: true
        });
    });
</script>
<body>
    <div id="dowebok">
        <div class="section section1">
            <h3>第一屏裏面的內容</h3>
        </div>
        <div class="section section2">
            <h3>第二屏</h3>
        </div>
        <div class="section section3">
            <h3>第三屏</h3>
        </div>
        <div class="section section4">
            <h3>第四屏</h3>
        </div>
    </div>
</body>

注意：實際開發，一般複製文件，然後在文件中進行修改和添加功能。

效果

(media/scroll.gif)

3.6.4 bootstrap組件

Bootstrap是 Twitter 公司設計的基於HTML、CSS、JavaScript開發的簡潔、直觀、強悍的前端開發框架，他依靠jQuery實現，且支持響應式佈局，使得 Web 開發更加方便快捷。

凡是在軟件開發中用到了軟件的複用，被複用的部分都可以稱爲組件，凡是在應用程序中已經預留接口的組件就是插件。

Bootstrap組件使用非常方便,步驟如下:

引入bootstrap相關css和js
去官網複製html

代碼演示

引入bootstrap相關css和js

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

去官網複製html的功能模塊

<div class="container">
        <!-- Single button -->
        <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Action <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>
    </div>

3.6.5 bootstrap插件

bootstrap中的js插件其實也是組件的一部分，只不過是需要js調用功能的組件，所以一般bootstrap的js插件一般會伴隨着js代碼（有的也可以省略js，用屬性實現）。

步驟

引入bootstrap相關css和js
去官網複製html -
複製js代碼，啓動js插件。

引入bootstrap相關css和js

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

去官網複製html的功能模塊

<!-- 模態框 -->
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            裏面就是模態框
        </div>
    </div>
</div>

複製js代碼，啓動js插件。

<script>
    // 當我們點擊了自己定義的按鈕，就彈出模態框
    $(".myBtn").on("click", function() {
        // alert(11);
        $('#btn').modal()
    })
</script>

3.6.6 bootstrap案例-阿里百秀

下面我們通過一個案例來學習bootstrap的使用:

步驟如下

通過調用組件實現導航欄
通過調用插件實現登錄
通過調用插件標籤頁實現 tab 欄

代碼實現如下:

<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- 引入bootstrap 樣式文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!-- 引入我們自己的首頁樣式文件 -->
    <link rel="stylesheet" href="css/index.css">
    <!-- 先引入jquery js文件 -->
    <script src="bootstrap/js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
<body>
    <div class="container">
        <div class="row">
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <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="#">阿里百秀</a>
                    </div>

                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">生活館 <span class="sr-only">(current)</span></a></li>
                            <li><a href="#">自然匯</a></li>
                            <li><a href="#">科技湖</a></li>
                            <li><a href="#">奇趣事</a></li>
                            <li><a href="#">美食節</a></li>
                        </ul>
                        <form class="navbar-form navbar-left">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="搜索">
                            </div>
                            <button type="submit" class="btn btn-default">搜索</button>
                        </form>
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#" data-toggle="modal" data-target=".login">登錄</a></li>
                            <li><a href="#">註冊</a></li>

                        </ul>
                        <!-- 模態框 -->
                        <div class="modal fade login" tabindex="-1" role="dialog">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title">登錄信息</h4>
                                    </div>
                                    <div class="modal-body">
                                        <form>
                                            <div class="form-group">
                                                <label for="exampleInputEmail1">郵箱名登錄</label>
                                                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                                            </div>
                                            <div class="form-group">
                                                <label for="exampleInputPassword1">密碼</label>
                                                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                                            </div>

                                            <div class="checkbox">
                                                <label>
                                                        <input type="checkbox"> 記住用戶名
                                                      </label>
                                            </div>

                                        </form>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                                        <button type="button" class="btn btn-primary">登錄</button>
                                    </div>
                                </div>
                                <!-- /.modal-content -->
                            </div>
                            <!-- /.modal-dialog -->
                        </div>
                        <!-- /.modal -->
                    </div>
                    <!-- /.navbar-collapse -->
                </div>
                <!-- /.container-fluid -->
            </nav>
        </div>
        <div class="row">
            <header class="col-md-2">
                <div class="logo">
                    <a href="#">
                        <img src="images/logo.png" alt="" class="hidden-xs">
                        <span class="visible-xs">阿里百秀</span>
                    </a>
                </div>
                <div class="nav">
                    <ul>
                        <li><a href="#" class="glyphicon glyphicon-camera">生活館</a></li>
                        <li><a href="#" class="glyphicon glyphicon-picture">自然匯</a></li>
                        <li><a href="#" class="glyphicon glyphicon-phone">科技湖</a></li>
                        <li><a href="#" class="glyphicon glyphicon-gift">奇趣事</a></li>
                        <li><a href="#" class="glyphicon glyphicon-glass">美食傑</a></li>
                    </ul>
                </div>
            </header>
            <article class="col-md-7">
                <!-- 新聞 -->
                <div class="news clearfix">
                    <ul>
                        <li>
                            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">


                                <!-- Wrapper for slides -->
                                <div class="carousel-inner" role="listbox">
                                    <div class="item active">
                                        <img src="upload/banner.dpg" alt="...">
                                        <div class="carousel-caption">
                                            阿里百秀1
                                        </div>
                                    </div>
                                    <div class="item">
                                        <img src="upload/banner1.dpg" alt="...">
                                        <div class="carousel-caption">
                                            阿里百秀2
                                        </div>
                                    </div>
                                    <div class="item">
                                        <img src="upload/banner2.dpg" alt="...">
                                        <div class="carousel-caption">
                                            阿里百秀3
                                        </div>
                                    </div>
                                </div>

                                <!-- Controls -->
                                <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                    <span class="sr-only">Previous</span>
                                </a>
                                <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                    <span class="sr-only">Next</span>
                                </a>
                            </div>
                            <script>
                                $('.carousel').carousel({
                                    interval: 2000
                                })
                            </script>
                        </li>
                        <li>
                            <a href="#">
                                <img src="upload/1.jpg" alt="">
                                <p>奇了 成都一小區護衛長得像馬雲 市民紛紛求合影</p>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <img src="upload/2.jpg" alt="">
                                <p>奇了 成都一小區護衛長得像馬雲 市民紛紛求合影</p>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <img src="upload/3.jpg" alt="">
                                <p>奇了 成都一小區護衛長得像馬雲 市民紛紛求合影</p>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <img src="upload/4.jpg" alt="">
                                <p>奇了 成都一小區護衛長得像馬雲 市民紛紛求合影</p>
                            </a>
                        </li>

                    </ul>
                </div>
                <!-- 發表 -->
                <div class="publish">
                    <div class="row">
                        <div class="col-sm-9">
                            <h3>生活館 關於指甲的10個健康知識 你知道幾個？</h3>
                            <p class="text-muted hidden-xs">alibaixiu 發佈於 2015-11-23</p>
                            <p class="hidden-xs">指甲是經常容易被人們忽略的身體部位， 事實上從指甲的健康狀況可以看出一個人的身體健康狀況， 快來看看10個暗藏在指甲裏知識吧！</p>
                            <p class="text-muted">閱讀(2417)評論(1)贊 (18) <span class="hidden-xs">標籤：健康 / 感染 / 指甲 / 疾病 / 皮膚 / 營養 / 趣味生活</span>

                            </p>
                        </div>
                        <div class="col-sm-3 pic hidden-xs">
                            <img src="upload/3.jpg" alt="">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-9">
                            <h3>生活館 關於指甲的10個健康知識 你知道幾個？</h3>
                            <p class="text-muted hidden-xs">alibaixiu 發佈於 2015-11-23</p>
                            <p class="hidden-xs">指甲是經常容易被人們忽略的身體部位， 事實上從指甲的健康狀況可以看出一個人的身體健康狀況， 快來看看10個暗藏在指甲裏知識吧！</p>
                            <p class="text-muted">閱讀(2417)評論(1)贊 (18) <span class="hidden-xs">標籤：健康 / 感染 / 指甲 / 疾病 / 皮膚 / 營養 / 趣味生活</span>

                            </p>
                        </div>
                        <div class="col-sm-3 pic hidden-xs">
                            <img src="upload/3.jpg" alt="">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-9">
                            <h3>生活館 關於指甲的10個健康知識 你知道幾個？</h3>
                            <p class="text-muted hidden-xs">alibaixiu 發佈於 2015-11-23</p>
                            <p class="hidden-xs">指甲是經常容易被人們忽略的身體部位， 事實上從指甲的健康狀況可以看出一個人的身體健康狀況， 快來看看10個暗藏在指甲裏知識吧！</p>
                            <p class="text-muted">閱讀(2417)評論(1)贊 (18) <span class="hidden-xs">標籤：健康 / 感染 / 指甲 / 疾病 / 皮膚 / 營養 / 趣味生活</span>

                            </p>
                        </div>
                        <div class="col-sm-3 pic hidden-xs">
                            <img src="upload/3.jpg" alt="">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-9">
                            <h3>生活館 關於指甲的10個健康知識 你知道幾個？</h3>
                            <p class="text-muted hidden-xs">alibaixiu 發佈於 2015-11-23</p>
                            <p class="hidden-xs">指甲是經常容易被人們忽略的身體部位， 事實上從指甲的健康狀況可以看出一個人的身體健康狀況， 快來看看10個暗藏在指甲裏知識吧！</p>
                            <p class="text-muted">閱讀(2417)評論(1)贊 (18) <span class="hidden-xs">標籤：健康 / 感染 / 指甲 / 疾病 / 皮膚 / 營養 / 趣味生活</span>

                            </p>
                        </div>
                        <div class="col-sm-3 pic hidden-xs">
                            <img src="upload/3.jpg" alt="">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-9">
                            <h3>生活館 關於指甲的10個健康知識 你知道幾個？</h3>
                            <p class="text-muted hidden-xs">alibaixiu 發佈於 2015-11-23</p>
                            <p class="hidden-xs">指甲是經常容易被人們忽略的身體部位， 事實上從指甲的健康狀況可以看出一個人的身體健康狀況， 快來看看10個暗藏在指甲裏知識吧！</p>
                            <p class="text-muted">閱讀(2417)評論(1)贊 (18) <span class="hidden-xs">標籤：健康 / 感染 / 指甲 / 疾病 / 皮膚 / 營養 / 趣味生活</span>

                            </p>
                        </div>
                        <div class="col-sm-3 pic hidden-xs">
                            <img src="upload/3.jpg" alt="">
                        </div>
                    </div>
                </div>
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </article>
            <aside class="col-md-3">
                <a href="#" class="banner">
                    <img src="upload/zgboke.jpg" alt="">
                </a>
                <a href="#" class="hot">
                    <span class="btn btn-primary">熱搜</span>
                    <h4 class="text-primary">歡迎加入中國博客聯盟</h4>
                    <p>這裏收錄國內各個領域的優秀博客，是一個全人工編輯的開放式博客聯盟交流和展示平臺......</p>
                </a>
                <div style="margin-top: 10px;">

                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">熱搜</a></li>
                        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">排名</a></li>
                    </ul>

                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="home">熱搜的相關內容</div>
                        <div role="tabpanel" class="tab-pane" id="profile">排名的相關內容</div>
                    </div>

                </div>
            </aside>
        </div>
    </div>
</body>

效果

(media/aliyun.gif)