给自己放了一个月的假,闲着其实也挺无聊,休息的差不多,也是时候重新回来写代码了,试了一下 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>
