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>
  • 相关阅读:
    以太网数据帧最小64字节
    网络基础协议之ARP
    Windows FAT32转换NTFS
    Java面试红宝书(尼恩编著)
    死磕设计模式1:Builder (构建者模式)
    Zookeeper 分布式锁 (图解+秒懂+史上最全)
    TCP/IP协议 (图解+秒懂+史上最全)
    Java高并发核心编程(卷2):多线程、锁、JMM、JUC、高并发设计模式
    Java高并发核心编程(卷1):NIO、Netty、Redis、ZooKeeper
    ThreadLocal(史上最全)
  • 原文地址:https://www.cnblogs.com/dxmfans/p/9434664.html
Copyright © 2011-2022 走看看