zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    和阿木聊Node.js
    C#开发攀爬集锦
    MyBatis实战
    对于技术的思考
    抛物线习题
    变量集中策略
    变换作图中的常用模板函数
    网上看到一题目的解法的启示
    函数习题
    新定义习题
  • 原文地址:https://www.cnblogs.com/bober/p/3117395.html
Copyright © 2011-2022 走看看