• 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>
  • 相关阅读:
    R语言-单一变量分析
    计算机网络和Internet之核心网络
    android Gui系统之WMS(1)----window flags & view flags
    Computer Network and Internet(1)
    android Gui系统之SurfaceFlinger(5)---Vsync(2)
    android Gui系统之SurfaceFlinger(4)---Vsync(1)
    android Gui系统之SurfaceFlinger(3)---SurfaceFlinger
    android Gui系统之SurfaceFlinger(2)---BufferQueue
    android Gui系统之SurfaceFlinger(1)---SurfaceFlinger概论
    敏捷软件开发(4)--- TEMPLATE METHOD & STRATEGY 模式
  • 原文地址:https://www.cnblogs.com/dxmfans/p/9434664.html
Copyright © 2020-2023  润新知