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>
  • 相关阅读:
    百度地图之自动提示--autoComplete
    h5之scrollIntoView控制页面元素滚动
    angular之interceptors拦截器
    angular之$broadcast、$emit、$on传值
    前端基础入门(一)-HTML-HTML基础
    改进自定义博客
    自定义博客主题
    使用JavaScript策略模式校验表单
    【经典面试题】圣杯布局以及双飞翼布局原理
    [JavaScript设计模式]惰性单例模式
  • 原文地址:https://www.cnblogs.com/dxmfans/p/9434664.html
Copyright © 2011-2022 走看看