zoukankan      html  css  js  c++  java
  • Bootstrap--响应式表格布局

    <div class="row">
        <div class="col-sm-2 col-md-2" style="min-height:400px;border:1px #eee4e4 solid; border-radius:5px;padding-top:20px;">
            <ul class="nav nav-pills nav-stacked">
                <li class="active">
                    <a href="#" class="text-muted">6346</a>
                </li>
                <li>
                    <a href="#" class="text-muted">6346</a>
                </li>
                <li>
                    <a href="#" class="text-muted">6346</a>
                </li>
            </ul>
        </div>
        <div class="col-sm-10 col-md-10" style="min-height:400px;border:1px #eee4e4 solid; border-radius:5px;padding-top:20px;">
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
                    <table class="table">
                        <caption class="pull-left">热歌</caption>
                        <tbody>
                            <tr>
                                <td><span>1</span></td>
                                <td><a href="#">千里之外</a></td>
                                <td><a href="#">周杰伦</a></td>
                                <td><a href="#">播放</a></td>
                                <td><a href="#">收藏</a></td>
                            </tr>
                            <tr>
                                <td><span>1</span></td>
                                <td><a href="#">千里之外</a></td>
                                <td><a href="#">周杰伦</a></td>
                                <td><a href="#">播放</a></td>
                                <td><a href="#">收藏</a></td>
                            </tr>
                            <tr>
                                <td><span>1</span></td>
                                <td><a href="#">千里之外</a></td>
                                <td><a href="#">周杰伦</a></td>
                                <td><a href="#">播放</a></td>
                                <td><a href="#">收藏</a></td>
                            </tr>
                            <tr>
                                <td><span>1</span></td>
                                <td><a href="#">千里之外</a></td>
                                <td><a href="#">周杰伦</a></td>
                                <td><a href="#">播放</a></td>
                                <td><a href="#">收藏</a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
                    <div class="table-responsive">
                        <table class="table">
                            <caption class="pull-left">热歌</caption>
                            <tbody>
                                <tr>
                                    <td><span>1</span></td>
                                    <td><a href="#">千里之外</a></td>
                                    <td><a href="#">周杰伦</a></td>
                                    <td><a href="#">播放</a></td>
                                    <td><a href="#">收藏</a></td>
                                </tr>
                                <tr>
                                    <td><span>1</span></td>
                                    <td><a href="#">千里之外</a></td>
                                    <td><a href="#">周杰伦</a></td>
                                    <td><a href="#">播放</a></td>
                                    <td><a href="#">收藏</a></td>
                                </tr>
                                <tr>
                                    <td><span>1</span></td>
                                    <td><a href="#">千里之外</a></td>
                                    <td><a href="#">周杰伦</a></td>
                                    <td><a href="#">播放</a></td>
                                    <td><a href="#">收藏</a></td>
                                </tr>
                                <tr>
                                    <td><span>1</span></td>
                                    <td><a href="#">千里之外</a></td>
                                    <td><a href="#">周杰伦</a></td>
                                    <td><a href="#">播放</a></td>
                                    <td><a href="#">收藏</a></td>
                                </tr>
                                <tr>
                                    <td><span>1</span></td>
                                    <td><a href="#">千里之外</a></td>
                                    <td><a href="#">周杰伦</a></td>
                                    <td><a href="#">播放</a></td>
                                    <td><a href="#">收藏</a></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
                    <table class="table">
                        <caption class="pull-left">热歌</caption>
                        <tbody>
                            <tr>
                                <td><span>1</span></td>
                                <td><a href="#">千里之外</a></td>
                                <td><a href="#">周杰伦</a></td>
                                <td><a href="#">播放</a></td>
                                <td><a href="#">收藏</a></td>
                            </tr>
                            <tr>
                                <td><span>1</span></td>
                                <td><a href="#">千里之外</a></td>
                                <td><a href="#">周杰伦</a></td>
                                <td><a href="#">播放</a></td>
                                <td><a href="#">收藏</a></td>
                            </tr>
                            <tr>
                                <td><span>1</span></td>
                                <td><a href="#">千里之外</a></td>
                                <td><a href="#">周杰伦</a></td>
                                <td><a href="#">播放</a></td>
                                <td><a href="#">收藏</a></td>
                            </tr>
                            <tr>
                                <td><span>1</span></td>
                                <td><a href="#">千里之外</a></td>
                                <td><a href="#">周杰伦</a></td>
                                <td><a href="#">播放</a></td>
                                <td><a href="#">收藏</a></td>
                            </tr>
                            <tr>
                                <td><span>1</span></td>
                                <td><a href="#">千里之外</a></td>
                                <td><a href="#">周杰伦</a></td>
                                <td><a href="#">播放</a></td>
                                <td><a href="#">收藏</a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    

      

  • 相关阅读:
    IIS下 多站点 利用虚拟目录 访问共用(图片)文件夹
    [转]Prevent opening multiple windows in ASP.NET
    [转]使用 WebForms ReportViewer 控件
    ALTER TABLE ADD 增加多个字段 外键约束
    获取数据库内某时间点后修改的存储过程
    SQL Server 示例数据库 AdventureWorks 数据字典
    [转]MVC 3.0 在各个版本IIS中的部署
    [转]使用jQuery.ajax傳送物件陣列給ASP.NET MVC
    [转]报表统计(sql面试题)
    扑克游戏 – 打联手
  • 原文地址:https://www.cnblogs.com/NuoYer/p/5379145.html
Copyright © 2011-2022 走看看