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>
posted @ 2018-05-30 10:17  dxm809  阅读(112)  评论(0编辑  收藏  举报