亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 35
粉絲 0
評(píng)論 0
訪問量 40009
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
bootstrap響應(yīng)式布局-2018-9-22
THPHP
原創(chuàng)
985人瀏覽過

html代碼：

實(shí)例

<!doctype html>
<html lang="en">
<head>
    <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">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="lib/css/bootstrap.css">
    <link rel="stylesheet" href="lib/css/style.css">
    <link rel="stylesheet" href="lib/css/media.css">
    <title>首頁</title>
</head>
<body>
<!-- 頭部 -->
<div class="header">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
                <!-- 導(dǎo)航欄目折疊 -->
                <div class="nav navbar-default">
                    <div class="navbar-header">
                        <button class="navbar-toggle" data-toggle="collapse" data-target="#responsive-navbar"
                                aria-haspopup="false" aria-expanded="false">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                </div>
                <!--導(dǎo)航欄目-->
                <div class="collapse navbar-collapse" id="responsive-navbar">
                    <ul class="nav nav-pills nav-top">
                        <li  class="active">
                            <a href="#">首頁</a>
                        </li>
                        <li>
                            <a href="#">WEB前端</a>
                        </li>
                        <li>
                            <a href="#">JavaScript</a>
                        </li>
                        <li>
                            <a href="#">jQuery</a>
                        </li>
                        <li>
                            <a href="#">PHP</a>
                        </li>
                        <li>
                            <a href="#">MySQL</a>
                        </li>
                    </ul>
                    <!-- 搜索框 -->
                    <form class="navbar-form navbar-right" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="php學(xué)習(xí)路線">
                            <button type="submit" class="btn btn-default" style="outline:medium;">搜一搜</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 內(nèi)容區(qū) -->
<div class="subject">
    <div class="container margin-top">
        <div class="row">
            <!-- 內(nèi)容區(qū) -->
            <div class="col-xs-8 col-sx-8 col-md-8 content_text">
                <!-- 網(wǎng)站介紹 -->
                <div class="jumbotron">
                    <h1>Hello, world!</h1>
                    <p>...</p>
                    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
                </div>
                <!-- 文章區(qū)塊 -->
                <div class="content">
                    <!-- 內(nèi)容介紹 -->
                    <div class="text">
                        <!-- 標(biāo)題 -->
                        <h2 class="page-header"><a href="#">網(wǎng)站分頁:上一頁、下一頁，尾頁、首頁、中間的頁數(shù)-2018-9-20</a></h2>
                        <!-- 圖片 -->
                        <div class="thumbnail">
                            <a href=""><img src="inc/images/1.jpg" alt=""></a>
                        </div>
                        <!-- 簡介 -->
                        <div class="text-title">
                            <span class="alert alert-warning" role="alert">
                                ：上一頁、下一頁，尾頁、首頁、中間的頁數(shù)網(wǎng)站分頁：上一頁
                                、下一頁，尾頁、首頁、中間的頁數(shù)網(wǎng)站分頁：上一
                                、下一頁，尾頁、首頁、中間的頁數(shù)網(wǎng)站分頁：
                            </span>
                            <div class="tag">
                                <strong class="label label-default">2018年09月20日</strong>
                                <div class="tag_a">
                                    <a href="#" class="label label-primary">css</a>
                                    <a href="#" class="label label-success">html</a>
                                    <a href="#" class="label label-info">php</a>
                                    <a href="#" class="label label-warning">HTML5</a>
                                </div>
                            </div>
                            <a href="#" class="btn btn-default btn-a">閱讀全文</a>
                        </div>
                    </div>
                </div>
                <!-- 上一頁，下一頁  -->
                <div class="title">
                    <ul class="pager">
                        <li class="previous">
                            <a href="#">
                                <span aria-hidden="true">← upper</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="#">6</a></li>
                        <li><a href="#">7</a></li>
                        <li class="next">
                            <a href="#">
                                <span aria-hidden="true">lower →</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 側(cè)邊欄 -->
            <div class="col-xs-4 col-sx-4 col-md-4">
                <div class="side">
                    <!-- 最新推薦 -->
                    <div class="recommend">
                        <h2><span class="label label-default">最新推薦</span></h2>
                        <ul class="ul">
                            <li class="alert alert-success">
                                <span class="label label-primary">php</span>
                                <p><a href="#">2018 年，AI 行業(yè)持續(xù)走向技術(shù)落地和深入商業(yè)化的一年。 回顧上半年，科技巨頭們?cè)跈M向建設(shè)自己的 AI 技術(shù)平臺(tái)時(shí)，</a></p>
                            </li>
                            <li class="alert alert-success">
                                <span class="label label-primary">php</span>
                                <p><a href="#">2018 年，AI 行業(yè)持續(xù)走向技術(shù)落地和深入商業(yè)化的一年。 回顧上半年，科技巨頭們?cè)跈M向建設(shè)自己的 AI 技術(shù)平臺(tái)時(shí)，</a></p>
                            </li>
                            <li class="alert alert-success">
                                <span class="label label-primary">php</span>
                                <p><a href="#">2018 年，AI 行業(yè)持續(xù)走向技術(shù)落地和深入商業(yè)化的一年。 回顧上半年，科技巨頭們?cè)跈M向建設(shè)自己的 AI 技術(shù)平臺(tái)時(shí)，</a></p>
                            </li>
                            <li class="alert alert-success">
                                <span class="label label-primary">php</span>
                                <p><a href="#">2018 年，AI 行業(yè)持續(xù)走向技術(shù)落地和深入商業(yè)化的一年。 回顧上半年，科技巨頭們?cè)跈M向建設(shè)自己的 AI 技術(shù)平臺(tái)時(shí)，</a></p>
                            </li>
                            <li class="alert alert-success">
                                <span class="label label-primary">php</span>
                                <p><a href="#">2018 年，AI 行業(yè)持續(xù)走向技術(shù)落地和深入商業(yè)化的一年。 回顧上半年，科技巨頭們?cè)跈M向建設(shè)自己的 AI 技術(shù)平臺(tái)時(shí)，</a></p>
                            </li>
                            <li class="alert alert-success">
                                <span class="label label-primary">php</span>
                                <p><a href="#">2018 年，AI 行業(yè)持續(xù)走向技術(shù)落地和深入商業(yè)化的一年。 回顧上半年，科技巨頭們?cè)跈M向建設(shè)自己的 AI 技術(shù)平臺(tái)時(shí)，</a></p>
                            </li>
                            <li class="alert alert-success">
                                <span class="label label-primary">php</span>
                                <p><a href="#">2018 年，AI 行業(yè)持續(xù)走向技術(shù)落地和深入商業(yè)化的一年。 回顧上半年，科技巨頭們?cè)跈M向建設(shè)自己的 AI 技術(shù)平臺(tái)時(shí)，</a></p>
                            </li>
                            <li class="alert alert-success">
                                <span class="label label-primary">php</span>
                                <p><a href="#">2018 年，AI 行業(yè)持續(xù)走向技術(shù)落地和深入商業(yè)化的一年。 回顧上半年，科技巨頭們?cè)跈M向建設(shè)自己的 AI 技術(shù)平臺(tái)時(shí)，</a></p>
                            </li>
                            <li class="alert alert-success">
                                <span class="label label-primary">php</span>
                                <p><a href="#">2018 年，AI 行業(yè)持續(xù)走向技術(shù)落地和深入商業(yè)化的一年。 回顧上半年，科技巨頭們?cè)跈M向建設(shè)自己的 AI 技術(shù)平臺(tái)時(shí)，</a></p>
                            </li>
                            <li class="alert alert-success">
                                <span class="label label-primary">php</span>
                                <p><a href="#">2018 年，AI 行業(yè)持續(xù)走向技術(shù)落地和深入商業(yè)化的一年。 回顧上半年，科技巨頭們?cè)跈M向建設(shè)自己的 AI 技術(shù)平臺(tái)時(shí)，</a></p>
                            </li>
                            <li class="alert alert-success">
                                <span class="label label-primary">php</span>
                                <p><a href="#">2018 年，AI 行業(yè)持續(xù)走向技術(shù)落地和深入商業(yè)化的一年。 回顧上半年，科技巨頭們?cè)跈M向建設(shè)自己的 AI 技術(shù)平臺(tái)時(shí)，</a></p>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<!-- 底部 -->
<div class="footer">
    <div class="container ">
        <!-- 友鏈 -->
        <div class="chain">
            <nav class="alert alert-warning">
                <a href="#" class="alert alert-warning">php中文網(wǎng)</a>
                <a href="#" class="alert alert-warning">php中文網(wǎng)</a>
                <a href="#" class="alert alert-warning">php中文網(wǎng)</a>
            </nav>
        </div>
    </div>
    <!-- 版本信息 -->
    <div class="version navbar-inverse">
        <p><a href="#">PHP中文網(wǎng)：獨(dú)家原創(chuàng)，永久免費(fèi)的在線php視頻教程，php技術(shù)學(xué)習(xí)陣地！</a></p>
        <p><a href="#">ipnx.cn  All Rights Reserved | 皖B2-20150071-9 Copyright 2014-2017</a></p>
    </div>
</div>

<script src="lib/js/jquery.js"></script>
<script src="lib/js/bootstrap.js"></script>
</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

css代碼：

實(shí)例

/******** 默認(rèn)樣式  *******************************/
html{background:#f6f6f6;}
a:hover{text-decoration: none;}
ul{margin:0;padding:0;}
li{list-style:none;}

/******** 頭部  *******************************/
.nav-tabs{
    border:none;
    float:left;
    margin-top: 10px;
}
.navbar-right{
    margin-top:10px;
}
.nav-top{
    float: left;
}
.navbar-header{
margin-top: 10px;
}
.btn-default{
float: right;
}
.btn-a{
    width:100%;
}
.nav-tabs > li > a{
border:none;
}
.nav-tabs > li.active > a{
border:none;
}
.nav-tabs > li.active > a:hover{
border:none;
}
.form-control:focus{
border:1px solid #ccc;
box-shadow:none;
}
/******** 文章區(qū)塊  *******************************/
.margin-top{
    margin-top:40px;
}
.content{
    width: 100%;
    background:#fff;
    border:1px solid #eee;
    border-radius:10px;
    margin-bottom: 80px;
}
.content .text .strong{
    line-height:35px;
    padding-left:20px;
    color:#999;
}
.content .text h2 {
    text-align: center;
    font-size:20px;
    margin:30px 0;
}
.content .text .text-title{
    padding:0 20px;
}
.content .text .text-title > span{
    margin-left:35px;
    line-height:30px;
    font-size:16px;
    display: inline-block;
}
.content .text .text-title a{
    display: block;
}
.content .text .text-title .tag{
    line-height:35px;
    margin-bottom: 20px;
}
.content .text .text-title .tag strong{
    color:#fff;
    font-size:14px;
    border-radius:5px;
}
.content .text .text-title .tag>.tag_a{
    float:right;
}
.content .text .text-title .tag>.tag_a >a{
    margin-left:5px;
    line-height:30px;
    display: inline-block;
    color:#fff;
    border-radius: 10px;
}
.thumbnail{
    border:none;
}


/******** 上一頁，下一頁  *******************************/
.title .pager{
    margin-left:10px;
}
.pager .next > a{
    margin-right:10px;
}

/******** 側(cè)邊欄  *******************************/
.side{
    width:100%;
    height:500px;
}
/******** 最新推薦  *******************************/
.recommend{
    width:100%;
    overflow: hidden;
    border: 1px solid #eee;
    border-bottom: none;
    border-radius:8px;
}
.recommend h2{
    margin:0 10px;
}
.label-default{
    font-size:16px;
}
.recommend .ul{
    margin-top:20px;
    padding:0 10px;
    height: 465px;
    overflow: hidden;
}
.recommend .ul li {
    overflow:hidden;
    margin-bottom: 5px;
    padding: 10px;
}
.recommend .ul li .label-primary{
    margin-right:8px;
    float: left;
}
.recommend .ul li p{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.recommend .ul li p a{
    color:#555;
}
 .recommend .ul li p a:hover{
     color:#23527c
 }
/******** 底部 *******************************/

.footer{
    width:100%;
    height:130px;
    background-color: #337ab7;
    margin-top:20px;
    padding-top:10px;
}
.footer .version{
    text-align:center;
    padding-top:10px;
}
.footer .version p{
    font-size: 14px;
    line-height:30px;
    margin-bottom: 0;
}
.footer .version p a{
    color:#fff;

}

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

媒體查詢css文件：

實(shí)例

/******** 媒體設(shè)備設(shè)置  *******************************/
/********  max-width: 991   *******************************/
@media (max-width: 991px){
    .navbar-form .form-control{
        width:145px;
    }
}

/********  max-width: 768   *******************************/
@media (max-width: 768px){
    .side{
        display: none;
    }
    .content_text{
        width:100%;
    }
    .btn-default{
        float: none;
    }
    .side{
        display: none;
    }
    .content_text{
        width:100%;
    }
    .btn-default{
        display: none;
    }
}
/******** max-width: 767px *******************************/
@media (max-width: 767px){
    .nav-tabs{
        padding-top:10px;
        margin:0 10px;
        float: none;
    }
    .navbar-form .form-control{
        width: 70%;
        float: left;
    }
    .navbar-form .form-group{
        width:100%;
        float:left;
    }
    .navbar-default{
        float: right;
    }
    .btn-default{
        display:block;
    }
}

/******** max-width: 600 *******************************/
@media (max-width: 600px){
    .content .text .text-title .tag strong{
        display: none;
    }
    .content .text .text-title .tag>.tag_a{
        float: none;
    }
}

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例


批改狀態(tài)：未批改

老師批語：
本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)