zoukankan      html  css  js  c++  java
  • Bootstrap 媒体对象 列表组



    @{
        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>
  • 相关阅读:
    docker私有仓库harbor的安装及使用
    docker 搭建 zipkin
    docker安装redis并以配置文件方式启动
    docker 安装 mysql5.7.25
    什么是反射?可以解决什么问题?
    什么是死锁?如何防止死锁?
    说说TCP和UDP的区别
    什么是XSS攻击?
    怎么更改Visual Studio项目名字
    windows上使用getopt和getopt_long
  • 原文地址:https://www.cnblogs.com/dxmfans/p/9434664.html
Copyright © 2011-2022 走看看