最终效果：
QQ截图20170122163840.jpg
HTML代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Laravel-简洁、优雅</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/app.css" rel="stylesheet">
<link href="css/fonts.css" rel="stylesheet">
<link href="css/style-ext.css" rel="stylesheet">
</head>
<body>
<!--广告图区块-->
<div class="banner">
<div class="jumbotron jumbotron-bg">
<h1>为 WEB 艺术家创造的 PHP 框架。</h1>
<div class="subnav-ext">
<a class="btn btn-default" href="#">5.1 中文文档</a>
<a class="btn btn-default" href="#">5.0 中文文档</a>
<a class="btn btn-default" href="#">4.2 中文文档</a>
<a class="btn btn-default" href="#">4.1 中文文档</a>
<a class="btn btn-default" href="#">Lumen 中文文档</a>
<a class="btn btn-default" href="#">问答社区</a>
</div>
</div>
</div>
<!--导航区块-->
<div class="navpage">
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-collapse collapse ">
<ul class="nav navbar-nav" style="clear: both">
<li class="active"><a class="navitme" href="#">首页</a> </li>
<li><a class="navitme" href="#">Lumen</a> </li>
<li><a class="navitme" href="#">问答社区</a> </li>
<li><a class="navitme" href="#">中文文档</a> </li>
<li><a class="navitme" href="#">下载离线文档</a> </li>
<li><a class="navitme" href="#">API</a> </li>
<li><a class="navitme" href="#">PHP中文手册</a> </li>
<li><a class="navitme" href="#">Composer</a></li>
</ul>
</div>
</div>
</div>
</div>
<!--内容区块-->
<div class="content-wrap">
<div class="container">
<div class="row">
<div class="col-md-8 content-main">
<div class="content-main-li">
<div class="article">
<h2>Laravel 之父：让 Laravel、Symfony、 Zend 来一场公平的性能测试</h2>
<p class="author">
<span>作者：<b class="font-red">王赛</b> </span>•
<time>2017年1月13日</time>
</p>
<p class="text-img"> </p>
<p class="text-content">网上充斥着各式各样的 PHP 框架性能对比的文章。然而，他们总是把“苹果”和“橘子”做对比（看上去有点儿像，都是圆的，但其实不是一码事）。这次，我将着重对 Laravel、Symfony 和 Zend 这三个框架做性能对比，并且还要说明为什么这三个框架总是被错误的进行比较。 我给的对比结果你不必全信。读完这篇文章之后，</p>
<p class="text-btn"><a class="btn btn-primary" href="#">阅读文章</a> </p>
<hr>
<div class="articleico">
<span class="glyphicon glyphicon-folder-open btn-xs"></span>
<a href="#">新版本发布</a>，<a href="#">Laravel 5.2</a>
</div>
</div>
</div>
<div class="content-main-li">
<div class="article">
<h2>Laravel 之父：让 Laravel、Symfony、 Zend 来一场公平的性能测试</h2>
<p class="author">
<span>作者：<b class="font-red">王赛</b> </span>•
<time>2017年1月13日</time>
</p>
<p class="text-img"> </p>
<p class="text-content">网上充斥着各式各样的 PHP 框架性能对比的文章。然而，他们总是把“苹果”和“橘子”做对比（看上去有点儿像，都是圆的，但其实不是一码事）。这次，我将着重对 Laravel、Symfony 和 Zend 这三个框架做性能对比，并且还要说明为什么这三个框架总是被错误的进行比较。 我给的对比结果你不必全信。读完这篇文章之后，</p>
<p class="text-btn"><a class="btn btn-primary" href="#">阅读文章</a> </p>
<hr>
<div class="articleico">
<span class="glyphicon glyphicon-folder-open btn-xs"></span>
<a href="#">新版本发布</a>，<a href="#">Laravel 5.2</a>
</div>
</div>
</div>
</div>
<div class="col-md-4 sidebar">
<div class="sidebar-li">
<div class="sidebar-li-title">
社区
</div>
<div class="sidebar-li-content">
<p>QQ群：462694081<p>
<p class="font-red"><span class="glyphicon glyphicon-comment"></span> 问答社区</p>
</div>
</div>
<div class="sidebar-li">
<div class="sidebar-li-title">
下载
</div>
<div class="sidebar-li-content">
<button class="btn btn-primary btn-block" type="button">Laravel & Lumen 一键安装包下载</button>
</div>
</div>
<div class="sidebar-li">
<div class="sidebar-li-title">
标签云
</div>
<div class="sidebar-li-content tag-cloud">
<a href="#" class="btn-xs">Laravel 5.2</a>
<a href="#" class="btn-xs">Spark</a>
<a href="#" class="btn-xs">镜像</a>
<a href="#" class="btn-xs">新版本发布</a>
<a href="#" class="btn-xs">LTS</a>
<a href="#" class="btn-xs">微框架</a>
<a href="#" class="btn-xs">Lumen</a>
<a href="#" class="btn-xs">命名空间</a>
<a href="#" class="btn-xs">镜像</a>
<a href="#" class="btn-xs">Laravel4</a>
<a href="#" class="btn-xs">Whoops</a>
<a href="#" class="btn-xs">Event</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--页脚区块-->
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="recent">
<div class="sidebar-li-title">
最近更新
</div>
<div class="sidebar-li-content">
<dl>
<dt>Laravel 之父：让 Laravel、Symfony、 Zend 来一场公平的性能测试</dt>
<dd>2017年1月13日</dd>
</dl>
<dl>
<dt>Laravel 之父：让 Laravel、Symfony、 Zend 来一场公平的性能测试</dt>
<dd>2017年1月13日</dd>
</dl>
</div>
</div>
</div>
<div class="col-md-4">
<div class="tagcould">
<div class="sidebar-li-title">
标签云
</div>
<div class="sidebar-li-content tag-cloud">
<a href="#" >Laravel 5.2</a>
<a href="#">Spark</a>
<a href="#" >镜像</a>
<a href="#" >新版本发布</a>
<a href="#">LTS</a>
<a href="#" >微框架</a>
<a href="#">Lumen</a>
<a href="#" >命名空间</a>
<a href="#" >镜像</a>
<a href="#">Laravel4</a>
<a href="#">Whoops</a>
<a href="#" >Event</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="friend">
<div class="sidebar-li-title">
合作伙伴
</div>
<div class="sidebar-li-content tag-cloud">
<a href="#" >Bootstrap中文网</a>
<a href="#">Spark</a>
<a href="#">镜像</a>
<a href="#">新版本发布</a>
<a href="#">LTS</a>
<a href="#">微框架</a>
<a href="#">Lumen</a>
<a href="#">命名空间</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--版权区块-->
<div class="copyright">
<div class="container">
<span>Copyright © Laravel 中文网</span> |
<span>京ICP备11008151号</span> |
<span>京公网安备11010802014853</span>
</div>
</div>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
Bootstrap模板下载
http://pan.baidu.com/s/1dECu1Qp
网友评论