使用Bootstrap框架仿星巴克網站、附github地址。

時間  2020-06-29
標籤 使用 bootstrap 框架 星巴克 網站 github 地址 欄目 Bootstarp 简体版
原文   原文鏈接

本案例製做一個咖啡銷售網站，經過網站呈現本身的理念和咖啡文化，頁面佈局設計獨特，採用兩欄的佈局形式；頁面風格設計簡潔，爲瀏覽者提供一個簡單、時尚的頁面，瀏覽時讓人心情舒暢。javascript

一、網站概述
網站的設計思路和設計風格與Bootstrap框架風格完美融合，下面就來具體地介紹實現的步驟。css

二、網站結構html

本案例目錄文件說明以下。
■　font-awesome-4.7.0：圖標字體庫文件。下載地址：http://www.fontawesome.com.cn/。
■　css：樣式表文件夾。
■　js：JavaScript腳本文件夾，包含index.js文件和jQuery庫文件。
■　index.html：首頁。java

 

 

 #圖標字體文件庫在與項目同級文件下，截圖未指出，下方有github連接，可下載源文件查看jquery

三、設計效果
本案例是咖啡網站應用，主要設計首頁的展現效果，其餘頁面設計能夠套用首頁模板。首頁在大屏（≥992px）設備中顯示效果圖所示。git

 

 

 

 

 

 在小屏設備（<768px）上時，將顯示底邊欄導航效果，如圖所示。github

四、設計準備
應用Bootstrap框架的頁面建議爲HTML 5文檔類型。同時在頁面頭部區域導入框架的基本樣式文件、腳本文件、jQuery文件和自定義的CSS樣式及JavaScript文件。本項目的配置文件以下：ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>仿星巴克網站</title>
    <!--    Bootstrap核心css文件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
    <!--    字體圖標文件-->
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css">
    <!--    自定義樣式-->
    <link rel="stylesheet" href="style.css">
</head>
<body class="container">

<!--引入js文件-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!--Bootstrap核心JavaScript文件-->
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!--自定義js文件-->
<script src="js/index.js"></script>
</body>
</html>

五、設計首頁佈局bootstrap

本案例首頁分爲三個部分：左側可切換導航、右側主體內容和底部隱藏導航欄，如圖所示。瀏覽器

 

 

 

左側可切換導航和右側主體內容使用Bootstrap框架的網格系統進行設計，在大屏設備（≥992px）中，左側可切換導航佔網格系統的3份，右側主體內容佔9份；在中、小屏設備（<992px）中左側可切換導航和右側主體內容各佔一行。
底部隱藏導航欄使用無序列表進行設計，添加了d-block d-sm-none類，只在小屏設備上顯示。

<div class="row">
<!--    左側導航-->
    <div class="col-12 col-lg-3 left"></div>
<!--    右側主體內容-->
    <div class="col-12  col-lg-9 right"></div>
</div>
<!--隱藏導航欄-->
<div>
    <ul>
        <li><a href="index.html"></a></li>
    </ul>
</div>

還添加了一些自定義樣式來調整頁面佈局，代碼以下：

@media (max-width: 992px){
/*    在小屏設備中，設置外邊距，上下邊距爲1rem，左右爲0*/
    .left{
        margin: 1rem 0;
    }
}
@media(min-width: 992px){
/*    在大屏設備中，左側導航設置固定定位，右側主體內容設置左外邊距25%*/
    .left{
        position: fixed;
        top: 0;
        left: 0;
    }
    .right{
        margin-left: 25%;
    }
    .margin1{
        margin-top: 40vh;
    }
}

六、設計可切換導航
本案例左側導航設計很複雜，在不一樣寬度的設備上有3種顯示效果，設計步驟以下。
第1步：設計切換導航的佈局。可切換導航使用網格系統進行設計，在大屏（>992px）設備上佔網格系統的3份；在中、小屏設備（<992px）的設備上佔滿整行，如圖所示。

 

 

 

 

 

 

 

 

 第2步：設計導航展現內容。導航展現內容包括導航條和登陸註冊兩部分。導航條用網格系統佈局，嵌套Bootstrap導航組件進行設計，使用<ul class="nav">定義；登陸註冊使用了Bootstrap的按鈕組件進行設計，使用<a href="#" class="btn">定義。設計在小屏上隱藏登陸註冊，如圖所示，包裹在<div class="d-none d-sm-block">容器中。

    <!--    左側導航-->
    <div class="col-12 col-lg-3 left">
        <div id="template1">
            <div class="row">
                <div class="col-10">
                    <!--                    導航條-->
                    <ul class="nav">
                        <li class="nav-item">
                            <a href="index.html" class="nav-link active">
                                <img src="http://pic.58pic.com/58pic/12/06/74/07258PICNyX.jpg" width="40"
                                     class="rounded-circle" alt="">
                            </a>
                        </li>
                        <li class="nav-item mt-1">
                            <a href="javascript:void(0);" class="nav-link">帳戶</a>
                        </li>
                        <li class="nav-item mt-1">
                            <a href="javascript:void(0);" class="nav-link">菜單</a>
                        </li>
                    </ul>
                </div>
                <div class="col-2 mt-2 font-menu text-right">
                    <a href="javascript:void(0);" id="a1"><i class="fa fa-bars"></i></a>
                </div>
            </div>
            <div class="margin1">
                <h5 class="ml-3 my-3 d-none d-sm-block text-lg-center">
                    <b>心情愜意、來杯咖啡吧</b>&nbsp;&nbsp;<i class="fa fa-coffee"></i>
                </h5>
                <div class="ml-3 my-3 d-none d-sm-block text-lg-center">
                    <a href="#" class="card-link btn rounded-pill text-success"><i class="fa fa-user-circle"></i>&nbsp;登&nbsp;陸</a>
                    <a href="#" class="card-link btn btn-outline-success rounded-pill text-success">注&nbsp;冊</a>
                </div>
            </div>
        </div>
    </div>

第3步：設計隱藏導航內容。隱藏導航內容包含在id爲#template2的容器中，在默認狀況下是隱藏的，使用Bootstrap隱藏樣式d-none來設置。內容包括導航條、菜單欄和登陸註冊。
導航條用網格系統佈局，嵌套Bootstrap導航組件進行設計，使用<ul class="nav">定義。菜單欄使用h6標籤和超連接進行設計，使用<h6><a href="a.html">定義。登陸註冊使用<a href="#" class="btn">定義。

<!--        隱藏導航欄-->
        <div id="template2" class="d-none">
            <div class="row">
                <div class="col-10">
                    <ul class="nav">
                        <li class="nav-item">
                            <a href="index.html" class="nav-link active">
                                <img src="http://pic.58pic.com/58pic/12/06/74/07258PICNyX.jpg" alt="" width="40"
                                     class="rounded-circle">
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="index.html" class="nav-link mt-2">咖啡俱樂部</a>
                        </li>
                    </ul>
                </div>
                <div class="col-2 mt-2 font-menu text-right">
                    <a href="javascript:void(0);" id="a2"><i class="fa fa-times"></i></a>
                </div>
            </div>
            <div class="margin2">
                <div class="ml-5 mt-5">
                    <h6><a href="javascript:;">門店</a></h6>
                    <h6><a href="javascript:;">俱樂部</a></h6>
                    <h6><a href="javascript:;">菜單</a></h6>
                    <hr>
                    <h6><a href="javascript:;">移動應用</a></h6>
                    <h6><a href="javascript:;">秦選精品</a></h6>
                    <h6><a href="javascript:;">專星送</a></h6>
                    <h6><a href="javascript:;">咖啡講堂</a></h6>
                    <h6><a href="javascript:;">烘焙工廠</a></h6>
                    <h6><a href="javascript:;">幫助中心</a></h6>
                    <hr>
                    <a href="#" class="card-link btn rounded-pill text-success pl-0"><i class="fa fa-user-circle"></i>&nbsp;登&nbsp;陸</a>
                    <a href="#" class="card-link btn btn-outline-success rounded-pill text-success">注&nbsp;冊</a>
                </div>
            </div>
        </div>

第4步：設計自定義樣式，使頁面更加美觀。

@media (max-width: 992px){
/*    在小屏設備中，設置外邊距，上下邊距爲1rem，左右爲0*/
    .left{
        margin: 1rem 0;
    }
}
@media(min-width: 992px){
/*    在大屏設備中，左側導航設置固定定位，右側主體內容設置左外邊距25%*/
    .left{
        position: fixed;
        top: 0;
        left: 0;
    }
    .right{
        margin-left: 25%;
    }
    .margin1{
        margin-top: 40vh;
    }
}
.margin2 h6{
    margin: 20px 0;
    font-weight: bold;
}
ul{
    list-style-type: none;
}
.left{
    border-right: 2px solid #eeeeee;
}
.left a{
    font-weight: bold;
    color: #000;
}

第5步：添加交互行爲。在可切換導航中，爲<i class="fa fa-bars">圖標和<i class="fa fa-times">圖標添加單擊事件。在大屏設備中，爲了使頁面更友好，設計在大屏設備上切換導航時，顯示右側主體內容，當單擊<i class="fa fa-bars">圖標時，切換隱藏的導航內容；在隱藏的導航內容中，單擊<i class="fa fa-times">圖標時，可切回導航展現內容。在中、小屏設備（<992px）上，隱藏右側主體內容，單擊<i class="fa fa-bars">圖標時，切換隱藏的導航內容；在隱藏的導航內容中，單擊<i class="fa fa-times">圖標時，可切回導航展現內容。

大屏設備切換隱藏的導航內容

 

 

 大屏設備切回導航展現的內容

 

 中屏設備切換隱藏的導航內容

 

 中屏設備切回導航展現的內容

 

 小屏設備切換隱藏的導航內容

 

 小屏設備切回導航展現的內容

 

 實現導航展現內容和隱藏內容交互行爲的腳本代碼以下：

$(function () {
    $('#a1').click(function () {
        $('#template1').addClass('d-none');
        $('.right').addClass('d-none d-lg-block');
        $('#template2').removeClass('d-none');
    });
    $('#a2').click(function () {
        $('#template2').addClass('d-none');
        $('.right').removeClass('d-none');
        $('#template1').removeClass('d-none')
    })
});

提示：d-none和d-lg-block類是Bootstrap框架中的樣式。Bootstrap框架中的樣式在JavaScript腳本中能夠直接調用。

七、主體內容

使頁面排版具備可讀性，可理解性、清晰明瞭相當重要。好的排版可讓您的網站感受清爽而使人眼前一亮，而糟糕的排版使人厭煩。排版是爲了使內容更好的呈現，應以不會增長用戶認知負荷的方式來組織內容。
本案例主體內容包括輪播廣告區、產品推薦區、Logo展現、特點展現區和產品生產流程區5個部分，頁面排版如圖所示。

 

 八、設計輪播廣告區

Bootstrap輪播插件結構比較固定，輪播包含框須要指明ID值和carousel、slide類。框內包含三部分組件：標籤框（carousel-indicators）、圖文內容框（carousel-inner）和左右導航按鈕（carousel-control-prev、carousel-control-next）。經過data-target="#carousel"屬性啓動輪播，使用data-slide-to="0"、data-slide ="pre"、data-slide ="next"定義交互按鈕的行爲。完整的代碼以下：

<!--    右側主體內容-->
    <div class="col-12 col-lg-9 right p-0 clearfix">
        <!--        輪播廣告區-->
        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner max-h">
                <div class="carousel-item active">
                    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3764483885,4083168537&fm=26&gp=0.jpg"
                         class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592932077110&di=cd7fb84e36a5c1676a00ab4a23579bc8&imgtype=0&src=http%3A%2F%2Fattachment.jmw.com.cn%2Fuploadfile%2F2015%2F0403%2F20150403013807493.jpg"
                         class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592932114630&di=8016378ca877749b296f64347715841d&imgtype=0&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3596133729%2C855335225%26fm%3D214%26gp%3D0.jpg"
                         class="d-block w-100" alt="...">
                </div>
            </div>
            <a href="#carouselExampleControls" class="carousel-control-prev" data-slide="prev">
                <span class="carousel-control-prev-icon"></span>
            </a>
            <a href="#carouselExampleControls" class="carousel-control-next" data-slide="next">
                <span class="carousel-control-next-icon"></span>
            </a>
        </div>
    </div>

爲了不輪播中的圖片過大而影響總體頁面，這裏爲輪播區設置一個最大高度max-h類。

.max-h{
    max-height: 300px;
}
.max-h img{
    height: 300px;
}

九、設計產品推薦區
產品推薦區使用Bootstrap中卡片組件進行設計。卡片組件中有3種排版方式，分別爲卡片組、卡片陣列和多列卡片浮動排版。本案例使用多列卡片浮動排版，多列卡片浮動排版使用<div class="card-columns">進行定義。

<!--        產品推薦區-->
        <div class="p-4 list">
            <h5 class="text-center my-3">咖啡推薦</h5>
            <h5 class="text-center mb-4 text-secondary">
                <small>在購物旗艦店能夠發現更多咖啡心意</small>
            </h5>
            <!--            多列卡片浮動排版-->
            <div class="card-columns">
                <div class="my-4 my-sm-0">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592933913255&di=3cfd49ae1b46e2f9f514532950714019&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201301%2F28%2F20130128141904_5AwPK.jpeg"
                         class="card-img-top" alt="">
                </div>
                <div class="my-4 my-sm-0">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592933801297&di=adf480a55bf0abf7f224be6f21a9ecca&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F16%2F08%2F10%2F2157ab2a01b5f6c.jpg"
                         class="card-img-top" alt="">
                </div>
                <div class="my-4 my-sm-0">
                    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592933817124&di=22ba5098fcefd4442a902e8b2ea12b32&imgtype=0&src=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D2793055047%2C2676139222%26fm%3D214%26gp%3D0.jpg"
                         class="card-img-top" alt="">
                </div>
            </div>
        </div>

爲推薦區添加自定義樣式，包括顏色和圓角效果。

.list{
    background: #eeeeee;
}
.list-border{
    border: 2px solid #DBDBDB;
    border-top: 1px solid #BDBDBD;
}

瀏覽器中運行，產品推薦區如圖

 

 

十、設計登陸註冊區和Logo
登陸註冊區和Logo使用網格系統佈局，並添加響應式設計。在中、大屏設備（≥768px）中，左側是登陸註冊區，右側是公司Logo；在小屏設備（<768px）中，登陸註冊區和Logo將各佔一行顯示，如圖所示。

 

 

 

 對於左側的登陸註冊區，使用卡片組件進行設計，而且添加了響應式的對齊方式text-center和text-sm-left。在小屏設備（<768px）中，內容居中對齊；在中、大屏設備（≥768px）中，內容居左對齊。代碼以下：

<!--        登錄註冊區和logo-->
        <div class="row py-5">
            <div class="col-12 col-sm-6 pt-2">
                <div class="card border-0 text-center text-sm-left">
                    <div class="card-body ml-5">
                        <h4 class="card-title">咖啡俱樂部</h4>
                        <p class="card-text">開啓您的星享之旅，星星越多、會員等級越高、好禮越豐富。</p>
                        <a href="#" class="card-link btn btn-outline-success">註冊</a>
                        <a href="#" class="card-link btn btn-outline-success">登錄</a>
                    </div>
                </div>
            </div>
            <div class="col-12 col-sm-6 text-center mt-5">
                <a href="#">
                    <img src="http://img1.imgtn.bdimg.com/it/u=3393326001,2411887059&fm=214&gp=0.jpg" alt=""
                         class="img-fluid">
                </a>
            </div>
        </div>

十一、設計特點展現區

特點展現內容使用網格系統進行設計，並添加響應類。在中、大屏（≥768px）設備顯示爲一行四列；在小屏幕（<768px）設備顯示爲一行兩列；在超小屏幕（<576px）設備顯示爲一行一列，如圖所示。
特點展現區實現代碼以下：

<!--        特點展現區-->
        <div class="p-4 list">
            <h5 class="text-center my-3">咖啡精選</h5>
            <h5 class="text-center mb-4 text-secondary">
                <small>在購物旗艦店能夠發現更多咖啡心意</small>
            </h5>
            <div class="row">
                <div class="col-12 col-sm-6 col-md-3 mb-3 mb-md-0">
                    <div class="bg-light p-4 list-border rounded">
                        <img src="http://www.qbaobei.com/UploadFiles/ysjk/2013/3/201303141718412131.jpg"
                             class="img-fluid" alt="">
                        <h6 class="text-secondary text-center mt-3">套餐一</h6>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-3 mb-3 mb-md-0">
                    <div class="bg-white p-4 list-border rounded">
                        <img src="http://img1.imgtn.bdimg.com/it/u=1889104524,1865000713&fm=26&gp=0.jpg"
                             class="img-fluid" alt="">
                        <h6 class="text-secondary text-center mt-3">套餐二</h6>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-3 mb-3 mb-md-0">
                    <div class="bg-light p-4 list-border rounded">
                        <img src="http://thumbs.dreamstime.com/x/%E7%83%AD%E5%A5%B6%E5%92%96%E5%95%A1%E6%9D%AF%E5%AD%90%E7%89%B9%E5%86%99%E9%95%9C-%EF%BC%8C%E5%BD%93%E5%BF%83%E8%84%8F%E8%A3%85%E9%A5%B0%E5%9C%A8%E6%B3%A1%E6%B2%AB%E9%A1%B6%E9%83%A8%E3%80%82-31905893.jpg"
                             class="img-fluid" alt="">
                        <h6 class="text-secondary text-center mt-3">套餐三</h6>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-3 mb-3 mb-md-0">
                    <div class="bg-light p-4 list-border rounded">
                        <img src="http://image.17173.com/bbs/upload/2008/07/04/121516414525.jpg" class="img-fluid"
                             alt="">
                        <h6 class="text-secondary text-center mt-3">套餐四</h6>
                    </div>
                </div>
            </div>
        </div>

中、大屏設備顯示效果

 

 小屏設備顯示效果

 

 超小屏設備顯示效果

 

 十二、設計產品生產流程區

第1步：設計結構。產品製做區主要由標題和圖片展現組成。標題使用h標籤設計，圖片展現使用ul標籤設計。在圖片展現部分還添加了左右兩個箭頭，使用font-awesome字體圖標進行設計。代碼以下：

<!--        產品生產流程區-->
        <div class="p-4">
            <h5 class="text-center my-3">咖啡講堂</h5>
            <h5 class="text-center mb-4 text-secondary">
                <small>瞭解更多咖啡文化</small>
            </h5>
            <div class="box">
                <ul class="clearfix" id="ulList">
                    <li class="list-border rounded">
                        <img src="http://img2.imgtn.bdimg.com/it/u=3541722414,3884659824&fm=26&gp=0.jpg" alt=""
                             width="300">
                        <h6 class="text-center mt-3">咖啡種植</h6>
                    </li>
                    <li class="list-border rounded">
                        <img src="http://hiphotos.baidu.com/feed/pic/item/9358d109b3de9c82918990246781800a18d843a8.jpg"
                             alt="" width="300">
                        <h6 class="text-center mt-3">咖啡調製</h6>
                    </li>
                    <li class="list-border rounded">
                        <img src="http://img3.imgtn.bdimg.com/it/u=2725276117,4103638164&fm=26&gp=0.jpg" alt=""
                             width="300">
                        <h6 class="text-center mt-3">咖啡烘焙</h6>
                    </li>
                    <li class="list-border rounded">
                        <img src="http://img2.imgtn.bdimg.com/it/u=3335899916,2513047612&fm=26&gp=0.jpg" alt=""
                             width="300">
                        <h6 class="text-center mt-3">手衝咖啡</h6>
                    </li>
                </ul>
                <div id="left">
                    <i class="fa fa-chevron-circle-left"></i>
                </div>
                <div id="right">
                    <i class="fa fa-chevron-circle-right"></i>
                </div>
            </div>
        </div>

第2步：設計自定義樣式。

.box{
    width: 100%;
    height: 300px;
    overflow: hidden;
    position: relative;
}
#ulList{
    list-style: none;
    width: 1400px;
    position: absolute;
}
#ulList li{
    float: left;
    margin-left: 15px;
    z-index: 1;
}
#left{
    position: absolute;
    left: 20px;top:30%;
    z-index: 10;
    cursor: pointer;
}
#right{
    position: absolute;
    right: 20px;top: 30%;
    z-index: 10;
    cursor: pointer;
}
.font-menu{
    font-size: 1.3rem;
}

第3步：添加用戶行爲。

<script>
    $(function () {
        var nowIndex = 0;
        var liNumber = $('#ulList li').length;

        function change(index) {
            var ulMove = index * 300;
            $('#ulList').animate({left: '-' + ulMove + 'px'}, 500);
        }

        $('#left').click(function () {
            nowIndex = (nowIndex > 0) ? (--nowIndex) : 0;
            change(nowIndex)
        });
        $('#right').click(function () {
            nowIndex = (nowIndex < liNumber - 1) ? (++nowIndex) : (liNumber - 1);
            change(nowIndex)
        })
    });
    $(function () {
        $('#footer ul li').click(function () {
            $(this).find('a').addClass('ab');
            $(this).siblings().find('a').removeClass('ab');
        })
    });
</script>

瀏覽器中運行，效果如圖所示；單擊右側箭頭，#ulList向左移動，

 

 

1三、設計底部隱藏導航
第1步：設計底部隱藏導航佈局。首先定義一個容器<div id="footer">用來包裹導航。在該容器上添加一些Bootstrap通用樣式，使用fixed-bottom將其固定在頁面底部，使用bg-light設置高亮背景，使用border-top設置上邊框，使用d-block和d-sm-none設置導航只在小屏幕上顯示。

<!--隱藏導航欄-->
<div class="row fixed-bottom d-block d-sm-none bg-light border-top py-1" id="footer">
    <ul class="text-center p-0" id="myTab">
        <li>
            <a href="index.html" class="ab"><i class="fa fa-home fa-2x p-1"></i><br>主頁</a>
        </li>
        <li>
            <a href="javascript:void(0);"><i class="fa fa-calendar-minus-o fa-2x p-1"></i><br>門店</a>
        </li>
        <li>
            <a href="javascript:void(0);"><i class="fa fa-user-circle-o fa-2x p-1"></i><br>個人帳戶</a>
        </li>
        <li>
            <a href="javascript:void(0);"><i class="fa fa-bitbucket-square fa-2x p-1"></i><br>菜單</a>
        </li>
        <li>
            <a href="javascript:void(0);"><i class="fa fa-table fa-2x p-1"></i><br>更多</a>
        </li>
    </ul>
</div>

第2步：設計字體顏色以及每一個導航元素的寬度。

.ab{
    color: #00A862!important;
}
#myTab li{
    float: left;
    width: 20vw;
    min-width: 30px;
    font-size: 0.8rem;
    color: #919191;
}

第3步：爲導航元素添加單擊事件，被單擊元素添加ab類，其餘元素則刪除ab類。

$(function () {
        $('#footer ul li').click(function () {
            $(this).find('a').addClass('ab');
            $(this).siblings().find('a').removeClass('ab');
        })
    });

瀏覽器中運行，底部隱藏導航效果如圖所示。

 

 至此，全部功能實現完畢

此項目參考Bootstrap從入門到項目實戰第十四章。

github地址爲：https://github.com/terroristhouse/Boostrap

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程