基於HTML5的移動Web應用——Bootstrap 樣式案例：製作微票兒首頁

製作微票兒首頁

成品效果

階段1：製作微票兒首頁響應導航

需求說明
網頁導航在瀏覽器中居中顯示
使用bootstrap響應式導航佈局微票兒導航，在大於768px的微票兒導航
使用媒體查詢和bootstrap響應式導航實現在小於768px的屏幕下的微票兒導航

運行效果

階段2：製作微票兒首頁焦點圖和特惠看模塊

需求說明
使用柵格系統佈局微票兒首頁焦點圖和特惠看模塊，在小屏幕下左邊和右邊都是12列，其他屏幕下左邊佔9列，右邊佔3列
使用輪播圖插件佈局和實現左邊的微票兒首頁焦點圖功能
右邊的“特惠看”部分圖片需要是響應式的

運行效果

階段3：製作微票兒首頁優惠演出和首頁演唱會選項卡模塊

需求說明
使用柵格系統佈局微票兒首頁優惠演出和首頁演唱會選項卡模塊，在小屏幕下左邊和右邊都是12列，其他屏幕下左邊佔9列，右邊佔3列
使用縮略圖組件和柵格系統佈局和實現左邊的微票兒首頁優惠演出功能
使用選項卡插件完成微票兒首頁演唱會選項卡

運行效果

階段4：製作微票兒各種演唱會演出和歷歷在目模塊

需求說明
使用柵格系統佈局微票兒各種演唱會演出和歷歷在目模塊，在小屏幕下左邊和右邊都是12列，其他屏幕下左邊佔9列，右邊佔3列
使用選項卡插件和縮略圖組件實現各種演唱會演出部分的內容
使用媒體對象組件完成“歷歷在目-今天的演出”部分的佈局

運行效果

階段5：製作微票兒場館推薦和熱銷榜單模塊

需求說明
使用柵格系統佈局製作微票兒場館推薦和熱銷榜單模塊，在超小屏幕下左邊和右邊都是12列，其他屏幕下左邊佔9列，右邊佔3列
使用柵格系統和縮略圖組件實現微票兒場館推薦部分的佈局
使用媒體對象組件完成“熱銷榜單”部分的佈局

運行效果

階段6：製作微票兒底部

需求說明
使用柵格系統佈局製作微票兒底部模塊
運行效果

參考代碼


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>微票兒</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/myCSS.css"/>
</head>
<body id="body">
<!--導航條 下拉菜單 模態框-->
    <header class="clear" id="header">
        <nav class="navbar navbar-inverse navbar-fixed-top myNav">
            <div class="container">
                <div class="navbar-header">
                    <a href="#"><img src="image/logoMsg.png" alt=""/></a>
                    <!--data-target=".navbar-collapse" 點不能忘記-->
                    <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class=" collapse navbar-collapse navbar-left" style="margin-top: 10px; margin-left: 10px">
                    <ul class="nav navbar-nav ">
                        <li><a href="#">全國</a></li>
                        <li>
                            <div class="btn-group">
                                <a href="#" class="myBtn dropdown-toggle " data-toggle="dropdown">
                                    演出
                                    <span class="caret"></span>    <!-- 向下小三角-->
                                </a>
                                <ul id="mydropdown" class="dropdown-menu">
                                    <li class="active"><a href="#">演出票</a></li> <!-- active 默認是選中狀態-->
                                    <li><a href="#">場館</a></li>
                                </ul>
                            </div>
                        </li>
                        <li><a href="#">電影</a></li>
                        <li>
                            <a id="navActive" href="#">我的微票兒
                                <span style="margin-left:6px;" class="label label-danger">new</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <!--點擊的時候會打開登錄頁面-->
                <ul class="nav navbar-nav navbar-right myul" style="margin-top: 10px;">
                    <li><a href="#mymodal" data-toggle="modal">登錄</a></li>
                    <li><a href="#">註冊</a></li>
                </ul>

                <form class="navbar-form navbar-right myform" style="margin-top: 20px;">
                    <div class="input-group">
                        <input class="form-control" type="text" placeholder="請輸入要搜索的內容"/>
                        <span class=" btn btn-info input-group-addon">
                            搜索
                        </span>
                    </div>
                </form>
            </div>
        </nav>
    </header>

    <!--柵格佈局 焦點圖-->
    <div class="container" id="content1">
        <div class="row">
            <div class="col-xs-12 col-md-9">
                <div id="myCarousel" class="carousel slide" data-ride="carousel">
                    <!-- 圓圈指示符 -->
                    <ol class="carousel-indicators">
                        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#myCarousel" data-slide-to="1"></li>
                        <li data-target="#myCarousel" data-slide-to="2"></li>
                        <li data-target="#myCarousel" data-slide-to="3"></li>
                    </ol>

                    <!-- 圖片容器 -->
                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="image/1.jpg" alt="...">
                        </div>
                        <div class="item">
                            <img src="image/2.jpg" alt="...">
                        </div>
                        <div class="item">
                            <img src="image/3.jpg" alt="...">
                        </div>
                        <div class="item">
                            <img src="image/4.jpg" alt="...">
                        </div>
                    </div>

                </div>
            </div>
            <div class="col-xs-12 col-md-3">
                <div class="newsList">
                    <h3>特惠看</h3>
                    <img src="image/img1.jpg" alt=""/>

                    <div class="newsText">
                        <p><a href="#">[蘇州]2016迷笛電子音樂節(預售)</a></p>

                        <p class="borderLine"><a href="#">穿着花褲子喝着小酒通宵達旦</a></p>

                        <p><a href="#">2016劉若英世界巡迴演唱會</a></p>

                        <p><a href="#">[上海]百老匯經典音樂劇--《獅子王》</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--縮略圖 選項卡 自適應圖片-->
    <div class="container " id="content2">
        <div class="row">
            <div class="col-xs-12 col-md-9">
                <div class="row">
                    <div class="col-sm-6 col-md-3 col-xs-6">
                        <div class="thumbnail">
                            <img src="image/5.jpg" alt="">

                            <div class="caption">
                                <p>[上海]百老匯經典音樂劇《獅子王》</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-3 col-xs-6">
                        <div class="thumbnail">
                            <img src="image/6.jpg" alt="">

                            <div class="caption">
                                <p>[北京]陳奕迅 ANOTHER EASON'S LIFE演唱會北京站</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-3 col-xs-6">
                        <div class="thumbnail">
                            <img src="image/7.jpg" alt="">

                            <div class="caption">
                                <p>[深圳]逃跑計劃2016巡迴演唱會深圳站</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-3 col-xs-6">
                        <div class="thumbnail">
                            <img src="image/8.jpg" alt="">

                            <div class="caption">
                                <p>[北京]BJCC北京漫控潮流博覽會</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-md-3">
                <div class="tabList">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#name1" data-toggle="tab">首頁</a></li>
                        <li><a href="#name2" data-toggle="tab">技能課</a></li>

                    </ul>

                    <!--選項卡面板-->
                    <div class="tab-content myTabContent">
                        <div class="tab-pane fade in active" id="name1"> <!-- fade有淡入淡出的效果-->
                            <img class="img-responsive" src="image/img2.jpg" alt=""/>
                            <div class="newsText">
                                <p class="borderLine"><a href="#"> [哈爾濱]梁靜茹.你的名字是愛情演唱會</a></p>
                                <p><a href="#">[太原]蔡依林2016PLAY世界巡迴演唱會</a></p>
                            </div>
                        </div>
                        <div class="tab-pane fade " id="name2">
                            <img class="img-responsive" src="image/img3.jpg" alt=""/>
                            <div class="newsText">
                                <p><a href="#">[北京]大型實景互動體驗《觸電·鬼吹燈》</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="container" id="content3">
        <a href="#"><img class="img-responsive" src="image/ad1.jpg" alt=""/></a>
    </div>

    <!--選項卡面板 縮略圖 媒體對象-->
    <div class="container" id="content4">
        <div class="col-xs-12 col-md-9">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#name3" data-toggle="tab">演唱會</a></li>
                <li><a href="#name4" data-toggle="tab">體育賽事</a></li>
                <li><a href="#name4" data-toggle="tab">舞臺劇</a></li>
                <li><a href="#name4" data-toggle="tab">兒童親子</a></li>
                <li><a href="#name4" data-toggle="tab">音樂會</a></li>
                <li><a href="#name4" data-toggle="tab">展覽活動</a></li>

            </ul>

            <div class="tab-content myTabContent">
                <div class="tab-pane fade in active" id="name3"> <!-- fade有淡入淡出的效果-->
                    <div class="row">
                        <div class="col-sm-6 col-md-3 col-xs-6">
                            <div class="thumbnail">
                                <img src="image/9.jpg" alt="">

                                <div class="caption">
                                    <p>[蘇州]2016迷笛電子音樂節</p>
                                    <p><span class="myFont">180</span>元起</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-3 col-xs-6">
                            <div class="thumbnail">
                                <img src="image/10.jpg" alt="">

                                <div class="caption">
                                    <p>[深圳]逃跑計劃2016巡迴演唱會深圳站</p>
                                    <p><span class="myFont">180</span>元起</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-3 col-xs-6">
                            <div class="thumbnail">
                                <img src="image/11.jpg" alt="">

                                <div class="caption">
                                    <p>[北京]陳奕迅 ANOTHER EASON'S LIFE演唱會北京站</p>
                                    <p><span class="myFont">380</span>元起</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-3 col-xs-6">
                            <div class="thumbnail">
                                <img src="image/12.jpg" alt="">

                                <div class="caption">
                                    <p>[青島]周杰倫2016世界巡迴演唱會青島站(即將開售)</p>
                                    <p><span class="myFont">380</span>元起</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-3 col-xs-6">
                            <div class="thumbnail">
                                <img src="image/13.jpg" alt="">

                                <div class="caption">
                                    <p>[太原]周杰倫2016世界巡迴演唱會太原站(預售)
                                        280元起</p>
                                    <p><span class="myFont">280</span>元起</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-3 col-xs-6">
                            <div class="thumbnail">
                                <img src="image/14.jpg" alt="">

                                <div class="caption">
                                    <p>[太原]2016 李榮浩「有 理想」世界巡迴演唱會-太原站</p>
                                    <p><span class="myFont">280</span>元起</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-3 col-xs-6">
                            <div class="thumbnail">
                                <img src="image/15.jpg" alt="">

                                <div class="caption">
                                    <p>[深圳]徐佳瑩“日全蝕”深圳演唱會</p>
                                    <p><span class="myFont">280</span>元起</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-3 col-xs-6">
                            <div class="thumbnail">
                                <img src="image/16.jpg" alt="">

                                <div class="caption">
                                    <p>[太原]2016劉若英"Renext 我敢"世界巡迴演唱會太原站</p>
                                    <p><span class="myFont">380</span>元起</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="col-xs-12 col-md-3">
            <h2 class="myh2">歷歷在目- <small>盡享每天不一樣的精彩</small></h2>
            <p>今天共 <span class="color">9</span> 場演出</p>
            <div class="media">
                <div class="media-left">
                    <a href="#">
                        <img class="media-object" src="image/img4.jpg" alt="...">
                    </a>
                </div>
                <div class="media-body">
                    <h4 class="media-heading myh4">[天津]天津中華曲苑相聲專場</h4>
                    <small>2016年1月1日~12月31日</small>
                    <small>天津中華曲苑</small>
                    <p> <span class="color">50</span> 元起</p>
                </div>
            </div>
            <hr/>

            <div class="media">
                <div class="media-left">
                    <a href="#">
                        <img class="media-object" src="image/img5.jpg" alt="...">
                    </a>
                </div>
                <div class="media-body">
                    <h4 class="media-heading myh4">[深圳]劉老根大舞臺深圳站</h4>
                    <small>2016年3月18日~5月31日</small>
                    <small>深圳劉老根大舞臺</small>
                    <p> <span class="color">120</span> 元起</p>
                </div>
            </div>
            <hr/>

            <div class="media">
                <div class="media-left">
                    <a href="#">
                        <img class="media-object" src="image/img6.gif" alt="...">
                    </a>
                </div>
                <div class="media-body">
                    <h4 class="media-heading myh4">[長沙]大兵笑工場相聲晚會</h4>
                    <small>2016年4月18日~6月27日</small>
                    <small>湘江劇院</small>
                    <p> <span class="color">40</span> 元起</p>
                </div>
            </div>
            <hr/>

            <div class="media">
                <div class="media-left">
                    <a href="#">
                        <img class="media-object" src="image/img4.jpg" alt="...">
                    </a>
                </div>
                <div class="media-body">
                    <h4 class="media-heading myh4">[天津]天津中華曲苑相聲專場</h4>
                    <small>2016年1月1日~12月31日</small>
                    <small>天津中華曲苑</small>
                    <p> <span class="color">50</span> 元起</p>
                </div>
            </div>
            <hr/>

            <p><a href="#" style="color: #2ed2c1">查看今日全部演出</a></p>

        </div>
    </div>

    <div class="container" id="content5">
    <div class="col-xs-12 col-md-9">
        <div class=" mytitle clear">
            <h3>場館推薦</h3>
            <a href="#"  style=" color: #2ed2c1;">全部場館</a>
        </div>
        <div class="row">
            <div class="col-sm-12 col-md-6 col-xs-12">
                <div class="thumbnail">
                    <img src="image/img7.jpg" alt="">

                    <div class="caption">
                        <h3>近期演出:</h3>
                        <p><a href="#">[北京]恆源祥戲劇出品大型原創音樂劇《猶太人在上海》</a></p>
                        <p><a href="#">[北京]滬語話劇《永遠的尹雪豔》</a></p>
                        <p><a href="#">北京]恆源祥戲劇出品原創話劇《大商海》</a></p>
                        <p><a href="#">[北京]百老匯經典音樂劇《音樂之聲》中文版</a></p>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-md-6 col-xs-12">
                <div class="thumbnail">
                    <img src="image/img8.jpg" alt="">

                    <div class="caption">
                        <h3>近期演出:</h3>
                        <p><a href="#">[北京]2016如果 田馥甄巡迴演唱會PLUS北京站(售罄)</a></p>
                    </div>
                </div>
            </div>

        </div>

    </div>
    <div class="col-xs-12 col-md-3 myList">
        <h2 class="hotTitle">熱銷榜單</h2>
        <div class="media">
            <div class="media-left">
                <a href="#">
                    <img class="media-object" src="image/img9.jpg" alt="...">
                </a>
            </div>
            <div class="media-body">
                <h4 class="media-heading myh4">[上海]百老匯經典音樂劇《獅子王》</h4>
                <small>2016年1月1日~12月31日</small>
                <small>[華特迪士尼大劇院]</small>
                <p> <span class="color">190</span> 元起</p>
            </div>
        </div>
        <hr/>

        <div class="list">
            <p><a href="#">[北京]陳奕迅 ANOTHER EASON'S LIFE</a></p>
            <p><a href="#">[深圳]逃跑計劃2016巡迴演唱會深圳站</a></p>
            <p><a href="#">[北京]BJCC北京漫控潮流博覽會</a></p>
            <p><a href="#">[貴陽]陳奕迅 ANOTHER EASON'S LIFE演唱會貴陽站</a></p>
            <p><a href="#">[太原]2016岳雲鵬相聲專場太原站</a></p>
        </div>

    </div>
</div>

    <footer id="footer">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-md-4">
                    <div class="mytab">
                        <div class="left">
                            <img src="image/footer_logo.png" alt=""/>
                        </div>
                        <div class="right">
                            <h3>微信電影票官網</h3>
                            <span>在線佔好座，覆蓋影院全國第一</span>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-md-4">
                    <div class="mytab">
                        <div class="left">
                            <img src="image/phoneIcon.png" alt=""/>
                        </div>
                        <div class="right">
                            <h3>微信電影票官網</h3>
                            <span>在線佔好座，覆蓋影院全國第一</span>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-md-4">
                    <div class="mytab">
                        <div class="left">
                            <a href="#"> <img src="image/f_wx.png" alt=""/></a>
                            <a href="#"> <img src="image/f_wpr.png" alt=""/></a>
                        </div>
                        <div class="right">
                            <h3>微信電影票官網</h3>
                            <span>在線佔好座，覆蓋影院全國第一</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <p style="text-align: center;margin-top: 30px;">@2015北京微影時代科技有限公司版權所有　　京ICP備14034406號-2</p>
            </div>
        </div>
    </footer>

</div>


<!--彈出的模態框-->
<div id="mymodal" class="modal fade bs-examlpe-modal-sm"><!-- modal固定佈局，上下左右都是0表示充滿全屏，支持移動設備上使用觸摸方式進行滾動。。-->
    <div class="modal-dialog modal-sm"><!-- modal-dialog默認相對定位，自適應寬度，大於768px時寬度600，居中-->
        <div class="modal-content"><!-- modal-content模態框的邊框、邊距、背景色、陰影效果。-->
            <div class="modal-header">
                <button class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">
                    <img src="image/footer_logo.png" alt=""/>
                    <br/>
                    微信電影演出票官網
                </h4>
            </div>
            <div class="media-body">
                <form action="#">
                    <div class="col-md-10 col-md-offset-1 myMP">
                        <input class="form-control" type="text" placeholder="手機/郵箱/用戶名"/>
                    </div>
                    <div class="col-md-10 col-md-offset-1 myMP">
                        <input class="form-control" type="text" placeholder="密碼"/>
                    </div>
                    <div class="col-md-10 col-md-offset-1 myMP">
                        <input type="checkbox" />下次自動登錄
                    </div>
                    <div class="col-md-12 myB">
                        <input class="btn btn-primary form-control" type="submit" value="登錄"/>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>

</div>



<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>

</body>
</html>

css/myCSS.css

.clear:after{
    content: '';
    display: block;
    clear: both;
}
li{
    list-style: none;
}
body{
    margin-right: 20px;
}
@media (max-width: 768px) {
    .myform{
        display: none;

    }
    .myul{
        float: right;
        position: absolute;
        top: 0px;
        left: 50%;
        font-size: 14px;
        margin-left: 6px;
    }
    .myul li{
        float: left;

    }
    .myul li a{
        font-size: 1em;
        padding: 10px 6px;

    }
}
#body a{
    color: #000017;
}
#body a:hover{
    color: #2ed2c1;

}
#navActive{
    color: #2ed2c1;
}
#header{
    overflow: hidden;
}
#header a{
    color: #fff;
}
#header a:hover{
    color: #2ed2c1;
}

/*模態框*/
.myMP{
    margin: 20px;
}
.myB{
    margin-bottom: 20px;
}

/*下拉菜單*/
.myBtn{
    position: relative;
    top: 14px;
}
#mydropdown a{
    color: #000017;
}

#content1{
    width: 100%;
    height: 100%;
    background: url("../image/bannerbg.png") 0 0 no-repeat;
    margin-top: 70px;
    padding: 60px 20px;
    margin-bottom: 20px;
}
.newsList{
    background: #fff;
    padding: 14px;
}
.newsText{
    margin-top: 20px;
}
.newsList p{
    line-height: 28px;
}
.borderLine{
    padding: 0 0 10px;
    border-bottom: 1px dashed #ccc;
}
.borderLine a{
    color: #2ed2c1;

}
#content1 a:hover{
    color: #2ed2c1;
}

.tabList{
    border: 1px solid #ccc;
    padding: 10px;
}
.myTabContent{
    margin-top: 20px;
}

#content4{
    margin-top: 20px;
}
.myFont{
    color:#2ed2c1 ;
    font-size: 30px;

}
.color{
    color:#2ed2c1 ;
}
.myh2{
    font-size: 20px;
    height: 50px;
    line-height: 50px;
    background: #2ed2c1;
    color: #fff;
    padding: 0px 4px;
}
.myh2 small{
    color: #fff;
}
.myh4 {
    font-size: 14px;
    line-height: 20px;
}
.mytitle h3{
    float: left;
}

.mytitle a{
    float: right;
    margin-top: 10px;
    margin-right: 20px;

}

.list p{
    border-bottom: 1px dashed #ccc;
    padding-bottom: 6px;
}
.myList{
    border: 1px solid #ccc;

}
.hotTitle{
    font-size: 20px;
    height: 50px;
    line-height: 50px;
    padding: 0 4px;
    border-bottom: 1px solid #ccc;
}
#content5{
    margin-top: 20px;
}

#footer{
    background: #252525;
    color: #777;
    height: 100%;
    padding: 20px;
    margin-top: 20px;
}
.mytab{
    margin-top: 10px;
}
.left{
    float: left;
    margin-top: 20px;
    margin-left: 20px;
}
.left img{
    margin-left: 10px;
}
.right{
    float: right;
}

超全面的測試IT技術課程，0元立即加入學習！有需要的朋友戳：

騰訊課堂測試技術學習地址

歡迎轉載，但未經作者同意請保留此段聲明，並在文章頁面明顯位置給出原文鏈接。

基於HTML5的移動Web應用——Bootstrap 樣式案例：製作微票兒首頁

製作微票兒首頁

階段1：製作微票兒首頁響應導航

階段2：製作微票兒首頁焦點圖和特惠看模塊

階段3：製作微票兒首頁優惠演出和首頁演唱會選項卡模塊

階段4：製作微票兒各種演唱會演出和歷歷在目模塊

階段5：製作微票兒場館推薦和熱銷榜單模塊

階段6：製作微票兒底部

MySQL數據庫——常用函數

MySQL數據庫——約束類型

MySQL數據庫——查詢數據案例（2）

MySQL數據庫——數據庫維護

理解Spring中依賴注入（DI）與控制反轉（IoC）

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

linux以太網驅動總結