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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM