@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Bootstrap3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>  
    <script src="~/Bootstrap3.3.7/js/bootstrap.min.js"></script>
</head>
<body> 
    <div class="media">
        <div class="media-left">
            <a href="#">
                <img class="media-object" src="~/img/1.jpg" alt="..." width="100" height="100">
            </a>
        </div>
        <div class="media-body">
            <h4 class="media-heading">Media heading</h4>
            ...
        </div>
    </div>

    <ul class="list-group">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Morbi leo risus</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Vestibulum at eros</li>
    </ul>

    <ul class="list-group">
        <li class="list-group-item">
            <span class="badge">14</span>
            Cras justo odio
        </li>
        <li class="list-group-item">
            <span class="badge">2</span>
            Dapibus ac facilisis in
        </li>
        <li class="list-group-item">
            <span class="badge">1</span>
            Morbi leo risus
        </li>
    </ul>

    <div class="list-group">
        <a href="#" class="list-group-item active">
            Cras justo odio
        </a>
        <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
        <a href="#" class="list-group-item">Morbi leo risus</a>
        <a href="#" class="list-group-item">Porta ac consectetur ac</a>
        <a href="#" class="list-group-item">Vestibulum at eros</a>
    </div>

    <ul class="list-group">
        <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
        <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
        <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
        <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
    </ul>

    <div class="list-group">
        <a href="#" class="list-group-item active">
            <h4 class="list-group-item-heading">List group item heading</h4>
            <p class="list-group-item-text">Hello world</p>
        </a>
    </div>
</body>
</html>

Bootstrap 媒体对象 列表组的更多相关文章

  1. 详解Bootstrap媒体对象

    在web页面中,图片居左,内容居右排列,是非常常见的效果,它也就是媒体对象,它是一种抽象的样式,可以用来构建不同类型的组件,在bootstrap框架中其对应的版本文件如下: LESS: media.l ...

  2. Bootstrap媒体对象

    前面的话 在Web页面或者说移动页面制作中,常常看到图文混排效果,图片居左(或居右),内容居右(或居左)排列.常常把这样的效果称为媒体对象.可以说它是一种抽象的样式,可以用来构建不同类型的组件.本文将 ...

  3. 测开之路一百一十三：bootstrap媒体对象

    实现效果,左边是图片或者其他媒体,右边是对应的描述 引入bootstrap和jquery标签 class="media" 数量多一些看着就会很规整 <!DOCTYPE htm ...

  4. BootStrap学习(5)_多媒体对象&列表组

    一.多媒体对象 这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的代码来实现媒体对象与文字的混排. .media: ...

  5. 移动web——bootstrap媒体对象

    基本模板 1.这些组件都具有在文本内容的左或右侧对齐的图片(就像博客评论或 Twitter 消息等) <div class="media"> <div class ...

  6. Bootstrap <基础二十八>列表组

    列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...

  7. Bootstrap 进度条媒体对象和 Well 组件

    一．Well 组件 这个组件可以实现简单的嵌入效果. //嵌入效果 <div class="well"> Bootstrap </div> //有 lg 和 ...

  8. Bootstrap(10) 进度条媒体对象和 Well 组件

    一．Well 组件这个组件可以实现简单的嵌入效果. <!-- //嵌入效果 --> <div class="well">Bootstrap</div& ...

  9. 第二百四十一节，Bootstrap进度条媒体对象和 Well 组件

    第二百四十一节,Bootstrap进度条媒体对象和 Well 组件 学习要点: 1.Well 组件 2.进度条组件 3.媒体对象组件 本节课我们主要学习一下 Bootstrap 的三个组件功能:Wel ...

随机推荐

  1. [Java][Spring]Spring事务不起作用 问题汇总

    [Java][Spring]Spring事务不起作用 问题汇总 http://blog.csdn.net/szwangdf/article/details/41516239

  2. MQ选型对比RabbitMQ RocketMQ ActiveMQ

    原文:MQ选型对比RabbitMQ RocketMQ ActiveMQ 几种MQ产品说明:     ZeroMQ :  扩展性好,开发比较灵活,采用C语言实现,实际上他只是一个socket库的重新封装 ...

  3. php如何利用标准输入输出实现在一个字符串中计算某个字符出现的个数？

    php如何利用标准输入输出实现在一个字符串中计算某个字符出现的个数? 一.总结 php实现计算字符个数(php标准输入和输出:fgets(STDIN)  echo $output;) 1.php标准输 ...

  4. $.ajax 请求 拦截器 重定向 无效 解决办法

    在ajax 异步请求下 拦截器过滤器中使用 重定向 页面响应无效 我这里用的是springboot框架,用拦截器实现 对请求的拦截 ,session超时直接跳转到login.html页面. 后台代码: ...

  5. [Ramda] Change Object Properties with Ramda Lenses

    In this lesson we'll learn the basics of using lenses in Ramda and see how they enable you to focus ...

  6. 使用Boolean类型同步锁引起异常的分析

    原文地址 http://topic.csdn.net/u/20080710/19/f61cb4db-ddff-4457-a26a-4ea578b0cc6c.html?87447500 http://w ...

  7. C++程序员经常问的11个问题

    下面的这些要点是对所有的C++程序员都适用的.我之所以说它们是最重要的,是因为这些要点中提到的是你通常在C++书中或网站上无法找到的.如:指向成员的指针,这是许多资料中都不愿提到的地方,也是经常出错的 ...

  8. 【13.77%】【codeforces 734C】Anton and Making Potions

    time limit per test4 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...

  9. jws 问题总结

    问题1.wsimport不是内部或外部命令 今天执行wsimport时报了wsimport报了不是内部或外部命令的错误,第一反应是检查环境变量,没发现什么问题,执行java  -version也正常, ...

  10. Qtcreator中常用快捷键总结（有必要牢记，提高编程效率）

    F1        查看帮助F2        跳转到函数定义(和Ctrl+鼠标左键一样的效果)Shift+F2    声明和定义之间切换F4        头文件和源文件之间切换Ctrl+1     ...