@{
    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. 【读书笔记与思考】Andrew 机器学习课程笔记

    Andrew 机器学习课程笔记 完成 Andrew 的课程结束至今已有一段时间,课程介绍深入浅出,很好的解释了模型的基本原理以及应用.在我看来这是个很好的入门视频,他老人家现在又出了一门 deep l ...

  2. jquery formcheck.js

    demo下载链接http://pan.baidu.com/s/1hrDCC3y     /* Jquery 表单验证插件 janchie 2010.1 janchie@163.com 1.01版 */ ...

  3. c#List泛型数据扩展，把List&lt;&gt;型数据格式化成List&lt;SelectListItem&gt;，用来作dropdownlist的数据

    代码例如以下 public static List<SelectListItem> CreateSelect<T>(this IList<T> t, string ...

  4. [ExtJS5学习笔记]第九节 Extjs5的mvc与mvvm框架结构简单介绍

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/38537431 本文作者:sushengmiyan ------------------ ...

  5. [TypeScript] Using ES6 and ESNext with TypeScript

    TypeScript is very particular about what is and isn't allowed in a TS file to protect you from commo ...

  6. ssh和SSH服务(包含隧道内容)

    ssh和SSH服务(包含隧道内容) 72.16.10.6:/etc/fstab-->/172.16.10.3:/tmp/a.txt. [root@xuexi ~]# scp 172.16.10. ...

  7. RGB 的调色

    通过 RGB 三通道所占比的组合(通过三元素长的元组存储),可呈现丰富的色彩样式: [0, 0, 0] ⇒ 黑色,[1, 1, 1] ⇒ 白色 [1, 0, 0] ⇒ 红色,[0, 1, 0] ⇒ 绿 ...

  8. 【烽火传递】dp + 单调队列优化

    题目描述 烽火台又称烽燧,是重要的防御设施,一般建在险要处或交通要道上.一旦有敌情发生,白天燃烧柴草,通过浓烟表达信息:夜晚燃烧干柴,以火光传递军情.在某两座城市之间有 n 个烽火台,每个烽火台发出信 ...

  9. 【p094】道路游戏

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 小新正在玩一个简单的电脑游戏. 游戏中有一条环形马路,马路上有n个机器人工厂,两个相邻机器人工厂之间由 ...

  10. 经典卷积神经网络的学习（三）—— Inception Net

    Google Inception Net 首次出现在 ILSVRC 2014 的比赛中(和 VGGNet 同年),就以较大优势拔得头筹.那届比赛中的 Inception Net 一般被称为 Incep ...