给自己放了一个月的假,闲着其实也挺无聊,休息的差不多,也是时候重新回来写代码了,试了一下 bootstrap,挺好的东西,山寨了一个精简微博,效果如图
表示其中头像使用的是 埕cici 的头像,因为实在欢乐,有助于身心健康,所以拿过来用了,哈哈
下面看代码,其实代码结构很清晰,文档的话看这里,http://twitter.github.com/boot…
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>山寨牌微博</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <script src="js/bootstrap.min.js"></script> <style type="text/css"> body { padding-top: 60px; } .weibo-content-li { margin-top: 30px; padding-bottom: 20px; border-bottom: 1px solid #eee; } .weibo-content-avatar { width:120px; } .sidebar-nav { margin-top:50px; } </style> </head> <body> <div class="navbar navbar-fixed-top navbar-inverse"> <div class="navbar-inner"> <div class="container"> <a href="#" class="brand">山寨牌微博</a> <ul class="nav"> <li class="active"><a href="#">首页</a></li> <li><a href="#">广场</a></li> </ul> <form class="navbar-search"> <input type="text" class="search-query" placeholder="搜索" /> </form> <ul class="nav pull-right"> <li><a href="#">ZRJ</a></li> <li><a href="#">退出</a></li> </ul> </div> </div> </div> <div class="container"> <div class="row"> <div class="span7 offset1"> <form> <textarea class="span7"></textarea> <div class="row"> <input type="submit" class="btn btn-primary pull-right" value="发表微博" /> </div> </form> <ul class="unstyled"> <li class="weibo-content-li"> <div class="row"> <div class="span1"> <img src="avatar.jpg" class="weibo-content-avatar" /> </div> <div class="span6"> <p><a href="#">@ZRJ</a>:this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, </p> <div> <span><a href="#">2012-11-16 12:52:54</a> | 来自<a href="#">手机客户端</a></span> <span class="pull-right"><a href="#">转发(3)</a> | <a href="#">收藏</a> | <a href="#">评论(2)</a></span> </div> </div> </div> </li> <li class="weibo-content-li"> <div class="row"> <div class="span1"> <img src="avatar.jpg" class="weibo-content-avatar" /> </div> <div class="span6"> <p><a href="#">@ZRJ</a>:this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, </p> <div> <span><a href="#">2012-11-16 12:52:54</a> | 来自<a href="#">手机客户端</a></span> <span class="pull-right"><a href="#">转发(3)</a> | <a href="#">收藏</a> | <a href="#">评论(2)</a></span> </div> </div> </div> </li> <li class="weibo-content-li"> <div class="row"> <div class="span1"> <img src="avatar.jpg" class="weibo-content-avatar" /> </div> <div class="span6"> <p><a href="#">@ZRJ</a>:this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, this is a test, </p> <div> <span><a href="#">2012-11-16 12:52:54</a> | 来自<a href="#">手机客户端</a></span> <span class="pull-right"><a href="#">转发(3)</a> | <a href="#">收藏</a> | <a href="#">评论(2)</a></span> </div> </div> </div> </li> </ul> <div class="pagination pagination-centered"> <ul> <li><a href="#">←</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="#">→</a></li> </ul> </div> </div> <div class="span2 offset1"> <img src="avatar.jpg" alt="avatar" /> <ul class="nav nav-pills nav-stacked sidebar-nav"> <li class="active"><a href="#">我的首页</a></li> <li><a href="#">@提及我</a></li> <li><a href="#">我的评论</a></li> <li><a href="#">我的收藏</a></li> </ul> </div> </div> </div> </body> </html>