利用bootstrap，我们可以轻松搭建博客页面模板。
代码如下：
实例
<!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"> <title>Document</title> <link rel="stylesheet" href="../lib/dist/css/bootstrap.css"> </head> <body> <div class="container"> <div class="blog-header"> <h1 class="blog-title">EmonXu的博客</h1> <p class="lead blog-description">PHP是最好的程序语言</p> </div> <div class="row"> <div class="col-sm-8 blog-main"> <div class="blog-post"> <h2 class="blog-post-title">bootstrap的简单应用（1）</h2> <p class="blog-post-meta">January 1, 2018 by <a href="#">Emon</a></p> <p>Bootstrap （当前版本 v3.3.7）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。继续阅读下面的内容，看看哪种方式适合你的需求吧。</p> </div><!-- /.blog-post --> <div class="blog-post"> <h2 class="blog-post-title">bootstrap的简单应用（2）</h2> <p class="blog-post-meta">January 1, 2018 by <a href="#">Emon</a></p> <p>Bootstrap （当前版本 v3.3.7）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。继续阅读下面的内容，看看哪种方式适合你的需求吧。</p> </div><!-- /.blog-post --> <div class="blog-post"> <h2 class="blog-post-title">bootstrap的简单应用（3）</h2> <p class="blog-post-meta">January 1, 2018 by <a href="#">Emon</a></p> <p>Bootstrap （当前版本 v3.3.7）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。继续阅读下面的内容，看看哪种方式适合你的需求吧。</p> </div><!-- /.blog-post --> <div class="blog-post"> <h2 class="blog-post-title">bootstrap的简单应用（4）</h2> <p class="blog-post-meta">January 1, 2018 by <a href="#">Emon</a></p> <p>Bootstrap （当前版本 v3.3.7）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。继续阅读下面的内容，看看哪种方式适合你的需求吧。</p> </div><!-- /.blog-post --> <nav> <ul class="pager"> <li><a href="#">上页</a></li> <li><a href="#">下页</a></li> </ul> </nav> </div><!-- /.blog-main --> <div class="col-sm-3 col-sm-offset-1 blog-sidebar"> <div class="sidebar-module sidebar-module-inset"> <h4>关于</h4> <p>本博客用于记录学习笔记，代码及文字如有侵权，请联系我，谢谢。</p> </div> <div class="sidebar-module"> <h4>Archives</h4> <ol class="list-unstyled"> <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="#">九月</a></li> <li><a href="#">十月</a></li> <li><a href="#">十一月</a></li> <li><a href="#">十二月</a></li> </ol> </div> <div class="sidebar-module"> <h4>友情链接</h4> <ol class="list-unstyled"> <li><a href="#">PHP中文网</a></li> <li><a href="#">bootstrap中文网</a></li> <li><a href="#">JavaScript中文网</a></li> </ol> </div> </div><!-- /.blog-sidebar --> </div><!-- /.row --> </div><!-- /.container --> <footer class="blog-footer" style="text-align: center"> <p>技术支持 <a href="http://">PHP中文网</a> by <a href="https://">@emonxu</a>.</p> <p> <a href="#">回到顶部</a> </p> </footer> </div> <script src="../lib/jquery.js"></script> <script src="../lib/dist/js/bootstrap.js"></script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
