bootstrap.文章列表带头像及操作

<!DOCTYPE html>
<html>
<head>
<title>Unicorn Admin</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="http://wbpreview.com/previews/WB0F35928/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://wbpreview.com/previews/WB0F35928/css/bootstrap-responsive.min.css" />
<link rel="stylesheet" href="http://wbpreview.com/previews/WB0F35928/css/fullcalendar.css" />
<link rel="stylesheet" href="http://wbpreview.com/previews/WB0F35928/css/unicorn.main.css" />
<link rel="stylesheet" href="http://wbpreview.com/previews/WB0F35928/css/unicorn.grey.css" class="skin-color" />
<style>
.NewsContent {
margin: 10px 0;
font-family: 微软雅黑,Verdana,sans-serif,宋体;
font-size: 10.5pt;
}
.NewsContent img{
float: left;
margin: 0 10 10px 10px;
border: 1px solid #CCC;
background: #F6F6F6;
padding: 2px;
}
</style>
</head>
<body>
<div id="content">
<div class="container-fluid">
<div class="row-fluid">
<div class="span6">
<div class="widget-box">
<div class="widget-title"><span class="icon"><i class="icon-file"></i></span><h5>Recent Posts</h5><span title="54 total posts" class="label label-info tip-left">54</span></div>
<div class="widget-content nopadding">
<ul class="recent-posts">
<li>
<div class="user-thumb">
<img width="40" height="40" alt="User" src="img/demo/av2.jpg">
</div>
<div class="article-post">
<span class="user-info"> By: neytiri on 2 Aug 2012, 09:27 AM, IP: 186.56.45.7 </span>
<p>
<a href="#">Vivamus sed auctor nibh congue, ligula vitae tempus pharetra...</a>
</p>
<a href="#" class="btn btn-primary btn-mini">Edit</a> <a href="#" class="btn btn-success btn-mini">Publish</a> <a href="#" class="btn btn-danger btn-mini">Delete</a>
</div>
</li>
<li>
<div class="user-thumb">
<img width="40" height="40" alt="User" src="img/demo/av3.jpg">
</div>
<div class="article-post">
<span class="user-info"> By: john on on 24 Jun 2012, 04:12 PM, IP: 192.168.24.3 </span>
<p>
<a href="#">Vivamus sed auctor nibh congue, ligula vitae tempus pharetra...</a>
</p>
<a href="#" class="btn btn-primary btn-mini">Edit</a> <a href="#" class="btn btn-success btn-mini">Publish</a> <a href="#" class="btn btn-danger btn-mini">Delete</a>
</div>
</li>
<li>
<div class="user-thumb">
<img width="40" height="40" alt="User" src="img/demo/av1.jpg">
</div>
<div class="article-post">
<span class="user-info"> By: michelle on 22 Jun 2012, 02:44 PM, IP: 172.10.56.3 </span>
<p>
<a href="#">Vivamus sed auctor nibh congue, ligula vitae tempus pharetra...</a>
</p>
<a href="#" class="btn btn-primary btn-mini">Edit</a> <a href="#" class="btn btn-success btn-mini">Publish</a> <a href="#" class="btn btn-danger btn-mini">Delete</a>
</div>
</li>
<li class="viewall">
<a title="View all posts" class="tip-top" href="#"> + View all + </a>
</li>
</ul>
</div>
</div>
</div>
<div class="span6">
<div class="widget-box">
<div class="widget-title"><span class="icon"><i class="icon-comment"></i></span><h5>Recent Comments</h5><span title="88 total comments" class="label label-info tip-left">88</span></div>
<div class="widget-content nopadding">
<ul class="recent-comments">
<li>
<div class="user-thumb">
<img width="40" height="40" alt="User" src="img/demo/av1.jpg">
</div>
<div class="comments">
<span class="user-info"> User: michelle on IP: 172.10.56.3 </span>
<p>
<a href="#">Vivamus sed auctor nibh congue, ligula vitae tempus pharetra...</a>
</p>
<a href="#" class="btn btn-primary btn-mini">Edit</a> <a href="#" class="btn btn-success btn-mini">Approve</a> <a href="#" class="btn btn-warning btn-mini">Mark as spam</a> <a href="#" class="btn btn-danger btn-mini">Delete</a>
</div>
</li>
<li>
<div class="user-thumb">
<img width="40" height="40" alt="User" src="img/demo/av3.jpg">
</div>
<div class="comments">
<span class="user-info"> User: john on IP: 192.168.24.3 </span>
<p>
<a href="#">Vivamus sed auctor nibh congue, ligula vitae tempus pharetra...</a>
</p>
<a href="#" class="btn btn-primary btn-mini">Edit</a> <a href="#" class="btn btn-success btn-mini">Approve</a> <a href="#" class="btn btn-warning btn-mini">Mark as spam</a> <a href="#" class="btn btn-danger btn-mini">Delete</a>
</div>
</li>
<li>
<div class="user-thumb">
<img width="40" height="40" alt="User" src="img/demo/av2.jpg">
</div>
<div class="comments">
<span class="user-info"> User: neytiri on IP: 186.56.45.7 </span>
<p>
<a href="#">Vivamus sed auctor nibh congue, ligula vitae tempus pharetra...</a>
</p>
<a href="#" class="btn btn-primary btn-mini">Edit</a> <a href="#" class="btn btn-success btn-mini">Approve</a> <a href="#" class="btn btn-warning btn-mini">Mark as spam</a> <a href="#" class="btn btn-danger btn-mini">Delete</a>
</div>
</li>
<li class="viewall">
<a title="View all comments" class="tip-top" href="#"> + View all + </a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="widget-box widget-calendar">
<div class="widget-title"><span class="icon"><i class="icon-calendar"></i></span><h5>Calendar</h5></div>
<div class="widget-content nopadding">
<div class="calendar"></div>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div id="footer" class="span12">
2012 - 2013 &copy; Unicorn Admin. Brought to you by <a href="https://wrapbootstrap.com/user/diablo9983">diablo9983</a>
</div>
</div>
</div>
</div>
<br/>
<div id="OSChina_News_41110" class="NewsContent">
<img id="NewsPic" src="http://www.oschina.net/img/logo/firefox.png">
<p>《华尔街日报》<a href="http://cn.wsj.com/gb/20130604/tec072852.asp" target="_blank"><span style="text-decoration: underline;">报导</span></a>,Mozilla 首席营运长沙利文(Jay Sullivan)说,由于出现了各种使人们可以与朋友分享浏览内容的简单新方法,网络浏览将变得社交性更强。他说,它将变得更加活跃、迅速、有趣。 Mozilla的Firefox浏览器推出了新的功能,比如能够与社交网站整合,用户能够在浏览器框内看到Facebook Inc.的更新和信息。此外,该公司正在测试与新浪微博的整合,以便向中国用户推出这一功能。Mozilla还在开发嵌入式通讯功能。比如,消费者可以在 他们的浏览器内打开一个聊天室屏幕,从网页上拖拉视频到屏幕上立即进行分享。Mozilla也在努力说服网站使用一个名为“Persona”的新身份识别 系统,该系统旨在消除密码。它使用户可以用现有的账户和密码登陆网站。</p>
</div>
</body>
<script src="http://wbpreview.com/previews/WB0F35928/js/excanvas.min.js"></script>
<script src="http://wbpreview.com/previews/WB0F35928/js/jquery.min.js"></script>
<script src="http://wbpreview.com/previews/WB0F35928/js/jquery.ui.custom.js"></script>
<script src="http://wbpreview.com/previews/WB0F35928/js/bootstrap.min.js"></script>
<script src="http://wbpreview.com/previews/WB0F35928/js/jquery.flot.min.js"></script>
<script src="http://wbpreview.com/previews/WB0F35928/js/jquery.flot.resize.min.js"></script>
<script src="http://wbpreview.com/previews/WB0F35928/js/jquery.peity.min.js"></script>
<script src="http://wbpreview.com/previews/WB0F35928/js/fullcalendar.min.js"></script>
<script src="http://wbpreview.com/previews/WB0F35928/js/unicorn.js"></script>
<script src="http://wbpreview.com/previews/WB0F35928/js/unicorn.dashboard.js"></script>

</html>

原文地址:https://www.cnblogs.com/bober/p/3117395.html