bootstrap 上手

Fri, 16 Nov 2012 13:19:26 +0800

给自己放了一个月的假，闲着其实也挺无聊，休息的差不多，也是时候重新回来写代码了，试了一下 bootstrap，挺好的东西，山寨了一个精简微博，效果如图

表示其中头像使用的是埕cici 的头像，因为实在欢乐，有助于身心健康，所以拿过来用了，哈哈

下面看代码，其实代码结构很清晰，文档的话看这里，http://twitter.github.com/bootstrap/base-css.html

<!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>

Bootstrap on ZRJ | 学习笔记

bootstrap 上手