模板制作

服务器测试地址：http://116.196.116.164/24/24/

index.php代码

<?php include 'header.php' ?>
<div class="row">
        <div class="col-md-8">
            <div class="jumbotron">
                <h1>Welcome PHP.CN</h1>
                <p>php中文网(php.cn)提供大量免费、原创、高清的php视频教程,在学习的时候可以直接在线修改示例,查看php执行效果是本站的一大特色,php从入门到精通，一站式php自学平台</p>
                <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="list-group">
                <a href="#" class="list-group-item active">
                    <h4 class="list-group-item-heading">PHP共享内存使用详解
                    </h4>
                    <p class="list-group-item-text">1、shmop 编译时需要开启 --enable-shmop 参数<br>2、用 Semaphore 扩展中的 sem 类函数 （用起来更方便，类似 key-value 格式）

                    </p>
                </a>
            </div>
            <div class="list-group">
                <a href="#" class="list-group-item ">
                    <h4 class="list-group-item-heading">php简单的登陆检验类
                    </h4>
                    <p class="list-group-item-text">本文主要介绍了php实现的简单检验登陆类，可实现基本的php数据库查询及密码匹配的功能。希望对大家有所帮助。
                    </p>
                </a>
            </div>
            <div class="list-group">
                <a href="#" class="list-group-item ">
                    <h4 class="list-group-item-heading">php中$$的详解
                    </h4>
                    <p class="list-group-item-text">有时候使用可变变量名是很方便的。就是说，一个变量的变量名可以动态的设置和使用。一个普通的变量通过声明来设置，例如</p>
                </a>
            </div>

        </div>
    </div>
    <div class="row">
        <div class="col-md-8">
            <div class="media">
                <div class="media-left">
                    <a href="#">
                        <img class="media-object" width="150" src="1.jpg" alt="...">
                    </a>
                </div>
                <div class="media-body">
                    <h4 class="media-heading">Css3入门视频教程
                    </h4>
                    《Css3入门视频教程》本课程是由传智播客录制，CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来

                </div>
            </div>
            <div class="media">
                <div class="media-left">
                    <a href="#">
                        <img class="media-object" width="150" src="2.jpg" alt="...">
                    </a>
                </div>
                <div class="media-body">
                    <h4 class="media-heading">
                        vue.js入门视频教学</h4>
                    《vue.js入门视频教学》Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件
                </div>
            </div>
            <div class="media">
                <div class="media-left">
                    <a href="#">
                        <img class="media-object" width="150" src="3.jpg" alt="...">
                    </a>
                </div>
                <div class="media-body">
                    <h4 class="media-heading">

                        MUI框架基础视频教程</h4>
                    《MUI框架基础视频教程》MUI，是一款可用开发高性能App的框架，也是目前最接近原生App效果的框架，可以有效解决HTML5原生开发中遇到的部分问题，同时体积也小
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <ul class="list-group">
                <li class="list-group-item active">
                    <span class="badge">16</span>
                    ①&nbsp;PHP 零基础入门教程
                </li>
            </ul>
            <ul class="list-group">
                <li class="list-group-item active" >
                    <span class="badge">17</span>
                    ②&nbsp;兄弟连新版PHP视频教程
                </li>
            </ul>
            <ul class="list-group">
                <li class="list-group-item active">
                    <span class="badge">18</span>
                    ③&nbsp;Laravel5.2博客实战视频教程
                </li>
            </ul>
            <ul class="list-group">
                <li class="list-group-item active">
                    <span class="badge">19</span>
                    ④&nbsp;《PHP工具箱》最新教学视频
                </li>
            </ul>
            <ul class="list-group">
                <li class="list-group-item active">
                    <span class="badge">20</span>
                    ⑤&nbsp;微信小程序开发文档
                </li>
            </ul>
        </div>
    </div>
    <div class="row ">
        <?php include 'footer.php' ?>

header代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.css">
    <script src="../lib/jquery-3.2.1.min.js"></script>
    <script src="../lib/bootstrap/js/bootstrap.js"></script>

    <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">
    <title>Doctor Wu 's Blog</title>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <nav class="navbar navbar-inverse">
                <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
 <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="#">Dr.Wu</a>
                    </div>

                    <!-- Collect the nav links, forms, and other content for toggling -->
 <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>


                        </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="#">签到</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">会员中心 <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">课程</a></li>
                                    <li><a href="#">社区</a></li>
                                    <li><a href="#">博客</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#">收入</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div><!-- /.navbar-collapse -->
 </div><!-- /.container-fluid -->
 </nav>
        </div>
    </div>

footer代码

<div class="col-md-12 ">
    <nav class="navbar navbar-inverse ">
        <ul class="nav navbar-nav ">
            <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>
            <li><a href="#">广告服务</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">赞助与捐赠</a></li>
            <li><a href="#">Copyright 2014-2017 http://www.php.cn/ All Rights Reserved | 皖B2-20150071-9</a></li>

        </ul>
</div>
</div>

</div>
</body>
</html>