@{
    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. Spring ContextLoaderListener与DispatcherServlet所加载的applicationContext的区别

    http://www.lai18.com/content/9755931.html Spring 容器(Spring 的上下文) https://my.oschina.net/jast90/blog/ ...

  2. &lt;LeetCode OJ&gt; 62. / 63. Unique Paths（I / II）

    62. Unique Paths My Submissions Question Total Accepted: 75227 Total Submissions: 214539 Difficulty: ...

  3. [CSS] Nest a grid within a grid

    A grid item can also be a grid container! Let’s see how to specify a grid within a grid.

  4. android jni与java之间数据传输时怎么转换

    1.c中的jstring数据类型就是java传入的String对象,经过jni函数的转化就能成为c的char*. Java 类型 本地c类型 说明 boolean jboolean 无符号 8 位 b ...

  5. php标准库中的优先队列SplPriorityQueue怎么使用？（继承）

    php标准库中的优先队列SplPriorityQueue怎么使用?(继承) 一.总结 1.new对象,然后通过insert方法和extract方法来使用,top方法也很常用. 2.类的话首先想到继承, ...

  6. js中的style与jQuery中的css

    使用jQuery选择器时,可以直接使用css函数(注意不能使用$("p")[1].css()) $("p").css("background-colo ...

  7. js如何遍历表单所有控件

    js如何遍历表单所有控件 一.总结 一句话总结: 1.获取form表单里面的的所有元素:通过formelement.elements,这里form元素通过name属性直接定位 var fele=for ...

  8. duplicate symbols for architecture

    duplicate symbols for architecture   XCODE编译的时候报错:duplicate symbols for architecture armv7   1.首先排查是 ...

  9. 自己动手写shell命令之ls

    linux下ls命令(支持-R參数)的c语言实现: #include <stdio.h> #include <sys/types.h> #include <dirent. ...

  10. 【t011】最小覆盖子串

    Time Limit: 1 second Memory Limit: 32 MB [问题描述] 给定一个含有N个元素的序列A,你的任务就是求出序列A的最小覆盖子串的长度. 本题中的一些定义: 串S,是 ...