zoukankan      html  css  js  c++  java
  • Bootstrap历练实例:嵌套的媒体对象

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Bootstrap历练实例:嵌套的媒体对象</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link href="bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" />
    </head>
    <body>
    <div style="padding:20px">
    <ul class="media-list">
    <li class="media">

    <a href="#" class="pull-left"><img class="media-object" src="Images/logo.png" alt="媒体对象" /></a>
    <div class="media-body">
    <h4 class="media-heading">媒体标题</h4>
    <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>

    <div class="media">
    <a href="#" class="pull-left"><img src="Images/logo.png" alt="媒体对象" /></a>
    <div class="media-body">
    <h4 class="media-heading">嵌套的媒体标题</h4>
    <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>

    <div class="media">
    <a href="#" class="pull-left"><img src="Images/logo.png" alt="媒体对象" /></a>
    <div class="media-body">
    <h4 class="media-heading">嵌套的媒体标题</h4>
    <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
    </div>
    </div>
    </div>
    </div>

    <div class="media">
    <a href="#" class="pull-left"><img src="Images/logo.png" alt="媒体对象" /></a>
    <div class="media-body">
    <h4 class="media-heading">媒体标题</h4>
    <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
    </div>
    </div>

    </div>

    </li>
    <li class="media">

    <a href="#" class="pull-left"><img src="Images/logo.png" alt="媒体对象" /></a>
    <div class="media-body">
    <h4 class="media-heading">媒体标题</h4>
    <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
    </div>

    </liclass="media">
    </ul>
    </div>
    <script src="jQuery/jquery-2.1.4.js"></script>
    <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    </body>
    </html>

  • 相关阅读:
    Enterprise Library Step By Step系列(一):配置应用程序块——入门篇
    Enterprise Library Step By Step系列(八):日志和监测应用程序块——进阶篇
    在ASP.NET页面中冻结DataGrid的列或头部
    数据库设计技巧系列(五)——各种小技巧
    用任务计划实现数据库的异地备份
    如何更好的与人沟通?[图]
    在Asp.net中如何用SQLDMO来获取SQL Server中的对象信息
    SQL Server 2012 Express LocalDB
    Clay: 创建和使用深层次对象图
    VS 2012 的 单元测试 和 测试资源管理器
  • 原文地址:https://www.cnblogs.com/melao2006/p/5001531.html
Copyright © 2011-2022 走看看